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