_inputs.scss in arctic_admin-1.2.9

- old
+ new

@@ -1,13 +1,12 @@
-input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], textarea {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  -webkit-transition: -webkit-box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;
-  -o-transition: box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;
-  transition: box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;
+input[type="text"], input[type="email"], input[type="password"],
+input[type="tel"], input[type="date"], input[type="datetime-local"],
+input[type="month"], input[type="range"], input[type="search"],
+input[type="time"], input[type="url"], input[type="week"],
+input[type="number"], textarea {
+  @include appearance();
+  @include box-shadow(none);
 
   display: block;
   width: 100%;
   height: 36px;
   padding: 6px 12px;
@@ -16,49 +15,48 @@
   color: $text-color;
   background-color: #fff;
   background-image: none;
   border: 1px solid #e4eaec;
   outline: 0;
-  border-radius: 3px;
-  -webkit-transition: border-color ease-in-out .15s;
-  -o-transition: border-color ease-in-out .15s;
-  transition: border-color ease-in-out .15s;
+  border-radius: $border-radius;
+  @include transition(border-color ease-in-out .15s);
 
   &:focus {
     border-color: $primary-color;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    -webkit-transition: border .25s linear,color .25s linear,background-color .25s linear;
-    -o-transition: border .25s linear,color .25s linear,background-color .25s linear;
-    transition: border .25s linear,color .25s linear,background-color .25s linear;
+    @include appearance();
+    @include transition(border .25s linear,color .25s linear,background-color .25s linear);
   }
 
+  &:disabled {
+    opacity: 0.6;
+  }
+
   &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus {
     -webkit-box-shadow: 0 0 0px 1000px white inset;
     -webkit-text-fill-color: $text-color;
   }
 }
 
 input[type="submit"] {
-  -webkit-appearance: none;
+  @include appearance();
   @include primary-button($primary-color, white);
   width: 100%;
   padding: 0 12px;
   font-size: 15px;
   font-weight: 500;
-  box-shadow: 0 1px 0 rgba(0,0,0,.05);
+  @include box-shadow(0 1px 0 rgba(0,0,0,.05));
   border: none;
   cursor: pointer;
 }
 
 input[type="checkbox"] {
   height: 15px;
   width: 15px;
   -webkit-appearance: none!important;
   background-color: #fff;
   border: 1px solid #e6e6e6;
-  border-radius: 3px;
+  border-radius: $border-radius;
   box-sizing: border-box;
   @include outline();
   @include transition-button();
   cursor: pointer;
 
@@ -67,11 +65,11 @@
     background-color: $primary-color;
   }
 }
 
 input[type="radio"] {
-  -webkit-appearance: none;
+  @include appearance();
   border: 2px solid $primary-color;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   margin: 1px;
@@ -87,21 +85,16 @@
 select {
   background-color: #fff;
   background-image: none;
   border: 1px solid #e4eaec;
   outline: 0;
-  border-radius: 3px;
-  -webkit-transition: border-color ease-in-out .15s;
-  -o-transition: border-color ease-in-out .15s;
-  transition: border-color ease-in-out .15s;
+  border-radius: $border-radius;
+  @include transition(border-color ease-in-out .15s);
 
   &:focus {
     border-color: $primary-color;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    -webkit-transition: border .25s linear,color .25s linear,background-color .25s linear;
-    -o-transition: border .25s linear,color .25s linear,background-color .25s linear;
-    transition: border .25s linear,color .25s linear,background-color .25s linear;
+    @include box-shadow(none);
+    @include transition(border .25s linear,color .25s linear,background-color .25s linear);
   }
 
   &:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px white inset;
   }
\ No newline at end of file