diff options
Diffstat (limited to 'client/src/app/+signup/+register/custom-stepper.component.scss')
-rw-r--r-- | client/src/app/+signup/+register/custom-stepper.component.scss | 139 |
1 files changed, 88 insertions, 51 deletions
diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss index 6a8815c77..4dda93489 100644 --- a/client/src/app/+signup/+register/custom-stepper.component.scss +++ b/client/src/app/+signup/+register/custom-stepper.component.scss | |||
@@ -2,76 +2,113 @@ | |||
2 | @use '_variables' as *; | 2 | @use '_variables' as *; |
3 | @use '_mixins' as *; | 3 | @use '_mixins' as *; |
4 | 4 | ||
5 | $grey-color: #9CA3AB; | 5 | $index-block-height: 40px; |
6 | $index-block-height: 32px; | ||
7 | 6 | ||
8 | .container { | 7 | header { |
9 | @include padding-left(0); | 8 | margin-bottom: 40px; |
10 | @include padding-right(0); | 9 | padding-bottom: 60px; |
11 | max-width: unset !important; | 10 | width: 100%; |
11 | background-color: pvar(--mainColorVeryLight); | ||
12 | } | 12 | } |
13 | 13 | ||
14 | header { | 14 | .header-steps { |
15 | max-width: 800px; | ||
15 | display: flex; | 16 | display: flex; |
16 | justify-content: space-between; | 17 | justify-content: space-between; |
17 | font-size: 15px; | 18 | margin: auto; |
18 | margin-bottom: 30px; | 19 | |
20 | // Useful on small screens | ||
21 | padding: 0 20px; | ||
22 | } | ||
19 | 23 | ||
20 | .step-info { | 24 | .step-index { |
21 | color: $grey-color; | 25 | display: flex; |
26 | justify-content: center; | ||
27 | align-items: center; | ||
28 | width: $index-block-height; | ||
29 | height: $index-block-height; | ||
30 | border-radius: $index-block-height; | ||
31 | border: 1px solid pvar(--mainColor); | ||
32 | margin-bottom: 10px; | ||
33 | font-size: 24px; | ||
34 | position: relative; | ||
35 | |||
36 | .completed-icon { | ||
37 | width: 16px; | ||
38 | height: 16px; | ||
39 | border-radius: 16px; | ||
40 | background-color: pvar(--mainBackgroundColor); | ||
41 | position: absolute; | ||
42 | bottom: 0; | ||
43 | right: 0; | ||
22 | display: flex; | 44 | display: flex; |
23 | flex-direction: column; | 45 | justify-content: center; |
24 | align-items: center; | 46 | align-items: center; |
25 | width: $index-block-height; | 47 | border: 1px solid pvar(--mainColor); |
48 | |||
49 | my-global-icon { | ||
50 | @include apply-svg-color(pvar(--mainColor)); | ||
26 | 51 | ||
27 | &:not(.c-hand) { | 52 | display: flex; |
28 | cursor: default; | 53 | width: 12px; |
54 | height: 12px; | ||
29 | } | 55 | } |
56 | } | ||
57 | } | ||
30 | 58 | ||
59 | .step-label { | ||
60 | width: max-content; | ||
61 | font-size: 18px; | ||
62 | } | ||
63 | |||
64 | .step-info { | ||
65 | color: pvar(--mainColor); | ||
66 | display: flex; | ||
67 | flex-direction: column; | ||
68 | align-items: center; | ||
69 | width: $index-block-height; | ||
70 | opacity: 0.5; | ||
71 | cursor: default; | ||
72 | |||
73 | &.c-hand { | ||
74 | cursor: pointer; | ||
75 | } | ||
76 | |||
77 | &.active, | ||
78 | &.completed { | ||
31 | .step-index { | 79 | .step-index { |
32 | display: flex; | 80 | background-color: pvar(--mainColor); |
33 | justify-content: center; | 81 | color: pvar(--mainBackgroundColor); |
34 | align-items: center; | ||
35 | width: $index-block-height; | ||
36 | height: $index-block-height; | ||
37 | border-radius: 100px; | ||
38 | border: 2px solid $grey-color; | ||
39 | margin-bottom: 10px; | ||
40 | |||
41 | my-global-icon { | ||
42 | @include apply-svg-color(pvar(--mainBackgroundColor)); | ||
43 | |||
44 | width: 22px; | ||
45 | height: 22px; | ||
46 | } | ||
47 | } | 82 | } |
48 | 83 | ||
49 | .step-label { | 84 | .step-label { |
50 | width: max-content; | 85 | color: pvar(--mainColor); |
51 | } | 86 | } |
87 | } | ||
52 | 88 | ||
53 | &.active, | 89 | &.active { |
54 | &.completed { | 90 | opacity: 1; |
55 | .step-index { | 91 | } |
56 | border-color: pvar(--mainColor); | 92 | } |
57 | background-color: pvar(--mainColor); | ||
58 | color: pvar(--mainBackgroundColor); | ||
59 | } | ||
60 | |||
61 | .step-label { | ||
62 | color: pvar(--mainColor); | ||
63 | } | ||
64 | } | ||
65 | 93 | ||
66 | &.completed { | 94 | .connector { |
67 | cursor: pointer; | 95 | flex: auto; |
68 | } | 96 | margin: math.div($index-block-height, 2) 10px 0 10px; |
97 | height: 2px; | ||
98 | background-color: pvar(--mainColor); | ||
99 | opacity: 0.3; | ||
100 | } | ||
101 | |||
102 | @media screen and (min-width: $small-view) { | ||
103 | .margin-content { | ||
104 | max-width: 1000px; | ||
105 | margin:auto; | ||
69 | } | 106 | } |
107 | } | ||
70 | 108 | ||
71 | .connector { | 109 | @media screen and (max-width: $small-view) { |
72 | flex: auto; | 110 | .step-label { |
73 | margin: math.div($index-block-height, 2) 10px 0 10px; | 111 | width: auto; |
74 | height: 2px; | 112 | text-align: center; |
75 | background-color: $grey-color; | ||
76 | } | 113 | } |
77 | } | 114 | } |