Fix multiple select height bug #508

1 files changed, 15 insertions, 12 deletions

diff --git a/src/_forms.scss b/src/_forms.scss
index bb26b30..b7ef0fa 100644
--- a/src/_forms.scss
+++ b/src/_forms.scss
@@ -119,18 +119,6 @@ textarea.form-input {
   vertical-align: middle;
   width: 100%;
   background: $bg-color-light; 
-  &[size],
-  &[multiple] {
-    height: auto;
-
-    option {
-      padding: $unit-h $unit-1;
-    }
-  }
-  &:not([multiple]):not([size]) {
-    background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
-    padding-right: $control-icon-size + $control-padding-x;
-  }
   &:focus {
     @include control-shadow();
     border-color: $primary-color;
@@ -151,6 +139,21 @@ textarea.form-input {
     height: $control-size-lg;
     padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
   }
+
+  // Multiple select
+  &[size],
+  &[multiple] {
+    height: auto;
+    padding: $control-padding-y $control-padding-x;
+
+    option {
+      padding: $unit-h $unit-1;
+    }
+  }
+  &:not([multiple]):not([size]) {
+    background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
+    padding-right: $control-icon-size + $control-padding-x;
+  }
 }
 
 // Form Icons