99 lines
2.1 KiB
SCSS
99 lines
2.1 KiB
SCSS
$progress-bar-line-width: 2px;
|
|
$progress-bar-circle-size: 1.2rem;
|
|
$progress-bar-icon-size: 0.8rem;
|
|
|
|
.signup-progress-bar {
|
|
width: 100%;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
margin-bottom: 1.2em;
|
|
|
|
&__segment {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
color: var(--primary-low-mid);
|
|
|
|
&:first-child .signup-progress-bar__circle {
|
|
transform: translateX(50%);
|
|
z-index: 1;
|
|
}
|
|
|
|
&:last-child {
|
|
width: $progress-bar-circle-size;
|
|
.signup-progress-bar__circle {
|
|
transform: translateX(-50%);
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__step {
|
|
display: flex;
|
|
}
|
|
|
|
&__step-text {
|
|
color: var(--primary-high);
|
|
white-space: nowrap;
|
|
width: fit-content;
|
|
transform: translateX(calc(calc($progress-bar-circle-size / 2) - 50%));
|
|
|
|
.signup-progress-bar__segment:first-child & {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
.signup-progress-bar__segment:last-child & {
|
|
transform: translateX(
|
|
calc(calc($progress-bar-circle-size + $progress-bar-line-width) - 100%)
|
|
);
|
|
}
|
|
|
|
.--active & {
|
|
font-weight: bold;
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
&__line {
|
|
transform: translateY(
|
|
calc(calc($progress-bar-circle-size + $progress-bar-line-width) / 2)
|
|
);
|
|
height: $progress-bar-line-width;
|
|
width: 100%;
|
|
background-color: var(--primary-low-mid);
|
|
|
|
.--completed & {
|
|
background-color: var(--success);
|
|
}
|
|
}
|
|
|
|
&__circle {
|
|
flex-shrink: 0;
|
|
font-size: $progress-bar-icon-size;
|
|
color: var(--secondary);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: $progress-bar-circle-size;
|
|
width: $progress-bar-circle-size;
|
|
border-radius: 50%;
|
|
border: $progress-bar-line-width solid var(--primary-low-mid);
|
|
background-color: var(--secondary);
|
|
|
|
.--active & {
|
|
border-color: var(--success);
|
|
background: var(--success);
|
|
box-shadow: 0 0 1px 5px var(--success-low);
|
|
}
|
|
.--completed & {
|
|
background-color: var(--success);
|
|
border-color: var(--success);
|
|
}
|
|
}
|
|
|
|
&__line.--completed {
|
|
background-color: var(--success);
|
|
}
|
|
}
|