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>
{% apply 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>
{% endapply %}
</nav>
<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>
{
"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 {
@include theme('background-color', 'color-tertiary-light');
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 20px 20px 5px;
counter-reset: item;
list-style-type: none;
@include desktop-and-below {
align-items: center;
padding: 20px;
}
li {
display: inline-block;
@include desktop-and-below {
margin-bottom: 0;
}
&: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;
@include theme('color', 'color-zero');
display: inline-block;
line-height: 175%;
vertical-align: middle;
&:hover,
&:focus {
background-color: transparent;
&::before {
@include theme('border-color', 'color-primary', 'form-step--active-border-color');
}
}
}
&.active {
@include bold-text;
@include desktop-and-below {
margin-bottom: 0;
}
&::before,
&::after {
@include desktop-and-below {
@include theme('border-color', 'color-tertiary-pastel', 'form-step-hellip-background-color');
@include theme('background-color', 'color-tertiary-pastel', 'form-step-hellip-background-color');
@include theme('color', 'color-zero', 'form-step-hellip-color');
display: inline-block;
width: 40px;
height: 40px;
margin-right: 15px;
border: 2px solid;
border-radius: 20px;
line-height: 35px;
text-align: center;
}
}
&::before {
@include theme('color', 'color-none', 'form-step--active-color');
@include theme('border-color', 'color-primary', 'form-step--active-border-color');
@include theme('background-color', 'color-primary', 'form-step--active-background-color');
}
&::after {
@include desktop-and-below {
content: '\2026';
}
}
> span::before {
@include theme('border-color', 'color-primary--darken-1', 'form-step--active-border-color');
background-color: transparent;
}
}
&.completed:not(.active) {
@include icon(checkmark, before);
&::before {
@include theme('background-color', 'color-success-pastel');
display: inline-block;
line-height: 30px;
vertical-align: middle;
}
a:hover,
a:focus {
&::before {
border-color: color('green', 1);
}
}
}
&:first-child::before,
&:nth-child(2)::before,
&:nth-last-child(2)::after,
&:last-child::after {
@include desktop-and-below {
content: none;
}
}
}
}
&:not(.vertical) ol.form-steps-list {
@include desktop {
li:not(:last-child)::after {
@include theme('border-color', 'color-tertiary-pastel', 'form-step--active-border-color');
display: inline-block;
width: 15px;
margin: 0 15px;
border-bottom: 2px solid;
content: '';
vertical-align: middle;
}
}
}
&.vertical {
ol.form-steps-list {
@include desktop {
flex-direction: column;
padding: 30px 30px 15px;
li {
margin-bottom: 15px;
&:not(:last-child)::after {
@include theme('border-color', 'color-tertiary-pastel', 'form-step--active-border-color');
display: block;
width: 15px;
height: 20px;
margin: 15px 0 0;
border-right: 2px solid;
content: '';
}
}
}
}
}
}