diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss index d6a8090333..4afb254dd2 100644 --- a/app/assets/stylesheets/darkswarm/shop.css.scss +++ b/app/assets/stylesheets/darkswarm/shop.css.scss @@ -74,20 +74,7 @@ $sidebar-footer-height: 5em; padding: 1em; button { - height: 3em; - background-color: $grey-800; - color: $white; - border: 1px solid $grey-600; - border-radius: $radius-medium; - width: 47%; - margin: 0; - padding: 0; - - &.done { - background-color: $orange-500; - border: none; - margin-left: 3%; - } + width: 48%; } } diff --git a/app/assets/stylesheets/darkswarm/ui.css.scss b/app/assets/stylesheets/darkswarm/ui.css.scss index 35400362bb..e30f238aa5 100644 --- a/app/assets/stylesheets/darkswarm/ui.css.scss +++ b/app/assets/stylesheets/darkswarm/ui.css.scss @@ -2,6 +2,7 @@ @import "branding"; @import "mixins"; @import "typography"; +@import "variables"; // Button class extensions @@ -123,6 +124,25 @@ button.success, .button.success { } } +button.large { + height: 3em; + font-size: 1em; + color: $white; + border-radius: $radius-medium; + margin: 0; + padding: 0; + + &.dark { + background-color: $grey-800; + border: 1px solid $grey-600; + } + + &.bright { + background-color: $orange-500; + border: none; + } +} + // Responsive @media screen and (min-width: 768px) { [role="main"] { diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml index a91ea0cb7a..9e373ec50a 100644 --- a/app/views/shop/products/_form.html.haml +++ b/app/views/shop/products/_form.html.haml @@ -52,7 +52,7 @@ = render partial: "shop/products/filters" .sidebar-footer - %button{type: 'button', ng: {click: 'clearFilters()'}} + %button.large.dark.left{type: 'button', ng: {click: 'clearFilters()'}} = t(:products_filter_clear) - %button.done{type: 'button', ng: {click: 'toggleFilterSidebar()'}} + %button.large.bright.right{type: 'button', ng: {click: 'toggleFilterSidebar()'}} = t(:products_filter_done)