1 | ////
|
2 | /// @module timeline: 时间轴
|
3 | /// @tag Timeline
|
4 | /// @category component
|
5 | /// @family data-display
|
6 | /// @varPrefix $timeline-
|
7 | /// @classPrefix {prefix}-timeline
|
8 | /// @order {"size/node":10,"size/divider":11,"size/content":12,"size/expand button":13,"statement/normal":10,"statement/normal/content":100,"statement/normal/divider":101,"statement/normal/expand button":102,"statement/hover":11,"statement/hover/expand button":110,"statement/done":12,"statement/done/node":120,"statement/process":13,"statement/process/node":130,"statement/success":14,"statement/success/node":140,"statement/error":15,"statement/error/node":150}
|
9 | ////
|
10 |
|
11 | $timeline-prefix: '.' + $css-prefix + 'timeline';
|
12 |
|
13 | $timeline-icon-prefix: '.' + $css-prefix + 'icon';
|
14 |
|
15 | /// size
|
16 | /// @namespace size/node
|
17 | $timeline-item-node-size: $s-4 !default;
|
18 |
|
19 | /// custom node size
|
20 | /// @namespace size/node
|
21 | $timeline-item-custom-node-size: $s-10 !default;
|
22 |
|
23 | /// custom node font size
|
24 | /// @namespace size/node
|
25 | $timeline-item-custom-node-font-size: $font-size-caption !default;
|
26 |
|
27 | /// padding (t, b)
|
28 | /// @namespace size/node
|
29 | $timeline-item-node-padding: $s-1 !default;
|
30 |
|
31 | /// dot size
|
32 | /// @namespace size/node
|
33 | $timeline-item-dot-size: $s-2 !default;
|
34 |
|
35 | /// icon size
|
36 | /// @namespace size/node
|
37 | $timeline-item-icon-size: $icon-xs !default;
|
38 |
|
39 | /// line width
|
40 | /// @namespace size/divider
|
41 | $timeline-item-tail-size: $line-1 !default;
|
42 |
|
43 | /// left content width
|
44 | /// @namespace size/content
|
45 | $timeline-item-left-content-width: $s-20 !default;
|
46 |
|
47 | /// margin (l)
|
48 | /// @namespace size/content
|
49 | $timeline-item-content-margin-left: $s-3 !default;
|
50 |
|
51 | // will [depreacated] in 2.x, fixed to $s-1;
|
52 | /// margin (t)
|
53 | /// @namespace size/content
|
54 | $timeline-item-body-margin-top: $s-1 !default;
|
55 |
|
56 | /// title text
|
57 | /// @namespace size/content
|
58 | $timeline-item-title-font-size: $font-size-body-1 !default;
|
59 |
|
60 | /// title weight
|
61 | /// @namespace size/content
|
62 | $timeline-item-title-font-weight: $font-weight-3 !default;
|
63 |
|
64 | /// title margin (t)
|
65 | /// @namespace size/content
|
66 | $timeline-item-title-margin-top: $s-1 !default;
|
67 |
|
68 | /// time margin (t)
|
69 | /// @namespace size/content
|
70 | $timeline-item-time-margin-top: $s-1 !default;
|
71 |
|
72 | /// time margin (b)
|
73 | /// @namespace size/content
|
74 | $timeline-item-time-margin-bottom: $s-3 !default;
|
75 |
|
76 | /// body text
|
77 | /// @namespace size/content
|
78 | $timeline-item-body-font-size: $font-size-caption !default;
|
79 |
|
80 | /// left time text
|
81 | /// @namespace size/content
|
82 | $timeline-item-left-body-font-size: $font-size-caption !default;
|
83 |
|
84 | /// time text
|
85 | /// @namespace size/content
|
86 | $timeline-item-time-font-size: $font-size-caption !default;
|
87 |
|
88 | /// text
|
89 | /// @namespace size/expand button
|
90 | $timeline-item-folder-font-size: $font-size-caption !default;
|
91 |
|
92 | /// margin (t)
|
93 | /// @namespace size/expand button
|
94 | $timeline-item-folder-margin-top: $s-1 !default;
|
95 |
|
96 | /// margin (b)
|
97 | /// @namespace size/expand button
|
98 | $timeline-item-folder-margin-bottom: $s-1 !default;
|
99 |
|
100 | /// title text
|
101 | /// @namespace statement/normal/content
|
102 | $timeline-item-title-color: $color-text1-4 !default;
|
103 |
|
104 | /// body text
|
105 | /// @namespace statement/normal/content
|
106 | $timeline-item-body-color: $color-text1-3 !default;
|
107 |
|
108 | /// left body text
|
109 | /// @namespace statement/normal/content
|
110 | $timeline-item-left-body-color: $color-text1-2 !default;
|
111 |
|
112 | /// time text
|
113 | /// @namespace statement/normal/content
|
114 | $timeline-item-time-color: $color-text1-2 !default;
|
115 |
|
116 | /// color
|
117 | /// @namespace statement/normal/divider
|
118 | $timeline-item-tail-color: $color-line1-2 !default;
|
119 |
|
120 | /// dot size
|
121 | /// @namespace statement/done/node
|
122 | $timeline-item-done-dot-size: $s-2 !default;
|
123 |
|
124 | /// background
|
125 | /// @namespace statement/done/node
|
126 | $timeline-item-done-background: $color-line1-3 !default;
|
127 |
|
128 | /// color
|
129 | /// @namespace statement/done/node
|
130 | $timeline-item-done-color: $color-white !default;
|
131 |
|
132 | /// dot size
|
133 | /// @namespace statement/process/node
|
134 | $timeline-item-process-dot-size: $s-2 !default;
|
135 |
|
136 | /// background
|
137 | /// @namespace statement/process/node
|
138 | $timeline-item-process-background: $color-brand1-6 !default;
|
139 |
|
140 | /// color
|
141 | /// @namespace statement/process/node
|
142 | $timeline-item-process-color: $color-white !default;
|
143 |
|
144 | /// dot size
|
145 | /// @namespace statement/success/node
|
146 | $timeline-item-success-dot-size: $s-2 !default;
|
147 |
|
148 | /// background
|
149 | /// @namespace statement/success/node
|
150 | $timeline-item-success-background: $color-success-3 !default;
|
151 |
|
152 | /// color
|
153 | /// @namespace statement/success/node
|
154 | $timeline-item-success-color: $color-white !default;
|
155 |
|
156 | /// dot size
|
157 | /// @namespace statement/error/node
|
158 | $timeline-item-error-dot-size: $s-2 !default;
|
159 |
|
160 | /// background
|
161 | /// @namespace statement/error/node
|
162 | $timeline-item-error-background: $color-error-3 !default;
|
163 |
|
164 | /// color
|
165 | /// @namespace statement/error/node
|
166 | $timeline-item-error-color: $color-white !default;
|