<div class="c-deepening-bubble" aria-hidden="true">
<div class="c-deepening-bubble__price">
<span class="barred">€ 42,00</span>
<strong>€ 33,00</strong>
</div>
<div class="c-deepening-bubble__distance">
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_directions_walk_black_24px"></use>
</svg>
<p>1 min.</p>
</div>
<button type="button" class="c-deepening-bubble__close" aria-label="Chiudi la modale">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
<div class="c-deepening-bubble" aria-hidden="{{ aria-hidden }}">
<div class="c-deepening-bubble__price">
<span class="barred">€ 42,00</span>
<strong>€ 33,00</strong>
</div>
<div class="c-deepening-bubble__distance">
{{> @icon icon }}
<p>1 min.</p>
</div>
<button type="button" class="c-deepening-bubble__close" aria-label="Chiudi la modale">
{{> @icon symbol="ic_close_black_24px" class="c-icon c-icon--32" }}
</button>
</div>
{
"aria-hidden": "true",
"icon": {
"symbol": "ic_directions_walk_black_24px",
"class": "c-icon c-icon--18"
}
}
.c-deepening-bubble {
background-color: #fff;
display: inline-block;
padding: remify(18px) remify(8px) remify(12px) remify(8px);
border-radius: remify(4px);
@include shadow(medium);
position: relative;
&:after{
content: "";
position: absolute;
@include css-triangle("down", 10px, #fff);
transform: translate(-50%);
bottom: remify(-20px);
}
.o-parkings__map & {
position: initial;
}
}
.c-deepening-bubble__price {
.barred {
text-decoration: line-through;
}
}
.c-deepening-bubble__distance {
display: flex;
align-items: center;
justify-content: center;
font-size: 75%;
}
.c-deepening-bubble__close {
position: absolute;
top: remify(2px);
right: remify(2px);
background-color: transparent;
border: none;
padding: 0;
margin: 0;
svg {
width: remify(18px);
height: remify(18px);
* {
fill: #b1b1b1;
}
}
}
No notes defined.