github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: form input css

pull/5057/head
tangjinzhou 2021-12-18 17:00:55 +08:00
parent b02af565a6
commit ebd52af454
3 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/form/style/mixin.less
View File

@ -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 {

4
components/form/style/status.less
View File

@ -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;

18
components/style/themes/default.less
View File

@ -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%)