UNPKG

4.68 kBSCSSView Raw
1////
2/// @module progress: 进度指示
3/// @tag Progress
4/// @category component
5/// @family data-display
6/// @varPrefix $progress-
7/// @classPrefix {prefix}-progress
8/// @order {"size/bounding":10,"size/text":11,"size/circle":12,"statement/normal":10,"statement/normal/underlay":100,"statement/normal/overlay":101,"statement/normal/text":102,"statement/error":11,"statement/error/overlay":110,"statement/success":12,"statement/success/overlay":120,"statement/started":13,"statement/started/overlay":130,"statement/middle":14,"statement/middle/overlay":140,"statement/finishing":15,"statement/finishing/overlay":150}
9////
10
11
12$progress-prefix: '.' + $css-prefix + 'progress';
13
14$progress-easing: cubic-bezier(.65, .2, .35, 1);
15
16// 条形
17// ----------------------------------------
18
19/// height
20/// @namespace size/bounding
21$progress-line-height-size-l: $s-3 !default;
22
23/// height
24/// @namespace size/bounding
25$progress-line-height-size-m: $s-2 !default;
26
27/// height
28/// @namespace size/bounding
29$progress-line-height-size-s: $s-1 !default;
30
31/// border width
32/// @namespace size/bounding
33$progress-line-underlay-border-width: $line-1 !default;
34
35/// size
36/// @namespace size/text
37$progress-line-font-l: $font-size-body-1 !default;
38/// size
39/// @namespace size/text
40$progress-line-font-m: $font-size-caption !default;
41/// size
42/// @namespace size/text
43$progress-line-font-s: $font-size-caption !default;
44
45/// background
46/// @supportGradient
47/// @namespace statement/normal/underlay
48$progress-line-underlay-color: $color-fill1-3 !default;
49
50/// border color
51/// @namespace statement/normal/underlay
52$progress-line-underlay-border-color: $color-line1-2 !default;
53
54/// corner
55/// @namespace statement/normal/overlay
56$progress-line-radius-l: $corner-3 !default;
57
58/// corner
59/// @namespace statement/normal/overlay
60$progress-line-radius-m: $corner-3 !default;
61
62/// corner
63/// @namespace statement/normal/overlay
64$progress-line-radius-s: $corner-3 !default;
65
66/// color
67/// @namespace statement/normal/text
68$progress-line-font-color: $color-text1-4 !default;
69
70/// background
71/// @supportGradient
72/// @namespace statement/normal/overlay
73$progress-line-normal-color: $color-brand1-6 !default;
74
75/// background
76/// @supportGradient
77/// @namespace statement/error/overlay
78$progress-line-error-color: $color-error-3 !default;
79
80/// background
81/// @supportGradient
82/// @namespace statement/success/overlay
83$progress-line-success-color: $color-success-3 !default;
84
85/// background
86/// @supportGradient
87/// @namespace statement/started/overlay
88$progress-line-started-color: $color-error-3 !default;
89/// background
90/// @supportGradient
91/// @namespace statement/middle/overlay
92$progress-line-middle-color: $color-warning-3 !default;
93/// background
94/// @supportGradient
95/// @namespace statement/finishing/overlay
96$progress-line-finishing-color: $color-success-3 !default;
97
98// 圆形
99// ----------------------------------------
100
101/// diameter
102/// @namespace size/circle
103$progress-circle-size-l: $s-33 !default;
104
105/// diameter
106/// @namespace size/circle
107$progress-circle-size-m: $s-29 !default;
108
109/// diameter
110/// @namespace size/circle
111$progress-circle-size-s: $s-25 !default;
112
113/// underlay width
114/// @namespace size/circle
115$progress-circle-underlay-width: $s-2 !default;
116
117/// overlay width
118/// @namespace size/circle
119$progress-circle-overlay-width: $s-2 !default;
120
121/// size
122/// @namespace size/text
123$progress-circle-font-l: $font-size-display-1 !default;
124
125/// size
126/// @namespace size/text
127$progress-circle-font-m: $font-size-headline !default;
128
129/// size
130/// @namespace size/text
131$progress-circle-font-s: $font-size-title !default;
132
133/// stroke color
134/// @namespace statement/normal/underlay
135$progress-circle-underlay-color: $color-fill1-3 !default;
136
137/// color
138/// @namespace statement/normal/text
139$progress-circle-text-color: $color-text1-4 !default;
140
141/// stroke corner
142/// @type ['butt', 'round', 'square']
143/// @namespace statement/normal/overlay
144$progress-circle-corner: round !default; // butt|round|square
145
146/// stroke color
147/// @namespace statement/normal/overlay
148$progress-circle-normal-color: $color-brand1-6 !default;
149
150/// stroke color
151/// @namespace statement/error/overlay
152$progress-circle-error-color: $color-error-3 !default;
153
154/// stroke color
155/// @namespace statement/success/overlay
156$progress-circle-success-color: $color-success-3 !default;
157
158/// stroke color
159/// @namespace statement/started/overlay
160$progress-circle-started-color: $color-error-3 !default;
161
162/// stroke color
163/// @namespace statement/middle/overlay
164$progress-circle-middle-color: $color-warning-3 !default;
165
166/// stroke color
167/// @namespace statement/finishing/overlay
168$progress-circle-finishing-color: $color-success-3 !default;