<div class='c-status'>
<div class='c-status__img'>
<svg viewBox='0 0 426 426' class="two" role='presentation'>
<g>
<path d='M336.832277,42.7590218 C300.902926,16.5767757 257.849669,2.5 213,2.5 C191.108691,2.5 169.580785,5.8434982 148.983362,12.4117001 L150.559406,17.1571974 C170.649719,10.7571959 191.645825,7.5 213,7.5 C256.7678,7.5 298.773045,21.2267301 333.839999,46.7652463 L336.832277,42.7590218 Z'></path>
<path d='M413.600559,276.97818 C420.156634,256.405049 423.495897,234.90412 423.499996,213.040788 C423.5,168.123795 409.405414,125.037317 383.18276,89.087862 L379.177936,92.082013 C404.755962,127.168713 418.5,169.206433 418.499996,213.040319 C418.495998,234.366821 415.242897,255.336565 408.854757,275.403053 L413.600559,276.97818 Z'></path>
<path d='M215.5,423.485326 C282.848477,422.694511 345.194918,389.98106 384.250324,335.435229 L380.150871,332.572012 C342.02943,385.781712 281.209922,417.694728 215.5,418.484971 L215.5,423.485326 Z'></path>
<path d='M11.8921877,275.363712 C31.6841837,339.25704 81.1442277,390.272456 144.394079,412.066146 L145.966377,407.319405 C84.2689777,386.040338 36.0124046,336.266651 16.68602,273.94144 L11.8921877,275.363712 Z'></path>
<path d='M90.4843569,41.8072972 C35.9793527,80.872097 3.30755074,143.19191 2.51476725,210.564761 C4.61327814,210.555309 6.26888886,210.546014 7.48116438,210.53688 C7.49234469,210.536796 7.50348706,210.536711 7.51459146,210.536627 C8.29300557,144.846571 40.1752364,84.0391804 93.3494962,45.9054074 L90.4843569,41.8072972 Z M9.71023992,210.511698 C9.73273965,210.511156 9.75301462,210.510622 9.77102853,210.510098 C9.81078325,210.508782 9.81994844,210.508479 9.81925714,210.508542 C9.93348455,210.309263 9.99237372,210.208835 9.71023992,210.511698 Z'></path>
</g>
</svg>
<div class='waiting-time'>
<p>
Fino a
</p>
<strong aria-label='5 minuti'>
5 Min.
</strong>
</div>
</div>
<div class='c-status__txt'>
<strong>Presentati con ampio anticipo in aeroporto</strong>
<small>Causa controlli aggiuntivi dovuti al Covid-19</small>
</div>
</div>
{{! Check into NOTES tab for more info }}
<div class='c-status'>
<div class='c-status__img'>
<svg viewBox='0 0 426 426' class="{{{svg-class}}}" role='presentation'>
<g>
<path
d='M336.832277,42.7590218 C300.902926,16.5767757 257.849669,2.5 213,2.5 C191.108691,2.5 169.580785,5.8434982 148.983362,12.4117001 L150.559406,17.1571974 C170.649719,10.7571959 191.645825,7.5 213,7.5 C256.7678,7.5 298.773045,21.2267301 333.839999,46.7652463 L336.832277,42.7590218 Z'
></path>
<path
d='M413.600559,276.97818 C420.156634,256.405049 423.495897,234.90412 423.499996,213.040788 C423.5,168.123795 409.405414,125.037317 383.18276,89.087862 L379.177936,92.082013 C404.755962,127.168713 418.5,169.206433 418.499996,213.040319 C418.495998,234.366821 415.242897,255.336565 408.854757,275.403053 L413.600559,276.97818 Z'
></path>
<path
d='M215.5,423.485326 C282.848477,422.694511 345.194918,389.98106 384.250324,335.435229 L380.150871,332.572012 C342.02943,385.781712 281.209922,417.694728 215.5,418.484971 L215.5,423.485326 Z'
></path>
<path
d='M11.8921877,275.363712 C31.6841837,339.25704 81.1442277,390.272456 144.394079,412.066146 L145.966377,407.319405 C84.2689777,386.040338 36.0124046,336.266651 16.68602,273.94144 L11.8921877,275.363712 Z'
></path>
<path
d='M90.4843569,41.8072972 C35.9793527,80.872097 3.30755074,143.19191 2.51476725,210.564761 C4.61327814,210.555309 6.26888886,210.546014 7.48116438,210.53688 C7.49234469,210.536796 7.50348706,210.536711 7.51459146,210.536627 C8.29300557,144.846571 40.1752364,84.0391804 93.3494962,45.9054074 L90.4843569,41.8072972 Z M9.71023992,210.511698 C9.73273965,210.511156 9.75301462,210.510622 9.77102853,210.510098 C9.81078325,210.508782 9.81994844,210.508479 9.81925714,210.508542 C9.93348455,210.309263 9.99237372,210.208835 9.71023992,210.511698 Z'
></path>
</g>
</svg>
<div class='waiting-time'>
<p>
Fino a
</p>
<strong aria-label='5 minuti'>
5 Min.
</strong>
</div>
</div>
<div class='c-status__txt'>
{{{primary-txt}}}
{{{secondary-txt}}}
</div>
</div>
{
"svg-class": "two",
"primary-txt": "<strong>Presentati con ampio anticipo in aeroporto</strong>",
"secondary-txt": "<small>Causa controlli aggiuntivi dovuti al Covid-19</small>"
}
$status-svg-size: 76px;
.c-status {
display: inline-flex;
align-items: center;
@include shadow(medium);
border-radius: remify(50px);
padding: remify(8px) remify(16px) remify(8px) remify(8px);
.c-billboard__label & {
box-shadow: none;
padding: 0;
}
&:not(.c-status--delay) svg {
width: remify($status-svg-size);
height: remify($status-svg-size); // For IE
stroke-width: 30;
background-color: #fff;
border-radius: 50%;
padding: remify(4px);
path {
stroke: #ccc;
}
}
svg.one {
path:nth-child(n+1):nth-child(-n+1) {
stroke: status(positive);
}
}
svg.two {
path:nth-child(n+1):nth-child(-n+2) {
stroke: status(warning);
}
}
svg.three {
path:nth-child(n+1):nth-child(-n+3) {
stroke: status(warning);
}
}
svg.four {
path:nth-child(n+1):nth-child(-n+4) {
stroke: status(negative);
}
}
svg.five {
path:nth-child(n+1):nth-child(-n+5) {
stroke: status(negative);
}
}
}
.c-status__img {
position: relative;
max-height: remify($status-svg-size);
.c-billboard__label & {
order: 2;
}
.waiting-time {
text-transform: uppercase;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
color: secondary(text, 100);
p {
font-size: 75%;
}
strong {
font-size: 90%;
display: block;
line-height: remify(16px);
}
}
}
.c-status__txt {
margin-left: remify(16px);
color: primary(night, 100);
.c-status--delay & {
text-align: left;
}
.c-billboard__label & {
color: currentColor;
margin-right: remify(16px);
margin-left: 0;
order: 1;
text-align: right;
}
&>* {
display: block;
}
strong {
font-size: 75%;
@include min-screen(bp(phone-p)) {
font-size: 90%;
}
}
}
To change the color of the stroke, you can use the following classes on the svg element: .one, .two, .three, .four, .five