<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">
<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">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">
<p>Check-in <strong>C 54-55</strong></p>
<p>Gate <strong>5</strong></p>
</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>Adesso 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">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">
<p>Check-in <strong>C 54-55</strong></p>
<p>Gate <strong>5</strong></p>
</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">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">
<p>Check-in <strong>C 54-55</strong></p>
<p>Gate <strong>5</strong></p>
</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 c-flight-info-card--delayed">
<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">18:04</p>
<span class="c-rounded-label c-rounded-label--negative" aria-label="">
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">
<p>Check-in <strong>C 54-55</strong></p>
<p>Gate <strong>5</strong></p>
</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">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">
<p>Imbarco</p>
<p>Gate <strong>5</strong></p>
</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">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">
<p>Imbarco terminato</p>
<p>Gate <strong>5</strong></p>
</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">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">
<p>Decollato</p>
<p>Gate <strong>5</strong></p>
</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 c-flight-info-card--delayed">
<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">18:04</p>
<span class="c-rounded-label c-rounded-label--negative" aria-label="">
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">
<p>Decollato 22:03</p>
<p>Gate <strong>5</strong></p>
</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">18:04</p>
<span class="c-rounded-label c-rounded-label--positive" aria-label="">
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">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">
<p><strong class="u-color-negative">Dirottato</strong></p>
</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">
<li class="c-flight-info-cards__list-item">
{{ render "@flight-info-card--past-flight" }}
</li>
<div class="c-flight-info-cards__currentTime">
<p>Adesso sono le 17:50</p>
</div>
{{#each items}}
<li class="c-flight-info-cards__list-item">
{{!-- {{ render (concat "@" this.variant) }} --}}
{{ render componentName componentInstance merge=true }}
</li>
{{/each}}
{{!-- {{#repeat 5}}
<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--delayed" }}
</li>
{{/repeat}} --}}
</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"
},
"items": [
{
"componentName": "@flight-info-card"
},
{
"componentName": "@flight-info-card--check-in"
},
{
"componentName": "@flight-info-card--check-in-delay"
},
{
"componentName": "@flight-info-card--boarding"
},
{
"componentName": "@flight-info-card--boarding-completed"
},
{
"componentName": "@flight-info-card--took-off"
},
{
"componentName": "@flight-info-card--took-off-delay"
},
{
"componentName": "@flight-info-card--landing-early"
},
{
"componentName": "@flight-info-card--hijacked"
}
]
}
// .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);
&: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%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
padding: remify(2px) remify(8px);
border-radius: remify(20px);
}
}
No notes defined.