<div class="c-steps">
<div class="c-steps__item is-active"><span class="c-step__number">1</span></div>
<div class="c-steps__item is-current"><span class="c-step__number">2</span></div>
<div class="c-steps__item"><span class="c-step__number">3</span></div>
</div>
<div class="c-steps">
{% spaceless %}
{% for step in steps %}
<div class="c-steps__item{% if current == loop.index %} is-current{% elseif step < current %} is-active{% endif %}">
<span class="c-step__number">{{ step }}</span>
</div>
{% endfor %}
{% endspaceless %}
</div>
{
"current": 2,
"steps": [
1,
2,
3
]
}
.c-steps {
margin-top: 1em;
text-align: center;
&__item {
border: 1px solid $color-white;
border-radius: 50%;
color: $color-white;
display: inline-block;
height: 2em;
position: relative;
width: 2em;
&:not(:last-child) {
margin-right: 2em;
&::after {
background-color: white;
content: '';
height: 1px;
left: 100%;
position: absolute;
top: 50%;
width: 2em;
}
}
&.is-active {
background-color: rgba($color-white, .5);
color: $color-yellow;
}
&.is-current {
background-color: $color-white;
box-shadow: 0 0 1em rgba($color-black, .1);
color: $color-yellow;
@include font-bold();
}
}
&__number {
left: 50%;
position: absolute;
top: 50%;
}
}
There are no notes for this item.