tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(stepper): refactor circle indicator to improve accessibility and styling

Browse Source
This commit is contained in:
ncoronel
2026-07-03 10:24:54 -03:00
parent 510c72624b
commit 2b3713f6a8
2 changed files with 29 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/shared/components/stepper/stepper.component.html
View File

@@ -16,18 +16,12 @@
} }
<!-- Circle indicator --> <!-- Circle indicator -->
<button <div
class="stepper-header__circle" class="stepper-header__circle"
[attr.aria-label]="step.label()" [attr.aria-label]="step.label()"
[disabled]="currentStepIndex() <= i" [class.is-clickable]="currentStepIndex() > i"
(click)="goToStep(i)" (click)="goToStep(i)"
> ></div>
@if (currentStepIndex() > i) {
<i class="fa-solid fa-check"></i>
} @else {
<span>{{ i + 1 }}</span>
}
</button>
<!-- Label --> <!-- Label -->
<span class="stepper-header__label">{{ step.label() }}</span> <span class="stepper-header__label">{{ step.label() }}</span>

69
src/app/shared/components/stepper/stepper.component.scss
View File

@@ -23,11 +23,11 @@
&__line { &__line {
position: absolute; position: absolute;
top: 19px; // center of the 40px circle top: 5px; // center of the 10px dot
right: 50%; right: 50%;
left: -50%; left: -50%;
height: 2px; height: 2px;
background-color: var(--bs-gray-300); background-color: #d9d9d9;
transition: background-color 0.35s ease; transition: background-color 0.35s ease;
z-index: 0; z-index: 0;
@@ -39,36 +39,26 @@
&__circle { &__circle {
position: relative; position: relative;
z-index: 1; z-index: 1;
width: 40px; width: 10px;
height: 40px; height: 10px;
border-radius: 50%; border-radius: 50%;
border: 2px solid var(--bs-gray-300); background-color: #d9d9d9; // default: inactive future
background-color: var(--bs-gray-100); border: none;
color: var(--bs-gray-500);
font-weight: 700;
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
cursor: default; cursor: default;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
outline: none; padding: 0;
&:not(:disabled) { &.is-clickable {
cursor: pointer; cursor: pointer;
&:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
} }
} }
&__label { &__label {
margin-top: 8px; margin-top: 10px;
font-size: 0.8125rem; font-size: 15px;
font-weight: 500; font-weight: 700;
color: var(--bs-gray-500); text-transform: uppercase;
color: #d9d9d9; // default: inactive future
text-align: center; text-align: center;
transition: color 0.3s ease; transition: color 0.3s ease;
max-width: 120px; max-width: 120px;
@@ -77,35 +67,28 @@
// Active step // Active step
&__item.is-active { &__item.is-active {
.stepper-header__circle {
background-color: #666666;
}
.stepper-header__label {
color: #666666;
}
}
// Completed past step
&__item.is-completed {
.stepper-header__circle { .stepper-header__circle {
background-color: var(--bs-primary); background-color: var(--bs-primary);
border-color: var(--bs-primary);
color: white;
box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.35);
} }
.stepper-header__label { .stepper-header__label {
color: var(--bs-primary); color: var(--bs-primary);
font-weight: 600;
}
}
// Completed step
&__item.is-completed {
.stepper-header__circle {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
color: white;
}
.stepper-header__label {
color: var(--bs-body-color);
} }
} }
} }
/* ─── Body (content area) ─── */ /* ─── Body (content area) ─── */
.stepper-body { .stepper-body {
// Hide all step wrappers visually — step.component.html // step.component.html controls visibility via @if (isActive())
// controls visibility with *ngIf on the inner content
} }