_forms.scss in spectre_scss-0.5.6.0

- old
+ new

@@ -32,11 +32,10 @@
   }
 }
 
 // Form element: Input
 .form-input {
-  @include control-transition();
   appearance: none;
   background: $bg-color-light;
   background-image: none;
   border: $border-width solid $border-color-dark;
   border-radius: $border-radius;
@@ -47,10 +46,11 @@
   line-height: $line-height;
   max-width: 100%;
   outline: none;
   padding: $control-padding-y $control-padding-x;
   position: relative;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
   width: 100%;
   &:focus {
     @include control-shadow();
     border-color: $primary-color;
   }
@@ -219,15 +219,15 @@
       border-color: $primary-color;
     }
   }
 
   .form-icon {
-    @include control-transition();
     border: $border-width solid $border-color-dark;
     cursor: pointer;
     display: inline-block;
     position: absolute;
+    transition: background .2s, border .2s, box-shadow .2s, color .2s;
   }
 
   // Input checkbox, radio and switch sizes
   &.input-sm {
     font-size: $font-size-sm;
@@ -329,19 +329,19 @@
     height: $unit-4 + $border-width * 2;
     left: 0;
     top: ($control-size-sm - $unit-4) / 2 - $border-width;
     width: $unit-8;
     &::before {
-      @include control-transition();
       background: $bg-color-light;
       border-radius: 50%;
       content: "";
       display: block;
       height: $unit-4;
       left: 0;
       position: absolute;
       top: 0;
+      transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
       width: $unit-4;
     }
   }
 
   input {
@@ -484,10 +484,10 @@
   &:not(:placeholder-shown) {
     &:invalid {
       border-color: $error-color;
       &:focus {
         @include control-shadow($error-color);
-        background: lighten($error-color, 10%);
+        background: lighten($error-color, 53%);
       }
 
       & + .form-input-hint {
         color: $error-color;
       }