]>
Commit | Line | Data |
---|---|---|
1d5342ab C |
1 | @import '_variables'; |
2 | @import '_mixins'; | |
3 | ||
4 | $grey-color: #9CA3AB; | |
5 | $index-block-height: 32px; | |
6 | ||
7 | header { | |
8 | display: flex; | |
9 | justify-content: space-between; | |
10 | font-size: 15px; | |
11 | margin-bottom: 30px; | |
12 | ||
13 | .step-info { | |
14 | color: $grey-color; | |
15 | display: flex; | |
16 | flex-direction: column; | |
17 | align-items: center; | |
18 | width: $index-block-height; | |
19 | ||
20 | .step-index { | |
21 | display: flex; | |
22 | justify-content: center; | |
23 | align-items: center; | |
24 | width: $index-block-height; | |
25 | height: $index-block-height; | |
26 | border-radius: 100px; | |
27 | border: 2px solid $grey-color; | |
28 | margin-bottom: 10px; | |
29 | ||
30 | my-global-icon { | |
e66883b3 | 31 | @include apply-svg-color(pvar(--mainBackgroundColor)); |
1d5342ab C |
32 | |
33 | width: 22px; | |
34 | height: 22px; | |
35 | } | |
36 | } | |
37 | ||
38 | .step-label { | |
39 | width: max-content; | |
40 | } | |
41 | ||
42 | &.active, | |
43 | &.completed { | |
44 | .step-index { | |
e66883b3 RK |
45 | border-color: pvar(--mainColor); |
46 | background-color: pvar(--mainColor); | |
47 | color: pvar(--mainBackgroundColor); | |
1d5342ab C |
48 | } |
49 | ||
50 | .step-label { | |
e66883b3 | 51 | color: pvar(--mainColor); |
1d5342ab C |
52 | } |
53 | } | |
54 | ||
55 | &.completed { | |
56 | cursor: pointer; | |
57 | } | |
58 | } | |
59 | ||
60 | .connector { | |
61 | flex: auto; | |
62 | margin: $index-block-height/2 10px 0 10px; | |
63 | height: 2px; | |
64 | background-color: $grey-color; | |
65 | } | |
66 | } |