Route

Reviewed

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-route ">

    <div class="c-route__data">
        <div class="c-route__label">
            <strong>Andata</strong>
            <span class="c-route__date">Martedì, 07 marzo 2022</span>
        </div>

        <div class="c-route__flight-company">
            <span>Alitalia</span>
            <strong>EK 94</strong>
            <svg class="c-icon c-icon--16">
                <use xlink:href="#ic-plane"></use>
            </svg>
        </div>
    </div>

    <div class="c-route__journey">
        <div class='c-airport-info'>
            <strong class='c-airport-info__code'>BLQ</strong>
            <strong class='c-airport-info__time'>15:35</strong>
            <p class='c-airport-info__name'><strong>Bologna</strong>, Guglielmo Marconi</p>
        </div>
        <div class='c-flight-stops'>
            <p>
                Durata del volo: <strong>4h 15min</strong>
            </p>

            <div class='line' aria-hidden='true'>
                <span class='line__stop'></span>
            </div>

            <div class='c-flight-stops__toggle'>
                <label for="stop-toggle-1" class='js-flight-stop-toggle'>
                    1 scalo
                </label>
            </div>
        </div>
        <div class='c-airport-info'>
            <strong class='c-airport-info__code'>Dxb</strong>
            <strong class='c-airport-info__time'>23:30</strong>
            <p class='c-airport-info__name'><strong>Dubai</strong>, International</p>
        </div>
    </div>

</div>

<input type="checkbox" id="stop-toggle-1" name="stop-toggle-1" class="u-visuallyhidden u-chkbx-toggle" aria-controls="" aria-label="Espandi per le informazioni dello scalo" role="switch">
<div class="c-route__stop-detail u-chkbx-toggleReceiver" id="stop-detail-1" role="region" aria-live="polite">

    <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 765</strong>
        </div>

        <div class="c-route__journey">
            <div class='c-airport-info c-airport-info--stops'>
                BLQ
                <strong>15:35</strong>
                <p>Bologna, 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>
                    15:45
                </strong>
                Svo
                <p>Mosca Sheremetyevo</p>
            </div>
        </div>

    </div>
    <div class="waiting-time">
        <p>Durata scalo: <strong>3h</strong></p>
    </div>
    <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 104</strong>
        </div>

        <div class="c-route__journey">
            <div class='c-airport-info c-airport-info--stops'>
                Svo
                <strong>15:35</strong>
                <p>Mosca Sheremetyevo</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>
                    01:15
                </strong>
                Dxb
                <p>Dubai International</p>
            </div>
        </div>

    </div>
</div>


        <div class="c-route {{ modifier }}">

  <div class="c-route__data">
    <div class="c-route__label">
      {{{ route-label }}} 
      <span class="c-route__date">{{{ route-date }}}</span>
    </div>

    <div class="c-route__flight-company">
      <span>{{ company-name }}</span>
      <strong>{{ flight-code }}</strong>
       {{> @icon class="c-icon c-icon--16" symbol="ic-plane" }}
    </div>
  </div>

  <div class="c-route__journey">
    {{> @airport-info from }}
    {{> @flight-stops stops }}
    {{> @airport-info to }}
  </div>

  {{!-- <div class="c-route__features">
    {{> @icon-list features }}
  </div> --}}

</div>

{{#if stops.stops-number}}
<input type="checkbox" id="{{ stops.toggle.id }}" name="{{ stops.toggle.name }}" class="u-visuallyhidden u-chkbx-toggle" aria-controls="{{ aria-controls-id }}" aria-label="Espandi per le informazioni dello scalo" role="switch">
<div class="c-route__stop-detail u-chkbx-toggleReceiver" id="{{ stops.aria-controls-id }}" role="region" aria-live="polite">
  
  {{> @route--compact stopDetail-1 }}
  <div class="waiting-time">
    <p>{{{ waiting-time }}}</p>
  </div>
  {{> @route--compact stopDetail-2 }}

</div>
{{/if}}


        
            
            {
  "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-baseline-airline-seat-recline-extra-24px",
        "text": "Economy class"
      },
      {
        "icon": "ic-no-bagaglio-stiva-24px",
        "text": "Non incluso bagaglio da stiva",
        "modifier": "c-icon-list__item--disabled"
      }
    ]
  },
  "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"
        }
      ]
    }
  }
}

File:

Content:


                                .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);
  }


}

URL: /components/raw/route/_route.scss
Filesystem Path: src/views/02-molecules/route/_route.scss
Size: 3.3 KB

Handle: @route
Preview:
- With layout
- Component only
Filesystem Path: src/views/02-molecules/route/route.hbs
References (5): @icon, @airport-info, @flight-stops, @icon-list, @route--compact
Referenced by (8): @cart, @flight-product, @flight-product--with-stop, @flight-product--round-trip, @flight-product--round-trip-moredays, @flight-product--round-trip-stops, @route, @route--moredays

No notes defined.