_forms.scss in spectre_scss-0.5.4.0

- old
+ new

@@ -116,23 +116,11 @@
   line-height: $line-height;
   outline: none;
   padding: $control-padding-y $control-padding-x;
   vertical-align: middle;
   width: 100%;
-
-  &[size],
-  &[multiple] {
-    height: auto;
-    
-    option {
-      padding: $unit-h $unit-1;
-    }
-  }
-  &:not([multiple]):not([size]) {
-    background: #fff 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;
-  }
+  background: $bg-color-light; 
   &:focus {
     @include control-shadow();
     border-color: $primary-color;
   }
   &::-ms-expand {
@@ -149,10 +137,25 @@
   &.select-lg {
     font-size: $font-size-lg;
     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
 .has-icon-left,
 .has-icon-right {
@@ -264,18 +267,18 @@
         background-clip: padding-box;
         border: $border-width-lg solid $light-color;
         border-left-width: 0;
         border-top-width: 0;
         content: "";
-        height: 12px;
+        height: 9px;
         left: 50%;
-        margin-left: -4px;
-        margin-top: -8px;
+        margin-left: -3px;
+        margin-top: -6px;
         position: absolute;
         top: 50%;
         transform: rotate(45deg);
-        width: 8px;
+        width: 6px;
       }
     }
     &:indeterminate + .form-icon {
       background: $primary-color;
       border-color: $primary-color;
@@ -302,27 +305,27 @@
     &:checked + .form-icon {
       &::before {
         background: $bg-color-light;
         border-radius: 50%;
         content: "";
-        height: 4px;
+        height: 6px;
         left: 50%;
         position: absolute;
         top: 50%;
         transform: translate(-50%, -50%);
-        width: 4px;
+        width: 6px;
       }
     }
   }
 }
 
 // Form element: Switch
 .form-switch {
   padding-left: ($unit-8 + $control-padding-x);
 
   .form-icon {
-    background: $gray-color-light;
+    background: $gray-color;
     background-clip: padding-box;
     border-radius: $unit-2 + $border-width;
     height: $unit-4 + $border-width * 2;
     left: 0;
     top: ($control-size-sm - $unit-4) / 2 - $border-width;
@@ -445,11 +448,11 @@
   .has-error &,
   &.is-error {
     .form-icon {
       border-color: $error-color;
     }
-    
+
     input {
       &:checked + .form-icon {
         background: $error-color;
         border-color: $error-color;
       }
@@ -540,6 +543,6 @@
 }
 
 // Form inline
 .form-inline {
   display: inline-block;
-}
\ No newline at end of file
+}