Product: Park Recap Telepass

Reviewed

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-product c-product--recap c-product--payed telepass">

    <div class="c-product__info">

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

            </div>
        </div>
        <div class="c-product__features">
            <ul class="c-icon-list" aria-label="Caratteristiche parcheggio P1 e 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__schedule">
        <div class="c-product__labels">
            <span class="c-rounded-label c-rounded-label--positive" aria-label="Stato della prenotazione: Pagato">

                Pagato
            </span> <span class="c-rounded-label c-rounded-label--grey" aria-label="">

                CODICE <strong>1102935</strong>
            </span>
        </div>
        <div class="c-product__time">
            <div class="c-time-detail c-time-detail--product">
                <div class="c-time-detail__span">
                    <div class="u-color-sky-120"><strong>Entrata</strong></div>
                    <div>Dal
                        <strong>
                            <time datetime=2018/04/10>
                                10/04/2018
                            </time>
                        </strong>
                    </div>
                    <div>Ore <strong><time>20:30</time></strong></div>
                </div>

            </div>
            <div class="c-time-detail c-time-detail--product">
                <div class="c-time-detail__span">
                    <div class="u-color-sky-120"><strong>Uscita</strong></div>
                    <div>Dal
                        <strong>
                            <time datetime=2018/04/20>
                                20/04/2018
                            </time>
                        </strong>
                    </div>
                    <div>Ore <strong><time>20:30</time></strong></div>
                </div>

            </div>
        </div>
        <div class="c-product__details">
            <div class="c-media o-media ">
                <img class="c-media__figure o-media__figure" src="../../images/svgs/park_item_pagato.svg" alt="Dettaglio prenotazione" height="" width="80">
                <div class="c-media__body o-media__body">
                    <a href='#'>Scopri come accedere al parcheggio ➝</a>
                </div>
            </div>
        </div>

        <div class="c-product__further">
            <div class="c-product__further-item">
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic-print-black-24px"></use>
                </svg>
                <div class="js-product__print">
                    <button onclick="showLoadingPanel()" aria-label="Stampa la ricevuta del parcheggio" type="button">Stampa</button>
                </div>
            </div>
        </div>

    </div>

    <div class="c-product__fare">

        <div class="c-product__price c-product__price--desktop">
            <span>TOTALE PER 3 GIORNI</span>
            <span class="barred" aria-hidden="true">€ 84,00</span>
            <strong class="c-product__value">€ 69,60</strong>
        </div>

        <div class="c-product__receipt">

            <span class="c-tooltip--telepass c-product__telepass" data-js-tooltip-label="Espandi le informazioni relative al telepass" data-js-tooltip-img=../../images/svgs/telepass_tooltip.svg data-js-bubble-class-position="c-tooltip__bubble--up">
                <span class="c-tooltip__outer-text">pagamento con:</span>
                <div data-toggletip>
                    <button class="close-tooltip" aria-label="Chiudi il suggerimento sul telepass" aria-hidden="true">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_close_black_24px"></use>
                        </svg> </button>
                    <p>
                        <strong>Accedi e paga con Telepass</strong>
                        Per questa prenotazione hai deciso di utilizzare il tuo Telepass numero<br>
                        <strong>000000000000000.</strong>
                    </p>
                    <a href='#'>Scopri di più ➝</a>
                </div>

            </span>

        </div>

    </div>

</div>

<div class="c-dialog c-dialog--parking-map js-fr-dialogmodal " id="dialog-p1-p2">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-p1-p2-dialog-p1-p2-title">
        <div role="document">
            <p class="c-dialog__title" id="dialog-p1-p2-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-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__schedule">{{!-- c-product__schedule --}}
    <div class="c-product__labels">
      {{> @rounded-label labelBooked }}
      {{> @rounded-label labelCode }}
      {{#if labelClient}}{{> @rounded-label--dark labelClient }}{{/if}}
    </div>
    <div class="c-product__time">{{!-- c-product__time --}}
      {{> @time-detail--product entrata }}
      {{> @time-detail--product uscita }}
    </div>{{!-- c-product__time --}}
    {{#if hasDetails}}
      <div class="c-product__details">
        {{> @media media }}
      </div>
    {{/if}}
    
    <div class="c-product__further">
      <div class="c-product__further-item">
        {{> @icon symbol="ic-print-black-24px" class="c-icon c-icon--24" }}
        <div class="js-product__print">
          <button onclick="showLoadingPanel()" aria-label="Stampa la ricevuta del parcheggio" type="button">Stampa</button>
        </div>
      </div>
    </div>

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

  <div class="c-product__fare">{{!-- c-product__fare --}}
    
    <div class="c-product__price c-product__price--desktop">
      <span>TOTALE PER 3 GIORNI</span>
      <span class="barred" aria-hidden="true">{{ parking-price }}</span>
      <strong class="c-product__value">€ 69,60</strong>
      {{!-- <p class="discount-text">
        Tariffa weekend
      </p> --}}
    </div>

    <div class="c-product__receipt">

      {{render "@tooltip--telepass" telepassDesktop merge=true }}

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

</div>

{{> @dialog--parking-map parking-dialog }}


        
            
            {
  "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--recap c-product--payed telepass",
  "parking-type-name": "Parcheggio P1 e P2",
  "parking-type-img": "/images/svgs/p1-2.svg",
  "parking-price": "€ 84,00",
  "park-item-features": {
    "aria-label": "Caratteristiche parcheggio P1 e P2",
    "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"
      }
    ]
  },
  "hasDetails": true,
  "media": {
    "img-src": "/images/svgs/park_item_pagato.svg",
    "img-alt": "Dettaglio prenotazione",
    "img-width": "80",
    "body": "<a href='#'>Scopri come accedere al parcheggio ➝</a>"
  },
  "lookOnMapDesk": {
    "type": "button",
    "text": "Guarda in mappa",
    "modifier": "c-button--as-link mapDesk js-fr-dialogmodal-open",
    "opens-dialog": "dialog-p1-p2",
    "aria-label": "Apri la modale per consultare la mappa del parcheggio"
  },
  "screen-reader-txt": {
    "cta": "Seleziona parcheggio P1 e P2"
  },
  "labelBooked": {
    "modifier": "c-rounded-label--positive",
    "text": "Pagato",
    "aria-label": "Stato della prenotazione: Pagato"
  },
  "labelReserved": {
    "modifier": "c-rounded-label--positive",
    "text": "Prenotato",
    "aria-label": "Stato della prenotazione: Prenotato"
  },
  "labelCode": {
    "text": "CODICE <strong>1102935</strong>",
    "modifier": "c-rounded-label--grey"
  },
  "entrata": {
    "time-detail-icon": {
      "symbol": "entrata-parcheggio-24px",
      "class": "c-icon"
    },
    "datetime-label": "Entrata",
    "datetime-day": "10",
    "datetime-month": "04",
    "datetime-year": "2018",
    "time-label": "Ore",
    "time-text": "20:30"
  },
  "uscita": {
    "time-detail-icon": {
      "symbol": "uscita-parcheggio-24px",
      "class": "c-icon"
    },
    "datetime-label": "Uscita",
    "datetime-day": "20",
    "datetime-month": "04",
    "datetime-year": "2018",
    "time-label": "Ore",
    "time-text": "20:30"
  },
  "telepassDesktop": {
    "modifier": "c-product__telepass"
  },
  "parking-dialog": {
    "modifier": "",
    "id": "dialog-p1-p2",
    "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"
  },
  "discover": {
    "modifier": "c-media--discover",
    "img-src": "/images/mbl.png",
    "img-alt": "Vip lounge",
    "img-height": "72",
    "body": "Scopri come accedere al parcheggio prenotato.<br><a href=\"\">Vai al dettaglio prenotazione ➝</a>"
  }
}

File:

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($) { })(jQuery);
URL: /components/raw/product/product-carousel.js
Filesystem Path: src/views/03-organisms/product/product-carousel.js
Size: 31 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

Handle: @product--park-recap-telepass
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/product/_product--park-recap-telepass.hbs
References (9): @button--icon-square, @icon-list, @rounded-label, @rounded-label--dark, @time-detail--product, @media, @icon, @tooltip--telepass, @dialog--parking-map
Referenced by (1): @page-reservation-detail--telepass

No notes defined.