Aeroporto di Bologna - Design System

Cart 

<div class="c-cart__stickywrapper u-sticky u-sticky--top">
    <div class="c-cart ">
        <input type="checkbox" id="cart-toggle" name="cart-toggle" class="u-visuallyhidden u-chkbx-toggle" aria-controls="cart-toggle-expanded" aria-label="Espandi per le informazioni del volo" role="switch">

        <div class="c-cart__minimal">
            <div class="c-cart__minimal-pass">
                <div class="c-cart__passengers">
                    <svg class="c-icon c-icon--12">
                        <use xlink:href="#ic-passenger"></use>
                    </svg> 1 passeggero
                </div>
                <label for="cart-toggle" class='c-cart__toggle c-cart__toggle--open'>
                    Più dettagli
                </label>
            </div>
            <div class="c-cart__minimal-price">
                <div class="c-cart__price">
                    350,18 €
                    <button type="button" class="btn-open-bill js-fr-dialogmodal-open" aria-controls="dialog-bill-detail" aria-label="Vedi il dettaglio del costo">
                        <svg class="c-icon c-icon--18">
                            <use xlink:href="#ic_info_black_24px"></use>
                        </svg> </button>
                </div>
                <div class="c-cart__netprice">prezzo di partenza 128,90 €</div>
            </div>
            <div class="c-cart__minimal-cta">
                <button type="submit" class="c-button c-button--submit c-button--elastic">

                    Paga ora

                </button>
            </div>
        </div>

        <div class="c-cart__expanded u-chkbx-toggleReceiver" id="cart-toggle-expanded">
            <div class="c-cart__class-label"><span class="c-rounded-label c-rounded-label--dark c-rounded-label--small" aria-label="">

                    Economy
                </span></div>
            <div class="c-cart__title">Stai acquistando</div>
            <div class='c-cart__routes'>
                <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__label'>
                                <span>
                                    1 scalo
                                </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 class="c-route ">

                    <div class="c-route__data">
                        <div class="c-route__label">
                            <strong>Ritorno</strong>
                            <span class="c-route__date">Martedì, 14 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'>Dxb</strong>
                            <strong class='c-airport-info__time'>15:35</strong>
                            <p class='c-airport-info__name'><strong>Dubai</strong>, International</p>
                        </div>
                        <div class='c-flight-stops'>
                            <p>
                                Durata del volo: <strong>3h 25min</strong>
                            </p>

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

                            <div class='c-flight-stops__label'>
                                <span>
                                    Volo diretto
                                </span>
                            </div>
                        </div>
                        <div class='c-airport-info'>
                            <strong class='c-airport-info__code'>Blq</strong>
                            <strong class='c-airport-info__time'>23:30</strong>
                            <p class='c-airport-info__name'><strong>Bologna</strong>, Guglielmo Marconi</p>
                        </div>
                    </div>

                </div>

            </div>

            <div class='c-cart__addons'>

                <ul>
                    <li class="c-cart__addon">
                        <div class="c-cart__addon-name"><strong>Bicicletta</strong> x1</div>
                        <div class="c-cart__addon-price"><strong>Tariffa aggiuntiva</strong></div>
                    </li>
                    <li class="c-cart__addon">
                        <div class="c-cart__addon-name"><strong>Chitarra</strong> x1</div>
                        <div class="c-cart__addon-price"><strong>Tariffa aggiuntiva</strong></div>
                    </li>
                </ul>

                <p class="c-cart__addons-disclaimer">
                    Le spese di servizi aggiuntivi sul viaggio, verranno calcolate nel totale durante la fase di <strong>preventivo</strong>.
                </p>

            </div>

            <div class='c-cart__total'>

                <div class="c-cart__features">
                    <ul class="c-icon-list" aria-label="Caratteristiche di questa prenotazione">
                        <li class="c-icon-list__item c-icon-list__item--disabled">
                            <svg class="c-icon c-icon--24">
                                <use xlink:href="#ic-no-euro-symbol-24px"></use>
                            </svg> <span class="c-icon-list__text">Non rimborsabile</span>
                        </li>
                        <li class="c-icon-list__item ">
                            <svg class="c-icon c-icon--24">
                                <use xlink:href="#ic-euro-symbol-24px"></use>
                            </svg> <span class="c-icon-list__text">Rimborsabile</span>
                        </li>
                        <li class="c-icon-list__item c-icon-list__item--disabled">
                            <svg class="c-icon c-icon--24">
                                <use xlink:href="#ic_no_edit_black_24px"></use>
                            </svg> <span class="c-icon-list__text">Non Modificabile</span>
                        </li>
                        <li class="c-icon-list__item ">
                            <svg class="c-icon c-icon--24">
                                <use xlink:href="#ic_mode_edit_black_24px"></use>
                            </svg> <span class="c-icon-list__text">Modificabile</span>
                        </li>
                    </ul>
                </div>

                <div class="c-cart__digit">
                    <div class="c-cart__price">
                        350,18 €
                        <button type="button" class="btn-open-bill js-fr-dialogmodal-open" aria-controls="dialog-bill-detail" aria-label="Vedi il dettaglio del costo">
                            <svg class="c-icon c-icon--18">
                                <use xlink:href="#ic_info_black_24px"></use>
                            </svg> </button>
                    </div>
                    <div class="c-cart__passengers"><svg class="c-icon c-icon--12">
                            <use xlink:href="#ic-passenger"></use>
                        </svg> 1 passeggero</div>
                    <div class="c-cart__netprice">prezzo di partenza 128,90 €</div>
                </div>
            </div>

            <div class='c-cart__footer'>
                <label for="cart-toggle" class='c-cart__toggle c-cart__toggle--close'>
                    Meno dettagli
                </label>
                <button type="submit" class="c-button c-button--submit c-button--elastic">

                    Paga ora

                </button>
            </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">Dettaglio del costo</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-cart__stickywrapper u-sticky u-sticky--top">
  <div class="c-cart {{modifier}}">
    <input type="checkbox" id="cart-toggle" name="cart-toggle" class="u-visuallyhidden u-chkbx-toggle"
      aria-controls="cart-toggle-expanded" aria-label="Espandi per le informazioni del volo" role="switch">

    <div class="c-cart__minimal">
      <div class="c-cart__minimal-pass">
        <div class="c-cart__passengers">
          {{> @icon symbol="ic-passenger" class="c-icon c-icon--12"}} {{{ cartTotal.passengers }}}
        </div>
        <label for="cart-toggle" class='c-cart__toggle c-cart__toggle--open'>
          Più dettagli
        </label>
      </div>
      <div class="c-cart__minimal-price">
        <div class="c-cart__price">
          {{{ cartTotal.price }}}
          <button type="button" class="btn-open-bill js-fr-dialogmodal-open" aria-controls="dialog-bill-detail"
            aria-label="Vedi il dettaglio del costo">
            {{> @icon symbol="ic_info_black_24px" class="c-icon c-icon--18" }}
          </button>
        </div>
        <div class="c-cart__netprice">{{{ cartTotal.netprice }}}</div>
      </div>
      {{#if cartCta.show }}
      <div class="c-cart__minimal-cta">
        {{> @button cartCta }}
      </div>
      {{/if}}
    </div>

    <div class="c-cart__expanded u-chkbx-toggleReceiver" id="cart-toggle-expanded">
      <div class="c-cart__class-label">{{> @rounded-label class-label }}</div>
      <div class="c-cart__title">{{title}}</div>
      <div class='c-cart__routes'>
        {{ render "@route" round merge=true }}
        {{ render "@route" trip merge=true }}
      </div>

      {{#if addons }}
      <div class='c-cart__addons'>

        <ul>
          {{#each addons }}
          <li class="c-cart__addon">
            <div class="c-cart__addon-name">{{{ this.name }}}</div>
            <div class="c-cart__addon-price">{{{ this.price }}}</div>
          </li>
          {{/each}}
        </ul>

        <p class="c-cart__addons-disclaimer">
          {{{ addonsDisclaimer }}}
        </p>

      </div>
      {{/if}}

      {{#if cartTotal.show }}
      <div class='c-cart__total'>

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

        <div class="c-cart__digit">
          <div class="c-cart__price">
            {{{ cartTotal.price }}}
            <button type="button" class="btn-open-bill js-fr-dialogmodal-open" aria-controls="dialog-bill-detail"
              aria-label="Vedi il dettaglio del costo">
              {{> @icon symbol="ic_info_black_24px" class="c-icon c-icon--18" }}
            </button>
          </div>
          <div class="c-cart__passengers">{{> @icon symbol="ic-passenger" class="c-icon c-icon--12"}} {{{
            cartTotal.passengers }}}</div>
          <div class="c-cart__netprice">{{{ cartTotal.netprice }}}</div>
        </div>
      </div>
      {{/if}}

      <div class='c-cart__footer'>
        <label for="cart-toggle" class='c-cart__toggle c-cart__toggle--close'>
          Meno dettagli
        </label>
        {{#if cartCta.show }}{{> @button cartCta }}{{/if}}
      </div>
    </div>

  </div>
</div>

{{ render "@dialog--bill-detail" dialog-flight-bill merge=true }}
 
/* No context defined. */
  • Content: 
    .c-cart {
  background-color: #fff;
  position: relative;
  @include shadow(small);

  @include max-screen(bp(tablet-p)) {
    // margin-top: remify(-64px);
    margin-left: remify(-16px);
    margin-right: remify(-16px);
  }

  @include min-screen(bp(tablet-p)) {
    @include shadow(small);
    border: 1px solid primary(sky,20);
    border-radius: remify(16px);
    overflow: hidden;
    margin-bottom: remify(16px);
  }

  &.has-offline-payment {
    animation: flash 2s forwards cubic-bezier(0.25, 1, 0.5, 1);
    animation-iteration-count: 1
  }
}

@keyframes flash {
  0% {
    box-shadow: 0 0 12px 0 primary(sun,60);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.c-cart__input-toggle {
  display: none;
}

.c-cart__minimal {
  // padding: remify(16px) remify(24px);
  padding: remify(16px);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

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

  .c-cart__minimal-cta {
    width: 100%;
    flex-grow: 1;
    padding-top: remify(8px);

    .c-button {width: 100%;}
  }

  .u-chkbx-toggle:checked ~ & .c-cart__toggle--open,
  .u-chkbx-toggle:checked ~ & .c-cart__minimal-cta {
    display: none;
  }

}

.c-cart__toggle,
.c-form .c-cart__toggle {
  color: primary(night, 100);
  @include font-scale(level-1);
  font-weight: fw(regular);
  text-decoration: underline;

  svg {
    vertical-align: middle;
  }

  .c-cart__minimal & { 
    margin-top: remify(12px);
  }

  .c-cart__footer & {
    margin-bottom: 0;
    min-width: remify(80px);
    @include min-screen(bp(tablet-p)) {
      display: none;
    }
  }
}


.c-cart__expanded.u-chkbx-toggleReceiver {
  display: none;
  position: relative;
  z-index: 1;

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

.c-cart__title {
  @include font-scale(level-3);
  font-weight: fw(bold);
  color: primary(night,100);
  // padding: remify(16px) remify(24px);
  padding: remify(16px);
  display: flex;
  justify-content: space-between;
}

.c-cart__class-label {
  position: absolute;
  top:  remify(16px);
  right:  remify(16px);
}

.c-cart__routes {
  // padding: remify(16px) remify(24px);
  padding: remify(16px);

  & > .c-route {
    margin-bottom: remify(16px);
    
  }
  
  & > .c-route:not(:last-child) {
    padding-bottom: remify(32px);
    margin-bottom: remify(32px);
    border-bottom: 1px solid primary(sky, 20);
  }

  .c-airport-info__name,
  .c-icon-list__text {
    display: none;
  }

  @include max-screen(bp(tablet-p)) {
    .c-route__flight-company,
    .c-icon-list {
      display: none;
    }
  }
  .c-airport-info__code,
  .c-airport-info__time {
    font-size: remify(16px);
  }
  .c-flight-stops__toggle label {
    color: primary(night, 100);
    background-color: #fff;

  }
}

.c-cart__addons {
  // padding: remify(16px) remify(24px);
  padding: remify(16px);
  background-color: primary(sky, 20);
  color: primary(night, 100);
  @include font-scale(level-1);
  
  .c-cart__addon {
    display: flex;
    justify-content: space-between;
    margin-bottom: remify(8px);
  }

  .c-cart__addons-disclaimer {
    color: primary(night, 80);
  }
}

.c-cart__total {
  // padding: remify(16px) remify(24px);
  padding: remify(16px);
  display: none;

  @include min-screen(bp(tablet-p)) {
    display: flex;
    justify-content: space-between;
  }

  .c-cart__digit {
    text-align: right;
  }

}

.c-cart__price {
  @include font-scale(level-4);
  font-weight: fw(bold);
  color: secondary(text, 80);

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

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

  }
}

.c-cart__passengers {
  @include font-scale(level-1);
  color: secondary(text, 100);
}
.c-cart__netprice {
  @include font-scale(level-0);
  color: primary(night, 80);
}

.c-cart__footer {
  // padding: remify(16px) remify(24px);
  padding: remify(16px);
  display: flex;
  align-items: center;
  justify-content: space-between;

  // @include min-screen(bp(tablet-p)) {
  //   padding: 0;
  // }

  button {  
    margin-top: 0;

    @include max-screen(bp(tablet-p)) {
      transform: scale(75%);
      transform-origin: center right;
    }
    
    @include min-screen(bp(tablet-p)) {
      width: 100%;
      // margin: remify(16px) remify(24px);
    }
    
  }

}

/*------------------------------------*\
  additional code for .c-form wrapper
\*------------------------------------*/
.c-form .c-cart {
 .c-button--submit { margin-top: 0; }
}


/*------------------------------------*\
  Cart PARKING  modifier
\*------------------------------------*/

.c-cart--parkings {

  // .c-cart__title { display: none; }
  // .u-chkbx-toggle:checked ~ .c-cart__title  { display: none; }
  .u-chkbx-toggle:checked ~ .c-cart__minimal  { display: none; }

  .c-cart__minimal {
    justify-content: flex-end;

    .c-cart__minimal-pass {
      margin-left: 0;
      flex-grow: 1;
    }

    .c-cart__minimal-price {
      text-align: right;
      .c-cart__netprice { margin-right: 0; }

    }


    .c-cart__logo {
      width: auto;
      max-width: 100%;
      margin-left: remify(16px);
      display: flex;
      justify-content: flex-end;
      img {
        max-width: remify(36px);
        display: inline-block;
        margin-left: remify(8px);
      }
    }
  }

  .c-cart__product {
    border-bottom: 1px solid  primary(night,10);
  }

  .c-cart__park,
  .c-cart__park-modify,
  .c-cart__park-recap  {
    display: flex;
    justify-content: space-between;
    padding: 0 remify(16px) remify(16px);
    @include font-scale(level-1);

    @include min-screen(bp(tablet-p)) { 
      @include font-scale(level-2);
    }

    svg {
      fill: currentColor;
      vertical-align: bottom;
    }
  }

  .c-cart__park-recap.has-warning {
    padding-top: remify(16px);   
    background-color: primary(sun,10);
    display: none;


    & > * {
      min-width: remify(80px);
    }

    .recap-label {
      display: block;
    }
    
    .red {
      font-weight: fw(bold);
      color: status(negative);
    }
  }

  &.has-offline-payment .c-cart__park-recap {
    display: none;
  }
  &.has-offline-payment .c-cart__park-recap.has-warning {
    display: flex;
  }

  .c-cart__entrance,
  .c-cart__exit {
    flex-grow: 1;

    svg {
      vertical-align: middle;
    }
  }

  .c-cart__entrance {
    margin-right: remify(16px);
    background-image: url('../images/svgs/caret.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
  }
  

  .c-cart__logo {
    max-width: remify(68px);
  }

  .c-cart__park-modify,
  .c-cart__park-recap {
    @include font-scale(level-1);
    align-items: center;

    .c-button--icon-square { 
      margin-left: remify(8px); 
    }
  }

  .c-cart__park-recap {
    @include font-scale(level-1);
    color: secondary(text, 100);
    align-items: flex-start;
    
    .barred { text-decoration: line-through; color: primary(night, 60);}
    .final { @include font-scale(level-2); }

    a { color: primary(night, 100); font-weight: fw(bold); }
  }

  .c-cart__additional {
      background-color: primary(sky, 20);

      .c-cart__additional-title {
        display: flex;
        justify-content: space-between;
        @include font-scale(level-3);
        font-weight: fw(bold);
        color: primary(night,100);
        // padding: remify(16px) remify(24px);
        padding: remify(16px);
      }

      small {
        @include font-scale(level-1);
        color: secondary(text, 100);
      }
  }

  .c-cart__total {
      display: flex;
  }
  
  .c-cart__features,
  .c-cart__digit {
    align-self: center;
    flex-basis: 50%;
  }

  .c-cart__features {
    @include font-scale(level-1, bold);
    color: secondary(text, 100);
  }

  .c-cart__digit {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .c-cart__price {
    @include font-scale(level-3);
    font-weight: fw(bold);
    color: secondary(text, 100);
  }

  .c-cart__netprice {
    @include font-scale(level-1);
    font-weight: fw(regular);
    color: primary(night, 60);
    text-decoration: line-through;
    margin-right: remify(8px);
  }

  .c-button--modal{ display: none;}
  &.has-offline-payment .c-cart__footer {
    .c-button { display: none; }
    .c-button--modal{ display: inline-block;}
  }
}


/*------------------------------------*\
  Cart PARK RECAP  modifier
\*------------------------------------*/

.c-cart--parking-recap {

  &.c-cart {
    background-color: #fff;
    position: relative;
    @include shadow(small);
    margin-left: 0;
    margin-right: 0;
    border: 1px solid primary(sky,20);
    border-radius: remify(16px);
    overflow: hidden;
    margin-bottom: remify(32px);
  }

  .c-cart__title {
    display: flex;
  }
  
  .c-cart__expanded {
    display: block !important;  
  }
}

/*------------------------------------*
  Cart PARK RECAP MINIMAL  modifier
*------------------------------------*/
.c-cart--parking-recap-minimal {

  &.c-cart {
    box-shadow: none;
    border: none;
    border-radius: 0;
  }
  
  .c-cart__park {
    padding: 0;
  }

  .c-cart__product {
    border-bottom: 0;
  }

}

.c-cart__vouchers {
  padding: 0 remify(16px) remify(16px);
  position: relative;

  .c-cart__park-recap {
    padding: 0 0 remify(8px);

    .final {
      @include font-scale(level-1-5);
    }
  }

}

.c-cart__vouchers-total {
  @include font-scale(level-1-5, bold);
  position: absolute;
  right: remify(16px);
  top: 0;
}

.c-cart__vouchers {

  .c-collapsible__button {
    @include font-scale(level-1);
    color: primary(night, 100);
    font-weight: fw(semibold);
    cursor: pointer;
  }

  .o-collapsible__content {
    margin-top: remify(16px);
  }
}

.c-cart__voucher-info {
  @include font-scale(level-2);
  color: secondary(text, 100);

  @include max-screen(bp(tablet-p)) {
    display: none;
  }
}
  • URL: /components/raw/cart/_cart.scss
  • Filesystem Path: src/views/03-organisms/cart/_cart.scss
  • Size: 9.9 KB

No notes defined.