1 |
|
2 |
|
3 |
|
4 | #{$step-prefix}-arrow {
|
5 | display: flex;
|
6 | #{$step-prefix}-item {
|
7 | flex: 1;
|
8 | @include step-item-size(
|
9 | $step-arrow-item-height,
|
10 | auto,
|
11 | calc(#{$step-arrow-item-height} / 2),
|
12 | calc(#{$step-arrow-item-height} / 8)
|
13 | );
|
14 |
|
15 | &:before {
|
16 | content: '';
|
17 | position: absolute;
|
18 | left: calc(0px - #{$step-arrow-item-border-width});
|
19 | top: 0;
|
20 | z-index: 1;
|
21 | border: $step-arrow-item-border-width solid transparent;
|
22 | border-left-color: transparent;
|
23 | }
|
24 |
|
25 | &:after {
|
26 | content: '';
|
27 | position: absolute;
|
28 | right: calc(0px - #{$step-arrow-item-border-width});
|
29 | top: 0;
|
30 | z-index: 1;
|
31 | border-top: $step-arrow-item-border-width solid transparent;
|
32 | border-bottom: $step-arrow-item-border-width solid transparent;
|
33 | border-left: $step-arrow-item-border-width solid transparent;
|
34 | }
|
35 |
|
36 | #{$step-prefix}-item-container {
|
37 | min-width: 100px;
|
38 | height: $step-arrow-item-height;
|
39 | cursor: pointer;
|
40 |
|
41 | #{$step-prefix}-item-title {
|
42 | height: $step-arrow-item-height;
|
43 | line-height: $step-arrow-item-height;
|
44 | font-weight: $step-arrow-item-title-weight;
|
45 | font-size: $step-arrow-item-title-size;
|
46 | overflow: hidden;
|
47 | text-overflow: ellipsis;
|
48 | white-space: nowrap;
|
49 | text-align: center;
|
50 | }
|
51 | }
|
52 | }
|
53 |
|
54 | & > #{$step-prefix}-item-wait {
|
55 | @include step-item-state(
|
56 | 'arrow',
|
57 | $step-arrow-item-wait-background,
|
58 | $step-arrow-item-title-wait-color
|
59 | );
|
60 | }
|
61 |
|
62 | & > #{$step-prefix}-item-process {
|
63 | @include step-item-state(
|
64 | 'arrow',
|
65 | $step-arrow-item-process-background,
|
66 | $step-arrow-item-title-process-color
|
67 | );
|
68 | }
|
69 |
|
70 | & > #{$step-prefix}-item-finish {
|
71 | @include step-item-state(
|
72 | 'arrow',
|
73 | $step-arrow-item-finish-background,
|
74 | $step-arrow-item-title-finish-color
|
75 | );
|
76 | }
|
77 |
|
78 | #{$step-prefix}-item-disabled {
|
79 | cursor: not-allowed;
|
80 |
|
81 | @include step-item-state(
|
82 | 'arrow',
|
83 | $step-arrow-item-disabled-background,
|
84 | $step-arrow-item-title-disabled-color
|
85 | );
|
86 |
|
87 | #{$step-prefix}-item-container {
|
88 | cursor: not-allowed;
|
89 | }
|
90 | }
|
91 |
|
92 | #{$step-prefix}-item-read-only {
|
93 | cursor: default;
|
94 |
|
95 | #{$step-prefix}-item-container {
|
96 | cursor: default;
|
97 | }
|
98 | }
|
99 |
|
100 | #{$step-prefix}-item-first {
|
101 | margin-left: 0;
|
102 |
|
103 | &:before {
|
104 | border: $step-arrow-item-border-width solid transparent;
|
105 | }
|
106 | }
|
107 |
|
108 | #{$step-prefix}-item-last {
|
109 | margin-right: 0;
|
110 |
|
111 | &:after {
|
112 | border: $step-arrow-item-border-width solid transparent;
|
113 | }
|
114 | }
|
115 | }
|