Skip to content

Commit a6ec8cb

Browse files
zkwolfzkwolf
committed
chore: update style
1 parent 110304b commit a6ec8cb

File tree

18 files changed

+305
-76
lines changed

18 files changed

+305
-76
lines changed

‎components/button/style/mixin.less

+70-18
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,30 @@
3232

3333
&:hover,
3434
&:focus {
35-
.button-color(
36-
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
37-
);
35+
& when (@theme = dark) {
36+
.button-color(
37+
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
38+
);
39+
}
40+
& when not (@theme = dark) {
41+
.button-color(
42+
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
43+
);
44+
}
3845
}
3946

4047
&:active,
4148
&.active {
42-
.button-color(
43-
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
44-
);
49+
& when (@theme = dark) {
50+
.button-color(
51+
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
52+
);
53+
}
54+
& when not (@theme = dark) {
55+
.button-color(
56+
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
57+
);
58+
}
4559
}
4660

4761
.button-disabled();
@@ -52,17 +66,27 @@
5266

5367
&:hover,
5468
&:focus {
55-
.button-color(
56-
~`colorPalette('@{btn-primary-bg}', 5) `; @background; ~`colorPalette('@{btn-primary-bg}', 5)
57-
`
58-
);
69+
& when (@theme = dark) {
70+
.button-color(@primary-5; @background; @primary-5);
71+
}
72+
& when not (@theme = dark) {
73+
.button-color(
74+
~`colorPalette('@{btn-primary-bg}', 5) `; @background;
75+
~`colorPalette('@{btn-primary-bg}', 5) `
76+
);
77+
}
5978
}
6079
&:active,
6180
&.active {
62-
.button-color(
63-
~`colorPalette('@{btn-primary-bg}', 7) `; @background; ~`colorPalette('@{btn-primary-bg}', 7)
64-
`
65-
);
81+
& when (@theme = dark) {
82+
.button-color(@primary-7; @background; @primary-7);
83+
}
84+
& when not (@theme = dark) {
85+
.button-color(
86+
~`colorPalette('@{btn-primary-bg}', 7) `; @background;
87+
~`colorPalette('@{btn-primary-bg}', 7) `
88+
);
89+
}
6690
}
6791
.button-disabled();
6892
}
@@ -72,19 +96,47 @@
7296
&:hover,
7397
&:focus {
7498
& when (@border = transparent) {
75-
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
99+
& when (@theme = dark) {
100+
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
101+
}
102+
& when not (@theme = dark) {
103+
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
104+
}
76105
}
77106
& when not(@border = transparent) {
78-
.button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
107+
& when (@theme = dark) {
108+
.button-color(
109+
~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `
110+
);
111+
}
112+
& when not (@theme = dark) {
113+
.button-color(
114+
~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `
115+
);
116+
}
79117
}
80118
}
81119
&:active,
82120
&.active {
83121
& when (@border = transparent) {
84-
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
122+
& when (@theme = dark) {
123+
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
124+
}
125+
& when not (@theme = dark) {
126+
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
127+
}
85128
}
86129
& when not(@border = transparent) {
87-
.button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
130+
& when (@theme = dark) {
131+
.button-color(
132+
~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `
133+
);
134+
}
135+
& when not (@theme = dark) {
136+
.button-color(
137+
~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `
138+
);
139+
}
88140
}
89141
}
90142
.button-disabled();

‎components/checkbox/style/mixin.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
display: block;
4848
width: @checkbox-size;
4949
height: @checkbox-size;
50-
background-color: @checkbox-check-color;
50+
background-color: @checkbox-check-bg;
5151
border: @checkbox-border-width @border-style-base @border-color-base;
5252
border-radius: @border-radius-sm;
5353
// Fix IE checked style

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

+3
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,9 @@
153153
background-color: @component-background;
154154
background-clip: padding-box;
155155
border: @border-width-base @border-style-base @border-color-inverse;
156+
& when (@theme = dark) {
157+
border-color: @black;
158+
}
156159
border-radius: @border-radius-base;
157160
outline: none;
158161
box-shadow: @box-shadow-base;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
z-index: 2;
8282
color: @disabled-color;
8383
font-size: @font-size-base;
84-
background: @input-bg;
84+
background: @component-background;
8585
cursor: pointer;
8686
opacity: 0;
8787
pointer-events: none;

‎components/dropdown/style/index.less

+6-3
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414

1515
&::before {
1616
position: absolute;
17-
top: -7px;
17+
top: -@popover-distance + @popover-arrow-width;
1818
right: 0;
19-
bottom: -7px;
19+
bottom: -@popover-distance + @popover-arrow-width;
2020
left: -7px;
2121
z-index: -9999;
2222
opacity: 0.0001;
@@ -52,7 +52,7 @@
5252
padding: @dropdown-edge-child-vertical-padding 0;
5353
text-align: left;
5454
list-style-type: none;
55-
background-color: @component-background;
55+
background-color: @dropdown-menu-bg;
5656
background-clip: padding-box;
5757
border-radius: @border-radius-base;
5858
outline: none;
@@ -111,6 +111,9 @@
111111
padding: @dropdown-vertical-padding @control-padding-horizontal;
112112
color: @text-color;
113113
transition: all 0.3s;
114+
&:hover {
115+
color: @text-color;
116+
}
114117
}
115118

116119
&:first-child {

‎components/empty/simple.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { defaultConfigProvider } from '../config-provider';
33

44
const Simple = () => {
55
const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
6-
const prefixCls = getPrefixCls('empty-img-default');
6+
const prefixCls = getPrefixCls('empty-img-simple');
77

88
return (
99
<svg class={prefixCls} width="64" height="41" viewBox="0 0 64 41">

‎components/mentions/style/index.less

+3
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,9 @@
6060
border: none;
6161
outline: none;
6262
resize: none;
63+
& when (@theme = dark) {
64+
background-color: transparent;
65+
}
6366
.placeholder();
6467

6568
&:read-only {

‎components/modal/style/modal.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636

3737
&-content {
3838
position: relative;
39-
background-color: @component-background;
39+
background-color: @modal-content-bg;
4040
background-clip: padding-box;
4141
border: 0;
4242
border-radius: @border-radius-base;

‎components/radio/style/index.less

+9-9
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@
6969
@radio-dot-size: @radio-size - 8px;
7070

7171
position: absolute;
72-
top: ((@radio-size - @radio-dot-size) / 2) - 1px;
73-
left: ((@radio-size - @radio-dot-size) / 2) - 1px;
72+
top: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width;
73+
left: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width;
7474
display: table;
7575
width: @radio-dot-size;
7676
height: @radio-dot-size;
@@ -93,7 +93,7 @@
9393
background-color: @radio-button-bg;
9494
border-color: @border-color-base;
9595
border-style: solid;
96-
border-width: 1px;
96+
border-width: @radio-border-width;
9797
border-radius: 100px;
9898
transition: all @radio-duration;
9999
}
@@ -128,7 +128,7 @@
128128
border-color: @border-color-base !important;
129129
cursor: not-allowed;
130130
&::after {
131-
background-color: fade(@black, 20%);
131+
background-color: @radio-dot-disabled-color;
132132
}
133133
}
134134

@@ -265,16 +265,16 @@ span.@{radio-prefix-cls} + * {
265265
}
266266

267267
.@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
268-
color: @component-background;
268+
color: @radio-solid-checked-color;
269269
background: @radio-dot-color;
270270
border-color: @radio-dot-color;
271271
&:hover {
272-
color: @component-background;
272+
color: @radio-solid-checked-color;
273273
background: @radio-button-hover-color;
274274
border-color: @radio-button-hover-color;
275275
}
276276
&:active {
277-
color: @component-background;
277+
color: @radio-solid-checked-color;
278278
background: @radio-button-active-color;
279279
border-color: @radio-button-active-color;
280280
}
@@ -301,8 +301,8 @@ span.@{radio-prefix-cls} + * {
301301
}
302302

303303
&-disabled&-checked {
304-
color: @text-color-inverse;
305-
background-color: tint(@black, 90%);
304+
color: @radio-disabled-button-checked-color;
305+
background-color: @radio-disabled-button-checked-bg;
306306
border-color: @border-color-base;
307307
box-shadow: none;
308308
}

0 commit comments

Comments
 (0)