Skip to content

Commit bc0ffc5

Browse files
zzcrzzcr
authored
refactor(theme): [slider] refactor slider theme vars (#2295)
1 parent 4322132 commit bc0ffc5

File tree

3 files changed

+92
-152
lines changed

3 files changed

+92
-152
lines changed

‎packages/theme/src/base/vars.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@
294294
--tv-color-icon-checked-disabled:var(--tv-base-color-common-6); // #dbdbdb 图标禁用色-1 checkbox选中且禁用
295295
--tv-color-icon-control: var(--tv-base-color-brand); // #191919 图标按钮 / 图标+文本按钮图标色,主要在按钮场景（稳定态图标色， hover时不用变化）
296296
--tv-color-icon-control-active: var(--tv-base-color-brand-6); // #1476ff 控件图标激活色，主要在checkbox、radio图标激活场景
297-
--tv-color-icon-control-disabled: var(--tv-base-color-common-6); // #1476ff 控件图标禁用色，主要在checkbox、radio图标激活场景
297+
--tv-color-icon-control-disabled: var(--tv-base-color-common-6); // #dbdbdb 控件图标禁用色，主要在checkbox、radio图标激活场景
298298
--tv-color-icon-white: var(--tv-base-color-common-1); // #fff 深色背景白色图标
299299
--tv-color-icon-link: var(--tv-base-color-brand-6); // #1476ff 链接图标色
300300
--tv-color-icon-warn-secondary: var(--tv-base-color-warn-secondary-1); // #ffb700 次要警告图标色 / 评分组件rate-图标色/状态图标-异常

‎packages/theme/src/slider/index.less

Lines changed: 57 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
@slider-container-prefix-cls: ~'@{css-prefix}slider-container';
1919

2020
.@{slider-container-prefix-cls} {
21-
.component-css-vars-slider();
21+
.inject-Slider-vars();
2222
position: relative;
2323

2424
&&__horizontal {
@@ -28,11 +28,11 @@
2828
}
2929

3030
.@{slider-prefix-cls} {
31-
border-radius: var(--ti-slider-border-radius);
32-
height: var(--ti-slider-height);
31+
border-radius: var(--tv-Slider-border-radius);
32+
height: var(--tv-Slider-height);
3333
position: relative;
3434
margin: 13px 0;
35-
background: var(--ti-slider-bg-color);
35+
background: var(--tv-Slider-bg-color);
3636
cursor: pointer;
3737
display: inline-block;
3838

@@ -47,36 +47,26 @@
4747

4848
&:hover {
4949
.@{slider-prefix-cls}__range {
50-
background: var(--ti-slider-range-hover-bg-color);
51-
}
52-
53-
.@{slider-prefix-cls}__handle {
54-
border-color: var(--ti-slider-handle-border-color-hover);
55-
border-width: var(--ti-slider-handle-border-weight-hover);
50+
background: var(--tv-Slider-range-hover-bg-color);
5651
}
5752
}
5853

5954
&.disabled {
6055
cursor: default;
61-
background-color: var(--ti-slider-bg-color-disabled);
56+
background-color: var(--tv-Slider-bg-color-disabled);
6257

6358
.@{slider-prefix-cls}__range {
64-
background-color: var(--ti-slider-range-disabled-bg-color);
59+
background-color: var(--tv-Slider-range-disabled-bg-color);
6560
}
6661

6762
.@{slider-prefix-cls}__handle {
6863
cursor: not-allowed;
69-
border-color: var(--ti-slider-handle-disabled-border-color);
70-
71-
&:hover svg,
72-
svg {
73-
fill: var(--ti-slider-handle-icon-disabled-fill-color);
74-
}
64+
border-color: var(--tv-Slider-handle-disabled-border-color);
7565
}
7666
}
7767

7868
&__vertical {
79-
width: var(--ti-slider-height);
69+
width: var(--tv-Slider-height);
8070
height: 300px;
8171
display: block;
8272
margin: 0 15px;
@@ -91,7 +81,7 @@
9181
border-radius: 10px;
9282
position: absolute;
9383
z-index: 1;
94-
width: var(--ti-slider-height);
84+
width: var(--tv-Slider-height);
9585
}
9686

9787
.@{slider-prefix-cls}__up {
@@ -103,30 +93,29 @@
10393
}
10494

10595
.@{slider-prefix-cls}__handle {
106-
margin: var(--ti-slider-margin-vertical) var(--ti-slider-margin-right) var(--ti-slider-margin-vertical)
107-
var(--ti-slider-margin-left);
96+
margin: -8px 0 -8px -8px;
10897
}
10998

11099
.@{slider-prefix-cls}__mark-point {
111100
transform: translateY(50%);
112-
height: var(--ti-slider-mark-point-width);
113-
width: var(--ti-slider-height);
101+
height: 2px;
102+
width: var(--tv-Slider-height);
114103
}
115104

116105
.@{slider-prefix-cls}__mark-label {
117106
transform: translateY(50%);
118-
margin-left: var(--ti-slider-mark-label-margin-top);
107+
margin-left: calc(8px + var(--tv-Slider-height));
119108
margin-top: 0;
120109
}
121110
}
122111

123112
&__range {
124-
border-radius: var(--ti-slider-range-border-radius);
113+
border-radius: var(--tv-Slider-range-border-radius);
125114
position: absolute;
126115
z-index: 1;
127-
margin-top: var(--ti-slider-range-margin-top);
128-
height: var(--ti-slider-range-height);
129-
background: var(--ti-slider-range-bg-color);
116+
margin-top: 0;
117+
height: var(--tv-Slider-range-height);
118+
background: var(--tv-Slider-range-bg-color);
130119
}
131120

132121
&__left {
@@ -138,69 +127,60 @@
138127
}
139128

140129
&__handle {
141-
border-radius: var(--ti-slider-handle-border-radius);
142-
height: var(--ti-slider-handle-height);
143-
width: var(--ti-slider-handle-width);
130+
border-radius: var(--tv-Slider-handle-border-radius);
131+
height: var(--tv-Slider-handle-height);
132+
width: var(--tv-Slider-handle-width);
144133
position: absolute;
145-
margin: var(--ti-slider-handle-margin-top) var(--ti-slider-handle-margin-horizontal)
146-
var(--ti-slider-handle-margin-bottom);
134+
margin: -8px -8px 0;
147135
z-index: 2;
148136
outline: none;
149-
background: var(--ti-slider-handle-bg-color);
150-
border: var(--ti-slider-handle-border-weight) solid var(--ti-slider-handle-border-color);
137+
background: var(--tv-Slider-handle-bg-color);
138+
border: 1px solid var(--tv-Slider-handle-border-color);
151139
display: flex;
152140
align-items: center;
153141
justify-content: center;
154-
box-shadow: var(--ti-slider-handle-box-shadow);
142+
box-shadow: var(--tv-Slider-handle-box-shadow);
155143
user-select: none;
156144
cursor: grab;
157145
text-align: center;
158146

147+
svg {
148+
display: none;
149+
}
150+
159151
&.handle-focus {
160152
z-index: 10;
161153
}
162154

163155
&:hover {
164-
color: var(--ti-slider-handle-text-color-hover);
165-
border-color: var(--ti-slider-handle-border-color-hover);
166-
transform: var(--ti-slider-handle-transform);
167-
168-
svg {
169-
fill: var(--ti-slider-handle-icon-fill-color-hover);
170-
}
171-
}
172-
173-
svg {
174-
display: var(--ti-slider-handle-icon-display);
175-
height: 12px;
176-
margin-left: 4px;
177-
fill: var(--ti-slider-handle-icon-fill-color);
156+
color: var(--tv-Slider-handle-text-color-hover);
157+
border-color: var(--tv-Slider-handle-border-color-hover);
158+
border-width: 2px;
178159
}
179160
}
180161

181162
&__tips {
182163
text-align: center;
183164
font-size: var(--ti-common-font-size-base);
184165
margin-top: -32px;
185-
margin-left: var(--ti-slider-tips-margin-left);
166+
margin-left: 3px;
186167
position: absolute;
187168
padding: 12px 16px;
188169
line-height: 1.5;
189170
z-index: 1010;
190171
word-break: normal; // popup-body里面加了默认折行影响到此处需要重置
191172
white-space: nowrap; // 强制不换行-to liyingfu 纵向进度条上的tips如果内容过多并有空格就会掉下去，此处设置强制显示一行
192-
background: var(--ti-slider-tips-bg-color);
193-
border: 1px solid var(--ti-slider-tips-border-color);
173+
background: var(--tv-Slider-tips-bg-color);
194174
border-radius: var(--ti-common-border-radius-1);
195-
color: var(--ti-slider-tips-text-color);
196-
box-shadow: var(--ti-slider-tips-box-shadow);
175+
color: var(--tv-Slider-tips-text-color);
176+
box-shadow: var(--tv-Slider-tips-box-shadow);
197177

198178
&:before {
199179
margin-left: -6px;
200180
bottom: -6px;
201181
.tip-arrow(50%; auto; 0;);
202182
.tip-make-arrow(
203-
6px 6px 0 6px; var(--ti-slider-tips-border-color) transparent
183+
6px 6px 0 6px; var(--tv-Slider-tips-border-color) transparent
204184
);
205185
}
206186

@@ -209,7 +189,7 @@
209189
bottom: -4px;
210190
.tip-arrow(50%; auto; 0;);
211191
.tip-make-arrow(
212-
4px 4px 0 4px; var(--ti-slider-tips-border-color) transparent
192+
4px 4px 0 4px; var(--tv-Slider-tips-border-color) transparent
213193
);
214194
}
215195
}
@@ -218,54 +198,54 @@
218198
position: absolute;
219199
pointer-events: none;
220200
transform: translateX(-50%);
221-
width: var(--ti-slider-mark-point-width);
222-
height: var(--ti-slider-height);
223-
background-color: var(--ti-slider-mark-point-bg-color);
201+
width: 2px;
202+
height: var(--tv-Slider-height);
203+
background-color: var(--tv-Slider-mark-point-bg-color);
224204
}
225205

226206
&__mark-label {
227207
position: absolute;
228208
transform: translateX(-50%);
229-
margin-top: var(--ti-slider-mark-label-margin-top);
230-
color: var(--ti-slider-mark-label-text-color);
231-
font-size: var(--ti-slider-mark-label-font-size);
209+
margin-top: calc(8px + var(--tv-Slider-height));
210+
color: var(--tv-Slider-mark-label-text-color);
211+
font-size: var(--tv-Slider-mark-label-font-size);
232212
}
233213

234214
&__input {
235215
display: flex;
236-
line-height: var(--ti-slider-input-height);
216+
line-height: var(--tv-Slider-input-height);
237217
vertical-align: top;
238-
margin-left: var(--ti-slider-input-margin-left);
218+
margin-left: var(--tv-Slider-input-margin-left);
239219
font-size: var(--ti-common-font-size-base);
240220

241221
&__split {
242222
padding: 0 4px;
243223
}
244224

245225
input {
246-
width: var(--ti-slider-input-width);
247-
height: var(--ti-slider-input-height);
248-
line-height: var(--ti-slider-input-height);
249-
border: 1px solid var(--ti-slider-input-border-color);
250-
border-radius: var(--ti-slider-input-border-radius);
251-
color: var(--ti-slider-input-text-color);
252-
background: var(--ti-slider-input-bg-color);
226+
width: var(--tv-Slider-input-width);
227+
height: var(--tv-Slider-input-height);
228+
line-height: var(--tv-Slider-input-height);
229+
border: 1px solid var(--tv-Slider-input-border-color);
230+
border-radius: var(--tv-Slider-input-border-radius);
231+
color: var(--tv-Slider-input-text-color);
232+
background: var(--tv-Slider-input-bg-color);
253233
font-size: inherit;
254234
padding: 0 8px;
255235
outline: 0;
256236
display: inline-block;
257237
box-sizing: border-box;
258-
text-align: var(--ti-slider-input-text-align);
238+
text-align: left;
259239
}
260240

261241
&__unit {
262-
margin-left: var(--ti-slider-input-unit-margin-left);
263-
color: var(--ti-slider-input-unit-text-color);
242+
margin-left: var(--tv-Slider-input-unit-margin-left);
243+
color: var(--tv-Slider-input-unit-text-color);
264244
}
265245

266246
&.is-disabled {
267247
.@{slider-prefix-cls}__input__unit {
268-
color: var(--ti-slider-input-unit-text-color-disabled);
248+
color: var(--tv-Slider-input-unit-text-color-disabled);
269249
}
270250
}
271251
}

0 commit comments

Comments
 (0)