-@import '_variables';
-@import '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
-$grey-color: #9CA3AB;
-$index-block-height: 32px;
+$index-block-height: 40px;
header {
+ margin-bottom: 30px;
+ padding-bottom: 25px;
+ width: 100%;
+ background-color: pvar(--mainColorVeryLight);
+}
+
+.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;
- .step-info {
- color: $grey-color;
+ .completed-icon {
+ $size: 14px;
+
+ 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;
+
+ my-global-icon {
+ @include apply-svg-color(pvar(--mainColor));
- .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;
- }
+ width: 12px;
+ height: 12px;
}
+ }
+}
- .step-label {
- width: max-content;
- }
+.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 {
- border-color: pvar(--mainColor);
- background-color: pvar(--mainColor);
- color: pvar(--mainBackgroundColor);
- }
-
- .step-label {
- color: pvar(--mainColor);
- }
+ &.active,
+ &.completed {
+ .step-index {
+ background-color: pvar(--mainColor);
+ color: pvar(--mainBackgroundColor);
}
- &.completed {
- cursor: pointer;
+ .step-label {
+ color: pvar(--mainColor);
}
}
- .connector {
- flex: auto;
- margin: $index-block-height/2 10px 0 10px;
- height: 2px;
- background-color: $grey-color;
+ &.active {
+ opacity: 1;
+ }
+}
+
+.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;
+ }
+}
+
+@media screen and (max-width: $small-view) {
+ .step-label {
+ width: auto;
+ text-align: center;
}
}