<div class="c-billboard c-billboard--arrivals ">
<input class="c-billboard__toggle" type="checkbox" name="billboard" id="radio-toggle-billboard-arrivals" aria-hidden="true">
<label class="c-billboard__label" for="radio-toggle-billboard-arrivals">
<div class="icon"><svg class="c-icon c-icon--32">
<use xlink:href="#ic_flight_land_black_24px"></use>
</svg></div>
<div class="text">
<p>Arrivi</p>
<small>Ultimo aggiornamento 10:10</small>
</div>
</label>
<div class="c-billboard__table">
<table class="c-table c-table--flights">
<caption class="u-visuallyhidden"></caption>
<thead>
<tr>
<th class="no-mobile">Compagnia</th>
<th>Provenienza</th>
<th>N° Volo</th>
<th>Orario stimato</th>
<th>Stato</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp">
<strong>VIENNA</strong>
</div>
</td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info VIENNA BE3783">BE3783</a></td>
<td>14:00</td>
<td class="situation">Atterrato</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp">
<strong>VIENNA</strong>
</div>
</td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info VIENNA BE3783">BE3783</a></td>
<td>14:00</td>
<td class="situation">Atterrato</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp">
<strong>VIENNA</strong>
</div>
</td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info VIENNA BE3783">BE3783</a></td>
<td>14:00</td>
<td class="situation">Atterrato</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp">
<strong>VIENNA</strong>
</div>
</td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info VIENNA BE3783">BE3783</a></td>
<td>14:00</td>
<td class="situation">Atterrato</td>
</tr>
<tr>
<td class="no-mobile"><a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a></td>
<td><strong>MADRID</strong></td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info MADRID AZ8783">AZ8783</a></td>
<td>14:00 <strong class="is-positive">13:50</strong></td>
<td class="situation">Atterrato</td>
</tr>
</tbody>
</table>
<p class="foot">
<a href="../preview/page-arrivals-departures#section-arrivals.html">Tutti gli arrivi</a>
</p>
</div>
</div>
<div class="c-billboard c-billboard--arrivals {{ modifier }}">
<input class="c-billboard__toggle" type="checkbox" name="billboard" id="{{input-toggle.id}}" aria-hidden="true">
<label class="c-billboard__label" for="{{ input-toggle.id }}">
<div class="icon">{{> @icon icon }}</div>
<div class="text">
<p>Arrivi</p>
<small>Ultimo aggiornamento 10:10</small>
</div>
{{!-- {{> @icon class="c-icon c-icon--32 c-billboard__arrow" symbol="ic_expand_more_black_24px" }} --}}
</label>
<div class="c-billboard__table">
{{ render "@table--flights-arrivals-minimal" }}
<p class="foot">
<a href="{{ path '/components/preview/page-arrivals-departures#section-arrivals' }}">Tutti gli arrivi</a>
</p>
</div>
</div>
{
"name": "departures",
"label": "departures",
"input-toggle": {
"id": "radio-toggle-billboard-arrivals"
},
"icon": {
"class": "c-icon c-icon--32",
"symbol": "ic_flight_land_black_24px"
},
"status": {
"svg-class": "one",
"primary-txt": "<strong>Presentati con ampio anticipo in aeroporto</strong>",
"secondary-txt": "<small>Causa controlli aggiuntivi dovuti al Covid-19</small>"
}
}
.c-billboard {
border-radius: remify(24px);
overflow: auto;
overflow-x: hidden;
@include shadow(medium);
.c-billboards__item & {
@include min-screen(remify($base-page-width)) {
flex: 1;
display: flex;
flex-direction: column;
}
}
a {
color: primary(sky, 120);
}
}
.c-billboard__label {
display: flex;
align-items: center;
padding: remify(8px) remify(16px);
position: relative;
@include min-screen(bp(tablet-p)) {
min-height: remify(90px);
}
}
.c-billboard__label .icon svg {
margin-right: remify(16px);
* {
fill: currentColor;
}
}
.c-billboard__label .text {
text-align: left;
p {
text-transform: uppercase;
font-weight: fw(semibold);
}
}
.c-billboard__label .status {
margin-left: auto;
display: none;
@include min-screen(bp(tablet-p)) {
display: block;
}
}
.c-billboard__label .c-billboard__arrow {
margin-left: auto;
* {
fill: currentColor;
}
@include min-screen(bp(tablet-p)) {
display: none;
}
}
.c-billboard__toggle {
display: none;
}
.c-billboard__table {
background-color: #fff;
.c-billboards__item & {
@include min-screen(remify($base-page-width)) {
flex: 1;
}
}
// .c-table.c-table--flights th,
// .c-table.c-table--flights td {
// vertical-align: middle;
// }
// tbody {
// td {
// height: remify(80px);
// }
// }
// thead {
// tr {
// height: remify(68px);
// }
// }
}
.c-billboard__status {
display: block;
margin-top: remify(16px);;
@include min-screen(bp(tablet-p)) {
display: none ;
}
.c-status {
background-color: #fff;
}
}
.c-billboard__table .foot {
text-align: center;
padding: remify(16px) 0;
}
.c-billboards_tablist .c-billboards .c-billboards__item {
padding: 0;
}
/*------------------------------------*\
Departures modifier
\*------------------------------------*/
.c-billboard--departures {
border-radius: remify(24px);
.c-billboard__label {
background-color: primary(night, 100);
color: #fff;
}
}
/*------------------------------------*\
Arrivals modifier
\*------------------------------------*/
.c-billboard--arrivals {
border-radius: remify(24px);
.c-billboard__label {
background-color: primary(sun, 100);
color: primary(night, 120);
}
}
No notes defined.