<div class='c-status'>
<div class='c-status__img'>
<svg viewBox="0 0 320 320" class="two" role="presentation">
<path d="M 290 160 A 130 130 0 0 0 182.57426309670095 31.97499210841295"></path>
<path d="M 160 290 A 130 130 0 0 0 288.02500789158705 182.57426309670095"></path>
<path d="M 30 160.00000000000003 A 130 130 0 0 0 137.42573690329905 288.02500789158705"></path>
<path d="M 159.99999999999997 30 A 130 130 0 0 0 31.97499210841295 137.42573690329903"></path>
</svg>
<div class='waiting-time'>
<p>Fino a</p><strong aria-label='220 minuti'>20 Min.</strong>
</div>
</div>
<div class='c-status__txt'>
<strong>Presentati con ampio anticipo in aeroporto</strong>
<small>Stima indicativa - Ultimo aggiornamento 14:30</small>
</div>
</div>
{{! Check into NOTES tab for more info }}
<div class='c-status'>
<div class='c-status__img'>
<svg viewBox="0 0 320 320" class="{{{svg-class}}}" role="presentation">
<path d="M 290 160 A 130 130 0 0 0 182.57426309670095 31.97499210841295"></path>
<path d="M 160 290 A 130 130 0 0 0 288.02500789158705 182.57426309670095"></path>
<path d="M 30 160.00000000000003 A 130 130 0 0 0 137.42573690329905 288.02500789158705"></path>
<path d="M 159.99999999999997 30 A 130 130 0 0 0 31.97499210841295 137.42573690329903"></path>
</svg>
<div class='waiting-time'>
{{{ waiting-time-text }}}
</div>
</div>
<div class='c-status__txt'>
{{{primary-txt}}}
{{{secondary-txt}}}
</div>
</div>
{
"secondary-txt": "<small>Stima indicativa - Ultimo aggiornamento 14:30</small>",
"svg-class": "two",
"primary-txt": "<strong>Presentati con ampio anticipo in aeroporto</strong>",
"waiting-time-text": "<p>Fino a</p><strong aria-label='220 minuti'>20 Min.</strong>"
}
$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
background-color: #fff;
border-radius: 50%;
padding: remify(1px);
// transform: scale(1.2);
path {
stroke: #ccc;
stroke-width: 20;
fill: none;
}
}
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: primary(sun, 100);
}
}
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%);
transform: translate(-50%, -50%) scale(0.9);
color: secondary(text, 100);
p {
font-size: 75%;
}
strong {
font-size: 85%;
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