<div class="c-myflight-follower c-myflight-follower--departure" aria-hidden="false">
<div class="c-myflight-follower__inner">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic_flight_takeoff_black_24px"></use>
</svg> <a href="#"><strong>BA541</strong> per MAD</a>
<button class="close-btn" type="button"><svg class="c-icon c-icon--24">
<use xlink:href="#ic_close_black_24px"></use>
</svg><span class="u-visuallyhidden">Non seguire più questo volo</span></button>
</div>
<div class="c-myflight-follower__hint">
<p>
Da oggi puoi ritrovare velocemente il volo che hai deciso di seguire qui nel tuo <strong>Myflight</strong>. Ricorda, puoi seguire solo un volo alla volta.
</p>
<button type="button" class="c-button c-button--as-link js-close-hint">Ok, ho capito</button>
</div>
</div>
<div class="c-myflight-follower {{ modifier }}" aria-hidden="{{ aria-hidden }}">
<div class="c-myflight-follower__inner">
{{> @icon icon }}
<a href="#">{{{ text }}}</a>
<button class="close-btn" type="button">{{> @icon closing-icon }}<span class="u-visuallyhidden">Non seguire più questo volo</span></button>
</div>
<div class="c-myflight-follower__hint">
<p>
Da oggi puoi ritrovare velocemente il volo che hai deciso di seguire qui nel tuo <strong>Myflight</strong>. Ricorda, puoi seguire solo un volo alla volta.
</p>
<button type="button" class="c-button c-button--as-link js-close-hint">Ok, ho capito</button>
</div>
</div>
{
"name": "departure",
"modifier": "c-myflight-follower--departure",
"aria-hidden": "false",
"text": "<strong>BA541</strong> per MAD",
"icon": {
"symbol": "ic_flight_takeoff_black_24px",
"class": "c-icon c-icon--24"
},
"closing-icon": {
"symbol": "ic_close_black_24px",
"class": "c-icon c-icon--24"
}
}
.c-myflight-follower {
position: relative;
display: inline-block;
.c-toolbar--myflight & {
display: none;
@include min-screen(bp(tablet-p)) {
display: block;
}
}
}
.c-myflight-follower__inner {
display: inline-flex;
padding: remify(8px);
border-radius: remify(4px);
color: #fff;
align-items: center;
button {
border: 0;
background: none;
width: remify(24px);
height: remify(24px);
padding: 0;
svg * {
fill: #fff;
}
}
svg * {
fill: currentColor;
}
a {
margin-left: remify(8px);
margin-right: remify(16px);
color: currentColor;
}
}
.c-myflight-follower__hint {
background-color: #fff;
border-radius: remify(4px);
font-size: 75%;
text-align: center;
position: absolute;
width: 120%;
padding: remify(16px);
top: 140%;
left: 50%;
transform: translateX(-50%);
@include shadow(medium);
z-index: 10;
&:before{
content: "";
position: absolute;
@include css-triangle("up", 10px, #fff);
top: remify(-20px);
left: 50%;
transform: translateX(-50%);
}
.js-close-hint {
margin-top: remify(16px);
}
}
/*------------------------------------*\
Departure modifier
\*------------------------------------*/
.c-myflight-follower--departure {
.c-myflight-follower__inner {
background-color: primary(sky, 120);
}
}
/*------------------------------------*\
Arrival modifier
\*------------------------------------*/
.c-myflight-follower--arrival {
.c-myflight-follower__inner {
background-color: primary(sun, 120);
color: primary(night, 100);
button {
svg * {
fill: currentColor;
}
}
}
}
/*------------------------------------*\
Mobile modifier
\*------------------------------------*/
.c-myflight-follower--mobile {
width: 100%;
@include min-screen(bp(tablet-p)) {
display: none;
}
.c-myflight-follower__hint {
display: none;
}
.c-myflight-follower__inner {
border-radius: 0;
width: 100%;
justify-content: center;
}
.c-myflight-follower__inner button {
display: none;
}
}
No notes defined.