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="#">Nav Item 1</a>
</li>
<li class="progress__item">
<a class="progress__link -complete" href="#">Nav Item 2</a>
</li>
<li class="progress__item">
<a class="progress__link -active" href="#">Nav Item 3</a>
</li>
<li class="progress__item">
<a class="progress__link" href="#">Nav Item 4</a>
</li>
<li class="progress__item">
<a class="progress__link -disabled" href="#">Nav Item 5</a>
</li>
</ul>
</nav>
///
/// PROGRESS provides a basic, pill-style progress nav bar like you
/// might find as part of an ecommerce or registration process.
///
@mixin progress(
$color: $blue-400,
$completed-icon: $fa-var-check,
$active-icon: $fa-var-circle
) {
&__list {
padding-left: 0;
list-style: none;
&::before {
border-left: .5em solid $color;
bottom: 1.5em;
content: '';
left: 1.75em;
position: absolute;
top: 1.5em;
z-index: -1;
}
}
&__item {
margin: 0;
}
&__link {
align-items: center;
display: flex;
margin: 0;
padding: .618em 1em;
&::before {
background-color: $color;
border-radius: 2em;
color: $white;
content: '';
height: 2em;
line-height: 2;
margin-right: 1em;
text-align: center;
transition: $moderate $entrance-easing;
width: 2em;
}
&:hover::before {
transform: scale(1.25);
}
&.-active {
@include fas($active-icon);
font-weight: bold;
&::before {
transform: scale(1.25);
}
}
&.-complete {
@include fas($completed-icon);
}
&.-disabled {
&:hover::before {
transform: none;
}
}
}
@include breakpoint(md) {
&__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
&::before {
content: unset;
}
}
&__item {
position: relative;
&::before {
border-top: .25em solid $color;
content: '';
left: 0;
position: absolute;
right: 0;
top: 1.493em;
z-index: -1;
}
&:first-child::before {
left: 50%;
}
&:last-child::before {
right: 50%;
}
}
&__link {
flex-direction: column;
&::before {
margin-right: 0;
margin-bottom: 1em;
}
}
}
}