UNPKG

14.1 kBSCSSView Raw
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 // vertical-align: top;
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 /* expand hover area */
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