<div class="c-billboard c-billboard--departures ">
<input class="c-billboard__toggle" type="checkbox" name="billboard" id="radio-toggle-billboard-departures" aria-hidden="true">
<label class="c-billboard__label" for="radio-toggle-billboard-departures">
<div class="icon"><svg class="c-icon c-icon--32">
<use xlink:href="#ic_flight_takeoff_black_24px"></use>
</svg></div>
<div class="text">
<p>Partenze</p>
<small>Ultimo aggiornamento 10:10</small>
</div>
<div class="status">
<div class='c-status c-status--delay'>
<div class='c-status__img'>
<svg height='69' viewBox='0 0 69 69' width='69' xmlns='http://www.w3.org/2000/svg'>
<g fill='none' fill-rule='evenodd'>
<circle cx='34.5' cy='34.5' fill='#e8ecf2' r='34.5'></circle>
<g fill-rule='nonzero'>
<g transform='translate(11 28.96)'>
<path d='m30.7721607 21.4158365c2.2189691.839156 1.9580818 3.757661.003183 5.0503395-1.5308386 1.0122683-4.6580008 1.0122683-9.3814866 0-.8940848-.0000222-1.7454867-.429994-2.3394757-1.1814733l-3.0583814-3.8692307-15.996.000208v-18.450432h13.768882l2.2117455-1.76942938c.7010315-.56081379 1.5720533-.86634662 2.4698045-.86634662h14.6916754c1.1108814 0 2.0114286 1.18007711 2.0114286 2.635776s-.9005472 2.635776-2.0114286 2.635776h2.1371429c1.3886016 0 2.5142857 1.18007711 2.5142857 2.635776s-1.1256841 2.635776-2.5142857 2.635776h2.3885714c1.5274618 0 2.7657143 1.1800771 2.7657143 2.635776s-1.2382525 2.635776-2.7657143 2.635776h1.5085714c1.666322 0 3.0171429 1.1800771 3.0171429 2.635776s-1.3508209 2.635776-3.0171429 2.635776z' fill='#fecd05'></path>
<rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472'></rect>
<rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472' y='16.4736'></rect>
<rect fill='#2b72b0' height='12.519936' rx='2.306304' width='11.202048' x='1.317888' y='5.930496'></rect>
<path d='m5.76177737 14.669171-1.32383065-1.3238307c-.38235783-.3886368-.52634303-.7502363-.14083294-1.1357464.38551008-.3855101 1.18857604.3159297 1.57721282.6982875l.5143082.5143082 1.29884335-1.7318187c.32900917-.4386788 1.02957775-1.3957871 1.55630478-1.0605269.52672703.3352603.32900915.8466666 0 1.2853455l-1.98574597 2.6476613c-.17268596.2302592-.43679316.3742518-.72388715.394667-.02360831.0016548-.04707872.0024822-.07041124.0024822-.26329289 0-.51579118-.1046467-.7019612-.290829z' fill='#fff'></path>
</g>
<g transform='translate(30.36 14)'>
<path d='m22.528 11.264c0 2.9968125-1.1634219 5.8172813-3.2757656 7.942-2.1111407 2.123-4.9214688 3.3025781-7.9143281 3.3214844-.0073907 0-.0154688.0005156-.0228594 0-.0166719.0005156-.0338594.0005156-.0510469.0005156-3.00832814 0-5.83704686-1.1713281-7.96451564-3.2991406-2.1278125-2.1272969-3.29948436-4.9561875-3.29948436-7.9648594 0-3.00867186 1.17167186-5.83704686 3.29948436-7.96485936 2.12746878-2.12746878 4.9561875-3.29914064 7.96451564-3.29914064.0171875 0 .0338594 0 .0510469.00051563.0079062 0 .0158125 0 .0237187.00034374 2.9925157.0194219 5.8026719 1.19865627 7.9134688 3.32165627 2.1123437 2.12471872 3.2757656 4.94501563 3.2757656 7.94148436z' fill='#ff4a05'></path>
<g fill='#fff'>
<path d='m13.1965625 6.62028127v5.03525003c0 1.0350312-.8418438 1.8770468-1.8767031 1.8770468h-.0048125c-.4834844-.0140937-.9826094-.2093437-1.32257817-.5494844-.35423437-.3545781-.54965623-.8258593-.54965623-1.3275624v-5.03525003c0-1.02351563.84975-1.84765627 1.8722344-1.87704691h.0048125c1.0348593 0 1.8767031.8421875 1.8767031 1.87704691z'></path>
<path d='m13.0961875 15.9121875c0 .9798594-.7968125 1.7766719-1.7766719 1.7766719h-.0044687c-.9772813-.0022344-1.7718594-.7981875-1.7718594-1.7766719 0-.9781406.7945781-1.7740938 1.7718594-1.7763281h.0044687c.9798594 0 1.7766719.7968125 1.7766719 1.7763281z'></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class='c-status__txt'>
<strong>Presentati con ampio anticipo in aeroporto</strong>
<small>Causa controlli aggiuntivi dovuti al Covid-19</small>
</div>
</div>
</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>Destinazione</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>Swiss International Air Lines</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp"><strong>MARSA ALAM / SHARM EL SHEIKH</strong></div>
</td>
<td>
<a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info FRANKFURT YU9001">YU9001</a>
</td>
<td>14:00</td>
<td class="situation">Check-in C 45→48</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Swiss International Air Lines</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp"><strong>MARSA ALAM / SHARM EL SHEIKH</strong></div>
</td>
<td>
<a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info FRANKFURT YU9001">YU9001</a>
</td>
<td>14:00</td>
<td class="situation">Check-in C 45→48</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Swiss International Air Lines</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp"><strong>MARSA ALAM / SHARM EL SHEIKH</strong></div>
</td>
<td>
<a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info FRANKFURT YU9001">YU9001</a>
</td>
<td>14:00</td>
<td class="situation">Check-in C 45→48</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Swiss International Air Lines</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp"><strong>MARSA ALAM / SHARM EL SHEIKH</strong></div>
</td>
<td>
<a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info FRANKFURT YU9001">YU9001</a>
</td>
<td>14:00</td>
<td class="situation">Check-in C 45→48</td>
</tr>
<tr>
<td class="no-mobile"><a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a></td>
<td><strong>LONDON LHR</strong></td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info LONDON LHR CP9827">CP9827</a></td>
<td>14:00 <strong class="is-negative">14:20</strong></td>
<td class="situation">Check-in C 45→48</td>
</tr>
</tbody>
</table>
<p class="foot">
<a href="../preview/page-arrivals-departures#section-departures.html">Tutte le partenze</a>
</p>
</div>
</div>
<div class="c-billboard__status status">
<div class='c-status c-status--delay'>
<div class='c-status__img'>
<svg height='69' viewBox='0 0 69 69' width='69' xmlns='http://www.w3.org/2000/svg'>
<g fill='none' fill-rule='evenodd'>
<circle cx='34.5' cy='34.5' fill='#e8ecf2' r='34.5'></circle>
<g fill-rule='nonzero'>
<g transform='translate(11 28.96)'>
<path d='m30.7721607 21.4158365c2.2189691.839156 1.9580818 3.757661.003183 5.0503395-1.5308386 1.0122683-4.6580008 1.0122683-9.3814866 0-.8940848-.0000222-1.7454867-.429994-2.3394757-1.1814733l-3.0583814-3.8692307-15.996.000208v-18.450432h13.768882l2.2117455-1.76942938c.7010315-.56081379 1.5720533-.86634662 2.4698045-.86634662h14.6916754c1.1108814 0 2.0114286 1.18007711 2.0114286 2.635776s-.9005472 2.635776-2.0114286 2.635776h2.1371429c1.3886016 0 2.5142857 1.18007711 2.5142857 2.635776s-1.1256841 2.635776-2.5142857 2.635776h2.3885714c1.5274618 0 2.7657143 1.1800771 2.7657143 2.635776s-1.2382525 2.635776-2.7657143 2.635776h1.5085714c1.666322 0 3.0171429 1.1800771 3.0171429 2.635776s-1.3508209 2.635776-3.0171429 2.635776z' fill='#fecd05'></path>
<rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472'></rect>
<rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472' y='16.4736'></rect>
<rect fill='#2b72b0' height='12.519936' rx='2.306304' width='11.202048' x='1.317888' y='5.930496'></rect>
<path d='m5.76177737 14.669171-1.32383065-1.3238307c-.38235783-.3886368-.52634303-.7502363-.14083294-1.1357464.38551008-.3855101 1.18857604.3159297 1.57721282.6982875l.5143082.5143082 1.29884335-1.7318187c.32900917-.4386788 1.02957775-1.3957871 1.55630478-1.0605269.52672703.3352603.32900915.8466666 0 1.2853455l-1.98574597 2.6476613c-.17268596.2302592-.43679316.3742518-.72388715.394667-.02360831.0016548-.04707872.0024822-.07041124.0024822-.26329289 0-.51579118-.1046467-.7019612-.290829z' fill='#fff'></path>
</g>
<g transform='translate(30.36 14)'>
<path d='m22.528 11.264c0 2.9968125-1.1634219 5.8172813-3.2757656 7.942-2.1111407 2.123-4.9214688 3.3025781-7.9143281 3.3214844-.0073907 0-.0154688.0005156-.0228594 0-.0166719.0005156-.0338594.0005156-.0510469.0005156-3.00832814 0-5.83704686-1.1713281-7.96451564-3.2991406-2.1278125-2.1272969-3.29948436-4.9561875-3.29948436-7.9648594 0-3.00867186 1.17167186-5.83704686 3.29948436-7.96485936 2.12746878-2.12746878 4.9561875-3.29914064 7.96451564-3.29914064.0171875 0 .0338594 0 .0510469.00051563.0079062 0 .0158125 0 .0237187.00034374 2.9925157.0194219 5.8026719 1.19865627 7.9134688 3.32165627 2.1123437 2.12471872 3.2757656 4.94501563 3.2757656 7.94148436z' fill='#ff4a05'></path>
<g fill='#fff'>
<path d='m13.1965625 6.62028127v5.03525003c0 1.0350312-.8418438 1.8770468-1.8767031 1.8770468h-.0048125c-.4834844-.0140937-.9826094-.2093437-1.32257817-.5494844-.35423437-.3545781-.54965623-.8258593-.54965623-1.3275624v-5.03525003c0-1.02351563.84975-1.84765627 1.8722344-1.87704691h.0048125c1.0348593 0 1.8767031.8421875 1.8767031 1.87704691z'></path>
<path d='m13.0961875 15.9121875c0 .9798594-.7968125 1.7766719-1.7766719 1.7766719h-.0044687c-.9772813-.0022344-1.7718594-.7981875-1.7718594-1.7766719 0-.9781406.7945781-1.7740938 1.7718594-1.7763281h.0044687c.9798594 0 1.7766719.7968125 1.7766719 1.7763281z'></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class='c-status__txt'>
<strong>Presentati con ampio anticipo in aeroporto</strong>
<small>Causa controlli aggiuntivi dovuti al Covid-19</small>
</div>
</div>
</div>
<div class="c-billboard c-billboard--departures {{ 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>Partenze</p>
<small>Ultimo aggiornamento 10:10</small>
</div>
<div class="status">
{{> @status--delay status }}
</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-departures-minimal" }}
<p class="foot">
<a href="{{ path '/components/preview/page-arrivals-departures#section-departures' }}">Tutte le partenze</a>
</p>
</div>
</div>
<div class="c-billboard__status status">
{{> @status--delay status }}
</div>
{
"name": "departures",
"label": "departures",
"input-toggle": {
"id": "radio-toggle-billboard-departures"
},
"icon": {
"class": "c-icon c-icon--32",
"symbol": "ic_flight_takeoff_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.