1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | @mixin step-item-state-rtl(
|
7 | $shape: 'circle',
|
8 | $background: $color-white
|
9 | ) {
|
10 | #{$step-prefix}-item-node-dot {
|
11 | right: 50%;
|
12 | left: auto;
|
13 | }
|
14 |
|
15 | @if ($shape == 'arrow') {
|
16 | background: $background;
|
17 |
|
18 | &:before {
|
19 | border: $step-arrow-item-border-width solid $background;
|
20 | border-right-color: transparent;
|
21 | }
|
22 |
|
23 | &:after {
|
24 | border-right-color: $background;
|
25 | border-left-color: transparent;
|
26 | }
|
27 | }
|
28 | }
|
29 |
|
30 | @mixin state-node-size-rtl($type: 'hor', $shape: 'circle', $node-size: $s-8) {
|
31 | @if ($type == 'hor') {
|
32 | @if ($shape == 'circle') {
|
33 | & > #{$step-prefix}-item-body {
|
34 | right: calc(0px - (#{$step-circle-item-body-width} - #{$node-size} - #{$step-circle-item-node-padding} * 2) / 2);
|
35 | left: auto;
|
36 | }
|
37 | }
|
38 | @if ($shape == 'dot') {
|
39 | & > #{$step-prefix}-item-body {
|
40 | right: calc(0px - (#{$step-dot-item-body-width} - #{$node-size} - #{$step-dot-item-dot-padding} * 2) / 2);
|
41 | left: auto;
|
42 | }
|
43 | }
|
44 | }
|
45 |
|
46 | @if ($type == 'ver') {
|
47 | @if ($shape == 'circle') {
|
48 |
|
49 | & > #{$step-prefix}-item-body {
|
50 | right: calc(#{$node-size} / 2);
|
51 | left: auto;
|
52 | margin-right: $step-circle-item-node-padding;
|
53 | margin-left: 0;
|
54 | & > #{$step-prefix}-item-title {
|
55 | text-align: right;
|
56 | @include reset-font;
|
57 | }
|
58 | & > #{$step-prefix}-item-content {
|
59 | text-align: right;
|
60 | }
|
61 | }
|
62 | }
|
63 |
|
64 | @if ($shape == 'dot') {
|
65 | & > #{$step-prefix}-item-body {
|
66 | right: calc(#{$node-size} / 2);
|
67 | left: auto;
|
68 | margin-right: $step-dot-item-dot-padding;
|
69 | margin-left: 0;
|
70 | & > #{$step-prefix}-item-title {
|
71 | text-align: right;
|
72 | @include reset-font;
|
73 | }
|
74 | & > #{$step-prefix}-item-content {
|
75 | text-align: right;
|
76 | }
|
77 | }
|
78 | }
|
79 | }
|
80 | }
|
81 |
|
82 |
|
83 | @mixin label-placement-rtl($node-size: $s-8) {
|
84 |
|
85 | #{$step-prefix}-item-body {
|
86 | left: auto;
|
87 | right: 0;
|
88 | text-align: right;
|
89 | #{$step-prefix}-item-title {
|
90 | padding-left: $step-circle-item-node-padding;
|
91 | padding-right: 0;
|
92 | }
|
93 | }
|
94 |
|
95 | #{$step-prefix}-item-tail {
|
96 | left: 0;
|
97 | right: auto;
|
98 | }
|
99 | }
|
100 |
|
101 |
|
102 | #{$step-prefix}-horizontal[dir="rtl"] {
|
103 | & > #{$step-prefix}-item {
|
104 | text-align: right;
|
105 | }
|
106 | }
|
107 |
|
108 | #{$step-prefix}-arrow[dir="rtl"] {
|
109 | #{$step-prefix}-item {
|
110 | @include step-item-size(
|
111 | $step-arrow-item-height,
|
112 | auto,
|
113 | calc(#{$step-arrow-item-height} / 8),
|
114 | calc(#{$step-arrow-item-height} / 2)
|
115 | );
|
116 |
|
117 | &:before {
|
118 | right: calc(0px - #{$step-arrow-item-border-width});
|
119 | left: auto;
|
120 | border: $step-arrow-item-border-width solid transparent;
|
121 | border-right-color: transparent;
|
122 | }
|
123 |
|
124 | &:after {
|
125 | left: calc(0px - #{$step-arrow-item-border-width} * 2);
|
126 | right: auto;
|
127 | border-top: $step-arrow-item-border-width solid transparent;
|
128 | border-bottom: $step-arrow-item-border-width solid transparent;
|
129 | border-right: $step-arrow-item-border-width solid transparent;
|
130 | }
|
131 | }
|
132 |
|
133 | & > #{$step-prefix}-item-wait {
|
134 | @include step-item-state-rtl(
|
135 | 'arrow',
|
136 | $step-arrow-item-wait-background
|
137 | );
|
138 | }
|
139 |
|
140 | & > #{$step-prefix}-item-process {
|
141 | @include step-item-state-rtl(
|
142 | 'arrow',
|
143 | $step-arrow-item-process-background
|
144 | );
|
145 | }
|
146 |
|
147 | & > #{$step-prefix}-item-finish {
|
148 | @include step-item-state-rtl(
|
149 | 'arrow',
|
150 | $step-arrow-item-finish-background
|
151 | );
|
152 | }
|
153 |
|
154 | #{$step-prefix}-item-disabled {
|
155 | @include step-item-state-rtl(
|
156 | 'arrow',
|
157 | $step-arrow-item-disabled-background
|
158 | );
|
159 | }
|
160 |
|
161 | #{$step-prefix}-item-first {
|
162 | margin-right: 0;
|
163 | }
|
164 |
|
165 | #{$step-prefix}-item-last {
|
166 | margin-left: 0;
|
167 | }
|
168 | }
|
169 |
|
170 |
|
171 |
|
172 |
|
173 |
|
174 | #{$step-prefix}-circle[dir="rtl"] {
|
175 |
|
176 | & > #{$step-prefix}-item-wait {
|
177 | @include step-item-state-rtl(
|
178 | 'circle',
|
179 | $step-circle-item-node-wait-background
|
180 | );
|
181 | }
|
182 |
|
183 | & > #{$step-prefix}-item-process {
|
184 | @include step-item-state-rtl(
|
185 | 'circle',
|
186 | $step-circle-item-node-process-background
|
187 | );
|
188 | }
|
189 |
|
190 | & > #{$step-prefix}-item-finish {
|
191 | @include step-item-state-rtl(
|
192 | 'circle',
|
193 | $step-circle-item-node-finish-background
|
194 | );
|
195 | }
|
196 |
|
197 | #{$step-prefix}-item-disabled {
|
198 | @include step-item-state-rtl(
|
199 | 'circle',
|
200 | $step-circle-item-node-disabled-background
|
201 | );
|
202 | }
|
203 |
|
204 |
|
205 |
|
206 |
|
207 | &#{$step-prefix}-horizontal {
|
208 |
|
209 | & > #{$step-prefix}-item-wait {
|
210 | @include state-node-size-rtl('hor', 'circle', $step-circle-item-node-process-size);
|
211 | }
|
212 | & > #{$step-prefix}-item-process {
|
213 | @include state-node-size-rtl('hor', 'circle', $step-circle-item-node-process-size);
|
214 | }
|
215 | & > #{$step-prefix}-item-finish {
|
216 | @include state-node-size-rtl('hor', 'circle', $step-circle-item-node-process-size);
|
217 | }
|
218 | & > #{$step-prefix}-item-disabled {
|
219 | @include state-node-size-rtl('hor', 'circle', $step-circle-item-node-process-size);
|
220 | }
|
221 | }
|
222 |
|
223 | &#{$step-prefix}-horizontal#{$step-prefix}-label-horizontal {
|
224 | & > #{$step-prefix}-item-wait {
|
225 | @include label-placement-rtl($step-circle-item-node-process-size);
|
226 | }
|
227 | & > #{$step-prefix}-item-process {
|
228 | @include label-placement-rtl($step-circle-item-node-process-size);
|
229 | }
|
230 | & > #{$step-prefix}-item-finish {
|
231 | @include label-placement-rtl($step-circle-item-node-process-size);
|
232 | }
|
233 | & > #{$step-prefix}-item-disabled {
|
234 | @include label-placement-rtl($step-circle-item-node-process-size);
|
235 | }
|
236 | }
|
237 |
|
238 |
|
239 |
|
240 | &#{$step-prefix}-vertical {
|
241 |
|
242 | & > #{$step-prefix}-item-wait {
|
243 | @include state-node-size-rtl('ver', 'circle', $step-circle-item-node-process-size);
|
244 | }
|
245 | & > #{$step-prefix}-item-process {
|
246 | @include state-node-size-rtl('ver', 'circle', $step-circle-item-node-process-size);
|
247 | }
|
248 | & > #{$step-prefix}-item-finish {
|
249 | @include state-node-size-rtl('ver', 'circle', $step-circle-item-node-process-size);
|
250 | }
|
251 | & > #{$step-prefix}-item-disabled {
|
252 | @include state-node-size-rtl('ver', 'circle', $step-circle-item-node-process-size);
|
253 | }
|
254 | }
|
255 | }
|
256 |
|
257 |
|
258 |
|
259 |
|
260 |
|
261 |
|
262 | #{$step-prefix}-dot[dir="rtl"] {
|
263 | & > #{$step-prefix}-item-wait {
|
264 | @include step-item-state-rtl(
|
265 | 'dot',
|
266 | $step-dot-item-node-wait-background
|
267 | );
|
268 | }
|
269 |
|
270 | & > #{$step-prefix}-item-process {
|
271 | @include step-item-state-rtl(
|
272 | 'dot',
|
273 | $step-dot-item-node-process-background
|
274 | );
|
275 | }
|
276 |
|
277 | & > #{$step-prefix}-item-finish {
|
278 | @include step-item-state-rtl(
|
279 | 'dot',
|
280 | $step-dot-item-node-finish-background
|
281 | );
|
282 | }
|
283 |
|
284 | #{$step-prefix}-item-disabled {
|
285 | @include step-item-state-rtl(
|
286 | 'dot',
|
287 | $step-dot-item-node-disabled-background
|
288 | );
|
289 | }
|
290 |
|
291 |
|
292 |
|
293 | &#{$step-prefix}-horizontal {
|
294 | & > #{$step-prefix}-item-wait {
|
295 | @include state-node-size-rtl('hor', 'dot', $step-dot-item-dot-process-size);
|
296 | }
|
297 | & > #{$step-prefix}-item-process {
|
298 | @include state-node-size-rtl('hor', 'dot', $step-dot-item-dot-process-size);
|
299 | }
|
300 | & > #{$step-prefix}-item-finish {
|
301 | @include state-node-size-rtl('hor', 'dot', $step-dot-item-dot-process-size);
|
302 | }
|
303 | & > #{$step-prefix}-item-disabled {
|
304 | @include state-node-size-rtl('hor', 'dot', $step-dot-item-dot-process-size);
|
305 | }
|
306 | }
|
307 |
|
308 |
|
309 |
|
310 | &#{$step-prefix}-vertical {
|
311 | padding: 0 4px 0 0;
|
312 | & > #{$step-prefix}-item-wait {
|
313 | @include state-node-size-rtl('ver', 'dot', $step-dot-item-dot-process-size);
|
314 | }
|
315 | & > #{$step-prefix}-item-process {
|
316 | @include state-node-size-rtl('ver', 'dot', $step-dot-item-dot-process-size);
|
317 | }
|
318 | & > #{$step-prefix}-item-finish {
|
319 | @include state-node-size-rtl('ver', 'dot', $step-dot-item-dot-process-size);
|
320 | }
|
321 | & > #{$step-prefix}-item-disabled {
|
322 | @include state-node-size-rtl('ver', 'dot', $step-dot-item-dot-process-size);
|
323 | }
|
324 | }
|
325 | }
|