diff --git a/components/form/style/mixin.less b/components/form/style/mixin.less index 549e7bd10..20f3799c2 100644 --- a/components/form/style/mixin.less +++ b/components/form/style/mixin.less @@ -1,12 +1,18 @@ @import '../../input/style/mixin'; -.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) { +.form-control-validation( + @text-color: @input-color; + @border-color: @input-border-color; + @background-color: @input-bg; + @hoverBorderColor: @primary-color-hover; + @outlineColor: @primary-color-outline; +) { .@{ant-prefix}-form-item-split { color: @text-color; } // 输入框的不同校验状态 - .@{ant-prefix}-input, - .@{ant-prefix}-input-affix-wrapper { + :not(.@{ant-prefix}-input-disabled):not(.@{ant-prefix}-input-borderless).@{ant-prefix}-input, + :not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper { &, &:hover { background-color: @background-color; @@ -15,32 +21,12 @@ &:focus, &-focused { - .active(@border-color); - } - } - - .@{ant-prefix}-input-disabled { - &, - &:hover { - background-color: @input-disabled-bg; - border-color: @input-border-color; - } - } - - .@{ant-prefix}-input-affix-wrapper-disabled { - &, - &:hover { - background-color: @input-disabled-bg; - border-color: @input-border-color; - - input:focus { - box-shadow: none !important; - } + .active(@border-color, @hoverBorderColor, @outlineColor); } } .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input { - .active(@border-color); + .active(@border-color, @hoverBorderColor, @outlineColor); } .@{ant-prefix}-input-prefix { diff --git a/components/form/style/status.less b/components/form/style/status.less index 75add0b1b..5d90cc4e9 100644 --- a/components/form/style/status.less +++ b/components/form/style/status.less @@ -118,7 +118,7 @@ // ======================== Warning ======================== &-has-warning { - .form-control-validation(@warning-color; @warning-color; @form-warning-input-bg); + .form-control-validation(@warning-color; @warning-color; @form-warning-input-bg; @warning-color-hover; @warning-color-outline); &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon { color: @warning-color; @@ -159,7 +159,7 @@ // ========================= Error ========================= &-has-error { - .form-control-validation(@error-color; @error-color; @form-error-input-bg); + .form-control-validation(@error-color; @error-color; @form-error-input-bg; @error-color-hover; @error-color-outline); &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon { color: @error-color; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 9e0f2bcd8..f02cc3f8e 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -17,13 +17,27 @@ @info-color: @primary-color; @success-color: @green-6; @processing-color: @blue-6; -@error-color: @red-5; @highlight-color: @red-5; -@warning-color: @gold-6; @normal-color: #d9d9d9; @white: #fff; @black: #000; +// >>> Warning +@warning-color: @gold-6; +@warning-color-hover: color(~`colorPalette('@{warning-color}', 5) `); +@warning-color-active: color(~`colorPalette('@{warning-color}', 7) `); +@warning-color-outline: fade(@warning-color, @outline-fade); +@warning-color-deprecated-bg: color(~`colorPalette('@{warning-color}', 1) `); +@warning-color-deprecated-border: color(~`colorPalette('@{warning-color}', 3) `); + +// >>> Error +@error-color: @red-5; +@error-color-hover: color(~`colorPalette('@{error-color}', 5) `); +@error-color-active: color(~`colorPalette('@{error-color}', 7) `); +@error-color-outline: fade(@error-color, @outline-fade); +@error-color-deprecated-bg: color(~`colorPalette('@{error-color}', 1) `); +@error-color-deprecated-border: color(~`colorPalette('@{error-color}', 3) `); + // Color used by default to control hover and active backgrounds and for // alert info backgrounds. @primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)