<ol class="c-progress" tabindex="0" role="progressbar" aria-valuemin="1" aria-valuemax="5" aria-valuenow="3" aria-valuetext="Step 3 di 5: ">
<li class="c-progress__step " data-step-complete>
<a href="/components/preview/page-parking-results" data-extra-text="">Risultati</a>
</li>
<li class="c-progress__step " data-step-complete>
<a href="/components/preview/page-funnel-profile" data-extra-text="">Dati personali</a>
</li>
<li class="c-progress__step " data-step-current>
<a href="/components/preview/booking-confirm" data-extra-text="">Riepilogo</a>
</li>
<li class="c-progress__step c-progress__step--optional" data-step-incomplete>
<a href="/components/preview/page-payment" data-extra-text="Opzionale">Pagamento</a>
</li>
<li class="c-progress__step c-progress__step--optional" data-step-incomplete>
<a href="/components/preview/purchase-confirmation" data-extra-text="Opzionale">Pagato</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": "Risultati",
"status": "data-step-complete",
"link": "/components/preview/page-parking-results"
},
{
"text": "Dati personali",
"status": "data-step-complete",
"link": "/components/preview/page-funnel-profile"
},
{
"text": "Riepilogo",
"status": "data-step-current",
"link": "/components/preview/booking-confirm"
},
{
"text": "Pagamento",
"status": "data-step-incomplete",
"link": "/components/preview/page-payment",
"class": "c-progress__step--optional",
"extra-text": "Opzionale"
},
{
"text": "Pagato",
"status": "data-step-incomplete",
"link": "/components/preview/purchase-confirmation",
"class": "c-progress__step--optional",
"extra-text": "Opzionale"
}
]
}
.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.