Aeroporto di Bologna - Design System

Product: MyBLQ Prenotato 

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

    <div class="c-product__info">

        <div class="c-product__type">
            <img src="/images/svgs/p3.svg" alt="Parcheggio P3">
            <div class="c-product__park-infos">
                <button type="button" class="c-button c-button--icon-square js-fr-dialogmodal-open" aria-label="Apri la modale per consultare la mappa del parcheggio" aria-controls="dialog-p1-map">
                    <svg class="svg-16">
                        <use xlink:href="#ic-pin-map"></use>
                    </svg></button>
                <button type="button" class="c-button c-button--icon-square is-pale js-fr-dialogmodal-open" aria-label="Apri la modale per consultare la mappa del parcheggio" aria-controls="dialog-p1-info">
                    <svg class="svg-16">
                        <use xlink:href="#ic_info_black_24px"></use>
                    </svg></button>
            </div>
        </div>

        <div class="c-product__features">
            <ul class="c-icon-list" aria-label="Caratteristiche parcheggio P3">
                <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 " aria-label="Stato della prenotazione: Prenotato">

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

                CODICE <strong>1102935</strong>
            </span> <span class="c-rounded-label c-rounded-label--dark" aria-label="Nome Cliente Mario Rossi">

                Mario Rossi
            </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">
            <strong>Regalati un ingresso alla Lounge a soli € 22,40</strong><br>
            anzichè € 28,00 se lo acquisti insieme al parcheggio <a href="#">Scopri come</a>
        </div>

        <div class="c-product__further">
            <div class="c-product__further-item">
                <span class="c-tooltip--qrcode c-product__qrcode" data-js-tooltip-label="Espandi le informazioni relative al qr code" data-js-tooltip-text="Visualizza QR-code" data-js-bubble-class-position="c-tooltip__bubble--up">
                    <svg class="c-icon c-icon--24">
                        <use xlink:href="#ic_qrcode_24"></use>
                    </svg>
                    <div data-toggletip>
                        <button class="close-tooltip" aria-label="Chiudi il suggerimento sul qr code" aria-hidden="true">
                            <svg class="c-icon c-icon--24">
                                <use xlink:href="#ic_close_black_24px"></use>
                            </svg> </button>

                        <p> <img src="../../images/qrcode.jpg" alt="QR code" /> </p>

                        <h5>Dove trovo il mio QR-code per accedere al parcheggio?</h5>

                        <p>Per ogni prenotazione puoi recuperare il QR-code di ogni tua prenotazione accedendo alla tua area riservata ed entrando nell'archivio prenotazioni.
                        </p>

                        <p><strong>Accedi al sito</strong> oppure <strong>scarica l'app</strong> di BLQ</p>

                        <ul>
                            <li>
                                <a href="#">
                                    <img src="../../images/svgs/badge_appstore_it.svg" height="40" alt="Scarica su App Store">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../../images/svgs/Google_Play_Store_badge_IT.svg" height="40" alt="Disponibile su Google Play">
                                </a>
                            </li>
                        </ul>
                    </div>

                </span>
            </div>
        </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">
                Tariffa totale per <strong>3 giorni</strong> solo pagando online
            </div>

        </div>

        <div class="cta">
            <button type="submit" class="c-button c-button--submit">

                Paga ora

            </button>
        </div>

    </div>

</div>

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

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

                <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-p3-title">
        <div role="document">
            <p class="c-dialog__title" id="dialog-p1-info-dialog-p3-title">Informazioni sul parcheggio P3</p>

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

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

                    <div class="js-productPop">

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

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

                            <div class="c-product__info">

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

                                    </div>
                                </div>

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

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

                                </div>
                            </div>

                        </div>

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

                            </div>
                        </div>

                    </div>

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

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

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

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

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

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

                                <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                                    <svg class="c-icon c-icon--32">
                                        <use xlink:href="#ic_close_black_24px"></use>
                                    </svg> </button>

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

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

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

                                </div>

                                <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                                    <svg class="c-icon c-icon--32">
                                        <use xlink:href="#ic_close_black_24px"></use>
                                    </svg> </button>
                            </div>
                        </div>
                    </div>
                    <div class="u-mb-space-24 u-mt-space-16s">
                        <iframe class="u-radius-12" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1422.1440324056696!2d11.291909658337978!3d44.52973399477526!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDTCsDMxJzQ3LjAiTiAxMcKwMTcnMzQuOCJF!5e0!3m2!1sit!2sit!4v1518606203435" style="border:0" allowfullscreen=""></iframe>
                    </div>

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

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

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

                </div>

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

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

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

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

                </div>

            </div>

            <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                <svg class="c-icon c-icon--32">
                    <use xlink:href="#ic_close_black_24px"></use>
                </svg> </button>
        </div>
    </div>
</div>
 
<div class="c-product {{ modifier }}">

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

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

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

    <div class="c-product__labels">
      {{> @rounded-label labelBooked }}
      {{> @rounded-label labelCode }}
      {{> @rounded-label--dark labelClient }}
    </div>

    <div class="c-product__time">
      {{> @time-detail--product entrata }}
      {{> @time-detail--product uscita }}
    </div>
    
    {{#if hasDetails}}
    <div class="c-product__details">
        {{{details-text}}}
    </div>
    {{/if}}

    {{#if hasCrossSell}}
    <div class="c-product__details">
      <strong>Regalati un ingresso alla Lounge a soli € 22,40</strong><br> 
      anzichè € 28,00 se lo acquisti insieme al parcheggio <a href="#">Scopri come</a>
    </div>
    {{/if}}

    <div class="c-product__further">
      <div class="c-product__further-item">
        {{render "@tooltip--qrcode" qrcode merge=true }}
      </div>
      {{#if has-receipt }}
      <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>
      {{/if}}
      {{#if goToDetail }}
      <div class="c-product__further-item">
        {{> @icon symbol="ic-zoom-24px"  class="c-icon c-icon--24"}}
        <a href="{{ path '/components/preview/page-reservation-detail' }}" class="link--default">Mostra i dettagli</a>
      </div>
      {{/if}}
    </div>

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

  <div class="c-product__fare">{{!-- c-product__fare --}}
    
    <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">
        Tariffa totale per <strong>3 giorni</strong> solo pagando online e <strong>fino a 24 ore</strong> prima dell’inizio della sosta<br>
        <strong>Tariffa weekend</strong>
      </div> --}}
      <div class="discount-text">
        Tariffa totale per <strong>3 giorni</strong> solo pagando online
      </div>

    </div>
    
    {{#if hasCta }}
      <div class="cta">
        {{> @button type="submit" modifier="c-button--submit" text="Paga ora" }}
      </div>
    {{/if}}
    
    {{!-- {{#if goToDetail }}
    <a href="{{ path '/components/preview/page-reservation-detail' }}" class="go-to-detail">Vai al dettaglio <span aria-hidden="true">&#x2192;</span></a>
    {{/if}} --}}
    
    {{!-- {{#if has-receipt }}
    <div class="c-product__receipt">

      <div class="c-product__print js-product__print">
        <button class="c-button c-button--adding" onclick="showLoadingPanel()" aria-label="Stampa la ricevuta del parcheggio" type="button">
          {{> @icon symbol="ic-print-black-24px" class="c-icon c-icon--16" }}
          Stampa
        </button>
      </div>

      <div class="c-product__gotodetail">
        <a href="{{ path '/components/preview/page-reservation-detail' }}" class="go-to-detail">Mostra i dettagli</a>
      </div>
      
    </div>
    {{/if}} --}}

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

</div>

{{> @dialog--parking-map parking-dialog-map }}
{{ render "@dialog--parking-info" parking-dialog-info merge=true }}
 
{
  "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",
  "previous-modifier": "c-product--recap c-product--myblq qrcode",
  "parking-type-name": "Parcheggio P3",
  "parking-type-img": "/images/svgs/p3.svg",
  "parking-price": "€ 84,00",
  "park-item-features": {
    "aria-label": "Caratteristiche parcheggio P3",
    "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"
      }
    ]
  },
  "hasCta": true,
  "hasCrossSell": true,
  "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-p3-map",
    "dialog-labelledby": "dialog-p3-title",
    "title": "Informazioni sui parcheggi P3",
    "maplocation": "Parcheggio+P3,+40132+Bologna+BO",
    "mapzoom": "16",
    "mapwidth": "600",
    "mapheight": "300"
  },
  "parking-dialog-info": {
    "modifier": "",
    "id": "dialog-p1-info",
    "dialog-labelledby": "dialog-p3-title",
    "title": "Informazioni sul parcheggio P3"
  },
  "screen-reader-txt": {
    "cta": "Seleziona parcheggio P3"
  },
  "labelBooked": {
    "modifier": "",
    "text": "<strong>Prenotato</strong>",
    "aria-label": "Stato della prenotazione: Prenotato"
  },
  "labelCode": {
    "text": "CODICE <strong>1102935</strong>",
    "modifier": "c-rounded-label--grey"
  },
  "labelClient": {
    "modifier": "c-rounded-label--dark",
    "text": "Mario Rossi",
    "aria-label": "Nome Cliente Mario Rossi"
  },
  "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"
  },
  "qrcode": {
    "modifier": "c-product__qrcode"
  },
  "parking-dialog": {
    "modifier": "",
    "id": "dialog-p3",
    "dialog-labelledby": "dialog-p3-title",
    "title": "Informazioni sul parcheggio P3",
    "maplocation": "Parcheggio+P3,+40132+Bologna+BO",
    "mapzoom": "16",
    "mapwidth": "600",
    "mapheight": "300"
  }
}
  • 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.