Skip to content

Commit f30f72f

Browse files
MomoPoppyMomoPoppy
committed
feat(select): [select] refactor(select): [select] refactor theme vars for select
1 parent 141318a commit f30f72f

File tree

2 files changed

+45
-45
lines changed

2 files changed

+45
-45
lines changed

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

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
position: absolute;
105105
line-height: normal;
106106
white-space: normal;
107-
padding: var(--ti-Select-tags-padding);
107+
padding: var(--tv-Select-tags-padding);
108108
z-index: 1;
109109
top: 50%;
110110
margin-left: 1px;
@@ -140,24 +140,24 @@
140140
outline: 0;
141141
padding: 0;
142142
margin-left: 8px;
143-
color: var(--ti-Select-text-color);
144-
font-size: var(--ti-Select-font-size);
145-
height: var(--ti-Select-height);
143+
color: var(--tv-Select-text-color);
144+
font-size: var(--tv-Select-font-size);
145+
height: var(--tv-Select-height);
146146
-webkit-appearance: none;
147147
-moz-appearance: none;
148148
appearance: none;
149149
background-color: transparent;
150150

151151
&.is-mini {
152-
height: var(--ti-Select-height-mini);
152+
height: var(--tv-Select-height-mini);
153153
}
154154

155155
&.is-small {
156-
height: var(--ti-Select-height-small);
156+
height: var(--tv-Select-height-small);
157157
}
158158

159159
&.is-medium {
160-
height: var(--ti-Select-height-medium);
160+
height: var(--tv-Select-height-medium);
161161
}
162162
}
163163

@@ -169,7 +169,7 @@
169169
white-space: nowrap;
170170
box-sizing: border-box;
171171
border-color: transparent;
172-
margin: var(--ti-Select-tag-margin);
172+
margin: var(--tv-Select-tag-margin);
173173
text-overflow: ellipsis;
174174
overflow: hidden;
175175
display: inline-flex;
@@ -196,9 +196,9 @@
196196
display: inline-flex;
197197

198198
> span {
199-
color: var(--ti-Select-text-color-disabled);
200-
margin: var(--ti-Select-tags-margin-top) var(--ti-Select-tags-margin-right)
201-
var(--ti-Select-tags-margin-bottom) var(--ti-Select-tags-margin-left);
199+
color: var(--tv-Select-text-color-disabled);
200+
margin: var(--tv-Select-tags-margin-top) var(--tv-Select-tags-margin-right)
201+
var(--tv-Select-tags-margin-bottom) var(--tv-Select-tags-margin-left);
202202
display: inline-block;
203203
width: 100%;
204204
white-space: nowrap;
@@ -212,14 +212,14 @@
212212
.@{select-prefix-cls}__collapse-text {
213213
display: inline-flex;
214214
align-items: center;
215-
margin: var(--ti-Select-collapse-margin);
216-
font-size: var(--ti-Select-font-size);
217-
color: var(--ti-Select-collapse-text-color);
215+
margin: var(--tv-Select-collapse-margin);
216+
font-size: var(--tv-Select-font-size);
217+
color: var(--tv-Select-collapse-text-color);
218218

219219
.tiny-svg {
220-
margin: var(--ti-Select-collapse-margin);
221-
fill: var(--ti-Select-icon-color);
222-
font-size: var(--ti-Select-icon-size);
220+
margin: var(--tv-Select-collapse-margin);
221+
fill: var(--tv-Select-icon-color);
222+
font-size: var(--tv-Select-icon-size);
223223
}
224224
}
225225
}
@@ -242,7 +242,7 @@
242242
}
243243

244244
.@{select-prefix-cls}__tags {
245-
height: var(--ti-Select-tags-height);
245+
height: var(--tv-Select-tags-height);
246246
overflow: hidden;
247247

248248
&-collapse {
@@ -369,14 +369,14 @@
369369
}
370370

371371
.@{select-prefix-cls}__caret {
372-
fill: var(--ti-Select-icon-color);
373-
font-size: var(--ti-Select-icon-size);
372+
fill: var(--tv-Select-icon-color);
373+
font-size: var(--tv-Select-icon-size);
374374
transition: transform 0.3s;
375375
transform: rotateZ(180deg);
376376
cursor: pointer;
377377

378378
&:hover {
379-
fill: var(--ti-Select-icon-color-hover);
379+
fill: var(--tv-Select-icon-color-hover);
380380
}
381381

382382
&.is-reverse {
@@ -386,14 +386,14 @@
386386

387387
.@{select-prefix-cls}__limit-txt,
388388
.@{select-prefix-cls}__proportion-txt {
389-
font-size: var(--ti-Select-font-size);
390-
margin: var(--ti-Select-suffix-text-margin);
391-
color: var(--ti-Select-suffix-text-color);
389+
font-size: var(--tv-Select-font-size);
390+
margin: var(--tv-Select-suffix-text-margin);
391+
color: var(--tv-Select-suffix-text-color);
392392
}
393393

394394
.@{select-prefix-cls}__copy {
395395
cursor: pointer;
396-
margin-right: var(--ti-Select-suffix-icon-margin-right);
396+
margin-right: var(--tv-Select-suffix-icon-margin-right);
397397
}
398398

399399
.@{input-prefix-cls}__suffix {
@@ -408,7 +408,7 @@
408408

409409
&.is-disabled {
410410
.@{select-prefix-cls}__caret {
411-
fill: var(--ti-Select-icon-color-disabled);
411+
fill: var(--tv-Select-icon-color-disabled);
412412
cursor: not-allowed;
413413
}
414414

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

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,45 +12,45 @@
1212

1313
.component-css-vars-select() {
1414
// 文本色
15-
--ti-Select-text-color: var(--tv-color-text, #191919);
15+
--tv-Select-text-color: var(--tv-color-text, #191919);
1616
// 多选禁用文本色
17-
--ti-Select-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2);
17+
--tv-Select-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2);
1818
// 默认字号
19-
--ti-Select-font-size: var(--tv-font-size-md, 14px);
19+
--tv-Select-font-size: var(--tv-font-size-md, 14px);
2020

2121
// 图标色
22-
--ti-Select-icon-color: var(--tv-color-icon, #808080);
22+
--tv-Select-icon-color: var(--tv-color-icon, #808080);
2323
// 图标禁用色
24-
--ti-Select-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
24+
--tv-Select-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
2525
// 图标悬浮色
26-
--ti-Select-icon-color-hover: var(--tv-color-icon-hover, #191919);
26+
--tv-Select-icon-color-hover: var(--tv-color-icon-hover, #191919);
2727
// 图标尺寸
28-
--ti-Select-icon-size: var(--tv-icon-size, 16px);
28+
--tv-Select-icon-size: var(--tv-icon-size, 16px);
2929

3030
// 选择器高度
31-
--ti-Select-height: var(--tv-size-height-md, 32px);
31+
--tv-Select-height: var(--tv-size-height-md, 32px);
3232
// 选择器高度(mini)
33-
--ti-Select-height-mini: var(--tv-size-height-xs, 24px);
33+
--tv-Select-height-mini: var(--tv-size-height-xs, 24px);
3434
// 选择器高度(small)
35-
--ti-Select-height-small: var(--tv-size-height-sm, 28px);
35+
--tv-Select-height-small: var(--tv-size-height-sm, 28px);
3636
// 选择器高度(medium)
37-
--ti-Select-height-medium: var(--tv-size-height-lg, 40px);
37+
--tv-Select-height-medium: var(--tv-size-height-lg, 40px);
3838

3939
// 标签区域高度
40-
--ti-Select-tags-height: var(--tv-size-height-md, 32px);
40+
--tv-Select-tags-height: var(--tv-size-height-md, 32px);
4141
// 标签区域内边距
42-
--ti-Select-tags-padding: var(--tv-space-xs, 2px) 0px var(--tv-space-xs, 2px) var(--tv-space-xs, 2px);
42+
--tv-Select-tags-padding: var(--tv-space-xs, 2px) 0px var(--tv-space-xs, 2px) var(--tv-space-xs, 2px);
4343
// 标签外边距
44-
--ti-Select-tag-margin: var(--tv-space-xs, 2px);
44+
--tv-Select-tag-margin: var(--tv-space-xs, 2px);
4545

4646
// suffix 图标右测外间距
47-
--ti-Select-suffix-icon-margin-right: var(--tv-space-sm, 4px);
47+
--tv-Select-suffix-icon-margin-right: var(--tv-space-sm, 4px);
4848
// suffix 文本外间距
49-
--ti-Select-suffix-text-margin: 0 var(--tv-space-sm, 4px);
49+
--tv-Select-suffix-text-margin: 0 var(--tv-space-sm, 4px);
5050
// suffix 文本色
51-
--ti-Select-suffix-text-color: var(--tv-color-text-weaken, #808080);
51+
--tv-Select-suffix-text-color: var(--tv-color-text-weaken, #808080);
5252
// 收起按钮文本色
53-
--ti-Select-collapse-text-color: var(--tv-color-text-active, #1476ff);
53+
--tv-Select-collapse-text-color: var(--tv-color-text-active, #1476ff);
5454
// 收起按钮外间距
55-
--ti-Select-collapse-margin: 0 var(--tv-space-xs, 2px);
55+
--tv-Select-collapse-margin: 0 var(--tv-space-xs, 2px);
5656
}

0 commit comments

Comments
 (0)