Skip to content

Commit 78ce3ad

Browse files
zzcrzzcr
authored
refactor(theme): [loading] refactor loading theme vars (#2277)
1 parent b8b2729 commit 78ce3ad

File tree

2 files changed

+41
-45
lines changed

2 files changed

+41
-45
lines changed

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

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@
1616
@loading-prefix-cls: ~'@{css-prefix}loading';
1717

1818
.@{loading-prefix-cls} {
19-
.component-css-vars-loading();
19+
.inject-Loading-vars();
2020

2121
&__mask {
2222
position: absolute;
2323
z-index: 2000;
24-
background-color: var(--ti-loading-mask-bg-color);
24+
background-color: var(--tv-Loading-mask-bg-color);
2525
margin: 0;
2626
top: 0;
2727
right: 0;
@@ -37,22 +37,22 @@
3737

3838
&-small {
3939
svg {
40-
height: var(--ti-loading-fullscreen-small-height);
41-
width: var(--ti-loading-fullscreen-small-width);
40+
height: var(--tv-Loading-fullscreen-small-height);
41+
width: var(--tv-Loading-fullscreen-small-width);
4242
}
4343
}
4444

4545
&-medium {
4646
svg {
47-
height: var(--ti-loading-fullscreen-medium-height);
48-
width: var(--ti-loading-fullscreen-medium-width);
47+
height: var(--tv-Loading-fullscreen-medium-height);
48+
width: var(--tv-Loading-fullscreen-medium-width);
4949
}
5050
}
5151

5252
&-large {
5353
svg {
54-
height: var(--ti-loading-fullscreen-large-height);
55-
width: var(--ti-loading-fullscreen-large-width);
54+
height: var(--tv-Loading-fullscreen-large-height);
55+
width: var(--tv-Loading-fullscreen-large-width);
5656
}
5757
}
5858
}
@@ -67,37 +67,37 @@
6767
position: absolute;
6868

6969
.@{loading-prefix-cls}__text {
70-
color: var(--ti-loading-text-color);
71-
margin: var(--ti-loading-text-margin-vertical) var(--ti-loading-text-margin-horizontal);
72-
font-size: var(--ti-loading-text-font-size);
70+
color: var(--tv-Loading-text-color);
71+
margin: var(--tv-Loading-text-margin-y) var(--tv-Loading-text-margin-x);
72+
font-size: var(--tv-Loading-text-font-size);
7373
}
7474

7575
&-small {
7676
svg,
7777
img {
78-
height: var(--ti-loading-spinner-small-height);
79-
width: var(--ti-loading-spinner-small-width);
78+
height: var(--tv-Loading-spinner-small-height);
79+
width: var(--tv-Loading-spinner-small-width);
8080
}
8181
}
8282

8383
&-medium {
8484
svg,
8585
img {
86-
height: var(--ti-loading-spinner-medium-height);
87-
width: var(--ti-loading-spinner-medium-width);
86+
height: var(--tv-Loading-spinner-medium-height);
87+
width: var(--tv-Loading-spinner-medium-width);
8888
}
8989
}
9090

9191
&-large {
9292
svg,
9393
img {
94-
height: var(--ti-loading-spinner-large-height);
95-
width: var(--ti-loading-spinner-large-width);
94+
height: var(--tv-Loading-spinner-large-height);
95+
width: var(--tv-Loading-spinner-large-width);
9696
}
9797
}
9898

9999
svg {
100-
fill: var(--ti-loading-icon-color);
100+
fill: var(--tv-Loading-icon-color);
101101
}
102102
}
103103

@@ -114,9 +114,3 @@
114114
opacity: 0;
115115
}
116116
}
117-
118-
.@{css-prefix-iconfont}-loading {
119-
font-size: var(--ti-common-font-size-1);
120-
line-height: 1;
121-
vertical-align: text-top;
122-
}

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

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,43 +10,45 @@
1010
*
1111
*/
1212

13-
.component-css-vars-loading() {
13+
.inject-Loading-vars() {
1414
// 加载图标色
15-
--ti-loading-icon-color: var(--ti-common-color-icon-active, #191919);
15+
--tv-Loading-icon-color: var(--tv-color-icon-active);
1616
// 加载文本色
17-
--ti-loading-text-color: var(--ti-common-color-text-secondary, #595959);
17+
--tv-Loading-text-color: var(--tv-color-text-secondary);
1818
// 加载背景色
19-
--ti-loading-mask-bg-color: #f5f5f5;
19+
--tv-Loading-mask-bg-color: var(--tv-color-bg);
2020
// 加载文本字号
21-
--ti-loading-text-font-size: var(--ti-common-font-size-2, 16px);
22-
// 加载图标自定义加载图标顶部外边距
23-
--ti-loading-spinner-margin-top: calc(var(--ti-common-space-0, 0px) - 21px);
21+
--tv-Loading-text-font-size: var(--tv-font-size-lg);
2422
// 加载图标文本垂直方向外边距
25-
--ti-loading-text-margin-vertical: var(--ti-common-space-4x, 16px);
23+
--tv-Loading-text-margin-y: var(--tv-space-xl);
2624
// 加载图标文本水平方向外边距
27-
--ti-loading-text-margin-horizontal: var(--ti-common-space-0, 0px);
25+
--tv-Loading-text-margin-x: 0;
26+
2827
// 全屏加载图标small尺寸时的宽度
29-
--ti-loading-fullscreen-small-width: 16px;
28+
--tv-Loading-fullscreen-small-width: var(--tv-icon-size);
3029
// 全屏加载图标medium尺寸时的宽度
31-
--ti-loading-fullscreen-medium-width: 24px;
30+
--tv-Loading-fullscreen-medium-width: var(--tv-size-height-xs);
3231
// 全屏加载图标large尺寸时的宽度
33-
--ti-loading-fullscreen-large-width: 32px;
32+
--tv-Loading-fullscreen-large-width: var(--tv-size-height-md);
33+
3434
// 全屏加载图标small尺寸时的高度
35-
--ti-loading-fullscreen-small-height: 16px;
35+
--tv-Loading-fullscreen-small-height: var(--tv-icon-size);
3636
// 全屏加载图标medium尺寸时的高度
37-
--ti-loading-fullscreen-medium-height: 24px;
37+
--tv-Loading-fullscreen-medium-height: var(--tv-size-height-xs);
3838
// 全屏加载图标large尺寸时的高度
39-
--ti-loading-fullscreen-large-height: 32px;
39+
--tv-Loading-fullscreen-large-height: var(--tv-size-height-md);
40+
4041
// 默认加载图标small尺寸时的高度
41-
--ti-loading-spinner-small-height: 16px;
42+
--tv-Loading-spinner-small-height: var(--tv-icon-size);
4243
// 默认加载图标medium尺寸时的高度
43-
--ti-loading-spinner-medium-height: 24px;
44+
--tv-Loading-spinner-medium-height: var(--tv-size-height-xs);
4445
// 默认加载图标large尺寸时的高度
45-
--ti-loading-spinner-large-height: 32px;
46+
--tv-Loading-spinner-large-height: var(--tv-size-height-md);
47+
4648
// 默认加载图标small尺寸时的宽度
47-
--ti-loading-spinner-small-width: 16px;
49+
--tv-Loading-spinner-small-width: var(--tv-icon-size);
4850
// 默认加载图标medium尺寸时的宽度
49-
--ti-loading-spinner-medium-width: 24px;
51+
--tv-Loading-spinner-medium-width: var(--tv-size-height-xs);
5052
// 默认加载图标large尺寸时的宽度
51-
--ti-loading-spinner-large-width: 32px;
53+
--tv-Loading-spinner-large-width: var(--tv-size-height-md);
5254
}

0 commit comments

Comments
 (0)