Skip to content

Commit 58b9460

Browse files
WwwHhhYranWwwHhhYran
authored
refactor(module:*): remove important for variant style (#9432)
1 parent 88d0864 commit 58b9460

File tree

10 files changed

+120
-100
lines changed

10 files changed

+120
-100
lines changed

‎components/cascader/demo/variant.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ title:
77

88
## zh-CN
99

10-
Cascader 形态变体，可选 `outlined` `filled` `borderless` `underlined` 四种形态。
10+
Cascader 形态变体，可选 `outlined`、`filled`、`borderless`、`underlined` 四种形态。
1111

1212
## en-US
1313

14-
Variants of Cascader, there are four variants: `outlined` `filled` `borderless` and `underlined`.
14+
Variants of Cascader, there are four variants: `outlined`, `filled`, `borderless` and `underlined`.

‎components/date-picker/style/index.less‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -46,34 +46,34 @@
4646
}
4747

4848
&&-borderless {
49-
background-color: transparent !important;
50-
border-color: transparent !important;
51-
box-shadow: none !important;
49+
background-color: transparent;
50+
border-color: transparent;
51+
box-shadow: none;
5252
}
5353

5454
// filled style
5555
&&-filled {
56-
background-color: @input-variant-filled-bg !important;
57-
border-color: transparent !important;
58-
box-shadow: none !important;
56+
background-color: @input-variant-filled-bg;
57+
border-color: transparent;
58+
box-shadow: none;
5959
}
6060

6161
&&-filled:hover {
62-
background-color: @input-variant-filled-hover-bg !important;
63-
border-color: transparent !important;
64-
box-shadow: none !important;
62+
background-color: @input-variant-filled-hover-bg;
63+
border-color: transparent;
64+
box-shadow: none;
6565
}
6666

6767
&&-filled:focus,
6868
&&-filled&-focused {
69-
.active() !important;
70-
background-color: transparent !important;
71-
box-shadow: none !important;
69+
.active();
70+
background-color: transparent;
71+
box-shadow: none;
7272
}
7373

7474
&&-filled&-disabled,
7575
&&-filled&[disabled] {
76-
.disabled() !important;
76+
.disabled();
7777
}
7878

7979
// underlined style
@@ -83,10 +83,14 @@
8383
&&-underlined&-focused,
8484
&&-underlined&-disabled,
8585
&&-underlined&[disabled] {
86-
background-color: transparent !important;
87-
border-width: 0 0 @border-width-base !important;
88-
border-radius: 0 !important;
89-
box-shadow: none !important;
86+
background-color: transparent;
87+
border-width: 0 0 @border-width-base;
88+
border-radius: 0;
89+
box-shadow: none;
90+
}
91+
92+
&&-underlined:hover:not(&-focused):not(:focus) {
93+
border-color: @input-border-color;
9094
}
9195

9296
// ======================== Input =========================

‎components/input-number/demo/variant.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ title:
77

88
## zh-CN
99

10-
InputNumber 形态变体，可选 `outlined` `filled` `borderless` `underlined` 四种形态。
10+
InputNumber 形态变体，可选 `outlined`、`filled`、`borderless`、`underlined` 四种形态。
1111

1212
## en-US
1313

14-
Variants of InputNumber, there are four variants: `outlined` `filled` `borderless` and `underlined`.
14+
Variants of InputNumber, there are four variants: `outlined`, `filled`, `borderless` and `underlined`.

‎components/input-number/style/index.less‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@
6868
}
6969

7070
&:hover {
71-
.hover(@input-number-hover-border-color);
7271
& + .@{form-item-prefix-cls}-children-icon {
7372
opacity: 0;
7473
transition: opacity 0.24s linear 0.24s;

‎components/input/demo/variant.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ title:
77

88
## zh-CN
99

10-
Input 形态变体，可选 `outlined` `filled` `borderless` `underlined` 四种形态。。
10+
Input 形态变体，可选 `outlined`、`filled`、`borderless`、`underlined` 四种形态。
1111

1212
## en-US
1313

14-
Variants of Input, there are four variants: `outlined` `filled` `borderless` and `underlined`.
14+
Variants of Input, there are four variants: `outlined`, `filled`, `borderless` and `underlined`.

‎components/input/style/mixin.less‎

Lines changed: 35 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -87,54 +87,53 @@
8787
.disabled();
8888
}
8989

90-
&-borderless&,
91-
&-borderless&:hover,
92-
&-borderless&:focus,
93-
&-borderless&-focused,
94-
&-borderless&-disabled,
95-
&-borderless&[disabled] {
96-
background-color: transparent !important;
97-
border: none !important;
98-
box-shadow: none !important;
99-
}
100-
101-
&-filled {
102-
background-color: @input-variant-filled-bg !important;
90+
&&-borderless,
91+
&&-borderless:hover,
92+
&&-borderless:focus,
93+
&&-borderless&-focused,
94+
&&-borderless&-disabled,
95+
&&-borderless&[disabled] {
96+
background-color: transparent;
97+
border: none;
98+
box-shadow: none;
99+
}
100+
101+
&&-filled {
102+
background-color: @input-variant-filled-bg;
103103
border-color: transparent;
104-
box-shadow: none !important;
104+
box-shadow: none;
105105
}
106106

107-
&-filled:hover&:not(&-focused) {
108-
background-color: @input-variant-filled-hover-bg !important;
109-
border-color: transparent !important;
107+
&&-filled:hover {
108+
background-color: @input-variant-filled-hover-bg;
110109
}
111110

112-
&-filled:focus,
113-
&-filled&-focused {
111+
&&-filled:focus,
112+
&&-filled&-focused {
114113
.active();
115-
background-color: transparent !important;
116-
box-shadow: none !important;
114+
background-color: transparent;
115+
box-shadow: none;
117116
}
118117

119-
&-filled&-disabled,
120-
&-filled&[disabled] {
121-
.disabled() !important;
118+
&&-filled&-disabled,
119+
&&-filled&[disabled] {
120+
.disabled();
122121
}
123122

124-
&-underlined&,
125-
&-underlined:hover,
126-
&-underlined:focus,
127-
&-underlined&-focused,
128-
&-underlined&-disabled,
129-
&-underlined&[disabled] {
130-
background-color: transparent !important;
131-
border-width: 0 0 @border-width-base !important;
132-
border-radius: 0 !important;
133-
box-shadow: none !important;
123+
&&-underlined,
124+
&&-underlined:hover,
125+
&&-underlined:focus,
126+
&&-underlined&-focused,
127+
&&-underlined&-disabled,
128+
&&-underlined&[disabled] {
129+
background-color: transparent;
130+
border-width: 0 0 @border-width-base;
131+
border-radius: 0;
132+
box-shadow: none;
134133
}
135134

136-
&-underlined:hover&:not(&-focused) {
137-
border-color: @input-border-color !important;
135+
&&-underlined:hover:not(&-focused):not(:focus) {
136+
border-color: @input-border-color;
138137
}
139138

140139
// Reset height for `textarea`s

‎components/select/demo/variant.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ title:
77

88
## zh-CN
99

10-
Select 形态变体，可选 `outlined` `filled` `borderless` `underlined` 四种形态。
10+
Select 形态变体，可选 `outlined`、`filled`、`borderless`、`underlined` 四种形态。
1111

1212
## en-US
1313

14-
Variants of Select, there are four variants: `outlined` `filled` `borderless` and `underlined`.
14+
Variants of Select, there are four variants: `outlined`, `filled`, `borderless` and `underlined`.

‎components/select/style/index.less‎

Lines changed: 52 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,6 @@
4444
}
4545
}
4646

47-
.@{select-prefix-cls}-focused:not(.@{select-prefix-cls}-disabled) & {
48-
.active();
49-
}
50-
5147
.@{select-prefix-cls}-disabled& {
5248
color: @disabled-color;
5349
background: @input-disabled-bg;
@@ -96,6 +92,10 @@
9692
.hover();
9793
}
9894

95+
&:not(&-disabled)&-focused &-selector {
96+
.active();
97+
}
98+
9999
// ======================== Selection ========================
100100
&-selection-item {
101101
flex: 1;
@@ -341,50 +341,68 @@
341341
}
342342

343343
// no border style
344-
&-borderless &-selector {
345-
background-color: transparent !important;
346-
border-color: transparent !important;
347-
box-shadow: none !important;
344+
&&-borderless,
345+
&&-borderless:hover,
346+
&&-borderless:focus,
347+
&&-borderless&-focused,
348+
&&-borderless&-disabled,
349+
&&-borderless&[disabled] {
350+
.@{select-prefix-cls}-selector {
351+
background-color: transparent;
352+
border-color: transparent;
353+
box-shadow: none;
354+
}
348355
}
349356

350357
// filled style
351-
&-filled &-selector {
352-
background-color: @input-variant-filled-bg !important;
353-
border-color: transparent !important;
354-
box-shadow: none !important;
358+
&&-filled &-selector {
359+
background-color: @input-variant-filled-bg;
360+
border-color: transparent;
361+
box-shadow: none;
355362
}
356363

357-
&-filled:hover &-selector {
358-
background-color: @input-variant-filled-hover-bg !important;
359-
border-color: transparent !important;
360-
box-shadow: none !important;
364+
&&-filled:hover &-selector {
365+
background-color: @input-variant-filled-hover-bg;
366+
border-color: transparent;
367+
box-shadow: none;
361368
}
362369

363-
&-filled:focus &-selector,
364-
&-filled&-focused &-selector {
365-
.active() !important;
366-
background-color: transparent !important;
367-
box-shadow: none !important;
370+
&&-filled:focus,
371+
&&-filled&-focused {
372+
.@{select-prefix-cls}-selector {
373+
.active();
374+
background-color: transparent;
375+
box-shadow: none;
376+
}
368377
}
369378

370-
&-filled&-disabled &-selector,
371-
&-filled&[disabled] &-selector {
372-
.disabled() !important;
379+
&&-filled&-disabled,
380+
&&-filled&[disabled] {
381+
.@{select-prefix-cls}-selector {
382+
.disabled();
383+
}
373384
}
374385

375386
// underlined style
376-
&-underlined &-selector,
377-
&-underlined:hover &-selector,
378-
&-underlined:focus &-selector,
379-
&-underlined&-focused &-selector,
380-
&-underlined&-disabled &-selector,
381-
&-underlined&[disabled] &-selector {
382-
background-color: transparent !important;
383-
border-width: 0 0 @border-width-base !important;
384-
border-radius: 0 !important;
385-
box-shadow: none !important;
387+
&&-underlined,
388+
&&-underlined:hover,
389+
&&-underlined:focus,
390+
&&-underlined&-focused,
391+
&&-underlined&-disabled,
392+
&&-underlined&[disabled] {
393+
.@{select-prefix-cls}-selector {
394+
background-color: transparent;
395+
border-width: 0 0 @border-width-base;
396+
border-radius: 0;
397+
box-shadow: none;
398+
}
386399
}
387400

401+
&&-underlined:hover:not(&-focused):not(:focus) &-selector {
402+
border-color: @input-border-color;
403+
}
404+
405+
388406
&&-in-form-item {
389407
width: 100%;
390408
}

‎components/time-picker/demo/variant.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ title:
77

88
## zh-CN
99

10-
TimePicker 形态变体，可选 `outlined` `filled` `borderless` `underlined` 四种形态。
10+
TimePicker 形态变体，可选 `outlined`、`filled`、`borderless`、`underlined` 四种形态。
1111

1212
## en-US
1313

14-
Variants of TimePicker, there are four variants: `outlined` `filled` `borderless` and `underlined`.
14+
Variants of TimePicker, there are four variants: `outlined`, `filled`, `borderless` and `underlined`.

‎components/tree-select/demo/variant.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ title:
77

88
## zh-CN
99

10-
TreeSelect 形态变体，可选 `outlined` `filled` `borderless` `underlined` 四种形态。
10+
TreeSelect 形态变体，可选 `outlined`、`filled`、`borderless`、`underlined` 四种形态。
1111

1212
## en-US
1313

14-
Variants of TreeSelect, there are four variants: `outlined` `filled` `borderless` and `underlined`.
14+
Variants of TreeSelect, there are four variants: `outlined`, `filled`, `borderless` and `underlined`.

0 commit comments

Comments
 (0)