@use '_variables' as *;
@use '_mixins' as *;
-$grey-color: #9CA3AB;
-$index-block-height: 32px;
+$index-block-height: 40px;
-.container {
- @include padding-left(0);
- @include padding-right(0);
- max-width: unset !important;
+header {
+ margin-bottom: 30px;
+ padding-bottom: 25px;
+ width: 100%;
+ background-color: pvar(--mainColorVeryLight);
}
-header {
+.header-steps {
+ max-width: 800px;
display: flex;
justify-content: space-between;
- font-size: 15px;
- margin-bottom: 30px;
+ margin: auto;
+
+ // Useful on small screens
+ padding: 0 20px;
+}
+
+.step-index {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: $index-block-height;
+ height: $index-block-height;
+ border-radius: $index-block-height;
+ border: 1px solid pvar(--mainColor);
+ margin-bottom: 10px;
+ font-size: 24px;
+ position: relative;
+
+ .completed-icon {
+ $size: 14px;
- .step-info {
- color: $grey-color;
+ width: $size;
+ height: $size;
+ border-radius: $size;
+ background-color: pvar(--mainBackgroundColor);
+ position: absolute;
+ bottom: 0;
+ right: 0;
display: flex;
- flex-direction: column;
+ justify-content: center;
align-items: center;
- width: $index-block-height;
+ // Better than border color for aliasing
+ box-shadow: 0 0 0 1px var(--mainColor);
+ overflow: hidden;
- &:not(.c-hand) {
- cursor: default;
+ my-global-icon {
+ @include apply-svg-color(pvar(--mainColor));
+
+ display: flex;
+ width: 12px;
+ height: 12px;
}
+ }
+}
+
+.step-label {
+ width: max-content;
+ font-size: 18px;
+}
+
+.step-info {
+ color: pvar(--mainColor);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: $index-block-height;
+ opacity: 0.5;
+ cursor: default;
+ &.c-hand {
+ cursor: pointer;
+ }
+
+ &.active,
+ &.completed {
.step-index {
- display: flex;
- justify-content: center;
- align-items: center;
- width: $index-block-height;
- height: $index-block-height;
- border-radius: 100px;
- border: 2px solid $grey-color;
- margin-bottom: 10px;
-
- my-global-icon {
- @include apply-svg-color(pvar(--mainBackgroundColor));
-
- width: 22px;
- height: 22px;
- }
+ background-color: pvar(--mainColor);
+ color: pvar(--mainBackgroundColor);
}
.step-label {
- width: max-content;
+ color: pvar(--mainColor);
}
+ }
- &.active,
- &.completed {
- .step-index {
- border-color: pvar(--mainColor);
- background-color: pvar(--mainColor);
- color: pvar(--mainBackgroundColor);
- }
-
- .step-label {
- color: pvar(--mainColor);
- }
- }
+ &.active {
+ opacity: 1;
+ }
+}
- &.completed {
- cursor: pointer;
- }
+.connector {
+ flex: auto;
+ margin: math.div($index-block-height, 2) 10px 0 10px;
+ height: 2px;
+ background-color: pvar(--mainColor);
+ opacity: 0.3;
+}
+
+@media screen and (min-width: $small-view) {
+ .margin-content {
+ max-width: 1000px;
+ margin: auto;
}
+}
- .connector {
- flex: auto;
- margin: math.div($index-block-height, 2) 10px 0 10px;
- height: 2px;
- background-color: $grey-color;
+@media screen and (max-width: $small-view) {
+ .step-label {
+ width: auto;
+ text-align: center;
}
}