1 | @import "../node_modules/tinper-bee-core/scss/minxin-variables";
|
2 | @import "../node_modules/tinper-bee-core/scss/minxin-mixins";
|
3 | .u-steps {
|
4 | font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
5 | font-size: 14px;
|
6 | font-variant: tabular-nums;
|
7 | line-height: 1.5;
|
8 | color: $font-color-base;
|
9 | -webkit-box-sizing: border-box;
|
10 | box-sizing: border-box;
|
11 | margin: 0;
|
12 | padding: 0;
|
13 | list-style: none;
|
14 | font-size: 0;
|
15 | width: 100%;
|
16 | display: -webkit-box;
|
17 | display: -webkit-flex;
|
18 | display: -ms-flexbox;
|
19 | display: flex;
|
20 | .u-steps-item {
|
21 | position: relative;
|
22 | display: inline-block;
|
23 | vertical-align: top;
|
24 | -webkit-box-flex: 1;
|
25 | -webkit-flex: 1;
|
26 | -ms-flex: 1;
|
27 | flex: 1;
|
28 | overflow: hidden;
|
29 | }
|
30 | .u-steps-item:last-child {
|
31 | -webkit-box-flex: 0;
|
32 | -webkit-flex: none;
|
33 | -ms-flex: none;
|
34 | flex: none;
|
35 | }
|
36 | .u-steps-item:last-child .u-steps-item-tail,
|
37 | .u-steps-item:last-child .u-steps-item-title:after {
|
38 | display: none;
|
39 | }
|
40 | .uf {
|
41 | font-size: 22px;
|
42 | }
|
43 | .uicon {
|
44 | display: inline-block;
|
45 | font-family: uf;
|
46 | }
|
47 | }
|
48 |
|
49 | .u-steps-item-icon,
|
50 | .u-steps-item-content {
|
51 | display: block;
|
52 |
|
53 | }
|
54 |
|
55 | .u-steps-item-icon {
|
56 | box-sizing: border-box;
|
57 | border: 1px solid rgba(0, 0, 0, 0.25);
|
58 | width: 32px;
|
59 | height: 32px;
|
60 | line-height: 32px;
|
61 | text-align: center;
|
62 | border-radius: 32px;
|
63 | font-size: 16px;
|
64 | margin-right: 8px;
|
65 | -webkit-transition: background-color 0.3s, border-color 0.3s;
|
66 | transition: background-color 0.3s, border-color 0.3s;
|
67 | font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
68 | }
|
69 | .u-steps-horizontal .u-steps-item:not(:last-child) {
|
70 | .u-steps-item-icon:after{
|
71 | content: '';
|
72 | height: 1px;
|
73 | width: 9999px;
|
74 | background: #e8e8e8;
|
75 | display: block;
|
76 | position: absolute;
|
77 | top: 16px;
|
78 | left: 40px;
|
79 | }
|
80 | &.u-steps-item-finish>.u-steps-item-icon:after {
|
81 | background-color: #a5adba;
|
82 | }
|
83 | &.u-steps-item-process>.u-steps-item-icon:after {
|
84 | background-color: #DFE1E6;
|
85 | }
|
86 | &.u-steps-item-wait>.u-steps-item-icon:after {
|
87 | background-color: #DFE1E6;
|
88 | }
|
89 | }
|
90 | .u-steps-small.u-steps-horizontal .u-steps-item:not(:last-child) .u-steps-item-icon:after {
|
91 | top: 12px;
|
92 | left: 32px;
|
93 | }
|
94 | .u-steps .u-steps-item-title:after{
|
95 | display: none;
|
96 | }
|
97 |
|
98 | .u-steps-item-icon>.u-steps-icon {
|
99 | line-height: 1;
|
100 | top: -1px;
|
101 | color: $brand-primary;
|
102 | position: relative;
|
103 | }
|
104 |
|
105 | .u-steps-item-tail {
|
106 | position: absolute;
|
107 | left: 0;
|
108 | width: 100%;
|
109 | top: 12px;
|
110 | padding: 0 10px;
|
111 | }
|
112 |
|
113 | .u-steps-item-tail:after {
|
114 | content: '';
|
115 | display: inline-block;
|
116 | background: #DFE1E6;
|
117 | height: 1px;
|
118 | border-radius: 1px;
|
119 | width: 100%;
|
120 | -webkit-transition: background .3s;
|
121 | transition: background .3s;
|
122 | }
|
123 |
|
124 | .u-steps-item-title {
|
125 | font-size: $font-size-base;
|
126 | color: $font-color-base;
|
127 | display: inline-block;
|
128 | padding-right: 16px;
|
129 | position: relative;
|
130 | line-height: 32px;
|
131 | }
|
132 |
|
133 | .u-steps-item-description {
|
134 | font-size: $font-size-base;
|
135 | color: $disabled-color-base;
|
136 | }
|
137 |
|
138 | .u-steps-item-wait .u-steps-item-icon {
|
139 | border-color: #DFE1E6;
|
140 | background-color: #DFE1E6;
|
141 | }
|
142 |
|
143 | .u-steps-item-wait .u-steps-item-icon>.u-steps-icon {
|
144 | &>.uf{
|
145 | color:#DFE1E6;
|
146 | }
|
147 | color: #fff;
|
148 | }
|
149 |
|
150 | .u-steps-item-wait .u-steps-item-icon>.u-steps-icon .u-steps-icon-dot {
|
151 | background: rgba(0, 0, 0, 0.25);
|
152 | }
|
153 |
|
154 | .u-steps-item-wait>.u-steps-item-content>.u-steps-item-title {
|
155 | color: $disabled-color-base;
|
156 | }
|
157 |
|
158 | .u-steps-item-wait>.u-steps-item-content>.u-steps-item-description {
|
159 | color: $disabled-color-base;
|
160 | }
|
161 |
|
162 | .u-steps-item-wait>.u-steps-item-tail:after {
|
163 | background-color: #DFE1E6;
|
164 | }
|
165 |
|
166 | .u-steps-item-process .u-steps-item-icon {
|
167 | border-color: #505F79;
|
168 | background-color: #fff;
|
169 | }
|
170 |
|
171 | .u-steps-item-process .u-steps-item-icon>.u-steps-icon {
|
172 | color: $brand-primary;
|
173 | }
|
174 |
|
175 | .u-steps-item-process .u-steps-item-icon>.u-steps-icon .u-steps-icon-dot {
|
176 | background: $brand-primary;
|
177 | }
|
178 |
|
179 | .u-steps-item-process>.u-steps-item-content>.u-steps-item-title {
|
180 | color: $font-color-base;
|
181 | }
|
182 |
|
183 | .u-steps-item-process>.u-steps-item-content>.u-steps-item-description {
|
184 | color: $disabled-color-base;
|
185 | }
|
186 |
|
187 | .u-steps-item-process>.u-steps-item-tail:after {
|
188 | background-color: #DFE1E6;
|
189 | }
|
190 |
|
191 | .u-steps-item-process .u-steps-item-icon {
|
192 | background: #505F79;
|
193 | }
|
194 |
|
195 | .u-steps-item-process .u-steps-item-icon>.u-steps-icon {
|
196 | color: #fff;
|
197 | }
|
198 |
|
199 | .u-steps-item-process .u-steps-item-title {
|
200 | font-weight: 500;
|
201 | }
|
202 |
|
203 | .u-steps-item-finish .u-steps-item-icon {
|
204 | border: none;
|
205 | background-color: transparent;
|
206 | }
|
207 |
|
208 | .u-steps-item-finish .u-steps-item-icon{
|
209 | .u-steps-icon {
|
210 | color: $brand-success;
|
211 | font-size: 32px;
|
212 | line-height: 32px;
|
213 | }
|
214 | .uicon:before{
|
215 | content: "\e677";
|
216 | }
|
217 | }
|
218 |
|
219 | .u-steps-item-finish .u-steps-item-icon>.u-steps-icon .u-steps-icon-dot {
|
220 | background: $brand-primary;
|
221 | }
|
222 |
|
223 | .u-steps-item-finish>.u-steps-item-content>.u-steps-item-title {
|
224 | color: $font-color-base;
|
225 | }
|
226 |
|
227 | .u-steps-item-finish>.u-steps-item-content>.u-steps-item-description {
|
228 | color: $disabled-color-base;
|
229 | }
|
230 |
|
231 | .u-steps-item-finish>.u-steps-item-tail:after {
|
232 | background-color: #a5adba;
|
233 | }
|
234 |
|
235 | .u-steps-item-error .u-steps-item-icon {
|
236 | border-color: #f5222d;
|
237 | background-color: #f5222d;
|
238 | font-size: 32px;
|
239 | }
|
240 |
|
241 | .u-steps-item-error .u-steps-item-icon{
|
242 | .u-steps-icon {
|
243 | color: #fff;
|
244 | }
|
245 | .uicon::before{
|
246 | content: "\e674";
|
247 | }
|
248 | }
|
249 |
|
250 | .u-steps-item-error .u-steps-item-icon>.u-steps-icon .u-steps-icon-dot {
|
251 | background: #f5222d;
|
252 | }
|
253 |
|
254 | .u-steps-item-error>.u-steps-item-content>.u-steps-item-title {
|
255 | color: #f5222d;
|
256 | }
|
257 |
|
258 | .u-steps-item-error>.u-steps-item-icon:after {
|
259 | background-color: #DFE1E6;
|
260 | }
|
261 |
|
262 | .u-steps-item-error>.u-steps-item-content>.u-steps-item-description {
|
263 | color: #f5222d;
|
264 | }
|
265 |
|
266 | .u-steps-item-error>.u-steps-item-tail:after {
|
267 | background-color: #DFE1E6;
|
268 | }
|
269 |
|
270 | .u-steps-item.u-steps-next-error .u-steps-item-title:after {
|
271 | display: none;
|
272 | }
|
273 |
|
274 | .u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item {
|
275 | margin-right: 8px;
|
276 | white-space: nowrap;
|
277 | }
|
278 |
|
279 | .u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item:last-child {
|
280 | margin-right: 0;
|
281 | }
|
282 |
|
283 | .u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item:last-child .u-steps-item-title {
|
284 | padding-right: 0;
|
285 | }
|
286 |
|
287 | .u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item-tail {
|
288 | display: none;
|
289 | }
|
290 |
|
291 | .u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item-description {
|
292 | max-width: 140px;
|
293 | white-space: normal;
|
294 | }
|
295 |
|
296 | .u-steps-item-custom .u-steps-item-icon {
|
297 | background: none;
|
298 | border: 0;
|
299 | width: 32px;
|
300 | height: 32px;
|
301 | }
|
302 |
|
303 | .u-steps-item-custom .u-steps-item-icon>.u-steps-icon {
|
304 | font-size: 24px;
|
305 | line-height: 32px;
|
306 | top: 0;
|
307 | left: 0.5px;
|
308 | width: 32px;
|
309 | height: 32px;
|
310 | }
|
311 |
|
312 | .u-steps-item-custom.u-steps-item-process .u-steps-item-icon>.u-steps-icon {
|
313 | color: #505F79;
|
314 | }
|
315 |
|
316 | .u-steps-small.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item {
|
317 | margin-right: 8px;
|
318 | }
|
319 |
|
320 | .u-steps-small.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item:last-child {
|
321 | margin-right: 0;
|
322 | }
|
323 |
|
324 | .u-steps-small .u-steps-item-finish .u-steps-item-icon .u-steps-icon{
|
325 | font-size: 22px;
|
326 | }
|
327 |
|
328 | .u-steps-small .u-steps-item-icon {
|
329 | width: 24px;
|
330 | height: 24px;
|
331 | line-height: 24px;
|
332 | text-align: center;
|
333 | border-radius: 24px;
|
334 | font-size: 12px;
|
335 | }
|
336 |
|
337 | .u-steps-small .u-steps-item-title {
|
338 | font-size: 14px;
|
339 | line-height: 24px;
|
340 | padding-right: 12px;
|
341 | }
|
342 |
|
343 | .u-steps-small .u-steps-item-title:after {
|
344 | display: none;
|
345 | }
|
346 |
|
347 | .u-steps-small .u-steps-item-description {
|
348 | font-size: 14px;
|
349 | color: $disabled-color-base;
|
350 | }
|
351 |
|
352 | .u-steps-small .u-steps-item-tail {
|
353 | top: 8px;
|
354 | padding: 0 8px;
|
355 | }
|
356 |
|
357 | .u-steps-small .u-steps-item-custom .u-steps-item-icon {
|
358 | width: inherit;
|
359 | height: inherit;
|
360 | line-height: inherit;
|
361 | border-radius: 0;
|
362 | border: 0;
|
363 | background: none;
|
364 | }
|
365 |
|
366 | .u-steps-small .u-steps-item-custom .u-steps-item-icon>.u-steps-icon {
|
367 | font-size: 24px;
|
368 | line-height: 24px;
|
369 | -webkit-transform: none;
|
370 | -ms-transform: none;
|
371 | transform: none;
|
372 | }
|
373 |
|
374 | .u-steps-vertical {
|
375 | display: block;
|
376 | }
|
377 |
|
378 | .u-steps-vertical .u-steps-item {
|
379 | display: block;
|
380 | overflow: visible;
|
381 | }
|
382 |
|
383 | .u-steps-vertical .u-steps-item-icon {
|
384 | float: left;
|
385 | margin-right: 12px;
|
386 | }
|
387 |
|
388 | .u-steps-vertical .u-steps-item-content {
|
389 | min-height: 48px;
|
390 | overflow: hidden;
|
391 | display: block;
|
392 | }
|
393 |
|
394 | .u-steps-vertical .u-steps-item-title {
|
395 | line-height: 32px;
|
396 | }
|
397 |
|
398 | .u-steps-vertical .u-steps-item-description {
|
399 | padding-bottom: 12px;
|
400 | }
|
401 |
|
402 | .u-steps-vertical {
|
403 | &>.u-steps-item>.u-steps-item-tail{
|
404 | position: absolute;
|
405 | left: 16px;
|
406 | top: 0;
|
407 | height: 100%;
|
408 | width: 1px;
|
409 | padding: 38px 0 6px;
|
410 | }
|
411 | }
|
412 |
|
413 | .u-steps-vertical>.u-steps-item>.u-steps-item-tail:after {
|
414 | height: 100%;
|
415 | width: 1px;
|
416 | }
|
417 |
|
418 | .u-steps-vertical>.u-steps-item:not(:last-child)>.u-steps-item-tail {
|
419 | display: block;
|
420 | }
|
421 |
|
422 | .u-steps-vertical>.u-steps-item>.u-steps-item-content>.u-steps-item-title:after {
|
423 | display: none;
|
424 | }
|
425 |
|
426 | .u-steps-vertical.u-steps-small .u-steps-item-tail {
|
427 | position: absolute;
|
428 | left: 12px;
|
429 | top: 0;
|
430 | padding: 30px 0 6px;
|
431 | }
|
432 |
|
433 | .u-steps-vertical.u-steps-small .u-steps-item-title {
|
434 | line-height: 24px;
|
435 | }
|
436 |
|
437 | @media (max-width: 480px) {
|
438 | .u-steps-horizontal.u-steps-label-horizontal {
|
439 | display: block;
|
440 | }
|
441 | .u-steps-horizontal.u-steps-label-horizontal .u-steps-item {
|
442 | display: block;
|
443 | overflow: visible;
|
444 | }
|
445 | .u-steps-horizontal.u-steps-label-horizontal .u-steps-item-icon {
|
446 | float: left;
|
447 | margin-right: 16px;
|
448 | }
|
449 | .u-steps-horizontal.u-steps-label-horizontal .u-steps-item-content {
|
450 | min-height: 48px;
|
451 | overflow: hidden;
|
452 | display: block;
|
453 | }
|
454 | .u-steps-horizontal.u-steps-label-horizontal .u-steps-item-title {
|
455 | line-height: 32px;
|
456 | }
|
457 | .u-steps-horizontal.u-steps-label-horizontal .u-steps-item-description {
|
458 | padding-bottom: 12px;
|
459 | }
|
460 | .u-steps-horizontal.u-steps-label-horizontal>.u-steps-item>.u-steps-item-tail {
|
461 | position: absolute;
|
462 | left: 16px;
|
463 | top: 0;
|
464 | height: 100%;
|
465 | width: 1px;
|
466 | padding: 38px 0 6px;
|
467 | }
|
468 | .u-steps-horizontal.u-steps-label-horizontal>.u-steps-item>.u-steps-item-tail:after {
|
469 | height: 100%;
|
470 | width: 1px;
|
471 | }
|
472 | .u-steps-horizontal.u-steps-label-horizontal>.u-steps-item:not(:last-child)>.u-steps-item-tail {
|
473 | display: block;
|
474 | }
|
475 | .u-steps-horizontal.u-steps-label-horizontal>.u-steps-item>.u-steps-item-content>.u-steps-item-title:after {
|
476 | display: none;
|
477 | }
|
478 | .u-steps-horizontal.u-steps-label-horizontal.u-steps-small .u-steps-item-tail {
|
479 | position: absolute;
|
480 | left: 12px;
|
481 | top: 0;
|
482 | padding: 30px 0 6px;
|
483 | }
|
484 | .u-steps-horizontal.u-steps-label-horizontal.u-steps-small .u-steps-item-title {
|
485 | line-height: 24px;
|
486 | }
|
487 | }
|
488 |
|
489 | .u-steps-label-vertical .u-steps-item {
|
490 | overflow: visible;
|
491 | }
|
492 |
|
493 | .u-steps-label-vertical .u-steps-item-tail {
|
494 | padding: 0 24px;
|
495 | margin-left: 48px;
|
496 | }
|
497 |
|
498 | .u-steps-label-vertical .u-steps-item-content {
|
499 | display: block;
|
500 | text-align: center;
|
501 | margin-top: 8px;
|
502 | width: 104px;
|
503 | }
|
504 |
|
505 | .u-steps-label-vertical .u-steps-item-icon {
|
506 | display: inline-block;
|
507 | margin-left: 36px;
|
508 | }
|
509 |
|
510 | .u-steps-label-vertical .u-steps-item-title {
|
511 | padding-right: 0;
|
512 | }
|
513 |
|
514 | .u-steps-dot .u-steps-item-title {
|
515 | line-height: 1.5;
|
516 | }
|
517 |
|
518 | .u-steps-dot .u-steps-item-tail {
|
519 | width: 100%;
|
520 | top: 2px;
|
521 | margin: 0 0 0 70px;
|
522 | padding: 0;
|
523 | }
|
524 |
|
525 | .u-steps-dot .u-steps-item-tail:after {
|
526 | height: 3px;
|
527 | width: calc(100% - 20px);
|
528 | margin-left: 12px;
|
529 | }
|
530 |
|
531 | .u-steps-dot .u-steps-item:first-child .u-steps-icon-dot {
|
532 | left: 2px;
|
533 | }
|
534 |
|
535 | .u-steps-dot .u-steps-item-icon {
|
536 | padding-right: 0;
|
537 | width: 8px;
|
538 | height: 8px;
|
539 | line-height: 8px;
|
540 | border: 0;
|
541 | margin-left: 67px;
|
542 | background: transparent;
|
543 | }
|
544 |
|
545 | .u-steps-dot .u-steps-item-icon .u-steps-icon-dot {
|
546 | float: left;
|
547 | width: 100%;
|
548 | height: 100%;
|
549 | border-radius: 100px;
|
550 | position: relative;
|
551 | -webkit-transition: all .3s;
|
552 | transition: all .3s;
|
553 |
|
554 | }
|
555 |
|
556 | .u-steps-dot .u-steps-item-icon .u-steps-icon-dot:after {
|
557 | content: "";
|
558 | background: rgba(0, 0, 0, 0.001);
|
559 | width: 60px;
|
560 | height: 32px;
|
561 | position: absolute;
|
562 | top: -12px;
|
563 | left: -26px;
|
564 | }
|
565 |
|
566 | .u-steps-dot .u-steps-item-content {
|
567 | width: 140px;
|
568 | }
|
569 |
|
570 | .u-steps-dot .u-steps-item-process .u-steps-item-icon {
|
571 | width: 10px;
|
572 | height: 10px;
|
573 | line-height: 10px;
|
574 | }
|
575 |
|
576 | .u-steps-dot .u-steps-item-process .u-steps-item-icon .u-steps-icon-dot {
|
577 | top: -1px;
|
578 | }
|
579 |
|
580 | .u-steps-vertical.u-steps-dot .u-steps-item-icon {
|
581 | margin-left: 0;
|
582 | margin-top: 8px;
|
583 | }
|
584 |
|
585 | .u-steps-vertical.u-steps-dot .u-steps-item-tail {
|
586 | margin: 0;
|
587 | left: -9px;
|
588 | top: 2px;
|
589 | padding: 22px 0 4px;
|
590 | }
|
591 |
|
592 | .u-steps-vertical.u-steps-dot .u-steps-item:first-child .u-steps-icon-dot {
|
593 | left: 0;
|
594 | }
|
595 |
|
596 | .u-steps-vertical.u-steps-dot .u-steps-item-process .u-steps-icon-dot {
|
597 | left: -2px;
|
598 | } |
\ | No newline at end of file |