Add less variables about outline

components/form/style/index.less

@@ -340,7 +340,7 @@ form {
   .ant-select {
     &-selection {
       border-color: @warning-color;
-      box-shadow: 0 0 0 2px fade(@warning-color, 20%);
+      .active(@warning-color);
     }
     &-arrow {
       color: @warning-color;
@@ -360,7 +360,7 @@ form {
   //input-number
   .ant-input-number {
     border-color: @warning-color;
-    box-shadow: 0 0 0 2px fade(@warning-color, 20%);
+    .active(@warning-color);
     &:not([disabled]):hover {
       border-color: @warning-color;
     }
@@ -379,7 +379,7 @@ form {
   .ant-select {
     &-selection {
       border-color: @error-color;
-      box-shadow: 0 0 0 2px fade(@error-color, 20%);
+      .active(@error-color);
     }
 
     &-arrow {
@@ -400,7 +400,7 @@ form {
   //input-number
   .ant-input-number {
     border-color: @error-color;
-    box-shadow: 0 0 0 2px fade(@error-color, 20%);
+    .active(@error-color);
     &:not([disabled]):hover {
       border-color: @error-color;
     }
@@ -409,11 +409,11 @@ form {
   .ant-mention-wrapper.active {
     .ant-mention-editor {
       border-color: @error-color;
-      box-shadow: 0 0 0 2px fade(@error-color, 20%);
+      .active(@error-color);
       &:not([disabled]):hover,
       &:not([disabled]):focus {
         border-color: @error-color;
-        box-shadow: 0 0 0 2px fade(@error-color, 20%);
+        .active(@error-color);
       }
     }
   }

components/form/style/mixin.less

@@ -1,3 +1,5 @@
+@import "../../input/style/mixin";
+
 .form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
   .ant-form-explain,
   .ant-form-split {
@@ -6,7 +8,7 @@
   // 输入框的不同校验状态
   .ant-input {
     border-color: @border-color;
-    box-shadow: 0 0 0 2px fade(@border-color, 20%);
+    .active(@border-color);
 
     &:not([disabled]):hover {
       border-color: @border-color;
@@ -14,7 +16,7 @@
   }
 
   .ant-calendar-picker-open .ant-calendar-picker-input {
-    box-shadow: 0 0 0 2px fade(@border-color, 20%);
+    .active(@border-color);
   }
 
   .ant-input-group-addon {

components/input/style/mixin.less

@@ -15,10 +15,10 @@
 
 // input status
 // == when focus or actived
-.active(@color: @input-hover-border-color) {
+.active(@color: @outline-color) {
   border-color: tint(@color, 20%);
   outline: 0;
-  box-shadow: 0 0 0 2px fade(@color, 20%);
+  box-shadow: 0 0 @outline-blur-size @outline-width fade(@color, 20%);
 }
 
 // == when hoverd

components/style/themes/default.less

@@ -49,6 +49,11 @@
 @border-color-base      : #d9d9d9;        // base border outline a component
 @border-color-split     : #e9e9e9;        // split border inside a component
 
+// Outline
+@outline-blur-size      : 0;
+@outline-width          : 2px;
+@outline-color          : @primary-color;
+
 // Background color
 @background-color-base  : #f7f7f7;        // basic gray background
 
@@ -157,7 +162,6 @@
 @input-bg                    : #fff;
 
 @input-hover-border-color    : @primary-color;
-@input-focus-border-color    : @primary-color;
 @input-disabled-bg           : @background-color-base;
 
 @form-item-margin-bottom     : 24px;