diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss index 95bd6b1059..a360c8f606 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -63,6 +63,8 @@ ordercycle { select { background-image: url('/assets/white-caret.svg'); + background-size: 30px auto; + background-position-x: 102%; } p { @@ -71,24 +73,27 @@ ordercycle { select, p { - width: inherit; display: inline-block; color: $white; background-color: transparent; border: 0; + border-radius: 0 $radius-small $radius-small 0; margin-bottom: 0; + padding: 0.5em 1.25em 0.5em 0.75em; font-size: 1em; line-height: 1.3em; - padding: 0.5em 1.25em 0.5em 0.75em; height: 2.35em; - background-size: 30px auto; - border-radius: 0 $radius-small $radius-small 0; min-width: 13em; + width: 200px; @include breakpoint(mobile) { width: 100%; min-width: 0; } + + @media all and (min-width: 640px) and (max-width: 1024px), (min-width: 1200px) { + width: 250px; + } } option { @@ -107,6 +112,7 @@ ordercycle { @include breakpoint(mobile) { display: flex; + margin-right: 0; } } @@ -162,7 +168,7 @@ shop ordercycle { @include breakpoint(tablet) { float: none; - padding: 0 0 10px; + padding: 0; } } diff --git a/app/assets/stylesheets/darkswarm/distributor_header.css.scss b/app/assets/stylesheets/darkswarm/distributor_header.css.scss index be64ef3914..f7591cd986 100644 --- a/app/assets/stylesheets/darkswarm/distributor_header.css.scss +++ b/app/assets/stylesheets/darkswarm/distributor_header.css.scss @@ -20,10 +20,6 @@ section { padding: 30px 0 0; position: relative; - select { - width: 200px; - } - img { display: block; height: 100px; diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss index 6c477acb48..0c46523184 100644 --- a/app/assets/stylesheets/darkswarm/shop.css.scss +++ b/app/assets/stylesheets/darkswarm/shop.css.scss @@ -234,6 +234,7 @@ $sidebar-footer-height: 5em; .warning-sign { margin: 0 10px 0 5px; display: inline-block; + line-height: 1.9rem; strong { color: $grey-650;