fix(antd): fix validated form-item box-shadow styles (#1265)

alibaba · Apr 21, 2021 · 589b9b8 · 589b9b8
1 parent 1764f6e
commit 589b9b8
Showing 1 changed file with 63 additions and 7 deletions.
diff --git a/packages/antd/src/form-item/style.less b/packages/antd/src/form-item/style.less
@@ -689,14 +689,42 @@
     .@{ant-prefix}-input:hover {
         border-color: @error-color  !important;
     }
+
+    .@{ant-prefix}-select:not(.@{ant-prefix}-select-disabled):not(.@{ant-prefix}-select-customize-input) {
+      .@{ant-prefix}-select-selector {
+        background-color: @form-error-input-bg;
+        border-color: @error-color !important;
+      }
+      &.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
+      &.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
+        .active(@error-color);
+      }
+    }
+
+    .@{ant-prefix}-input-number,
+    .@{ant-prefix}-picker {
+      background-color: @form-error-input-bg;
+      border-color: @error-color;
+      &-focused,
+      &:focus {
+        .active(@error-color);
+      }
+      &:not([disabled]):hover {
+        background-color: @form-error-input-bg;
+        border-color: @error-color;
+      }
+    }
+
+    .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
+      background-color: @form-error-input-bg;
+      .active(@error-color);
+    }
 
     .@{ant-prefix}-input-affix-wrapper-focused,
     .@{ant-prefix}-input-affix-wrapper:focus,
     .@{ant-prefix}-input-focused,
     .@{ant-prefix}-input:focus {
-        border-color: @error-color  !important;
-        border-right-width: 1px !important;
-        outline: 0;
+      .active(@error-color);
     }
 
 }
@@ -737,13 +765,41 @@
         border-color: @warning-color  !important;
     }
 
+    .@{ant-prefix}-select:not(.@{ant-prefix}-select-disabled):not(.@{ant-prefix}-select-customize-input) {
+      .@{ant-prefix}-select-selector {
+        background-color: @form-warning-input-bg;
+        border-color: @warning-color !important;
+      }
+      &.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
+      &.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
+        .active(@warning-color);
+      }
+    }
+
+    .@{ant-prefix}-input-number,
+    .@{ant-prefix}-picker {
+      background-color: @form-warning-input-bg;
+      border-color: @warning-color;
+      &-focused,
+      &:focus {
+        .active(@warning-color);
+      }
+      &:not([disabled]):hover {
+        background-color: @form-warning-input-bg;
+        border-color: @warning-color;
+      }
+    }
+
+    .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
+      background-color: @form-warning-input-bg;
+      .active(@warning-color);
+    }
+
     .@{ant-prefix}-input-affix-wrapper-focused,
     .@{ant-prefix}-input-affix-wrapper:focus,
     .@{ant-prefix}-input-focused,
     .@{ant-prefix}-input:focus {
-        border-color: @warning-color  !important;
-        border-right-width: 1px !important;
-        outline: 0;
+      .active(@warning-color);
     }
 }
 
@@ -779,4 +835,4 @@
         border-right-width: 1px !important;
         outline: 0;
     }
-}
+}