Aeroporto di Bologna - Design System

Product: Carousel product 

<div class="c-product c-product--carousel">

    <div class="c-product__info">
        <div class="c-product__type">
            <img src="/images/svgs/p1.svg" alt="Parcheggio P1">
            <div class="c-product__park-infos">
                <button type="button" class="c-button c-button--icon-square js-fr-dialogmodal-open" aria-label="Apri la modale per consultare la mappa del parcheggio" aria-controls="dialog-p1-map">
                    <svg class="svg-16">
                        <use xlink:href="#ic-pin-map"></use>
                    </svg></button>
                <button type="button" class="c-button c-button--icon-square is-pale js-fr-dialogmodal-open" aria-label="Apri la modale per consultare la mappa del parcheggio" aria-controls="dialog-p1-info">
                    <svg class="svg-16">
                        <use xlink:href="#ic_info_black_24px"></use>
                    </svg></button>
            </div>
        </div>
        <div class="c-product__features">
            <ul class="c-icon-list" aria-label="Caratteristiche parcheggio P1">
                <li class="c-icon-list__item ">
                    <svg class="c-icon c-icon--24">
                        <use xlink:href="#ic-covered-parking-black-24px"></use>
                    </svg> <span class="c-icon-list__text">Coperto</span>
                </li>
                <li class="c-icon-list__item ">
                    <svg class="c-icon c-icon--24">
                        <use xlink:href="#ic-accessible-black-24px"></use>
                    </svg> <span class="c-icon-list__text">Posti riservati</span>
                </li>
                <li class="c-icon-list__item ">
                    <svg class="c-icon c-icon--24">
                        <use xlink:href="#ic_place_black_24px"></use>
                    </svg> <span class="c-icon-list__text">Fronte aerostazione</span>
                </li>
                <li class="c-icon-list__item ">
                    <svg class="c-icon c-icon--24">
                        <use xlink:href="#ic_directions_walk_black_24px"></use>
                    </svg> <span class="c-icon-list__text">1 min. a piedi</span>
                </li>
            </ul>
        </div>
    </div>

    <div class="c-product__url">
        <a href="../preview/page-parking-p1p2.html" class="rates-discover">Scopri le tariffe</a>
    </div>

</div>

<div class="c-dialog c-dialog--parking-map js-fr-dialogmodal " id="dialog-p1-map">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-p1-map-dialog-p1-p2-title">
        <div role="document">
            <p class="c-dialog__title" id="dialog-p1-map-dialog-p1-p2-title">Informazioni sui parcheggi P1 e P2</p>

            <div class="c-dialog__map">
                <img src="https://maps.googleapis.com/maps/api/staticmap?center=Parcheggio+P1,+40132+Bologna+BO&zoom=16&size=600x300&markers=Parcheggio+P1,+40132+Bologna+BO&key=AIzaSyABU478CeE-kWTe9e86eDm9n4ANtibBd3M" width="100%" alt="Informazioni sui parcheggi P1 e P2">

                <div class="js-dialog-map" tabindex="-1">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1422.1440324056696!2d11.291909658337978!3d44.52973399477526!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDTCsDMxJzQ3LjAiTiAxMcKwMTcnMzQuOCJF!5e0!3m2!1sit!2sit!4v1518606203435" style="border:0" allowfullscreen></iframe>
                </div>

            </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-dialog c-dialog--parking-info js-fr-dialogmodal " id="dialog-p1-info">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-p1-info-dialog-p1-p2-title">
        <div role="document">
            <p class="c-dialog__title" id="dialog-p1-info-dialog-p1-p2-title">Informazioni sui parcheggi P1 e P2</p>

            <div class="c-content-expo c-content-expo--spaceless" grid="grid">

                <div class="c-content-expo__item c-content-expo__item--main" grid="7@md first@md">

                    <div class="js-productPop">

                        <div class="c-product__fold">
                            <div class="c-media o-media c-media--vertically-centered">
                                <img class="c-media__figure o-media__figure" src="../../images/weekend-rate.jpg" alt="Parcheggia in aeroporto. Tariffa weekend 19€" height="" width="80">
                                <div class="c-media__body o-media__body">
                                    <strong class='u-color-night-100'>Parcheggia in aeroporto.</strong>
                                    <button type="button" class="c-button c-button--as-link js-fr-dialogmodal-open" aria-controls="dialog-weekend-fare">Tariffa weekend 19€</button>
                                </div>
                            </div>
                        </div>

                        <div class="c-product c-product--p2 c-product--pop">

                            <div class="c-product__info">

                                <div class="c-product__type">
                                    <img src="/images/svgs/p2.svg" alt="Parcheggio P2">
                                    <div class="c-product__park-infos">

                                    </div>
                                </div>

                                <div class="c-product__features">
                                    <ul class="c-icon-list" aria-label="Caratteristiche parcheggio P2">
                                        <li class="c-icon-list__item ">
                                            <svg class="c-icon c-icon--24">
                                                <use xlink:href="#ic-covered-parking-black-24px"></use>
                                            </svg> <span class="c-icon-list__text">Coperto</span>
                                        </li>
                                        <li class="c-icon-list__item ">
                                            <svg class="c-icon c-icon--24">
                                                <use xlink:href="#ic-accessible-black-24px"></use>
                                            </svg> <span class="c-icon-list__text">Posti riservati</span>
                                        </li>
                                        <li class="c-icon-list__item ">
                                            <svg class="c-icon c-icon--24">
                                                <use xlink:href="#ic_place_black_24px"></use>
                                            </svg> <span class="c-icon-list__text">Fronte aerostazione</span>
                                        </li>
                                        <li class="c-icon-list__item ">
                                            <svg class="c-icon c-icon--24">
                                                <use xlink:href="#ic_directions_walk_black_24px"></use>
                                            </svg> <span class="c-icon-list__text">1 min. a piedi</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="c-product__fare">
                                <div class="c-product__price">
                                    <div class="fare-text">
                                        L'acquisto online è possibile solo <strong>fino a 24 ore dall'inizio della sosta</strong>
                                    </div>

                                </div>
                            </div>

                        </div>

                        <div class="c-product__pop-info">
                            <div class="c-content-expo c-product--p2 c-product--pop" grid="grid">

                            </div>
                        </div>

                    </div>

                    <div class="c-dialog c-dialog--save-and-book js-fr-dialogmodal " id="dialog-weekend-fare">
                        <div class="c-dialog__inner no-padding js-fr-dialogmodal-modal" aria-labelledby="dialog-weekend-fare-title">
                            <div role="document">

                                <img src="../../images/svgs/weekend-fare.svg" class="c-dialog__img" alt="Tariffa weekend" aria-hidden="true">

                                <p class="c-dialog__title" id="dialog-weekend-fare-title">Parcheggia in Aeroporto e risparima con la Tariffa Weekend!</p>

                                <p class="c-dialog__text c-dialog__text--centered">
                                    Valida tutto l'anno, nei parcheggi P1, P2, P3, dell'Aeroporto G. Marconi di Bologna, escluso il mese di agosto, per soste che hanno inizio dal venerdì e terminano non oltre le ore 24.00 di domenica. In caso di soste superiori, per ogni giorno supplementare si applica la tariffa standard.
                                </p>

                                <p class="c-dialog__text c-dialog__text--centered">
                                    Per soste che includono due o più fine settimana consecutivi, viene applicata solo con riferimento al primo weekend. Non cumulabile con altre convenzioni/promozioni.
                                </p>

                                <p class="c-dialog__text c-dialog__text--centered c-dialog__text--small">
                                    Si ricorda che, per avvalersi della Tariffa Weekend, al momento dell'ingresso al parcheggio prenotato, è necessario posizionare il QR Code sotto il lettore della colonnina d’ingresso e non rimuoverlo fino all’emissione automatica del biglietto. In assenza della prenotazione è necessario recarsi al Presidio parcheggi (situato alla base del parcheggio Multipiano di fronte all'aerostazione), oppure inserire nelle casse automatiche il buono da richiedere anticipatamente al Presidio il giorno di entrata nel parcheggio.
                                </p>

                                <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-dialog c-dialog--parking-map js-fr-dialogmodal " id="">
                        <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="-">
                            <div role="document">
                                <p class="c-dialog__title" id="-"></p>

                                <div class="c-dialog__map">
                                    <img src="https://maps.googleapis.com/maps/api/staticmap?center=&zoom=&size=x&markers=&key=AIzaSyABU478CeE-kWTe9e86eDm9n4ANtibBd3M" width="100%" alt="">

                                    <div class="js-dialog-map" tabindex="-1">
                                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1422.1440324056696!2d11.291909658337978!3d44.52973399477526!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDTCsDMxJzQ3LjAiTiAxMcKwMTcnMzQuOCJF!5e0!3m2!1sit!2sit!4v1518606203435" style="border:0" allowfullscreen></iframe>
                                    </div>

                                </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="u-mb-space-24 u-mt-space-16s">
                        <iframe class="u-radius-12" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1422.1440324056696!2d11.291909658337978!3d44.52973399477526!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDTCsDMxJzQ3LjAiTiAxMcKwMTcnMzQuOCJF!5e0!3m2!1sit!2sit!4v1518606203435" style="border:0" allowfullscreen=""></iframe>
                    </div>

                    <div class="u-mb-space-24">
                        <iframe src="https://www.youtube.com/embed/d7s99Vgaues" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="560" height="315" frameborder="0"></iframe>
                    </div>

                    <div class="c-table_cnt c-table_cnt--noSlide">
                        <table class="o-table c-table">
                            <caption class="medium">Per veicoli fino a 1,85 metri di altezza</caption>
                            <thead>
                                <tr>
                                    <th scope="col">Permanenza</th>
                                    <th scope="col">Tariffa in vigore</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td data-label="Permanenza"><strong>1° giorno</strong></td>
                                    <td data-label="Tariffa">
                                        <ul class="bordered">
                                            <li><strong>€ 0,00</strong> gratuito 0-10 min.</li>
                                            <li><strong>€ 3,50</strong> fino a 1 ora</li>
                                            <li><strong>€ 7,00</strong> fino a 2 ore</li>
                                            <li><strong>€ 10,50</strong> fino a 3 ore</li>
                                            <li><strong>€ 14,00</strong> fino a 24 ore</li>
                                        </ul>
                                    </td>
                                </tr>
                                <tr>
                                    <td data-label="Permanenza"><strong>Dal 2° giorno e giorni successivi</strong></td>
                                    <td data-label="Tariffa">
                                        <ul>
                                            <li><strong>€ 14,00</strong> al giorno</li>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="c-table_cnt c-table_cnt--noSlide">
                        <table class="o-table c-table">
                            <caption class="medium">Per veicoli oltre 1,85 metri di altezza</caption>
                            <thead>
                                <tr>
                                    <th scope="col">Permanenza</th>
                                    <th scope="col">Tariffa in vigore</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td data-label="Permanenza"><strong>1° giorno</strong></td>
                                    <td data-label="Tariffa">
                                        <ul class="bordered">
                                            <li><strong>€ 10,00</strong> / ora o frazione di ore successive</li>
                                        </ul>
                                    </td>
                                </tr>
                                <tr>
                                    <td data-label="Permanenza"><strong>Dal 2° giorno e giorni successivi</strong></td>
                                    <td data-label="Tariffa">
                                        <ul>
                                            <li><strong>€ 14,00</strong> al giorno</li>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>

                <div class="c-content-expo__item c-content-expo__item--side" grid="4@md offset-9@md">
                    <h4>Consigliato</h4>
                    <ul>
                        <li><strong>Fino a 4 ore</strong> - Per chi ti accompagna o ti viene a prendere</li>
                        <li><strong>Fino a 4 giorni</strong> - Per il tuo viaggio di lavoro, week-end</li>
                        <li><strong>5 giorni e oltre</strong> - Per la tua vacanza</li>
                    </ul>

                    <h4>Altre tariffe</h4>
                    <p>
                        <strong>Tariffa Weekend.</strong>
                        Valida tutto l’anno, nel parcheggio P2 Business dell’Aeroporto G. Marconi di Bologna, per soste che hanno inizio dal venerdì e terminano non oltre le ore 24.00 di domenica.
                    </p>
                    <p><strong>Sconto 30% per le city-car</strong> (fino a 2,5m di lunghezza) che sostano negli spazi riservati.</p>
                    <p><strong>€ 5 al giorno /frazione di giorno per le moto</strong> che sostano negli spazi riservati. Per le modalità di accesso rivolgersi agli addetti.</p>
                    <p><strong>Abbonamenti</strong> periodici e tessere a scalare d'importo.</p>

                    <h4>Servizi</h4>
                    <img src="../../images/kiss-fly-compact.jpg" alt="Kiss & fly" width="90">
                    <img src="../../images/elettra.png" alt="Elettra" width="90">

                    <h4>Documenti</h4>
                    <div class="docs">
                        <div class="c-media o-media ">
                            <img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="Mappa parcheggi" height="" width="32">
                            <div class="c-media__body o-media__body">
                                <a href="#"><strong>Mappa parcheggi</strong></a><br>PDF, 577 kb
                            </div>
                        </div>
                        <div class="c-media o-media ">
                            <img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="Regolamento" height="" width="32">
                            <div class="c-media__body o-media__body">
                                <a href="#"><strong>Regolamento</strong></a><br>PDF, 645 kb
                            </div>
                        </div>
                    </div>

                </div>

            </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-product {{ modifier }}">

  <div class="c-product__info">{{!-- c-product__info --}}
    <div class="c-product__type">
      <img src="{{ parking-type-img }}" alt="{{ parking-type-name }}">
      <div class="c-product__park-infos">
        {{#if lookOnMap}}{{> @button--icon-square lookOnMap }}{{/if}}
        {{#if lookOnDetails}}{{> @button--icon-square lookOnDetails }}{{/if}}
      </div>
    </div>
    <div class="c-product__features">
      {{> @icon-list park-item-features }}
    </div>
  </div>{{!-- c-product__info --}}

  <div class="c-product__url">
    <a href="{{ path '/components/preview/page-parking-p1p2' }}" class="rates-discover">Scopri le tariffe</a>
  </div>

</div>

{{> @dialog--parking-map parking-dialog-map }}
{{#notEqualTo parking-dialog-info false }}
{{ render "@dialog--parking-info" parking-dialog-info merge=true }}
{{/notEqualTo}}
 
{
  "tooltip-weekend": {
    "tooltip_aria_label": "Espandi le informazioni nascoste",
    "tooltip_exposed_icon": "ic_info_black_24px",
    "tooltip_exposed_text": null,
    "tooltip_position_class": "c-tooltip__bubble--left",
    "bubble_text": "La promozione inizia da venerdì e terminano non oltre le ore 24:00 di domenica. In caso di soste superiori, per ogni giorno supplementare si applica la tariffa standard. "
  },
  "modifier": "c-product--carousel",
  "parking-type-name": "Parcheggio P1",
  "parking-type-img": "/images/svgs/p1.svg",
  "parking-price-label": "Totale per 10 giorni",
  "parking-price": "€ 84,00",
  "park-item-features": {
    "aria-label": "Caratteristiche parcheggio P1",
    "items": [
      {
        "icon": "ic-covered-parking-black-24px",
        "text": "Coperto"
      },
      {
        "icon": "ic-accessible-black-24px",
        "text": "Posti riservati"
      },
      {
        "icon": "ic_place_black_24px",
        "text": "Fronte aerostazione"
      },
      {
        "icon": "ic_directions_walk_black_24px",
        "text": "1 min. a piedi"
      }
    ]
  },
  "lookOnMap": {
    "type": "button",
    "text": "Guarda in mappa",
    "modifier": "c-button--icon-square js-fr-dialogmodal-open",
    "opens-dialog": "dialog-p1-map",
    "aria-label": "Apri la modale per consultare la mappa del parcheggio",
    "svg": {
      "symbol": "ic-pin-map",
      "class": "svg-16"
    }
  },
  "lookOnDetails": {
    "type": "button",
    "text": "Mappa",
    "modifier": "c-button--icon-square is-pale js-fr-dialogmodal-open",
    "opens-dialog": "dialog-p1-info",
    "aria-label": "Apri la modale per consultare la mappa del parcheggio",
    "svg": {
      "symbol": "ic_info_black_24px",
      "class": "svg-16"
    }
  },
  "parking-dialog-map": {
    "modifier": "",
    "id": "dialog-p1-map",
    "dialog-labelledby": "dialog-p1-p2-title",
    "title": "Informazioni sui parcheggi P1 e P2",
    "maplocation": "Parcheggio+P1,+40132+Bologna+BO",
    "mapzoom": "16",
    "mapwidth": "600",
    "mapheight": "300"
  },
  "parking-dialog-info": {
    "modifier": "",
    "id": "dialog-p1-info",
    "dialog-labelledby": "dialog-p1-p2-title",
    "title": "Informazioni sui parcheggi P1 e P2"
  },
  "screen-reader-txt": {
    "cta": "Seleziona parcheggio P1 e P2"
  }
}
  • Content: 
    // /*------------------------------------*
//   PRODUCT CSS WITH CONTAINER QUERIES
// *------------------------------------*/

// $park-item-bp: bp(phablet);

// *:has( > .c-product) {
//   container-type: inline-size;
//   // outline: 2px solid red;
// }

// .c-product {
//   background-color: secondary(soft,100);
//   border: 1px solid primary(night,20);
//   position: relative;
//   border-radius: remify(16px);
//   transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 0s;
//   margin-bottom: remify(16px);
//   padding: 0;
//   // overflow: hidden;

//   @container (min-width: #{$park-item-bp}) {
//     display: flex;
//     justify-content: space-between;
//   }

//   .remove-product {
//     font-size: remify(14px);
//     margin-top: remify(8px);
//     @container (min-width: #{$park-item-bp}) {
//       font-size: remify(16px);
//       margin-left: auto;
//       margin-right: auto;
//     }
//   }

//   .c-button--icon-square {
//     display: inline-block;
//     color: #fff;
//     background-color: primary(sky, 120);

//     &.is-pale { 
//       background-color: primary(night, 80);
//     }
//   }

//   .c-folding & {
//     box-shadow: none;
//   }


//   .c-parkings__item &:hover {
//     @include shadow(higher);
//   }

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

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

// /* general respondive behaviour */

// .c-product__info { flex: 1 0 30%; }
// .c-product__schedule { flex: 4 1 50%; }
// .c-product__fare { flex: 0 1 20%; }

// .c-product__type, 
// .c-product__features,
// .c-product__schedule,
// .c-product__price,
// .c-product__fare {
//   padding: remify(16px);

//   @container (min-width: #{bp(tablet)}) {
//     padding: remify(24px);
//     display: flex;
//     flex-direction: column;
//     justify-content: flex-start;
//   }

//   @container (min-width: #{bp(tablet-p)}) {
//     justify-content: center;
//   }
// }

// .c-product__info {
//   display: flex;
//   justify-content: space-between;
//   flex-wrap: nowrap;
//   align-items: stretch;

//   @container (min-width: #{$park-item-bp}) {
//     flex-wrap: nowrap;
//   }

//   @container (min-width: #{$park-item-bp}) {
//     width: auto;
//     flex-grow: 1;
//     justify-content: flex-start;
//   }

// }

// .c-product__type {
  
//   padding: remify(24px) 0 remify(24px) remify(24px);
  
//   img { 
//     display: block; 
//     margin-bottom: 0;
//     width: remify(80px);

//     @container (min-width: #{$park-item-bp}) {
//       margin-bottom: remify(8px);
//       min-width: remify(80px);
//       width: remify(110px);
//     }
    
//   }
// }


// /* schedule */
// .c-product__schedule {
//   display: flex;
//   flex-direction: column;
//   padding: remify(16px);
//   border-top: 1px solid primary(night, 20);

//   @container (min-width: #{$park-item-bp}) {
//     padding: remify(24px);
//     border-top: none;
//     border-left: 1px solid primary(night, 20);
//   }

//   .c-product__qrcode {
//     text-align: right;
//     display: block;

//     @container (min-width: #{$park-item-bp}) {
//       text-align: left;
//     }

//     .c-tooltip button {
//       padding: 0;
//       @include font-scale(level-3);
//       color: primary(night, 100);      
//     }
//   }

// }

// /* utils */
// .c-product__utils {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   margin-top: remify(16px);

//   .c-tooltip--qrcode {
//     margin-top: 0;
//   }

//   .c-product__print {
//     display: inline-block;
//     @container (min-width: #{$park-item-bp}) { 
//       display: none;
//     }
//   }
// }


// .c-product__fare,
// .c-product__utils {
  
//   .c-product__print .c-button {
//     display: inline-block;
//     text-decoration: none;
//     position: relative;
//     width: auto;
//     height: remify(28px);
//     border-radius: remify(6px);
//     padding: 0 remify(8px);
//     transition: .3s;
//     font-size: remify(12px);

//     svg {
//       vertical-align: text-top;
//       display: inline-block;
//       margin-right: remify(4px);
  
//       * {
//         fill: currentColor;
//       }

//     }
//   }

// }


// /* fare */
// .c-product__fare {
//   text-align: center;
//   border-top: 1px solid primary(night, 20);
//   border-radius: 0 0 remify(16px) remify(16px);

//   @container (min-width: #{$park-item-bp}) {
//     display: flex;
//     border-top: none;
//     border-left: 1px solid primary(night, 20);
//     border-radius: 0 remify(16px) remify(16px) 0;
//     width: 16%;
//     flex-basis: remify(260px);
//     flex-direction: column;
//     justify-content: space-between;
//   }

//   & > div:only-child {
//     margin-top: auto;
//     margin-bottom: auto;
//   }

//   .is-disabled &{
//     background-color: primary(night, 10);
//   }

//   .has-offer & {
//      background-color: primary(night, 100);
//      color: #fff;

//      .c-product__price span.barred {
//         color: #fff;
//      }
//   }

//   .c-rounded-label {
//     margin: 0 0 remify(8px);
//     background-color: primary(night, 20);
//     color: primary(night, 120);
//      @include font-scale(level-1);
//   }

//   .c-product__price {
//     margin: 0 auto remify(16px);
//     padding: 0;
//     @include font-scale(level-1);

//     display: flex;
//     justify-content: space-between;
//     flex-direction: row-reverse;
//     align-items: center;

//     @container (min-width: #{$park-item-bp}) {
//       flex-direction: column;
//       padding: 0 remify(24px);
//     }

//     .barred {
//       display: block;
//       text-decoration: line-through;
//       color: primary(night, 60);
//     }

//     .discount-text {
//       text-align: left;
//     }
//     .tellmemore {
//       display: flex;
//       align-items: center;
//       justify-content: flex-start;
//     }
    
//     @container (min-width: #{$park-item-bp}) {
//       .c-product__price-value { text-align: center; }
//       .discount-text { text-align: center; }
//       .tellmemore { justify-content: center; }
//     }
//   }


//   .c-product__button {
//     margin: 0 auto;
//     text-align: center;
//   }
  
//   .c-button--submit {
    
//     padding: remify(12px) remify(24px);
//     font-size: remify(16px);
//     width: 100%;
//     @container (min-width: #{$park-item-bp}) {
//       width: auto;
//     }
//   }

//   .c-product__receipt {
//     display: flex;
//     justify-content: space-between;
//     flex-direction: row-reverse;
//     width: 100%;
//     margin-bottom: remify(16px);

//     @container (min-width: #{$park-item-bp}) {
//       flex-direction: column;
//       flex-grow: 2;
//       padding: 0 remify(24px);
//     }
//   }

//   .c-product__print {
//     display: none;
//     margin: remify(8px) 0 remify(8px) auto; 
//     @container (min-width: #{$park-item-bp}) {
//       display: inline-block;
//       text-align: center;
//       margin: remify(8px) auto; 
//     }
//   }
  
//   a.go-to-detail {
//     @include font-scale(level-1-5);
//     color: primary(night, 80);
//   }

//   .c-product__telepass {
//     text-align: right;
//     @container (min-width: #{$park-item-bp}) {
//       text-align: center;
//       margin: remify(8px) auto; 
//     }

//     button {
//       width: remify(120px);
//     }
//     span {
//         display: block;
//     }
//   }



// }

// .c-product__pay-online {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   text-align: center;
//   width: 100%;
//   padding: remify(12px);
//   background: primary(night, 100);
//   color: white;

//   .c-product:not(.c-product--carousel) & {
//     @container (min-width: #{$park-item-bp}) {
//       width: 16%;
//       min-width: remify(170px);
//       flex-flow: column;
//       border-radius: remify(20px);
//       margin: 0 remify(8px);
//       padding: remify(12px) remify(12px) remify(24px);
//     }
//   }

//   &.c-product__pay-online--out {
//     color: primary(night, 80);
//   }

//   .c-product__offer-number,
//   .c-product__value-text {
//     font-size: remify(12px);
//     text-transform: uppercase;

//     @container (min-width: #{$park-item-bp}) {
//       font-size: remify(12px);
//       margin-bottom: remify(16px);
//     }
//     .c-product--carousel & {
//       margin-bottom: 0;
//     }
//   }
//   & .c-product__value-full {
//     font-size: remify(16px);
//     text-decoration: line-through;
//     color: primary(sky, 40);
//   }

//   .c-product__price {
//     margin: auto;
//   }

//   .c-product__offer-number {
//     background: primary(night, 80);
//     display: inline-block;
//     border-radius: remify(20px);
//     display: none;
//     @container (min-width: #{$park-item-bp}) {
//       display: block;
//       font-size: remify(10px);
//       padding: remify(2px) remify(8px);

//       .c-product--carousel & {
//         display: none;
//       }
//     }

//     &.is-hidden {
//       visibility: hidden;
//       &::before {
//         content: "\00a0"; //insert empty char for spacing reasons
//       }
//     }
//   }

//   .c-button {
//     padding: 0.75rem 1.7rem;
//     max-width: remify(130px);
//     font-size: remify(14px);
//   }

//   &.c-product__pay-online--out {
//     background: transparent;
//     color: primary(night, 80);
//     .c-product__offer-number {
//       background: primary(night, 20);
//     }

//     .c-button {
//       cursor: not-allowed;
//     }
//   }
// }



// .c-product__price {
//   small {
//     font-weight: fw(bold);
//     margin-top: remify(16px);
//   }

//   .c-product--compact & {
//     flex-grow: initial;
//   }
// }

// .c-product__value {
//   font-size: remify(32px);
//   margin-bottom: remify(8px);
//   line-height: remify(48px);
//   white-space: nowrap;
// }

// .c-product__type {
//   text-align: center;
// }

// .c-product__features {
//   flex: 1;

//   @container (min-width: #{$park-item-bp}) {
//     flex-grow: 1;
//     min-width: remify(200px);
//   }

//   ul {
//     li {
//       font-size: remify(12px);
//     }

//     svg {
//       position: relative;
//       // top: remify(6px);
//       margin-right: remify(8px);
//     }

//     .c-icon-list__item span {
//       display: inline-block;
//       vertical-align: text-top;
//     }
//   }
// }

// .c-product__time {
//   display: flex;
// }

// /*------------------------------------*\
//   Vip Lounge Modifier
// \*------------------------------------*/

// .c-product--vip-lounge-recap {
//   border-top: remify(4px) solid secondary(page, 100);
//   // overflow: hidden;

//   @container (min-width: #{$park-item-bp}) {
//     display: flex;
//     border-left: remify(4px) solid secondary(page, 100);
//     border-top: none;
//   }

//   .c-product__info {
//     border-left: none;
//     border-top: none;
//   }

//   .c-product__type {
//     text-align: left;
//     display: flex;
//     align-items: initial;
//     flex-direction: column;

//     .c-button--as-link {
//       margin-left: 0;
//     }
//   }

//   .c-product__remove {
//     @container (min-width: #{$park-item-bp}) {
//       display: none;
//     }
//   }

//   .c-product__more {
//     @container (min-width: #{$park-item-bp}) {
//       display: block;
//     }
//   }

//   .c-folding & {
//     .c-product__schedule {
//       @container (min-width: #{$park-item-bp}) {
//         // flex-basis: remify(192px);
//         flex-basis: 24rem;
//         min-width: 24rem;
//       }
//     }
//     img {
//       width: remify(100px);
//     }
//   }
// }

// /*------------------------------------*\
//   Recap Modifier
// \*------------------------------------*/

// .c-product--recap {
//   position: relative;

//   .c-product__features {
//     @container (min-width: #{remify(1080px)}) {
//       margin-right: 0;
//     }
//   }

//   .c-product__info {
//     @container (min-width: #{$park-item-bp}) {
//       width: auto;
//       flex-grow: 1;
//     }
//   }

//   .c-product--compact,
//   .c-product__telepass {
//     &.mobile {
//       display: flex;
//       flex-direction: column;
//       flex-basis: 30%;
//       padding: remify(16px) remify(16px) 0 0;

//       @container (min-width: #{bp(phone-p)}) {
//         flex-basis: initial;
//       }

//       @container (min-width: #{remify(1080px)}) {
//         display: none;
//       }
//     }

//     &.desktop {
//       display: none;
//       @container (min-width: #{remify(1080px)}) {
//         display: flex;
//         flex-direction: column;
//       }
//     }
//   }

//   .c-product__time {
//     flex-wrap: wrap;
//     margin-bottom: remify(8px);

//     &--mobile {
//       margin-bottom: 0;
//     }
//   }

//   .c-product__labels {
    
//     display: flex;
//     justify-content: flex-start;
//     width: 100%;
//     flex-wrap: wrap;

//      @container (min-width: #{$park-item-bp}) {
//       padding: 0 0 remify(16px) 0;
//     }

//     .c-rounded-label {
//       margin: 0 remify(8px) remify(8px) 0;
//     }
//   }


//   .c-product__details {
//     padding: remify(16px) 0;
//     @include font-scale(level-1);

//     @container (min-width: #{$park-item-bp}) {
//       padding: remify(8px) 0 0 0;
//     }

//     small {
//       display: block;
//       margin-bottom: remify(12px);
//     }
//   }

//   .c-product__passengers {
    
//     @include font-scale(level-1);

//     @container (min-width: #{$park-item-bp}) {
//       padding-bottom: remify(16px);
//     }
//   }
// }

// /*------------------------------------*\
//   Carousel modifier
// \*------------------------------------*/

// .c-product--carousel {
//   box-shadow: none;
//   border-radius: remify(24px);
//   display: block;


//   &:hover {
//     @include shadow(high);
//   }
  

//   .c-carousel--equalH & {
//     display: flex;
//     flex-direction: column;
//     flex: 1;
//   }

//   .c-product__info,
//   &.c-product--p-express .c-product__info {
//     .c-carousel--equalH & {
//       flex: 1;
//     }
//     @container (min-width: #{$park-item-bp}) {
//       width: 100%;
//       align-items: initial;
//     }
//   }

//   .c-product__url {
//     text-align: center;
//     padding: remify(16px);
//     border-top: 1px solid primary(night,20);
//   }

//   .rates-discover {
//     display: block;
//   }
// }

// /*------------------------------------*\
//   Carousel discount
// \*------------------------------------*/

// /*------------------------------------*\
//   Pop modifier
// \*------------------------------------*/

// .c-product--pop,
// .js-productPop {

//   &:has(.pippo) > .c-product {
//     @container (max-width: #{bp(tablet-p)}) {
//       border-radius: 0 0 remify(16px) remify(16px);
//       border-top: 0;
//     }
//   }

//   .o-products--waterfall & {
//     margin-bottom: remify(16px);
//   }

//   .js-productPop & {
//     margin-bottom: 0;
//   }

//   .c-product__info {
//     flex-wrap: wrap;
//     @container (min-width: #{$park-item-bp}) {
//       width: auto;
//       flex-grow: 1;
//     }
//   }

//   .c-product__fare {
//     @container (min-width: #{$park-item-bp}) {
//       //width: 20%;
//     }
//   }

//   .c-product__static-map {
//     display: none;
//     padding: 0 remify(24px);

//     img {
//       border-radius: remify(4px);
//     }

//     @container (min-width: #{bp(tablet)}) {
//       display: flex;
//       flex-direction: column;
//       justify-content: center;
//     }
//   }

//   .c-product__features {
//     margin-top: remify(16px);

//     @container (min-width: #{bp(tablet-p)}) {
//       margin-left: remify(16px);
//       margin-right: 0;
//       flex: initial;
//     }

//     .active-at {
//       text-align: center;

//       @container (min-width: #{bp(tablet)}) {
//         text-align: left;
//       }

//       strong {
//         display: block;
//         font-size: 75%;
//         line-height: 1.5;
//         margin-bottom: remify(8px);
//       }

//       img {
//         width: remify(50px);
//         margin-bottom: remify(8px);
//         vertical-align: top;
//         margin-right: remify(4px);
//       }
//     }
//   }

//   .pippo {
//     background-color: primary(sky, 10);
//     padding: remify(16px);
//     border-radius: remify(16px) remify(16px) 0 0;
//     border: 1px solid primary(night,20);

//     @container (min-width: #{bp(tablet-p)}) {
//       display: none;
//     }
//   }

//   .c-product__focus {
//     // flex: 1 0 100%;
//     margin-top: remify(24px);
//     padding: 0 0 remify(16px) remify(16px);


//     @container (min-width: #{bp(tablet-p)}) {
//       margin-top: 0;
//       padding: 0;
//       margin-left: auto;
//       display: flex;
//       flex-direction: column;
//       justify-content: center;
//     }

//     p {
//       text-align: left;
//     }

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

//     img {
//       display: none;
//       margin-left: auto;
//       margin-right: auto;
//       border-radius: remify(4px);
//       height: remify(145px);

//       // @container (min-width: #{remify(1280px)}) {
//       @container (min-width: #{bp(tablet-p)}) {
//         display: block;
//         margin-right: remify(16px);
//       }
//     }

//     img + p {
//       color: primary(night, 100);
      
//       @container (min-width: #{bp(tablet-p)}) {
//         display: none;
//       }
//     }

//   }

//   .c-product__price {
//     flex-grow: 1;
//     display: flex;
//     align-items: center;
//     justify-content: space-between;
//     margin-bottom: 0;
//     flex-direction: column;

//     @container (min-width: #{$park-item-bp}) {
//       display: flex;
//       align-items: initial;
//       justify-content: center;
//     }

//     a.discover,
//     .master-label {
//       margin-top: remify(12px);
//       @container (min-width: #{$park-item-bp}) {
//         margin-top: remify(24px);
//       }
//     }

//     .js-discoverToggle-label {
//       color: primary(sky, 120);
//       text-transform: initial;
//       font-size: 100%;

//       &.close .icon-arrow {
//         display: inline-block;
//         transform: rotate(180deg);
//       }
//     }

//     .fare-text {
//       > * {
//         display: block;
//       }
//     }

//     .fare-text + .c-button {
//       margin-top: remify(16px);
//     }
//   }
// }

// .close {
//   display: none;
// }

// .c-product__pop-info {
//   display: none;
//   margin-bottom: remify(16px);
// }

// .chkPopInfo:checked ~ .c-product__pop-info {
//   display: block;
// }

// /*------------------------------------*\
//   js-productPop
// \*------------------------------------*/

// .js-productPop {
//   margin-bottom: remify(16px);
// }

// /*------------------------------------*\
//   Modifier telepass
// \*------------------------------------*/

// .c-product--payed.telepass {

//   .c-product__discover {
//     flex: 1 0 100%;
//     margin-top: remify(8px);
//   }

//   .c-product__fare {
//     background: none;
//     display: flex;
//     flex-direction: initial;
//     flex-wrap: wrap;
//     // position: relative;

//     .cta {
//       flex: 1 0 100%;
//       text-align: center;
//       margin-bottom: remify(24px);
//       z-index: $z-Index-cta-product;

//       @container (min-width: #{$park-item-bp}) {
//         margin-top: remify(24px);
//         margin-bottom: 0;
//         position: absolute;
//         left: 50%;
//         transform: translateX(-50%);
//         bottom: remify(-34px);
//       }
//     }
//   }

//   .c-product__price.c-product__price--desktop {
//     display: none;
//     @container (min-width: #{$park-item-bp}) {
//       display: block;
//       margin: 0 auto;
//     }
//   }

//   .c-product__price--mobile {
//     flex-basis: 33%;

//     @container (min-width: #{bp(phone-p)}) {
//       flex-basis: initial;
//     }
//   }

//   .cta {
//     width: 100%;
//   }
// }

// /*------------------------------------*\
//   Modifier telepass checkout
// \*------------------------------------*/

// .c-product--checkout.telepass {
//   .c-product__fare {
//     flex-direction: column;
//     //width: 20%;
//   }

//   .c-tooltip {
//     margin-bottom: remify(16px);
//   }

//   .c-product__info {
//     @container (min-width: #{bp(phone-l)}) {
//       width: auto;
//       flex-grow: 1;
//     }
//   }
// }

// /*------------------------------------*\
//   Modifier P-Express banner
// \*------------------------------------*/

// .c-product__pay-with {
//   display: flex;
//   flex-flow: column;
//   align-self: flex-start;
//   text-align: center;
//   width: 100%;
//   margin: remify(28px) 0 remify(8px);

//   @container (min-width: #{bp(phone-p)}) {
//     width: auto;
//     margin: 0;
//   }

//   p {
//     font-size: remify(12px);
//     margin-bottom: remify(4px);
//     text-transform: uppercase;

//     @container (min-width: #{$park-item-bp}) {
//       font-size: remify(14px);
//     }
//   }
// }

// .c-product--p-express {
//   @container (max-width: #{$park-item-bp}) {
//     display: flex;
//     flex-direction: column;
//     .c-product__pay-online {
//       order: 3;
//     }
//     .c-product__fare {
//       order: 2;
//     }
//   }

//   @container (min-width: #{$park-item-bp}) {
//     .c-product__info {
//       width: auto;
//       flex-grow: 1;
//     }
//     &.c-product--pop .c-product__info {
//       width: auto;
//       flex-grow: 1;
//     }
//     //.c-product__fare  {width: 20%;}
//   }
// }

// /*------------------------------------*\
//   Modifier P-Express banner
// \*------------------------------------*/
// .c-product__reminderwrapper {
//   // width: 100%;
//   flex-grow: 1;
//   @container (min-width: #{bp(tablet-p)}) {
//     margin: 0 auto;
//     text-align: center;
//     position: sticky;
//     top: 48px;
//     bottom: -100px;
//     z-index: 800;
//     max-width: remify(920px);
//   }
// }

// .c-product__reminder {
//   display: flex;
//   flex-direction: column;
//   justify-content: space-between;
//   align-items: center;
//   padding: remify(16px);
//   border-radius: remify(8px);
//   background: primary(night, 100);
//   color: white;
//   margin: auto;
//   position: relative;
//   top: remify(-48px);

//   &--bottom {
//     top: remify(24px);
//   }

//   @container (min-width: #{bp(tablet)}) {
//     flex-direction: row;
//     padding: remify(8px);
//   }

//   img {
//     max-width: remify(48px);
//   }

//   & .c-button__shift-up {
//     top: 0;
//   }

//   .c-reminder__sticker {
//     padding-left: remify(16px);
//   }
//   .c-reminder__message {
//     text-align: center;

//     @container (min-width: #{bp(tablet)}) {
//       text-align: left;
//       padding-left: remify(16px);
//       padding-right: remify(48px);
//     }
//   }
//   .c-reminder__sale-message {
//     display: block;
//     font-size: 16px;
//   }
//   .c-reminder__sale-details {
//     font-size: 12px;
//     text-transform: uppercase;
//     color: primary(night, 20);
//   }
//   .c-reminder__price {
//     text-align: center;
//     margin-bottom: 1rem;

//     @container (min-width: #{bp(tablet)}) {
//       text-align: right;
//       padding-right: remify(24px);
//       margin-bottom: 0;
//     }
//   }
//   .c-reminder__sale-price {
//     font-size: 24px;
//   }
//   .c-reminder__old-price {
//     font-size: 14px;
//     color: primary(night, 20);

//     .is-strike {
//       text-decoration: line-through;
//     }
//   }
// }
  • URL: /components/raw/product/_CQproduct.scss
  • Filesystem Path: src/views/03-organisms/product/_CQproduct.scss
  • Size: 23.6 KB
  • Content: 
    $park-item-bp: bp(tablet);

.c-product {
  background-color: secondary(soft,100);
  border: 1px solid primary(night,20);
  position: relative;
  border-radius: remify(16px);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 0s;
  margin-bottom: remify(16px);
  padding: 0;
  // overflow: hidden;

  @include min-screen($park-item-bp) {
    display: flex;
    justify-content: space-between;
  }

  .remove-product {
    font-size: remify(14px);
    margin-top: remify(8px);
    @include min-screen($park-item-bp) {
      font-size: remify(16px);
      margin-left: auto;
      margin-right: auto;
    }
  }

  .c-button--icon-square {
    display: inline-block;
    color: #fff;
    background-color: primary(sky, 120);

    &.is-pale { 
      background-color: primary(night, 80);
    }
  }

  .c-folding & {
    box-shadow: none;
  }


  .c-parkings__item &:hover {
    @include shadow(higher);
  }

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

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

.c-product__fold {
  background-color: primary(sky, 10);
  padding: remify(16px);
  border-radius: remify(16px) remify(16px) 0 0;
}

/* general respondive behaviour */

.c-product__info { flex: 1 0 30%; }
.c-product__schedule { flex: 4 1 50%; }
.c-product__fare { flex: 0 1 20%; }

.c-product__type, 
.c-product__features,
.c-product__schedule,
.c-product__price,
.c-product__fare {
  padding: remify(16px);

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

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

.c-product__info {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: stretch;

  @include min-screen($park-item-bp) {
    flex-wrap: nowrap;
  }

  @include min-screen($park-item-bp) {
    width: auto;
    flex-grow: 1;
    justify-content: flex-start;
  }

}

.c-product__type {
  
  padding: remify(24px) 0 remify(24px) remify(24px);
  
  img { 
    display: block; 
    margin-bottom: 0;
    width: remify(80px);

    @include min-screen($park-item-bp) {
      margin-bottom: remify(8px);
      min-width: remify(80px);
      width: remify(110px);
    }
    
  }
}


/* schedule */

.c-product__schedule {
  display: flex;
  flex-direction: column;
  padding: remify(16px);
  border-top: 1px solid primary(night, 20);

  @include min-screen($park-item-bp) {
    padding: remify(24px);
    border-top: none;
    border-left: 1px solid primary(night, 20);
  }

  // .c-product__qrcode {
  //   text-align: right;
  //   align-items: center;

  //   @include min-screen($park-item-bp) {
  //     text-align: left;
  //   }

  //   .c-tooltip button {
  //     padding: 0;
  //     @include font-scale(level-3);
  //     color: primary(night, 100);      
  //   }
  // }

}

/* further */
.c-product__further {
  display: flex;
  align-items: center;
  margin-top: remify(24px);
  gap: remify(16px);
}

.c-product__further-item {
  display: flex;
  align-items: center;
  gap: remify(8px);
  color: primary(night, 100);

  & *,
  button {
    color: currentColor;
    fill: currentColor;
    @include font-scale(level-2);
  }

  button {
    background: none;
    border: 0;
    padding: 0;
  }

}

/* utils */
.c-product__utils {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: remify(16px);

  .c-product__print {
    display: inline-block;
    @include min-screen($park-item-bp) { 
      display: none;
    }
  }
}


.c-product__fare,
.c-product__utils {
  
  .c-product__print .c-button {
    display: inline-block;
    text-decoration: none;
    position: relative;
    width: auto;
    height: remify(28px);
    border-radius: remify(6px);
    padding: 0 remify(8px);
    transition: .3s;
    font-size: remify(12px);

    svg {
      vertical-align: text-top;
      display: inline-block;
      margin-right: remify(4px);
  
      * {
        fill: currentColor;
      }

    }
  }

}


/* fare */
.c-product__fare {
  text-align: center;
  border-top: 1px solid primary(night, 20);
  border-radius: 0 0 remify(16px) remify(16px);

  @include min-screen($park-item-bp) {
    display: flex;
    border-top: none;
    border-left: 1px solid primary(night, 20);
    border-radius: 0 remify(16px) remify(16px) 0;
    width: 16%;
    flex-basis: remify(260px);
    flex-direction: column;
    justify-content: space-between;
  }

  & > div:only-child {
    margin-top: auto;
    margin-bottom: auto;
  }

  .is-disabled &{
    background-color: primary(night, 10);
  }

  .has-offer & {
     background-color: primary(night, 100);
     color: #fff;

     .c-product__price span.barred {
        color: #fff;
     }
  }

  .c-rounded-label {
    margin: 0 0 remify(8px);
    background-color: primary(night, 20);
    color: primary(night, 120);
     @include font-scale(level-1);
  }

  .c-product__price {
    margin: 0 auto remify(16px);
    padding: 0;
    @include font-scale(level-1);

    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;

    @include min-screen($park-item-bp) {
      flex-direction: column;
      padding: 0 remify(24px);
    }

    .barred {
      display: block;
      text-decoration: line-through;
      color: primary(night, 60);
    }

    .discount-text {
      text-align: left;
    }
    .tellmemore {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    
    @include min-screen($park-item-bp) {
      .c-product__price-value { text-align: center; }
      .discount-text { text-align: center; }
      .tellmemore { justify-content: center; }
    }
  }


  .c-product__button {
    margin: 0 auto;
    text-align: center;
  }
  
  .c-button--submit {
    
    padding: remify(12px) remify(24px);
    font-size: remify(16px);
    width: 100%;
    @include min-screen($park-item-bp) {
      width: auto;
    }
  }

  .c-product__receipt {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    width: 100%;
    margin-bottom: remify(16px);

    @include min-screen($park-item-bp) {
      flex-direction: column;
      flex-grow: 2;
      padding: 0 remify(24px);
    }
  }

  .c-product__print {
    display: none;
    margin: remify(8px) 0 remify(8px) auto; 
    @include min-screen($park-item-bp) {
      display: inline-block;
      text-align: center;
      margin: remify(8px) auto; 
    }
  }
  
  a.go-to-detail {
    @include font-scale(level-1-5);
    color: primary(night, 80);
  }

  .c-product__telepass {
    text-align: right;
    @include min-screen($park-item-bp) {
      text-align: center;
      margin: remify(8px) auto; 
    }

    button {
      width: remify(120px);
    }
    span {
        display: block;
    }
  }



}

.c-product__pay-online {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: remify(12px);
  background: primary(night, 100);
  color: white;

  .c-product:not(.c-product--carousel) & {
    @include min-screen($park-item-bp) {
      width: 16%;
      min-width: remify(170px);
      flex-flow: column;
      border-radius: remify(20px);
      margin: 0 remify(8px);
      padding: remify(12px) remify(12px) remify(24px);
    }
  }

  &.c-product__pay-online--out {
    color: primary(night, 80);
  }

  .c-product__offer-number,
  .c-product__value-text {
    font-size: remify(12px);
    text-transform: uppercase;

    @include min-screen($park-item-bp) {
      font-size: remify(12px);
      margin-bottom: remify(16px);
    }
    .c-product--carousel & {
      margin-bottom: 0;
    }
  }
  & .c-product__value-full {
    font-size: remify(16px);
    text-decoration: line-through;
    color: primary(sky, 40);
  }

  .c-product__price {
    margin: auto;
  }

  .c-product__offer-number {
    background: primary(night, 80);
    display: inline-block;
    border-radius: remify(20px);
    display: none;
    @include min-screen($park-item-bp) {
      display: block;
      font-size: remify(10px);
      padding: remify(2px) remify(8px);

      .c-product--carousel & {
        display: none;
      }
    }

    &.is-hidden {
      visibility: hidden;
      &::before {
        content: "\00a0"; //insert empty char for spacing reasons
      }
    }
  }

  .c-button {
    padding: 0.75rem 1.7rem;
    max-width: remify(130px);
    font-size: remify(14px);
  }

  &.c-product__pay-online--out {
    background: transparent;
    color: primary(night, 80);
    .c-product__offer-number {
      background: primary(night, 20);
    }

    .c-button {
      cursor: not-allowed;
    }
  }
}



.c-product__price {
  small {
    font-weight: fw(bold);
    margin-top: remify(16px);
  }

  .c-product--compact & {
    flex-grow: initial;
  }
}

.c-product__value {
  font-size: remify(32px);
  margin-bottom: remify(8px);
  line-height: remify(48px);
  white-space: nowrap;
}

.c-product__type {
  text-align: center;
}

.c-product__features {
  flex: 1;

  @include min-screen($park-item-bp) {
    flex-grow: 1;
    min-width: remify(200px);
  }

  ul {
    li {
      font-size: remify(12px);
    }

    svg {
      position: relative;
      // top: remify(6px);
      margin-right: remify(8px);
    }

    .c-icon-list__item span {
      display: inline-block;
      vertical-align: text-top;
    }
  }
}

.c-product__time {
  display: flex;
}

/*------------------------------------*\
  Vip Lounge Modifier
\*------------------------------------*/

.c-product--vip-lounge-recap {
  border-top: remify(4px) solid secondary(page, 100);
  // overflow: hidden;

  @include min-screen($park-item-bp) {
    display: flex;
    border-left: remify(4px) solid secondary(page, 100);
    border-top: none;
  }

  .c-product__info {
    border-left: none;
    border-top: none;
  }

  .c-product__type {
    text-align: left;
    display: flex;
    align-items: initial;
    flex-direction: column;

    .c-button--as-link {
      margin-left: 0;
    }
  }

  .c-product__remove {
    @include min-screen($park-item-bp) {
      display: none;
    }
  }

  .c-product__more {
    @include min-screen($park-item-bp) {
      display: block;
    }
  }

  .c-folding & {
    .c-product__schedule {
      @include min-screen($park-item-bp) {
        // flex-basis: remify(192px);
        flex-basis: 24rem;
        min-width: 24rem;
      }
    }
    img {
      width: remify(100px);
    }
  }
}

/*------------------------------------*\
  Recap Modifier
\*------------------------------------*/

.c-product--recap {
  position: relative;

  .c-product__features {
    @include min-screen(remify(1080px)) {
      margin-right: 0;
    }
  }

  .c-product__info {
    @include min-screen($park-item-bp) {
      width: auto;
      flex-grow: 1;
    }
  }

  .c-product--compact,
  .c-product__telepass {
    &.mobile {
      display: flex;
      flex-direction: column;
      flex-basis: 30%;
      padding: remify(16px) remify(16px) 0 0;

      @include min-screen(bp(phone-p)) {
        flex-basis: initial;
      }

      @include min-screen(remify(1080px)) {
        display: none;
      }
    }

    &.desktop {
      display: none;
      @include min-screen(remify(1080px)) {
        display: flex;
        flex-direction: column;
      }
    }
  }

  .c-product__time {
    flex-wrap: wrap;
    margin-bottom: remify(8px);

    &--mobile {
      margin-bottom: 0;
    }
  }

  .c-product__labels {
    
    display: flex;
    justify-content: flex-start;
    width: 100%;
    flex-wrap: wrap;

     @include min-screen($park-item-bp) {
      padding: 0 0 remify(16px) 0;
    }

    .c-rounded-label {
      margin: 0 remify(8px) remify(8px) 0;
    }
  }


  .c-product__details {
    padding: remify(16px) 0;
    @include font-scale(level-1);

    @include min-screen($park-item-bp) {
      padding: remify(8px) 0 0 0;
    }

    small {
      display: block;
      margin-bottom: remify(12px);
    }
  }

  .c-product__passengers {
    
    @include font-scale(level-1);

    @include min-screen($park-item-bp) {
      padding-bottom: remify(16px);
    }
  }
}


/*------------------------------------*\
  Carousel modifier
\*------------------------------------*/

.c-product--carousel {
  box-shadow: none;
  border-radius: remify(24px);
  display: block;


  &:hover {
    @include shadow(high);
  }
  

  .c-carousel--equalH & {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .c-product__info,
  &.c-product--p-express .c-product__info {
    .c-carousel--equalH & {
      flex: 1;
    }
    @include min-screen($park-item-bp) {
      width: 100%;
      align-items: initial;
    }
  }

  .c-product__url {
    text-align: center;
    padding: remify(16px);
    border-top: 1px solid primary(night,20);
  }

  .rates-discover {
    display: block;
  }
}

/*------------------------------------*\
  Pop modifier
\*------------------------------------*/

.c-product--pop {

  .o-products--waterfall & {
    margin-bottom: remify(16px);
  }

  .js-productPop & {
    margin-bottom: 0;
  }

  .c-product__type,
  .c-product__features,
  .c-product__fare {
    @include min-screen(bp(tablet-p)) {
      padding: remify(16px);
    }
  }

  .c-product__type img {
    width: remify(80px);

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

  .c-product__info {
    // flex-wrap: wrap;
    @include min-screen($park-item-bp) {
      width: auto;
      flex-grow: 1;
    }
  }

  .c-product__fare {
    @include min-screen($park-item-bp) {
      //width: 20%;
      flex-basis: remify(225px);
    }
  }

  .c-product__static-map {
    display: none;
    padding: 0 remify(24px);

    img {
      border-radius: remify(4px);
    }

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

  .c-product__features {

    @include min-screen(bp(tablet)) {
      flex: 1;
    }

    .active-at {
      text-align: center;

      @include min-screen(bp(tablet)) {
        text-align: left;
      }

      strong {
        display: block;
        font-size: 75%;
        line-height: 1.5;
        margin-bottom: remify(8px);
      }

      img {
        width: remify(50px);
        margin-bottom: remify(8px);
        vertical-align: top;
        margin-right: remify(4px);
      }
    }
  }

  .c-product__focus {
    // flex: 1 0 100%;
    margin-top: remify(24px);
    padding: 0 0 remify(16px) remify(16px);


    @include min-screen(bp(tablet)) {
      margin-top: 0;
      // margin-left: auto;
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: remify(16px);
    }

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

    img {
      display: none;
      margin-left: auto;
      margin-right: auto;
      border-radius: remify(4px);
      width: remify(130px);

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

    @include min-screen(bp(tablet-p)) {
      // flex: 1 1 remify(20px);
    }
  }

  .c-product__price {
    padding: 0;
    margin: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    flex-direction: column;

    @include min-screen($park-item-bp) {
      display: flex;
      align-items: initial;
      justify-content: center;
    }

    a.discover,
    .master-label {
      margin-top: remify(12px);
      @include min-screen($park-item-bp) {
        margin-top: remify(24px);
      }
    }

    .js-discoverToggle-label {
      color: primary(sky, 120);
      text-transform: initial;
      font-size: 100%;

      &.close .icon-arrow {
        display: inline-block;
        transform: rotate(180deg);
      }
    }

    .fare-text {
      > * {
        display: block;
      }
    }

    .fare-text + .c-button {
      margin-top: remify(16px);
    }
  }
}

/*------------------------------------*
  CSS to address #1612 ticket
*------------------------------------*/
.c-content-expo__item .c-product--pop,
.c-content-expo__item .js-productPop {
  $park-item-bp: remify(1220px);

  @include max-screen($park-item-bp) {
    display: block;
  }

  .c-product__focus img {
    @include max-screen(remify(950px)) {
      display: none;
    }
  }
  
  .c-product__fare {
    @include max-screen($park-item-bp) {
      width: 100%;
      text-align: center;
      border-top: 1px solid primary(night, 20);
      border-radius: 0 0 remify(16px) remify(16px);
    }
  }

  .c-product__fold {
    display: none;

    @include max-screen(remify(950px)) {
      display: block;
      border: 1px solid primary(night, 20);
    }
  }

}

.c-content-expo__item .js-productPop:has(.c-product__fold) .c-product{
  @include max-screen(remify(950px)) {
    border-radius: 0 0 remify(16px) remify(16px);
    border-top: none;
  }
}
/*------------------------------------*
  end CSS to address #1612 ticket
*------------------------------------*/

.close {
  display: none;
}

.c-product__pop-info {
  display: none;
  margin-bottom: remify(16px);
}

.chkPopInfo:checked ~ .c-product__pop-info {
  display: block;
}

/*------------------------------------*\
  js-productPop
\*------------------------------------*/

.js-productPop {
  margin-bottom: remify(16px);
}

/*------------------------------------*\
  Modifier telepass
\*------------------------------------*/

.c-product--payed.telepass {

  .c-product__discover {
    flex: 1 0 100%;
    margin-top: remify(8px);
  }

  .c-product__fare {
    background: none;
    display: flex;
    flex-direction: initial;
    flex-wrap: wrap;
    // position: relative;

    .cta {
      flex: 1 0 100%;
      text-align: center;
      margin-bottom: remify(24px);
      z-index: $z-Index-cta-product;

      @include min-screen($park-item-bp) {
        margin-top: remify(24px);
        margin-bottom: 0;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: remify(-34px);
      }
    }
  }

  .c-product__price.c-product__price--desktop {
    display: none;
    @include min-screen($park-item-bp) {
      display: block;
      margin: 0 auto;
    }
  }

  .c-product__price--mobile {
    flex-basis: 33%;

    @include min-screen(bp(phone-p)) {
      flex-basis: initial;
    }
  }

  .cta {
    width: 100%;
  }
}

/*------------------------------------*\
  Modifier telepass checkout
\*------------------------------------*/

.c-product--checkout.telepass {
  .c-product__fare {
    flex-direction: column;
    //width: 20%;
  }

  .c-tooltip {
    margin-bottom: remify(16px);
  }

  .c-product__info {
    @include min-screen(bp(phone-l)) {
      width: auto;
      flex-grow: 1;
    }
  }
}

/*------------------------------------*\
  Modifier P-Express banner
\*------------------------------------*/

.c-product__pay-with {
  display: flex;
  flex-flow: column;
  align-self: flex-start;
  text-align: center;
  width: 100%;
  margin: remify(28px) 0 remify(8px);

  @include min-screen(bp(phone-p)) {
    width: auto;
    margin: 0;
  }

  p {
    font-size: remify(12px);
    margin-bottom: remify(4px);
    text-transform: uppercase;

    @include min-screen($park-item-bp) {
      font-size: remify(14px);
    }
  }
}

.c-product--p-express {
  @include max-screen($park-item-bp) {
    display: flex;
    flex-direction: column;
    .c-product__pay-online {
      order: 3;
    }
    .c-product__fare {
      order: 2;
    }
  }

  @include min-screen($park-item-bp) {
    .c-product__info {
      width: auto;
      flex-grow: 1;
    }
    &.c-product--pop .c-product__info {
      width: auto;
      flex-grow: 1;
    }
    //.c-product__fare  {width: 20%;}
  }
}

/*------------------------------------*\
  Modifier P-Express banner
\*------------------------------------*/
.c-product__reminderwrapper {
  // width: 100%;
  flex-grow: 1;
  @include min-screen(bp(tablet-p)) {
    margin: 0 auto;
    text-align: center;
    position: sticky;
    top: 48px;
    bottom: -100px;
    z-index: 600;
    max-width: remify(920px);
  }
}

.c-product__reminder {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: remify(16px);
  border-radius: remify(8px);
  background: primary(night, 100);
  color: white;
  margin: auto;
  position: relative;
  top: remify(-48px);

  &--bottom {
    top: remify(24px);
  }

  @include min-screen(bp(tablet)) {
    flex-direction: row;
    padding: remify(8px);
  }

  img {
    max-width: remify(48px);
  }

  & .c-button__shift-up {
    top: 0;
  }

  .c-reminder__sticker {
    padding-left: remify(16px);
  }
  .c-reminder__message {
    text-align: center;

    @include min-screen(bp(tablet)) {
      text-align: left;
      padding-left: remify(16px);
      padding-right: remify(48px);
    }
  }
  .c-reminder__sale-message {
    display: block;
    font-size: 16px;
  }
  .c-reminder__sale-details {
    font-size: 12px;
    text-transform: uppercase;
    color: primary(night, 20);
  }
  .c-reminder__price {
    text-align: center;
    margin-bottom: 1rem;

    @include min-screen(bp(tablet)) {
      text-align: right;
      padding-right: remify(24px);
      margin-bottom: 0;
    }
  }
  .c-reminder__sale-price {
    font-size: 24px;
  }
  .c-reminder__old-price {
    font-size: 14px;
    color: primary(night, 20);

    .is-strike {
      text-decoration: line-through;
    }
  }
}

/*------------------------------------*
  Stacked modifier
*------------------------------------*/
.c-product--stacked {

  @include min-screen($park-item-bp) {
    display: block;
  }

  .c-product__type img {
    width: remify(80px);
    margin-bottom: remify(8px);
  }

  .c-product__info {
    align-items: flex-start;
  }

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

  .c-product__fare {
    border-radius: 0 0 remify(16px) remify(16px);
    width: 100%;
    border-top: 1px solid primary(night,20);
    border-left: none;
    padding: remify(16px);
  }

  .c-product__button {
    margin: 0;
  }

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

  .c-product__detail-link {
    margin-top: auto;
    padding-top: remify(16px);
  }

}

/*------------------------------------*
  Park esaurito
*------------------------------------*/
.c-product.is-disabled {

  .c-product__button > .c-button {
    display: block;
    margin-inline: auto;
  }

}
  • URL: /components/raw/product/_product.scss
  • Filesystem Path: src/views/03-organisms/product/_product.scss
  • Size: 22.5 KB
  • Content: 
    (function($) {

  var $qtyBtnTrigger = $('.js-enable-qty-trigger, .js-btn-qty button');
  var $buttonPay = $('.js-button-animation-ctrl');
  
  $qtyBtnTrigger.click(function(e){
    e.preventDefault();
    $buttonPay.addClass('c-button--pulse');
    setTimeout(function() { 
      $buttonPay.removeClass('c-button--pulse');
    }, 500);
  });

})(jQuery);
  • URL: /components/raw/product/park-recap-qrcode.js
  • Filesystem Path: src/views/03-organisms/product/park-recap-qrcode.js
  • Size: 355 Bytes
  • Content: 
    (function($) {

  var $productPop = $('.js-productPop');
  var $qtyDiscoverToggleInput = $('.js-discoverToggle-input');
  var $qtyDiscoverToggleLabel = $('.js-discoverToggle-label');

  $qtyDiscoverToggleInput.change(function() {
    $(this).closest($productPop).find($('.js-discoverToggle-label.open, .js-discoverToggle-label.close')).toggle();
  });


})(jQuery);
  • URL: /components/raw/product/product-pop.js
  • Filesystem Path: src/views/03-organisms/product/product-pop.js
  • Size: 365 Bytes

No notes defined.