No notes defined.
<nav class="form-steps{{ modifier ? ' ' ~ modifier }}" aria-labelledby="form-steps-{{ steps.length }}{{ active }}{{ modifier ? '-' ~ modifier }}">
<h2 id="form-steps-{{ steps.length }}{{ active }}{{ modifier ? '-' ~ modifier }}" class="visually-hidden">Steps in this wizard</h2>
{% spaceless %}
<ol class="form-steps-list">
{% for key, step in steps %}
<li class="{% if key + 1 < active %}completed{% endif %}{% if key + 1 == active %}active{% endif %}">
{% if step.url and (key + 1) != active %}
<a href="{{ step.url }}"><span>{{ step.text }}</span></a>
{% else %}
<span><span>{{ step.text }}</span></span>
{% endif %}
</li>
{% endfor %}
</ol>
{% endspaceless %}
</nav>
<!-- Default -->
<nav class="form-steps" aria-labelledby="form-steps-73">
<h2 id="form-steps-73" class="visually-hidden">Steps in this wizard</h2>
<ol class="form-steps-list">
<li class="completed"><a href="#"><span>first step</span></a></li>
<li class="completed"><a href="#"><span>second step</span></a></li>
<li class="active"><span><span>active step</span></span></li>
<li class=""><a href="#"><span>Step with a long name</span></a></li>
<li class=""><span><span>inactive fifth step</span></span></li>
<li class=""><span><span>inactive sixth step</span></span></li>
<li class=""><span><span>inactive seventh step</span></span></li>
</ol>
</nav>
<!-- Vertical -->
<nav class="form-steps vertical" aria-labelledby="form-steps-73-vertical">
<h2 id="form-steps-73-vertical" class="visually-hidden">Steps in this wizard</h2>
<ol class="form-steps-list">
<li class="completed"><a href="#"><span>first step</span></a></li>
<li class="completed"><a href="#"><span>second step</span></a></li>
<li class="active"><span><span>active step</span></span></li>
<li class=""><a href="#"><span>Step with a long name</span></a></li>
<li class=""><span><span>inactive fifth step</span></span></li>
<li class=""><span><span>inactive sixth step</span></span></li>
<li class=""><span><span>inactive seventh step</span></span></li>
</ol>
</nav>
/* Default */
{
"steps": [
{
"text": "first step",
"url": "#"
},
{
"text": "second step",
"url": "#"
},
{
"text": "active step",
"url": "#"
},
{
"text": "Step with a long name",
"url": "#"
},
{
"text": "inactive fifth step"
},
{
"text": "inactive sixth step"
},
{
"text": "inactive seventh step"
}
],
"active": 3
}
/* Vertical */
{
"steps": [
{
"text": "first step",
"url": "#"
},
{
"text": "second step",
"url": "#"
},
{
"text": "active step",
"url": "#"
},
{
"text": "Step with a long name",
"url": "#"
},
{
"text": "inactive fifth step"
},
{
"text": "inactive sixth step"
},
{
"text": "inactive seventh step"
}
],
"active": 3,
"modifier": "vertical"
}
.form-steps {
ol.form-steps-list {
display: flex;
flex-wrap: wrap;
margin: 0;
counter-reset: item;
list-style-type: none;
li {
display: inline-block;
margin-bottom: .8rem;
&:not(:first-child):not(:last-child):not(.active) {
@include desktop-and-below {
// clip
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
// also hide from screenreaders
visibility: hidden;
clip: rect(0 0 0 0);
}
}
span > span,
a > span {
@include desktop-and-below {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
}
}
a {
@include reset-link-background;
padding: 0;
vertical-align: middle;
&:hover,
&:focus {
background-color: transparent;
&::before {
@include theme('border-color', 'color-primary--darken-1', 'form-step--active-border-color');
}
}
> span {
@include link-background('color-primary', null, 'link-underline-color');
padding: 0 0 .2rem;
}
}
a::before,
> span::before {
@include theme('border-color', 'color-primary--lighten-5', 'form-step--active-border-color');
@include theme('background-color', 'color-primary--lighten-5', 'form-step--active-border-color');
@include theme('color', 'color-tertiary', 'default-text-color');
@include bold-text;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
margin-right: .8rem;
transition: .2s ease-in-out;
border: 2px solid;
border-radius: 1rem;
font-size: .8rem;
content: counter(item);
counter-increment: item;
}
&.active {
@include bold-text;
> span::before {
@include theme('border-color', 'color-primary--darken-1', 'form-step--active-border-color');
background-color: transparent;
}
}
&.completed:not(.active) {
a,
> span {
@include icon(checkmark, before);
}
a::before,
> span::before {
border-color: color('green', -3);
background-color: color('green', -3);
font-size: 1.5rem;
line-height: 1.25;
vertical-align: middle;
}
a:hover,
a:focus {
&::before {
border-color: color('green', 1);
}
}
}
@include desktop-and-below {
&.active {
margin-bottom: 0;
::before,
::after {
margin-bottom: .8rem;
}
&::before,
&::after {
@include theme('border-color', 'color-primary--darken-2', 'form-step-hellip-background-color');
@include theme('background-color', 'color-primary--darken-2', 'form-step-hellip-background-color');
@include theme('color', 'color-secondary', 'form-step-hellip-color');
display: inline-block;
width: 2rem;
height: 2rem;
margin-right: .8rem;
margin-bottom: .8rem;
border: 2px solid;
border-radius: 1rem;
text-align: center;
content: '\2026';
}
}
&:first-child::before,
&:nth-child(2)::before,
&:nth-last-child(2)::after,
&:last-child::after {
content: none;
}
}
}
}
&:not(.vertical) ol.form-steps-list {
@include desktop {
li:not(:last-child)::after {
@include theme('border-color', 'color-primary--lighten-3', 'form-step--active-border-color');
display: inline-block;
width: .8rem;
margin: 0 .6rem;
border-bottom: 2px solid;
content: '';
vertical-align: middle;
}
}
}
&.vertical ol.form-steps-list {
@include desktop {
flex-direction: column;
li {
margin-bottom: .6rem;
&:not(:last-child)::after {
@include theme('border-color', 'color-primary--lighten-3', 'form-step--active-border-color');
display: block;
width: 1rem;
height: .8rem;
margin: .6rem 0 0;
border-right: 2px solid;
content: '';
}
}
}
}
}