Skip to content

Commit c329b5f

Browse files
chenxi-20chenxi-20
committed
refactor(progress): 重构progress主题
1 parent 69b6208 commit c329b5f

File tree

5 files changed

+114
-119
lines changed

5 files changed

+114
-119
lines changed

‎packages/theme/src/mixins/progress.less

-25
This file was deleted.

‎packages/theme/src/progress/aurora-theme.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
export const tinyProgressAuroraTheme = {
2-
'ti-progress-warning-bg-color': '#fa8c16'
2+
'tv-Progress-bg-color-warning': '#fa8c16'
33
}

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

+87-72
Original file line numberDiff line numberDiff line change
@@ -10,67 +10,110 @@
1010
*
1111
*/
1212

13-
@import '../mixins/progress.less';
1413
@import '../custom.less';
1514
@import './vars.less';
1615

1716
@progress-prefix-cls: ~'@{css-prefix}progress';
1817

1918
.@{progress-prefix-cls} {
20-
.component-css-vars-progress();
19+
.inject-Progress-vars();
2120

2221
position: relative;
22+
display: flex;
23+
align-items: center;
2324
line-height: 1;
24-
display: flex; // smb新增
25-
align-items: center; // smb新增
25+
26+
/** 横向条自身默认场景 */
27+
&-bar {
28+
width: 100%;
29+
-webkit-box-sizing: border-box;
30+
box-sizing: border-box;
31+
32+
&__outer {
33+
position: relative;
34+
height: 6px;
35+
overflow: hidden;
36+
vertical-align: middle;
37+
background-color: var(--tv-Progress-outer-bg-color);
38+
}
39+
40+
&__inner {
41+
position: absolute;
42+
left: 0;
43+
top: 0;
44+
height: 100%;
45+
line-height: 1;
46+
text-align: right;
47+
white-space: nowrap;
48+
background-color: var(--tv-Progress-inner-bg-color);
49+
transition: width 0.6s ease;
50+
51+
&::after {
52+
content: '';
53+
height: 100%;
54+
}
55+
}
56+
57+
&__innerText {
58+
margin: 0 5px;
59+
font-size: var(--tv-Progress-inner-font-size);
60+
color: var(--tv-Progress-inner-text-color);
61+
}
62+
63+
&,
64+
&__inner::after,
65+
&__innerText {
66+
display: inline-block;
67+
vertical-align: middle;
68+
}
69+
}
70+
71+
/** 横向条状态场景 */
72+
.progress-status(@color) {
73+
.@{progress-prefix-cls}-bar__inner {
74+
background-color: @color;
75+
}
76+
77+
.@{progress-prefix-cls}__text svg {
78+
fill: @color;
79+
}
80+
}
2681

2782
&.is-success {
28-
.progress-status(var(--ti-progress-success-bg-color));
83+
.progress-status(var(--tv-Progress-bg-color-success));
2984
}
3085

3186
&.is-warning {
32-
.progress-status(var(--ti-progress-warning-bg-color));
87+
.progress-status(var(--tv-Progress-bg-color-warning));
3388
}
3489

3590
&.is-exception {
36-
.progress-status(var(--ti-progress-exception-bg-color));
91+
.progress-status(var(--tv-Progress-bg-color-exception));
3792
}
3893

94+
/** 右侧文字场景 */
3995
&__text {
40-
font-size: var(--ti-progress-text-font-size);
41-
color: var(--ti-progress-text-color);
4296
display: inline-block;
43-
vertical-align: middle;
44-
margin-left: var(--ti-progress-bar-text-margin-left); // smb新增
97+
margin-left: var(--tv-Progress-right-text-margin-left);
98+
font-size: 14px;
4599
line-height: 1;
100+
vertical-align: middle;
46101
white-space: nowrap;
102+
color: var(--tv-Progress-right-text-color);
47103

48104
i {
49-
vertical-align: middle;
50105
display: inline-block;
106+
vertical-align: middle;
51107
}
52108
}
53109

54-
&--circle,
55-
&--dashboard {
56-
display: inline-block;
57-
58-
.@{progress-prefix-cls}__text {
59-
top: 50%;
60-
position: absolute;
61-
width: 100%;
62-
text-align: center;
63-
margin: 0;
64-
transform: translate(0, -50%);
65-
left: 0;
66-
67-
i {
68-
display: inline-block;
69-
vertical-align: middle;
70-
}
71-
}
110+
/** 内侧文字场景 */
111+
&--text-inside &-bar {
112+
margin-right: 0;
113+
padding-right: 0;
72114
}
73115

116+
/** 隐藏文字场景 */
74117
&--without-text &__text {
75118
display: none;
76119
}
@@ -81,53 +124,25 @@
81124
display: block;
82125
}
83126

84-
&--text-inside &-bar {
85-
padding-right: 0;
86-
margin-right: 0;
87-
}
88-
89-
&-bar {
90-
width: 100%;
91-
-webkit-box-sizing: border-box;
92-
box-sizing: border-box;
93-
94-
&__outer {
95-
height: 6px;
96-
background-color: var(--ti-progress-bar-outer-bg-color);
97-
overflow: hidden;
98-
position: relative;
99-
vertical-align: middle;
100-
}
127+
/** 圆环类型场景 */
128+
&--circle,
129+
&--dashboard {
130+
display: inline-block;
101131

102-
&__inner {
103-
background-color: var(--ti-progress-bar-inner-bg-color);
104-
text-align: right;
105-
left: 0;
132+
.@{progress-prefix-cls}__text {
106133
position: absolute;
107-
top: 0;
108-
height: 100%;
109-
line-height: 1;
110-
white-space: nowrap;
111-
transition: width 0.6s ease;
134+
left: 0;
135+
top: 50%;
136+
transform: translate(0, -50%);
137+
margin: 0;
138+
width: 100%;
139+
text-align: center;
112140

113-
&::after {
114-
content: '';
115-
height: 100%;
141+
i {
142+
display: inline-block;
143+
vertical-align: middle;
116144
}
117145
}
118-
119-
&__innerText {
120-
color: var(--ti-progress-bar-inner-text-color);
121-
font-size: var(--ti-progress-text-font-size);
122-
margin: 0 5px;
123-
}
124-
125-
&,
126-
&__inner::after,
127-
&__innerText {
128-
display: inline-block;
129-
vertical-align: middle;
130-
}
131146
}
132147
}
133148

‎packages/theme/src/progress/old-theme.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const tinyProgressOldTheme = {
2-
'ti-progress-exception-bg-color': 'var(--ti-common-bg-primary, #c7000b)',
3-
'ti-progress-bar-text-margin-left': 'var(--ti-common-space-2x, 8px)',
4-
'ti-progress-bar-inner-bg-color': 'var(--ti-common-color-bg-emphasize, #5e7ce0)',
5-
'ti-progress-bar-outer-bg-color': 'var(--ti-common-color-bg-disabled, #f5f5f6)'
2+
'tv-Progress-bg-color-exception': 'var(--ti-common-bg-primary, #c7000b)',
3+
'tv-Progress-right-text-margin-left': 'var(--ti-common-space-2x, 8px)',
4+
'tv-Progress-inner-bg-color': 'var(--ti-common-color-bg-emphasize, #5e7ce0)',
5+
'tv-Progress-outer-bg-color': 'var(--ti-common-color-bg-disabled, #f5f5f6)'
66
}

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

+22-17
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,28 @@
1010
*
1111
*/
1212

13-
.component-css-vars-progress() {
14-
// 进度条默认文本色
15-
--ti-progress-text-color: var(--ti-common-color-text-primary, #191919);
16-
// 进度条内层文本字号
17-
--ti-progress-text-font-size: var(--ti-common-font-size-base, 14px);
18-
// 横向条未完成部分背景色
19-
--ti-progress-bar-outer-bg-color: #E6E6E6;
20-
// 横向条已完成部分背景色
21-
--ti-progress-bar-inner-bg-color: var(--ti-common-color-data-4, #5cb300);
13+
.inject-Progress-vars() {
14+
/** 横向条自身默认场景 */
15+
// 横向条未完成背景色
16+
--tv-Progress-outer-bg-color: var(--tv-color-bg-gray-2, #e6e6e6);
17+
// 横向条已完成背景色
18+
--tv-Progress-inner-bg-color: var(--tv-color-success-bg, #5cb300);
19+
// 横向条内层文本字号
20+
--tv-Progress-inner-font-size: var(--tv-font-size-md, 14px);
2221
// 横向条内层文本色
23-
--ti-progress-bar-inner-text-color: var(--ti-common-color-light, #ffffff);
22+
--tv-Progress-inner-text-color: var(--tv-color-text-white, #ffffff);
23+
24+
/** 横向条状态场景 */
25+
// success状态横向条已完成背景色
26+
--tv-Progress-bg-color-success: var(--tv-color-success-bg, #5cb300);
27+
// warning状态横向条已完成背景色
28+
--tv-Progress-bg-color-warning: var(--tv-color-warn-bg, #ff8800);
29+
// exception状态横向条已完成背景色
30+
--tv-Progress-bg-color-exception: #c7000b;
31+
32+
/** 右侧文字场景 */
2433
// 横向条右侧文字左外边距
25-
--ti-progress-bar-text-margin-left: var(--ti-common-space-3x, 12px);
26-
// success状态横向条已完成部分背景色
27-
--ti-progress-success-bg-color: var(--ti-common-color-success-normal, #5cb300);
28-
// warning状态横向条已完成部分背景色
29-
--ti-progress-warning-bg-color: var(--ti-common-color-warning-normal, #ff8800);
30-
// exception状态横向条已完成部分背景色
31-
--ti-progress-exception-bg-color: #c7000b;
34+
--tv-Progress-right-text-margin-left: var(--tv-space-lg, 12px);
35+
// 进度条右侧文本色
36+
--tv-Progress-right-text-color: var(--tv-color-text, #191919);
3237
}

0 commit comments

Comments
 (0)