<div class="c-response-msg o-response-msg ">
<img src="../../images/svgs/flight.svg" alt="Carrello vuoto" />
<h2>Il tuo carrello è vuoto</h2>
<p class="o-response-msg__further-text">
<a href="#">Torna alle tue prenotazioni</a>
</p>
</div>
<div class="c-response-msg o-response-msg {{modifier}}">
{{#if img-path}}
<img src="{{path img-path}}" alt="{{img-alt}}" />
{{/if}}
<h2>{{{message}}}</h2>
{{#if further-text}}
<p class="o-response-msg__further-text">
{{{further-text}}}
</p>
{{/if}}
</div>
{
"img-path": "/images/svgs/flight.svg",
"img-alt": "Carrello vuoto",
"message": "Il tuo carrello è vuoto",
"further-text": "<a href=\"#\">Torna alle tue prenotazioni</a>"
}
.c-response-msg {
background-color: #fff;
border-radius: remify(4px);
main & {
grid-column: main;
z-index: $zIndex-responseMessage;
}
.c-main--flight-payed &,
.c-main-reservationDetail & {
background-color: transparent;
}
.c-response-msg__title {
font-weight: fw(light);
@include font-scale(level-5);
}
}
/*------------------------------------*\
Object CSS
\*------------------------------------*/
.o-response-msg {
padding: remify(64px) remify(16px);
.c-main--flight-payed & {
padding: remify(24px);
}
> * {
text-align: center
}
img {
margin: 0 auto remify(32px);
display: block;
width: remify(80px);
}
h2,
.c-response-msg__title {
margin-bottom: remify(16px);
@include font-scale(level-5);
}
}
/*------------------------------------*\
Raw modifier
\*------------------------------------*/
.c-response-msg--raw {
main & {
grid-column: full;
}
}
/*------------------------------------*\
Manteinance modifier
\*------------------------------------*/
.c-response-msg--manteinance {
main & {
grid-column: full;
}
background-color: primary(sky, 10);
color: primary(night, 100);
}
No notes defined.