Progress-based navigation bar, useful for checkouts or registrations.
@mixin progress()
None.
nav.progress>ul>(li.complete*2>a)+(li.active>a)+(li*2>a)
<nav class=" progress">
<ul class="progress__list">
<li class="progress__item">
<a class="progress__link -complete" href="#">
<svg class="progress__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none">
<circle cx="9" cy="19" r="2" />
<circle cx="17" cy="19" r="2" />
<path d="M3 3h2l2 12a3 3 0 0 0 3 2h7a3 3 0 0 0 3 -2l1 -7h-15.2" />
</svg>
Nav Item 1
</a>
</li>
<li class="progress__item">
<a class="progress__link -complete" href="#">
<svg class="progress__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none">
<circle cx="9" cy="19" r="2" />
<circle cx="17" cy="19" r="2" />
<path d="M3 3h2l2 12a3 3 0 0 0 3 2h7a3 3 0 0 0 3 -2l1 -7h-15.2" />
</svg>
Nav Item 2
</a>
</li>
<li class="progress__item">
<a class="progress__link -active" href="#">
<svg class="progress__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none">
<circle cx="9" cy="19" r="2" />
<circle cx="17" cy="19" r="2" />
<path d="M3 3h2l2 12a3 3 0 0 0 3 2h7a3 3 0 0 0 3 -2l1 -7h-15.2" />
</svg>
Nav Item 3
</a>
</li>
<li class="progress__item">
<a class="progress__link" href="#">
<svg class="progress__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none">
<circle cx="9" cy="19" r="2" />
<circle cx="17" cy="19" r="2" />
<path d="M3 3h2l2 12a3 3 0 0 0 3 2h7a3 3 0 0 0 3 -2l1 -7h-15.2" />
</svg>
Nav Item 4
</a>
</li>
</ul>
</nav>
@use "/resources/styles/common" as *;
@use "/resources/styles/config";
///
/// PROGRESS provides a basic, pill-style progress nav bar like you
/// might find as part of an ecommerce or registration process.
///
.progress {
&__list {
@include no-bullets;
display: flex;
position: relative;
&::before {
border-left: 4px solid config.$blue-300;
bottom: 1rem;
content: '';
left: calc(1rem - 2px);
position: absolute;
top: 1rem;
z-index: -1;
}
}
&__list {
display: flex;
flex-direction: column;
gap: config.$v-space config.$h-space;
}
&__item {
margin: 0;
}
&__link {
align-items: center;
color: config.$blue-400;
display: flex;
gap: config.$v-space config.$h-space;
&:hover {
color: config.$blue-600;
.progress__icon {
background-color: config.$blue-600;
}
}
&.-active {
color: config.$blue-600;
font-weight: bold;
.progress__icon {
background-color: config.$blue-600;
}
}
}
&__icon {
background-color: config.$blue-300;
border-radius: 2rem;
color: config.$white;
height: 2rem;
padding: .25rem;
vertical-align: middle;
}
@include at(md) {
&__list {
flex-direction: row;
justify-content: center;
&::before {
display: none;
}
}
&__link {
flex-flow: column;
}
}
}