Aeroporto di Bologna - Design System

Product: P Premium 

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

    <div class="c-product__info">

        <div class="c-product__type">
            <img src="/images/svgs/p-express-premium.svg" alt="Premium">
            <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 P-Express">
                <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>
                <li class="c-icon-list__item ">
                    <svg class="c-icon c-icon--24">
                        <use xlink:href="#ic-telepass"></use>
                    </svg> <span class="c-icon-list__text">Abilitato Telepass</span>
                </li>
            </ul>
        </div>

    </div>

    <div class="c-product__fare">

        <div class="c-product__price">
            <div class="c-product__price-value">
                <span class="barred" aria-hidden="true">€ 84,00</span>
                <strong class="c-product__value">€ 61,00</strong>
            </div>

            <div class="discount-text">
                <p>Totale per tre giorni <strong>solo pagando online</strong></p>
            </div>
        </div>
        <div class="c-product__button">
            <button type="submit" class="c-button c-button--submit" aria-label="Seleziona parcheggio P-Express">

                Prosegui

            </button>
        </div>
    </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-dialog js-fr-dialogmodal " id="">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="-">
        <div role="document">
            <p class="c-dialog__title" id="-" aria-hidden="true"></p>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque nobis voluptatem quisquam molestiae eaque recusandae, iste officiis voluptatibus in quae culpa amet laudantium, doloremque corrupti odio <a href="#">pariatur</a> quas incidunt laborum!Officia dolorem a repellendus, nisi nulla dolorum. Maxime ratione non, omnis, voluptatibus repudiandae <a href="#">quidem</a> voluptas optio veritatis necessitatibus esse ex exercitationem consequuntur quasi dolore distinctio magnam nostrum aperiam corporis facilis.
            </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-product {{ modifier }}">

  {{#if stamp}}
    {{> @rounded-label stamp }}
  {{/if}}

  <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>

    {{#if has-logo}}
    <div class="c-product__pay-with">
      <p>abilitato</p>
      <img src="{{ convention-logo-img }}" alt="">
    </div>
    {{/if}}

  </div>{{!-- c-product__info --}}

  <div class="c-product__fare">{{!-- c-product__fare --}}

    {{#if chip-label}}
      {{> @rounded-label chip-label }}
    {{/if}}

    <div class="c-product__price">
      <div class="c-product__price-value">
        <span class="barred" aria-hidden="true">{{ parking-price }}</span>
        <strong class="c-product__value">€ 61,00</strong>
      </div>

      <div class="discount-text">
        <p>Totale per tre giorni <strong>solo pagando online</strong></p>
        {{!-- <div class="tellmemore">
          Tariffa weekend {{> @tooltip tooltip-weekend }}
        </div> --}}
      </div>
    </div>
    <div class="c-product__button">
      {{#if offer-out}}
			  {{> @button--disabled type="submit" modifier="c-button--disabled" text="Posti acquistabili esauriti" aria-label=screen-reader-txt.cta }}
        {{> @button btn-dialog-offer-out }}
			{{else}}
			  {{> @button type="submit" modifier="c-button--submit" text="Prosegui" aria-label=screen-reader-txt.cta }}
			{{/if}}
    </div>
  </div>{{!-- c-product__fare --}}

</div>

{{> @dialog--parking-map parking-dialog-map }}
{{ render "@dialog--parking-info" parking-dialog-info merge=true }}
{{> @dialog dialog-offer-out-info }}
 
{
  "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--premium",
  "parking-type-name": "Premium",
  "parking-type-img": "/images/svgs/p-express-premium.svg",
  "parking-price": "€ 84,00",
  "park-item-features": {
    "aria-label": "Caratteristiche P-Express",
    "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"
      },
      {
        "icon": "ic-telepass",
        "text": "Abilitato Telepass"
      }
    ]
  },
  "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 P-Express"
  },
  "has-logo": false,
  "has-offer": false,
  "offer-number-hidden": false,
  "offer-number": "12",
  "offer-price": "€ 61,00",
  "offer-out": false
}
  • 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.