Aeroporto di Bologna - Design System

Flight product: Round and trip 

<div class="c-flight-product c-flight-product--round-trip">

    <div class="c-flight-product__info">
        <p class="tag tag--mobile">Miglior prezzo</p>
        <div class="c-flight-product__route">
            <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>
                    <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>

        </div>
        <div class="c-flight-product__route">
            <div class="c-route ">

                <div class="c-route__data">
                    <div class="c-route__label">
                        <strong>RITORNO</strong>
                        <span class="c-route__date">Sabato, 11 marzo 2022</span>
                    </div>

                    <div class="c-route__flight-company">
                        <span>Alitalia</span>
                        <strong>EK 95</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'>Dxb</strong>
                        <strong class='c-airport-info__time'>9:00</strong>
                        <p class='c-airport-info__name'><strong>Dubai</strong>, International</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>
                    <div class='c-airport-info'>
                        <strong class='c-airport-info__code'>BLQ</strong>
                        <strong class='c-airport-info__time'>13:20</strong>
                        <p class='c-airport-info__name'><strong>Bologna</strong>, Guglielmo Marconi</p>
                    </div>
                </div>

            </div>

        </div>
    </div>

    <div class="c-flight-product__actions">
        <div class="actions-wrapper">
            <p class="tag tag--desktop">Miglior prezzo</p>

            <div class="price">
                <div>
                    <p>Andata/Ritorno - 1 passeggero</p>
                    <p>Economy class</p>
                </div>
                <div>
                    <p class="pre-price-txt">A partire da</p>
                    <strong class="price__value">€ 350,18</strong>
                </div>
            </div>

            <div class="cta">
                <button type="submit" class="c-button c-button--submit js-fr-dialogmodal-open" aria-controls="dialog-flight-fares">

                    Seleziona le tariffe

                </button> <a href="#" class="buy-via-phone"><svg class="c-icon c-icon--18">
                        <use xlink:href="#ic-call-black-24px"></use>
                    </svg> Acquista al telefono</a>
            </div>
        </div>
    </div>

</div>

<div class="c-dialog js-fr-dialogmodal c-dialog--bill-detail " id="dialog-bill-detail">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-bill-detail-title">
        <div role="document">
            <p class="c-dialog__title" id="dialog-bill-detail-title" aria-hidden="true">Totale del viaggio</p>

            <table width="100%">
                <tr>
                    <td class="desc">Costo per persona:</td>
                    <td class="price">
                        <p><strong>€ 120,00</strong> x 1 adulto</p>
                        <p><strong>€ 120,00</strong> x 1 adulto</p>
                        <p><strong>€ 120,00</strong> x 1 adulto</p>
                    </td>
                </tr>
                <tr>
                    <td class="desc">Tasse per persona:</td>
                    <td class="price">
                        <p><strong>€ 120,00</strong> x 1 adulto</p>
                        <p><strong>€ 120,00</strong> x 1 adulto</p>
                    </td>
                </tr>
                <tr>
                    <td class="desc">Totale per tutti i passeggeri:</td>
                    <td class="price">
                        <p><strong>€ 120,00</strong></p>
                    </td>
                </tr>
                <tr>
                    <td class="desc">Spese di agenzia:</td>
                    <td class="price">
                        <p>+ <strong>€ 15,00</strong> x 1 adulto</p>
                        <p>+ <strong>€ 15,00</strong> x 1 adulto</p>
                        <p>+ <strong>€ 15,00</strong> x 1 adulto</p>
                    </td>
                </tr>
                <tr>
                    <td class="desc">Totale:</td>
                    <td class="price">
                        <p><strong>€ 790,00</strong></p>
                    </td>
                </tr>
            </table>
            <div class="u-mt--medium">
                <p class="clean"><small><strong>Andata BLQ - DXB:</strong> Non incluso bagaglio da stiva</small></p>
                <p class="clean"><small><strong>Ritorno DXB - BLQ:</strong> bagaglio da stiva incluso</small></p>
            </div>
            <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                <svg class="c-icon c-icon--32">
                    <use xlink:href="#ic_close_black_24px"></use>
                </svg> </button>
        </div>
    </div>
</div>
 
<div class="c-flight-product {{ modifier }}" {{#each aria-attributes}}{{{ this.data }}}{{/each}}>

  <div class="c-flight-product__info">
    {{#if tag }}
    <p class="tag tag--mobile">{{ tag.text }}</p>
    {{/if}}
    {{#if atom-rounded-label }}
    <div class="c-flight-product__labels">
      {{#each atom-rounded-label}} {{> @rounded-label }} {{/each}}
    </div>
    {{/if}}
    <div class="c-flight-product__route">
      {{> @route round }}
    </div>
    <div class="c-flight-product__route">
      {{> @route trip }}
    </div>
  </div>

  <div class="c-flight-product__actions">
    <div class="actions-wrapper">
      {{#if tag }}
      <p class="tag tag--desktop">{{ tag.text }}</p>
      {{/if}}
      
      <div class="price">
        <div>
          <p>{{ price.info }} - {{ price.passenger }}</p>
          <p>{{ price.extra }}</p>
        </div>
        <div>
          {{#if pre-price-txt}}
          <p class="pre-price-txt">{{ pre-price-txt }}</p>
          {{/if}}
          <strong class="price__value">{{ price.value }}</strong>
        </div>
      </div>

      {{#if cta}}
      <div class="cta">
        {{> @button--submit cta }}
        <a href="#" class="buy-via-phone">{{> @icon symbol="ic-call-black-24px" class="c-icon c-icon--18"}} Acquista al telefono</a>
      </div>
      {{/if}}
    </div>
  </div>

  {{#if hasDetailLink }}
  <div class="c-flight-product__launch">
    <a href="{{ path '/components/preview/page-reservation-detail-flight' }}" class="c-link c-link--icon graphic-link"
      aria-label="Vai al dettaglio prenotazione">
      {{> @icon symbol="ic_chevron_right_black_24px" class="c-icon c-icon--24" }}
    </a>
    <a href="{{ path '/components/preview/page-reservation-detail-flight' }}" class="txt-link">Vai al dettaglio
      prenotazione
      <span aria-hidden="true">&#x2192;</span></a>
  </div>
  {{/if}}

</div>

{{ render "@dialog--bill-detail" dialog-flight-bill merge=true }}
 
{
  "round": {
    "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": null
    },
    "features": {
      "aria-label": "Caratteristiche di questo volo",
      "items": [
        {
          "icon": "ic-bagaglio-stiva-24px",
          "text": "Bagaglio da stiva incluso"
        },
        {
          "icon": "ic-baseline-airline-seat-recline-extra-24px",
          "text": "Economy class"
        }
      ]
    }
  },
  "tag": {
    "text": "Miglior prezzo"
  },
  "pre-price-txt": "A partire da",
  "price": {
    "info": "Andata/Ritorno",
    "passenger": "1 passeggero",
    "extra": "Economy class",
    "value": "€ 350,18"
  },
  "cta": {
    "type": "submit",
    "text": "Seleziona le tariffe",
    "modifier": "c-button--submit js-fr-dialogmodal-open",
    "opens-dialog": "dialog-flight-fares"
  },
  "dialog-flight-bill": {
    "title": "Totale del viaggio"
  },
  "price-text-refund": "Rimborsabile",
  "price-text-edit": "Modificabile",
  "tooltip-refund": {
    "tooltip_aria_label": "Espandi per sapere di più",
    "tooltip_exposed_icon": "ic_info_black_24px",
    "tooltip_position_class": "c-tooltip__bubble--up",
    "bubble_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    "text": "<small><strong>Dove trovo il mio QR-code per accedere al parcheggio?</strong></small>"
  },
  "tooltip-edit": {
    "tooltip_aria_label": "Espandi per sapere di più",
    "tooltip_exposed_icon": "ic_info_black_24px",
    "tooltip_position_class": "c-tooltip__bubble--down",
    "bubble_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    "text": "<small><strong>Dove trovo il mio QR-code per accedere al parcheggio?</strong></small>"
  },
  "modifier": "c-flight-product--round-trip",
  "trip": {
    "route-label": "<strong>RITORNO</strong>",
    "route-date": "Sabato, 11 marzo 2022",
    "company-logo": "/images/flights-logos/alitalia.png",
    "company-name": "Alitalia",
    "flight-code": "EK 95",
    "from": {
      "airport-code": "Dxb",
      "airport-name": "<strong>Dubai</strong>, International",
      "time": "9:00"
    },
    "to": {
      "airport-code": "BLQ",
      "airport-name": "<strong>Bologna</strong>, Guglielmo Marconi",
      "time": "13:20"
    },
    "stops": {
      "duration": "Durata del volo: <strong>4h 15min</strong>",
      "stops-number": null
    },
    "features": {
      "aria-label": "Caratteristiche di questo volo",
      "items": [
        {
          "icon": "ic-bagaglio-stiva-24px",
          "text": "Bagaglio da stiva incluso"
        },
        {
          "icon": "ic-baseline-airline-seat-recline-extra-24px",
          "text": "Economy class"
        }
      ]
    }
  }
}
  • Content: 
    .c-flight-product {
  background-color: #fff;
  border: remify(1px) solid primary(sky, 40);
  margin-bottom: remify(48px);

  position: relative;

  &:first-child {
  }

  &:focus-within {
    @include shadow(medium);
  }

  &.is-open {

  }

  @include min-screen(bp(tablet-p)) {
    display: flex;
    margin-bottom: remify(48px);
    flex-wrap: wrap;
  }

  main & {
    grid-column: initial;
  }

  .c-header+main & {
    margin-top: remify(16px);

    @include min-screen(bp(tablet-p)) {
      position: relative;
      margin-top: 0;
    }
  }

  .c-main-reservationList & {
    margin-bottom: remify(16px);

    @supports (display: grid) {
      grid-column: main;
      margin-bottom: 0;
    }
  }

  .c-main--flight-payed &,
  .c-main-reservationDetail & {
    margin-bottom: 0;
    @include min-screen(bp(tablet-p)) {
      // padding-top: remify(24px);
    }
  }

}

.c-flight-product .tag {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: aviation(arrivi);
  color: #fff;
  text-align: center;
  padding: remify(4px);
  text-transform: uppercase;
  @include font-scale(level-1);
  font-weight: fw(semibold);
}

.c-flight-product .tag--mobile {
  display: block;

  @include min-screen(bp(tablet-p)) {
    display: none;
  }
}

.c-flight-product__labels {
  border-radius: remify(12px);
  padding:  remify(16px);
  display: flex;
  flex-wrap: wrap;
  gap:  remify(8px);
}

.c-flight-product__info,
.c-flight-product__actions {
  // padding-inline: remify(16px);

  @include min-screen(bp(tablet-p)) {
    display: flex;
    flex-direction: column;
    padding: 0;
    // padding: remify(16px) remify(24px);
  }

}

.c-flight-product__info {
  flex: 3;
  position: relative;
  z-index: 1;
  background-color: #fff;
  // padding-top: remify(16px);

  // @include min-screen(bp(tablet-p)) {
  //   padding-bottom: remify(16px);
  // }

  &:has(.tag--mobile) {
    @include max-screen(bp(tablet-p)) {
      padding-top: 24px;
    }
  }

}

.c-flight-product__route {
  // padding-bottom: remify(16px);
  border-bottom: 1px solid primary(sky, 40);
  // margin-top: remify(24px);

  @include min-screen(bp(tablet-p)) {
    // margin-top: 0;
    // margin-bottom: remify(16px);
  }

  &:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border: none;
  }

  .c-route {
    padding: remify(16px);

    @include min-screen(bp(tablet-p)) {
      padding: remify(16px) remify(24px);
    }
  }

  .c-route--compact {
    margin-top: 0;
  }

}

.c-flight-product__actions {
  background-color: #fff;
  position: relative;
  // padding-bottom: remify(16px);
  padding: remify(16px);
  
  @include min-screen(bp(tablet-p)) {
    border-left: 1px solid primary(sky, 40);
    // padding-top: remify(16px);
    min-width: remify(290px);
    padding: remify(16px) remify(24px);
  }

  .actions-wrapper {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
    gap: remify(24px);

    @include min-screen(bp(tablet-p)) {
      display: block;
      flex: none;
      flex-direction: initial;
      text-align: center;
    }
  }

  // .actions-wrapper>*:not(.c-flight-product__mini-rules) {
  //   flex: 1 1 100%;

  //   @include min-screen(bp(tablet-p)) {
  //     display: block;
  //     width: 100%;
  //   }

  // }


  @include min-screen(bp(tablet-p)) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .tag--desktop {
    display: none;

    @include min-screen(bp(tablet-p)) {
      display: inline-block;
    }

  }

  .price {

    @include max-screen(bp(tablet-p)) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: remify(16px);
    }

    @include min-screen(bp(tablet-p)) {
      margin-block: remify(16px);
    }

    p {
      font-size: remify(11px);
      color: secondary(text, 100);

      @include min-screen(bp(tablet-p)) {
        font-size: 75%;
      }

      svg {
        vertical-align: top;
      }

    }

    .price__value {
      font-size: remify(24px);

      @include min-screen(bp(tablet-p)) {
        font-size: remify(32px);
      }
    }

    .btn-open-bill {
      border: 0;
      background: none;
      padding: 0;

      svg * {
        fill: primary(night, 40);
      }

    }
  }

  .pre-price-txt {
    text-align: right;

    @include min-screen(bp(tablet-p)) {
      margin-top: remify(16px);
      text-align: center;
    }
  }

  .buy-via-phone {
    font-weight: fw(bold);
    @include font-scale(level-1);
    color: primary(night, 100);
    display: block;
    
    @include min-screen(bp(tablet-p)) {
      margin-top: remify(12px);
    }

    svg {
      vertical-align: middle;
      margin-right: remify(4px);

      fill: primary(night, 100);
    }

  }

  .cta {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: remify(12px);
    align-items: center;

    @include min-screen(bp(phone-p)) {
      align-items: center;
      justify-content: center;
      flex-direction: row-reverse;
      gap: remify(16px);
      justify-content: space-between;
    }

    @include min-screen(bp(tablet-p)) {
      display: block;
    }

  }

}

.c-flight-product__launch {

  padding: remify(8px);

  @include min-screen(bp(tablet-p)) {
    flex: 1 0 100%;
    border-top: 1px dashed primary(night, 20);
  }

  @include min-screen(bp(tablet-l)) {
    border: none;
    position: absolute;
    padding: 0;
    top: 50%;
    transform: translateY(-50%);
    right: remify(-36px);
  }

  .graphic-link {
    display: none;

    @include min-screen(bp(tablet-l)) {
      display: block;
    }

  }

  .txt-link {
    display: block;
    text-align: center;

    @include min-screen(bp(tablet-l)) {
      display: none;
    }

  }

}

.c-flight-product__mini-rules-wrapper {
  margin: remify(16px) 0;
}

.c-flight-product__mini-rules {
  display: flex;
  align-items: center;
  font-size: 75%;
  margin-top: remify(8px);
  gap: 0 remify(8px);

  @include min-screen(bp(tablet-p)) {
    justify-content: center;
  }

  .c-tooltip .c-icon {
    fill: primary(night, 40);
  }

  span[data-js-tooltip-icon] {
    display: flex;
  }
}

/*------------------------------------*\
  noPrice modifier
\*------------------------------------*/

.c-flight-product--noPrice {

  .c-flight-product__actions {
    justify-content: center;
  }

  .price {

    strong,
    .c-tooltip,
    .starting-from-txt {
      display: none;
    }

    p {
      margin-top: remify(8px);
    }

  }

}
  • URL: /components/raw/flight-product/_flight-product.scss
  • Filesystem Path: src/views/03-organisms/flight-product/_flight-product.scss
  • Size: 6.5 KB

No notes defined.