<div class="c-flight-info-cards ">
<div class="c-flight-info-cards__button">
<button type="button" class="c-button c-button--ghost">
Mostra 10 voli precedenti
</button>
</div>
<ul class="c-flight-info-cards__list">
<div class="c-flight-info-cards__date">
<p>Domenica 3 Novembre</p>
</div>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card c-flight-info-card--past">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time" aria-label="Orario programmato">23:10</p>
<span class="c-rounded-label c-rounded-label--negative" aria-label="Orario effettivo" data-text="In ritardo">
23:40
</span>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<div>
<p>Decollato 00:14</p>
<p class="actual-date">del 04/11/2024</p>
</div>
<div>Gate <strong>5</strong></div>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<div class="c-flight-info-cards__date">
<p>Lunedì 4 Novembre</p>
</div>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time" aria-label="Orario programmato">18:04</p>
<span class="c-rounded-label c-rounded-label--negative" aria-label="Orario effettivo" data-text="In ritardo">
22:03
</span>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<div>
<p>Check-in <strong>C 54-55</strong></p>
</div>
<div>Gate <strong>5</strong></div>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time" aria-label="Orario programmato">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<div>
<p>Check-in <strong>C 54-55</strong></p>
</div>
<div>Gate <strong>5</strong></div>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time" aria-label="Orario programmato">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<div>
<p>Check-in <strong>C 54-55</strong></p>
</div>
<div>Gate <strong>5</strong></div>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<div class="c-flight-info-cards__currentTime">
<p>Ora sono le 17:50</p>
</div>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time" aria-label="Orario programmato">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<div>
<p>Imbarco</p>
</div>
<div>Gate <strong>5</strong></div>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time" aria-label="Orario programmato">18:04</p>
<span class="c-rounded-label c-rounded-label--negative" aria-label="Orario effettivo" data-text="In ritardo">
22:03
</span>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<div>
<p>Check-in <strong>C 54-55</strong></p>
</div>
<div>Gate <strong>5</strong></div>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time" aria-label="Orario programmato">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<div>
<p>Imbarco terminato</p>
</div>
<div>Gate <strong>5</strong></div>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time" aria-label="Orario programmato">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<div>
<p>Decollato</p>
</div>
<div>Gate <strong>5</strong></div>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time" aria-label="Orario programmato">18:04</p>
<span class="c-rounded-label c-rounded-label--positive" aria-label="Orario effettivo" data-text="In anticipo">
17:50
</span>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
<li class="c-flight-info-cards__list-item">
<div class="c-flight-info-card ">
<div class="c-flight-info-card__inner">
<div class="c-flight-info-card__header">
<div class="place">Santiago di Compostela SCQ</div>
<div class="schedule">
<p class="schedule__time" aria-label="Orario programmato">18:04</p>
</div>
</div>
<div class="c-flight-info-card__body">
<p>Swiss International Air Lines | <span class="flight-code">BA541</span><span class="flight-code">AA6607</span><span class="flight-code">JL7154</span><span class="flight-code">AA6607</span></p>
<div class="flight-status">
<div>
<p><strong class="u-color-negative">Dirottato</strong></p>
</div>
</div>
</div>
</div>
<div class="c-flight-info-card__footer">
<a href="#" class="cta">
Segui volo
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_fb_messenger"></use>
</svg></a> <a href="/components/preview/page-myflight-departure.html" class="cta">
Dettagli
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
</li>
</ul>
<div class="c-flight-info-cards__button">
<button type="button" class="c-button c-button--ghost">
Mostra 10 voli successivi
</button>
</div>
</div>
<div class="c-flight-info-cards {{modifier}}">
<div class="c-flight-info-cards__button">
{{> @button previous-flights-btn }}
</div>
<ul class="c-flight-info-cards__list">
<div class="c-flight-info-cards__date">
<p>Domenica 3 Novembre</p>
</div>
<li class="c-flight-info-cards__list-item">
{{ render "@flight-info-card--took-off-delay" took-off-delay merge=true }}
</li>
<div class="c-flight-info-cards__date">
<p>Lunedì 4 Novembre</p>
</div>
<li class="c-flight-info-cards__list-item">
{{ render "@flight-info-card--check-in-delay" }}
</li>
<li class="c-flight-info-cards__list-item">
{{ render "@flight-info-card" }}
</li>
<li class="c-flight-info-cards__list-item">
{{ render "@flight-info-card--check-in" }}
</li>
<div class="c-flight-info-cards__currentTime">
<p>Ora sono le 17:50</p>
</div>
<li class="c-flight-info-cards__list-item">
{{ render "@flight-info-card--boarding" }}
</li>
<li class="c-flight-info-cards__list-item">
{{ render "@flight-info-card--check-in-delay" }}
</li>
<li class="c-flight-info-cards__list-item">
{{ render "@flight-info-card--boarding-completed" }}
</li>
<li class="c-flight-info-cards__list-item">
{{ render "@flight-info-card--took-off" }}
</li>
<li class="c-flight-info-cards__list-item">
{{ render "@flight-info-card--landing-early" }}
</li>
<li class="c-flight-info-cards__list-item">
{{ render "@flight-info-card--hijacked" }}
</li>
</ul>
<div class="c-flight-info-cards__button">
{{> @button next-flights-btn }}
</div>
</div>
{
"previous-flights-btn": {
"type": "button",
"text": "Mostra 10 voli precedenti",
"modifier": "c-button--ghost"
},
"next-flights-btn": {
"type": "button",
"text": "Mostra 10 voli successivi",
"modifier": "c-button--ghost"
},
"past-flight": {
"data": {
"scheduled-time": "22:44"
}
},
"took-off-delay": {
"modifier": "c-flight-info-card--past",
"data": {
"scheduled-time": "23:10",
"variation-time": "23:40",
"flight-status": "Decollato 00:14"
}
}
}
// .c-flight-info-cards {
// max-width: remify(450px);
// margin-inline: auto;
// }
.c-flight-info-cards__list {
display: flex;
flex-direction: column;
gap: remify(16px);
}
.c-flight-info-cards__button {
margin-block: remify(16px);
.c-button {
width: 100%;
}
}
.c-flight-info-cards__currentTime {
position: relative;
padding-block: remify(8px);
@include font-scale(level-1-5, bold);
z-index: 90;
&:before {
content: "";
position: absolute;
left: 0;
width: 100%;
border-top: remify(3px) solid primary(sky, 120);
overflow: initial; // Fixes #324
}
p {
position: absolute;
z-index: 200;
background-color: primary(sky, 120);
top: 50%;
right: remify(12px);
transform: translateY(-50%);
color: #fff;
padding: remify(2px) remify(8px);
border-radius: remify(20px);
@include min-screen(bp(tablet)) {
left: 50%;
right: initial;
transform: translate(-50%, -50%);
}
}
}
.c-flight-info-cards__date {
position: sticky;
top: 0;
z-index: 100;
padding-block: remify(24px);
background-color: secondary(basic-white, 100);
@include font-scale(level-1-5, bold);
&:before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
border-top: remify(3px) solid primary(night, 100);
overflow: initial; // Fixes #324
}
p {
position: absolute;
z-index: 200;
background-color: secondary(basic-white, 100);
top: 50%;
left: remify(12px);
transform: translateY(-50%);
color: primary(night, 100);
padding: remify(2px) remify(8px);
border: remify(1px) solid primary(night, 100);
border-radius: remify(20px);
@include min-screen(bp(tablet)) {
left: remify(20px);
}
}
}
No notes defined.