changed breakpoints up

unepwcmc · Jul 22, 2020 · 8446473 · 8446473
1 parent ffbfd57
commit 8446473
Showing 1 changed file with 18 additions and 31 deletions.
diff --git a/app/assets/stylesheets/components/select/_select-equity.scss b/app/assets/stylesheets/components/select/_select-equity.scss
@@ -1,13 +1,12 @@
 &--equity {
-    @include breakpoint-down($small) {
-        max-width: rem-calc(685);
-    }
-    @include breakpoint-down($large) {
-        display: block;
-    }
-    @include breakpoint($large) {
+    @include breakpoint($medium) {
         display: flex;
+        max-width: none;
     }
+
+    max-width: rem-calc(685);
+    margin: 0 auto;
+    display: block;
 
     &__button {
         @include flex-vs-start;
@@ -16,9 +15,6 @@
 
     &__content {
         @include breakpoint-down($small) {
-            height: rem-calc(271);
-            padding: rem-calc(20 0);
-
             img {
                 object-fit: contain;
             }
@@ -31,7 +27,7 @@
                 object-fit: cover; 
             }
         }
-        @include breakpoint($large) {
+        @include breakpoint($medium) {
             width: 50%;
             height: auto;
             padding: rem-calc(60 0);
@@ -40,6 +36,8 @@
         @include flex;
         border: 1px solid $grey-dark;
 
+        height: rem-calc(271);
+        padding: rem-calc(20 0);
 
         img {
             margin: 0 auto;                 
@@ -51,30 +49,26 @@
     }
 
     &__header {
-        @include breakpoint-down($small) {
-            margin-bottom: 0;
-        }
         @include breakpoint($small) {
             margin-bottom: rem-calc(8);
         }
-        @include breakpoint($large) {
+        @include breakpoint($medium) {
             margin-bottom: rem-calc(14);
         }
 
         margin-top: 0;
+        margin-bottom: 0;
     }
 
     &__panel {
-        @include breakpoint-down($small) {
-            padding: rem-calc(32 13 29 18);
-        }
         @include breakpoint($small) {
             padding: rem-calc(50 44 62 49);
         }
-        @include breakpoint($large) {
+        @include breakpoint($medium) {
             padding: rem-calc(41 40 29 57);
             width: 50%;
         }
+        padding: rem-calc(32 13 29 18);
 
         @include flex;
         @include flex-column;
@@ -88,25 +82,19 @@
 // Custom select for this component
 &--dropdown {
     &__custom-select {
-        @include breakpoint-down($small) {
-            margin: rem-calc(0 0 27);
-        }
         @include breakpoint($small) {
             margin: rem-calc(30 0 36);
         }
-        @include breakpoint($large) {
+        @include breakpoint($medium) {
             margin: rem-calc(14 0 19);
         }
-
+        margin: rem-calc(0 0 27);
         position: relative;
         user-select: none;
         width: 100%;
     }
 
     &__selected {
-        @include breakpoint-down($small) {
-            padding: rem-calc(11 20);
-        }
         @include breakpoint($small) {
             padding: rem-calc(20 24);
         }
@@ -120,6 +108,7 @@
         border: 1px solid $grey-black;
         cursor: pointer;
         line-height: 1.9;
+        padding: rem-calc(11 20);
         position: relative;
     }
 
@@ -142,17 +131,15 @@
     }
 
     &__option {
-        @include breakpoint-down($small) {
-            padding: rem-calc(2 20);
-        }
         @include breakpoint($small) {
             padding: rem-calc(5 24);
         }
-
+        
         @include text-body;
 
         line-height: 1.9;
         display: block;
+        padding: rem-calc(2 20);
         position: relative;
 
         &:hover {