<ol class="c-progress" tabindex="0" role="progressbar" aria-valuemin="1" aria-valuemax="4" aria-valuenow="3" aria-valuetext="Step 3 di 4: ">
<li class="c-progress__step " data-step-complete>
<a href="" data-extra-text="">Scegli parcheggio</a>
</li>
<li class="c-progress__step " data-step-complete>
<a href="" data-extra-text="">Inserisci i dati</a>
</li>
<li class="c-progress__step " data-step-current>
<a href="" data-extra-text="">Intestazione</a>
</li>
<li class="c-progress__step " data-step-incomplete>
<a href="" data-extra-text="">Checkout</a>
</li>
</ol>
<ol class="c-progress" tabindex="0" role="progressbar" aria-valuemin="1" aria-valuemax="{{ steps.length }}"
aria-valuenow="{{ current-step }}"
aria-valuetext="Step {{ current-step }} di {{ steps.length }}: {{ current-step-textual }}">
{{#each steps}}
{{#if this.text}}
<li class="c-progress__step {{ this.class }}" {{ this.status }}>
<a href="{{ this.link }}" data-extra-text="{{ this.extra-text }}">{{ this.text }}</a>
{{!--
Per Endurance, in caso di bottone usare questo:
<button class="c-button c-button--as-link" data-extra-text="{{ this.extra-text }}">{{ this.text }}</button>
--}}
</li>
{{/if}}
{{/each}}
</ol>
{
"current-step": 3,
"steps": [
{
"text": "Scegli parcheggio",
"status": "data-step-complete"
},
{
"text": "Inserisci i dati",
"status": "data-step-complete"
},
{
"text": "Intestazione",
"status": "data-step-current"
},
{
"text": "Checkout",
"status": "data-step-incomplete"
}
]
}
.c-progress {
list-style: none;
padding-left: 0;
display: flex;
margin-top: remify(48px);
font-size: 75%;
@include min-screen (remify(640px)) {
font-size: 100%;
}
.c-header--progress & {
width: 100%;
max-width: remify(980px);
margin-left: auto;
margin-right: auto;
}
}
.c-progress__step {
// flex: 1 1 remify(480px);
flex: 1 1 0%; // For Ms Edge
text-align: center;
position: relative;
color: primary(night, 100);
a,
button {
color: currentColor;
text-decoration: none;
}
&[data-step-current] {
font-weight: fw(bold);
}
// step marker - colored box
&:after {
content: '';
display: block;
position: absolute;
top: remify(-19px);
left: calc(50% - .5em);
background-color: status(positive);
width: remify(8px);
height: remify(8px);
border-radius: 50%;
z-index: 1;
}
// connecting line
&:not(:first-child):before {
content: '';
display: block;
position: absolute;
top: remify(-16px);
width: 100%;
height: remify(1px);
left: -50%;
z-index: 0;
background-color: primary(night, 20);
}
&:first-child:before {
display: none;
}
&[data-step-complete]:before,
&[data-step-current]:before {
background-color: status(positive);
height: remify(2px);
}
&[data-step-current]:after {
transform: scale(2, 2);
}
&[data-step-incomplete]:after {
background-color: primary(night, 20);
}
}
.c-progress__step--optional:not(:first-child):before {
background-image: linear-gradient(to right, transparent 50%, primary(night, 20) 50%);
background-repeat: repeat-x;
background-size: 20% remify(2px);
background-color: primary(night, 20);
}
.c-progress__step--optional {
a {
&:after {
content: attr(data-extra-text);
font-size: remify(8px);
display: block;
text-decoration: none;
}
}
}
No notes defined.