<div class="c-route c-route--compact ">
<div class="c-route__flight-company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="100">
<p>Alitalia</p>
<strong>EK 94</strong>
</div>
<div class="c-route__journey">
<div class='c-airport-info c-airport-info--stops'>
BLQ
<strong>15:35</strong>
<p><strong>Bologna</strong>, Guglielmo Marconi</p>
</div>
<div class="c-route__duration">
Durata del volo: <strong>4h 15min</strong>
</div>
<div class='c-airport-info c-airport-info--stops'>
<strong>
23:30
</strong>
Dxb
<p><strong>Dubai</strong>, International</p>
</div>
</div>
</div>
<div class="c-route c-route--compact {{ modifier }}">
<div class="c-route__flight-company">
<img src="{{ path company-logo }}" alt="Alitalia" width="100">
<p>{{ company-name }}</p>
<strong>{{ flight-code }}</strong>
</div>
<div class="c-route__journey">
{{> @airport-info--stops from }}
<div class="c-route__duration">
Durata del volo: <strong>4h 15min</strong>
</div>
{{> @airport-info--stops-to to }}
</div>
{{!-- <div class="c-route__features">
{{> @icon-list features }}
</div> --}}
</div>
{
"route-label": "<strong>Andata</strong>",
"route-date": "Martedì, 07 marzo 2022",
"company-logo": "/images/flights-logos/alitalia.png",
"company-name": "Alitalia",
"flight-code": "EK 94",
"from": {
"airport-code": "BLQ",
"airport-name": "<strong>Bologna</strong>, Guglielmo Marconi",
"time": "15:35"
},
"to": {
"airport-code": "Dxb",
"airport-name": "<strong>Dubai</strong>, International",
"time": "23:30"
},
"stops": {
"duration": "Durata del volo: <strong>4h 15min</strong>",
"stops-number": 1,
"toggle": {
"id": "stop-toggle-1",
"name": "stop-toggle-1",
"text": "1 scalo"
},
"aria-controls-id": "stop-detail-1"
},
"waiting-time": "Durata scalo: <strong>3h</strong>",
"features": {
"aria-label": "Caratteristiche di questo volo",
"items": [
{
"icon": "ic-work-black-24px",
"text": "Bagaglio da stiva incluso"
},
{
"icon": "ic-baseline-airline-seat-recline-extra-24px",
"text": "Economy class"
}
]
},
"stopDetail-1": {
"company-logo": "/images/flights-logos/alitalia.png",
"company-name": "Alitalia",
"flight-code": "EK 765",
"from": {
"airport-code": "BLQ",
"airport-name": "Bologna, Guglielmo Marconi",
"time": "15:35"
},
"to": {
"airport-code": "Svo",
"airport-name": "Mosca Sheremetyevo",
"time": "15:45"
},
"features": {
"aria-label": "Caratteristiche di questo volo",
"items": [
{
"icon": "ic-work-black-24px",
"text": "Bagaglio da stiva incluso"
},
{
"icon": "ic-baseline-airline-seat-recline-extra-24px",
"text": "Economy class"
}
]
}
},
"stopDetail-2": {
"company-logo": "/images/flights-logos/alitalia.png",
"company-name": "Alitalia",
"flight-code": "EK 104",
"from": {
"airport-code": "Svo",
"airport-name": "Mosca Sheremetyevo",
"time": "15:35"
},
"to": {
"airport-code": "Dxb",
"airport-name": "Dubai International",
"time": "01:15"
},
"features": {
"aria-label": "Caratteristiche di questo volo",
"items": [
{
"icon": "ic-work-black-24px",
"text": "Bagaglio da stiva incluso"
},
{
"icon": "ic-baseline-airline-seat-recline-extra-24px",
"text": "Economy class"
}
]
}
},
"duration": "Durata del volo: <strong>4h 15min</strong>"
}
.c-route {
font-size: 75%;
line-height: 1.4;
gap: 0 remify(16px);
@include min-screen(bp(tablet)) {
font-size: 100%;
line-height: 1.5;
}
@include min-screen(bp(tablet-p)) {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.c-flight-product & {
@include min-screen(bp(tablet-p)) {
flex: 1 1 auto;
}
}
// &.has-border {
// margin-bottom: 32px;
// padding-bottom: 32px;
// border-bottom: 1px solid primary(sky, 20);
// }
}
.c-route .c-airport-info:last-child {
text-align: right;
}
.c-route__data {
display: flex;
justify-content: space-between;
flex: 1 0 100%;
margin-bottom: remify(16px);
gap: remify(16px);
}
.c-route__label {
flex: 1 1 50%;
text-align: left;
color: primary(night, 100);
font-size: remify(12px);
strong {
color: primary(sky, 120);
margin-right: remify(8px);
}
.c-route__date {
font-weight: fw(bold);
color: secondary(text, 100);
}
@include min-screen(bp(tablet-p)) {
text-align: left;
margin-bottom: 0;
}
}
.c-route__flight-company {
text-align: right;
font-size: remify(12px);
color: primary(night, 120);
@include min-screen(bp(tablet-p)) {
flex: 1 1 50%;
}
img {
max-height: remify(27px);
max-width: remify(30px);
margin-bottom: remify(2px);
}
svg {
vertical-align: top;
}
.c-route--compact & {
flex: 0 1 10%;
}
}
.c-route__journey {
display: flex;
align-items: center;
justify-content: space-between;
// margin-top: remify(12px);
// margin-bottom: remify(12px);
gap: remify(8px);
@include min-screen(bp(tablet-p)) {
flex: 1;
}
}
.c-route__features {
@include min-screen(bp(tablet-p)) {
flex: 0 1 20%;
}
.c-route--compact & {
@include min-screen(bp(tablet-p)) {
flex-basis: calc(20% - 8px);
}
}
}
.c-route__stop-detail {
background-color: secondary(page, 100);
.waiting-time {
display: block;
background: linear-gradient(90deg, #CADBEA 57.31%, rgba(37, 98, 151, 0) 100.51%), #2E7ABD;
text-align: left;
color: primary(night, 120);
position: relative;
padding: remify(6px) 0 remify(8px);
p {
position: relative;
z-index: 2;
display: inline-block;
padding: 0 remify(16px);
font-size: 75%;
}
}
}
/*------------------------------------*\
Compact modifier
\*------------------------------------*/
.c-route--compact {
margin-top: remify(16px);
border-radius: remify(4px);
padding: remify(16px);
font-size: 75%;
max-width: remify(670px);
margin-inline: auto;
// border-bottom: 2px dashed primary(sky, 20);
&:last-child {
margin-top: 0;
// border-bottom: 0;
}
.c-route__flight-company {
flex: 1 1 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
@include min-screen(bp(tablet-p)) {
display: block;
flex: 0 1 10%;
text-align: left;
}
}
.c-route__duration {
position: relative;
border-bottom: 1px dashed primary(night, 20);
width: 100%;
text-align: center;
margin-left: remify(16px);
margin-right: remify(16px);
font-size: remify(13px);
}
}
No notes defined.