add input status mixins

style/mixins/input.less

@@ -11,6 +11,20 @@
   font-size: @input-font-size-sm;
 }
 
+// input status
+// == when focus or actived
+.active(@color: @input-hover-border-color) {
+  border-color: @color;
+  outline: 0;
+  box-shadow: 0 0 3px tint(@color, 20%);
+}
+
+// == when hoverd
+.hover(@color: @input-hover-border-color ) {
+  border-color: @color;
+}
+
+
 // Basic style for input
 .input() {
   position: relative;
@@ -30,13 +44,11 @@
   .transition(~"border .3s @{ease-in-out}, background .3s @{ease-in-out}, box-shadow .3s @{ease-in-out}");
 
   &:hover {
-    border-color: @input-hover-border-color;
+    .hover();
   }
 
   &:focus {
-    border-color: @input-focus-border-color;
-    outline: 0;
-    box-shadow: 0 0 3px tint(@input-focus-border-color, 20%);
+    .active();
   }
 
   &[disabled],
@@ -44,7 +56,7 @@
     background-color: @input-disabled-bg;
     opacity: 1;
     &:hover {
-      border-color: @input-border-color;
+      .hover(@input-border-color);
     }
   }