Aeroporto di Bologna - Design System

Cart: Park Recap 

<div class="c-cart c-cart--parkings c-cart--parking-recap ">

    <div class='c-cart__title'>
        <div>Il tuo parcheggio</div>
    </div>

    <div class="c-cart__expanded " id="cart-toggle-expanded">
        <div class="c-cart__product ">
            <div class="c-cart__park ">
                <div class="c-cart__entrance">
                    <div class="u-color-sky-120"><strong>Entrata</strong></div>
                    <div>Dal <strong>29/04/2022</strong></div>
                    <div>ore <strong>9.30</strong></div>
                </div>
                <div class="c-cart__exit">
                    <div class="u-color-sky-120"><strong>Uscita</strong></div>
                    <div>Dal <strong>30/04/2022</strong></div>
                    <div>ore <strong>12.30</strong></div>
                </div>
                <div class="c-cart__logo">
                    <img src="/images/svgs/p1.svg" alt="Parcheggio P1">
                </div>
            </div>
            <div class="c-cart__park-modify">
                <div>
                    <a href="#" class="u-color-night-100 js-fr-dialogmodal-open" aria-controls="dialog-parking-form">
                        <strong><svg class="c-icon c-icon--16">
                                <use xlink:href="#ic_mode_edit_black_24px"></use>
                            </svg> Modifica date e orari</strong>
                    </a>
                </div>
                <div>
                    <button type="button" class="c-button c-button--icon-square u-bg-color-sky-100 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 dettagli del parcheggio" aria-controls="dialog-p1-info">
                        <svg class="svg-16">
                            <use xlink:href="#ic-info-serif"></use>
                        </svg></button>
                </div>
            </div>
            <div class="c-cart__park-recap ">
                <div>

                    <span class="recap-label">Tariffa scontata parcheggio</span>
                </div>
                <div>
                    <span class="barred">128,90 €</span> <strong class="final">100,99 €</strong>
                </div>
            </div>

        </div>

        <div class='c-cart__additional'>

            <div class='c-cart__additional-title'>
                <div>La tua VIP Lounge</div>

                <div><button type="button" class="c-button c-button--icon-text u-bg-color-negative" aria-label="Apri la modale per consultare la mappa del parcheggio" aria-controls="dialog-p1-map">
                        <svg class="svg-16">
                            <use xlink:href="#ic-trash"></use>
                        </svg> Elimina
                    </button></div>
            </div>

            <div class="c-cart__park ">
                <div class="c-cart__entrance">
                    <div class="u-color-sky-120"><strong>Data di ingresso</strong></div>
                    <div>Dal <strong>29/04/2022</strong></div>
                    <div><svg class="c-icon c-icon--12">
                            <use xlink:href="#ic-passenger"></use>
                        </svg> <small>1 ingresso</small></div>
                    <div><small>Bambini gratis sotto i 10 anni</small></div>
                    <div><small>Si ricorda di imbarcare i bagagli da stiva prima di accedere in lounge.</small></div>
                </div>
                <div class="c-cart__logo">
                    <img src="/images/oblo-mbl.png" alt="MBL VIP Loungs">
                </div>
            </div>
            <div class="c-cart__park-modify">
                <div>

                    <strong><svg class="c-icon c-icon--16">
                            <use xlink:href="#ic-schedule-24px"></use>
                        </svg> Aperto tutti i giorni dalle 5:00 alle 20:00</strong>
                </div>
                <div>
                    <button type="button" class="c-button c-button--icon-square u-bg-color-sky-100 js-fr-dialogmodal-open" aria-label="Apri la modale per consultare la mappa" 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" aria-controls="dialog-p1-info">
                        <svg class="svg-16">
                            <use xlink:href="#ic-info-serif"></use>
                        </svg></button>
                </div>
            </div>
            <div class="c-cart__park-recap">
                <div><span>Tariffa scontata Lounge</span></div>
                <div><span class="barred">30,00 €</span> <strong class="final">24,00 €</strong></div>
            </div>

        </div>

        <div class='c-cart__addons'>

            <ul>
                <li class="c-cart__addon">
                    <div class="c-cart__addon-name"><strong>Consegna al volo</strong> x1</div>
                    <div class="c-cart__addon-price"><strong>Prenotazione aggiunta</strong></div>
                </li>
            </ul>

            <p class="c-cart__addons-disclaimer">

            </p>

        </div>

        <div class='c-cart__total'>

            <div class="c-cart__features">
                Totale della tariffa scontata pagando online
            </div>

            <div class="c-cart__digit">
                <div class="c-cart__netprice">158,90 €</div>
                <div class="c-cart__price"> 124,99 € </div>
            </div>
        </div>

    </div>

</div>

<div class="c-dialog c-dialog--parking-form js-fr-dialogmodal " id="dialog-parking-form">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-parking-form-title">
        <div role="document">

            <p class="c-dialog__title c-dialog__text--centered" id="dialog-parking-form-title">Acquista il tuo parcheggio!</p>

            <p class="c-dialog__text c-dialog__text--centered">

                Indicaci le date e l’orario del tuo prossimo parcheggio, acquistalo e ottieni il 20% di sconto sul tuo ingresso Vip Lounge.
                <br><br>
            </p>

            <div class="c-form c-form--parkings">

                <div class="c-form__el c-form__el--icon">
                    <svg class="c-icon c-icon--32">
                        <use xlink:href="#entrata-parcheggio-24px"></use>
                    </svg>
                </div>

                <div class="c-form__el c-form__el--cal">
                    <label for="entrance-date" class="is-datepicker" aria-label="Scegli la data">

                        Entrata <span class="required-marker" aria-hidden="true">*</span>

                        <input id="entrance-date" type="date" class="" placeholder="Scegli la data" value="" aria-describedby="entrance-date-note">

                        <p class="c-field__note " id="entrance-date-note">
                            Seleziona la data di entrata al parcheggio
                        </p>

                    </label>

                </div>

                <div class="c-form__el c-form__el--sel">
                    <label for="entrance-time" class="" aria-label="">
                        Ore <span class="required-marker" aria-hidden="true">*</span>
                        <select id="entrance-time" class="" aria-describedby="entrance-time-note">
                            <option value="" disabled selected>00:00</option>
                            <option value="option-1">20:00</option>
                            <option value="option-2">20:15</option>
                            <option value="option-3">20:30</option>
                            <option value="option-4">20:45</option>
                        </select>
                        <em class="c-field__note " id="entrance-time-note">
                            Seleziona l'ora di ingresso al parcheggio
                        </em>
                    </label>
                </div>

                <div class="c-form__el c-form__el--icon">
                    <svg class="c-icon c-icon--32">
                        <use xlink:href="#uscita-parcheggio-24px"></use>
                    </svg>
                </div>

                <div class="c-form__el c-form__el--cal">
                    <label for="exit-date" class="is-datepicker" aria-label="Scegli la data">

                        Uscita <span class="required-marker" aria-hidden="true">*</span>

                        <input id="exit-date" type="date" class="" placeholder="Scegli la data" value="" aria-describedby="exit-date-note">

                        <p class="c-field__note " id="exit-date-note">
                            Seleziona la data di uscita dal parcheggio
                        </p>

                    </label>

                </div>

                <div class="c-form__el c-form__el--sel">
                    <label for="exit-time" class="" aria-label="">
                        Ore <span class="required-marker" aria-hidden="true">*</span>
                        <select id="exit-time" class="" aria-describedby="exit-time-note">
                            <option value="" disabled selected>00:00</option>
                            <option value="option-1">20:00</option>
                            <option value="option-2">20:15</option>
                            <option value="option-3">20:30</option>
                            <option value="option-4">20:45</option>
                        </select>
                        <em class="c-field__note " id="exit-time-note">
                            Seleziona l'ora di uscita dal parcheggio
                        </em>
                    </label>
                </div>

                <div class="c-form__el c-form__el--cal">
                    <label for="select-conventions" class="" aria-label="">
                        Convenzione:
                        <select id="select-conventions" class="" aria-describedby="select-conventions-note">
                            <option value="" disabled selected>Hai una convenzione?</option>
                            <option value="option-1">Alba Tour</option>
                            <option value="option-2">Alpitour</option>
                            <option value="option-3">Brixia Viaggi</option>
                            <option value="option-4">Club Med</option>
                            <option value="option-5">Domina Travel</option>
                            <option value="option-6">In Viaggi</option>
                            <option value="option-7">Marsupio Group</option>
                            <option value="option-8">Smeg S.p.A.</option>
                            <option value="option-9">Viaggi Idea</option>
                        </select>
                        <em class="c-field__note " id="select-conventions-note">
                            Seleziona un'opzione dal menù a tendina
                        </em>
                    </label>
                </div>

                <div class="c-form__el c-form__el--sel">
                    <label for="file-number" class="" aria-label="">

                        Numero pratica

                        <input id="file-number" type="text" class="" placeholder="es. AA46923757" value="" aria-describedby="file-number-note">

                        <p class="c-field__note " id="file-number-note">
                            Inserisci il numero di pratica della convenzione
                        </p>

                    </label>

                </div>

                <p class="c-dialog__text">
                    <strong>AVVISO IMPORTANTE</strong><br>
                    1) Per avvalersi della convenzione e della tariffa scontata, è indispensabile, al rientro dal viaggio, prima di pagare e di ritirare l'auto, consegnare il voucher del Tour Operator o mostrare la tessera di accreditamento alla cassa del <a href="#"><strong>Presidio Parcheggi</strong></a>.
                    <br><br>
                    2) La mancata o ritardata consegna del voucher o visione della tessera di accreditamento, ovvero dopo aver pagato la sosta alle casse automatiche o alle colonne di uscita, implica la perdita del diritto di avvalersi della tariffa scontata e l'applicazione della tariffa standard senza possibilità di rimborso.
                    <br><br>

                    <input type="checkbox" id="conventions-terms" name="accespt" class="u-visuallyhidden " role="group" aria-label="conventions-terms">

                    <label for="conventions-terms" class="terms-conditions">
                        <strong>Accetto le condizioni di utilizzo convenzione come sopra riportate</strong>
                    </label>
                </p>
                <div class="c-form__el c-form__el--cta">
                    <button type="submit" class="c-button c-button--submit">

                        Cerca parcheggio

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

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

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

            </div>

            <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                <svg class="c-icon c-icon--32">
                    <use xlink:href="#ic_close_black_24px"></use>
                </svg> </button>
        </div>
    </div>
</div>
<div class="c-dialog c-dialog--parking-info js-fr-dialogmodal " id="dialog-p1-info">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-p1-info-dialog-p1-p2-title">
        <div role="document">
            <p class="c-dialog__title" id="dialog-p1-info-dialog-p1-p2-title">Informazioni sui parcheggi P1 e P2</p>

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

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

                    <div class="js-productPop">

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

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

                            <div class="c-product__info">

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

                                    </div>
                                </div>

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

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

                                </div>
                            </div>

                        </div>

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

                            </div>
                        </div>

                    </div>

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

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

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

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

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

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

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

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

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

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

                                </div>

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

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

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

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

                </div>

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

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

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

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

                </div>

            </div>

            <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                <svg class="c-icon c-icon--32">
                    <use xlink:href="#ic_close_black_24px"></use>
                </svg> </button>
        </div>
    </div>
</div>
 
<div class="c-cart c-cart--parkings c-cart--parking-recap {{modifier}}">
  
    <div class='c-cart__title'>
      <div>{{title}}</div>
      {{#if showTelepassIcon }}
      <div><img src="{{ path '/images/svgs/telepass.svg' }}" alt="logo telepass" width="68"></div>
      {{/if}}
    </div>
  
    <div class="c-cart__expanded " id="cart-toggle-expanded">
    {{#if showProduct }}
      <div class="c-cart__product ">
        <div class="c-cart__park ">
          <div class="c-cart__entrance">
            <div class="u-color-sky-120"><strong>Entrata</strong></div>
            <div>Dal <strong>29/04/2022</strong></div>
            <div>ore <strong>9.30</strong></div>
          </div>
          <div class="c-cart__exit">
            <div class="u-color-sky-120"><strong>Uscita</strong></div>
            <div>Dal <strong>30/04/2022</strong></div>
            <div>ore <strong>12.30</strong></div>
          </div>
          <div class="c-cart__logo">
              <img src="{{ parking-type-img }}" alt="{{ parking-type-name }}">
          </div>
        </div>
        {{#if showModifyRow }}
        <div class="c-cart__park-modify">
          <div>
            {{#if showModifyDates }}
            <a href="#" class="u-color-night-100 js-fr-dialogmodal-open" aria-controls="dialog-parking-form">
              <strong>{{> @icon symbol="ic_mode_edit_black_24px"  class="c-icon c-icon--16"}} Modifica date e orari</strong>
            </a>
            {{/if}}
          </div>
          <div>
            {{#if lookOnMap}}{{> @button--icon-square lookOnMap }}{{/if}}
            {{#if lookOnDetails}}{{> @button--icon-square lookOnDetails }}{{/if}}
          </div>
        </div>
        {{/if}}
        {{#if showProductRecap }}
        <div class="c-cart__park-recap {{#if noDiscount }}has-warning{{/if}}">
          <div>
            
            {{#if noDiscount }}
            <strong class="recap-label">Tariffa parcheggio</strong>
            <span>Non benefici dello sconto di <span class="red">12,70€</span> riservato ai pagamenti online (possibile <strong>a 24 ore</strong> dall'inizio della sosta)</span>
            {{else}}
            <span class="recap-label">Tariffa scontata parcheggio</span>
            {{/if}}
          </div>
          <div>
            {{#if noDiscount }}
            <strong class="final">{{parking-price-full}}</strong>
            {{else}}
            <span class="barred">{{parking-price-full}}</span> <strong class="final">{{parking-price-final}}</strong>
            {{/if}}
          </div>
        </div>
        {{/if}} 

        {{#if showProductCode }}
        <div class="c-cart__park-recap">
          <div>
            <strong class="recap-label u-color-sky-120 u-block">Prenotazione avvenuta</strong>
            <span>Codice: <strong>2022-V3835</strong></span>

            <div class="u-pt-space-16">
              <a href="#">Scopri come accedere al parcheggio ➝</a>
            </div>
          </div>
          <div>
            {{#if lookOnMap}}{{> @button--icon-square lookOnMap }}{{/if}}
            {{#if lookOnDetails}}{{> @button--icon-square lookOnDetails }}{{/if}}
          </div>
        </div>
        {{/if}} 
      </div>
    {{/if}}
    

    {{#if showAdditionals }}
    <div class='c-cart__additional'>
      {{#each additionals }}

      <div class='c-cart__additional-title'>
        <div>{{this.title}}</div>

        <div>{{> @button--icon-text btn-delete }}</div>
      </div>

      <div class="c-cart__park ">
        <div class="c-cart__entrance">
          <div class="u-color-sky-120"><strong>Data di ingresso</strong></div>
          <div>Dal <strong>29/04/2022</strong></div>
          <div>{{> @icon symbol="ic-passenger" class="c-icon c-icon--12"}} <small>1 ingresso</small></div>
          <div><small>Bambini gratis sotto i 10 anni</small></div>
          <div><small>Si ricorda di imbarcare i bagagli da stiva prima di accedere in lounge.</small></div>
        </div>
        <div class="c-cart__logo">
            <img src="{{ this.additional-type-img }}" alt="{{ this.additional-type-name }}">
        </div>
      </div>
      <div class="c-cart__park-modify">
        <div>

            <strong>{{> @icon symbol="ic-schedule-24px" class="c-icon c-icon--16"}} Aperto tutti i giorni dalle 5:00 alle 20:00</strong>
          </div>
        <div>
          {{#if lookOnMapLounge}}{{> @button--icon-square lookOnMapLounge }}{{/if}}
          {{#if lookOnDetailsLounge}}{{> @button--icon-square lookOnDetailsLounge }}{{/if}}
        </div>
      </div>
      <div class="c-cart__park-recap">
        <div><span>Tariffa scontata Lounge</span></div>
        <div><span class="barred">{{this.additional-price-full}}</span> <strong class="final">{{this.additional-price-final}}</strong></div>
      </div>  
      {{/each}}

    </div>
  {{/if}}

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

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

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

    </div>
  {{/if}}

  {{#if showCartTotal }}
    <div class='c-cart__total'>
      
      <div class="c-cart__features">
        {{{ cartTotal.label }}}
      </div>

      <div class="c-cart__digit">
        <div class="c-cart__netprice">{{{ cartTotal.netprice }}}</div>
        <div class="c-cart__price"> {{{ cartTotal.price }}} </div>
      </div>
    </div>
  {{/if}}

  </div> {{!-- // closes .c-cart__expanded --}}

</div>

{{ render "@dialog--parking-form" parking-form-dialog merge=true }}
{{> @dialog--parking-map parking-dialog-map }}
{{ render "@dialog--parking-info" parking-dialog-info merge=true }}
 
{
  "title": "Il tuo parcheggio",
  "parking-type-name": "Parcheggio P1",
  "parking-type-img": "/images/svgs/p1.svg",
  "parking-price-full": "128,90 €",
  "parking-price-final": "100,99 €",
  "showProduct": true,
  "showTelepassIcon": false,
  "noDiscount": false,
  "showModifyRow": true,
  "showModifyDates": true,
  "showProductRecap": true,
  "showAdditionals": true,
  "showAddons": true,
  "hasLoading": false,
  "showCartTotal": true,
  "showCartCta": true,
  "loading": {
    "text": "Stiamo aggiornando il carrello"
  },
  "lookOnMap": {
    "type": "button",
    "text": "Guarda in mappa",
    "modifier": "c-button--icon-square u-bg-color-sky-100 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 dettagli del parcheggio",
    "svg": {
      "symbol": "ic-info-serif",
      "class": "svg-16"
    }
  },
  "parking-dialog-map": {
    "modifier": "",
    "id": "dialog-p1-map",
    "dialog-labelledby": "dialog-p1-p2-title",
    "title": "Informazioni sui parcheggi P1 e P2",
    "maplocation": "Parcheggio+P1,+40132+Bologna+BO",
    "mapzoom": "16",
    "mapwidth": "600",
    "mapheight": "300"
  },
  "parking-dialog-info": {
    "modifier": "",
    "id": "dialog-p1-info",
    "dialog-labelledby": "dialog-p1-p2-title",
    "title": "Informazioni sui parcheggi P1 e P2"
  },
  "additionals": [
    {
      "title": "La tua VIP Lounge",
      "btn-delete": {
        "type": "button",
        "text": "Elimina",
        "modifier": "c-button--icon-text u-bg-color-negative",
        "opens-dialog": "dialog-p1-map",
        "aria-label": "Apri la modale per consultare la mappa del parcheggio",
        "svg": {
          "symbol": "ic-trash",
          "class": "svg-16"
        }
      },
      "additional-type-name": "MBL VIP Loungs",
      "additional-type-img": "/images/oblo-mbl.png",
      "additional-price-full": "30,00 €",
      "additional-price-final": "24,00 €",
      "lookOnMapLounge": {
        "type": "button",
        "text": "Guarda in mappa",
        "modifier": "c-button--icon-square u-bg-color-sky-100 js-fr-dialogmodal-open",
        "opens-dialog": "dialog-p1-map",
        "aria-label": "Apri la modale per consultare la mappa",
        "svg": {
          "symbol": "ic-pin-map",
          "class": "svg-16"
        }
      },
      "lookOnDetailsLounge": {
        "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",
        "svg": {
          "symbol": "ic-info-serif",
          "class": "svg-16"
        }
      },
      "parking-dialog-map": {
        "modifier": "",
        "id": "dialog-p1-map",
        "dialog-labelledby": "dialog-p1-p2-title",
        "title": "Informazioni sui parcheggi P1 e P2",
        "maplocation": "Parcheggio+P1,+40132+Bologna+BO",
        "mapzoom": "16",
        "mapwidth": "600",
        "mapheight": "300"
      },
      "parking-dialog-info": {
        "modifier": "",
        "id": "dialog-p1-info",
        "dialog-labelledby": "dialog-p1-p2-title",
        "title": "Informazioni sui parcheggi P1 e P2"
      }
    }
  ],
  "addons": [
    {
      "name": "<strong>Consegna al volo</strong> x1",
      "price": "<strong>Prenotazione aggiunta</strong>"
    }
  ],
  "cartTotal": {
    "label": "Totale della tariffa scontata pagando online",
    "price": "124,99 €",
    "netprice": "158,90 €"
  },
  "features": {
    "aria-label": "Caratteristiche di questa prenotazione",
    "items": [
      {
        "icon": "ic-euro-symbol-24px",
        "text": "Non rimborsabile",
        "modifier": "c-icon-list__item--disabled"
      },
      {
        "icon": "ic_mode_edit_black_24px",
        "text": "Modificabile"
      }
    ]
  },
  "cartCta": {
    "type": "submit",
    "text": "Paga ora",
    "modifier": "c-button--submit c-button--elastic"
  }
}
  • Content: 
    .c-cart {
  background-color: #fff;
  position: relative;
  @include shadow(small);

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

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

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

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

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

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

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

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

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

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

}

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

  svg {
    vertical-align: middle;
  }

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

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


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

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

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

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

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

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

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

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

  }
}

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

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

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

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

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

}

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

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

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

  }
}

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

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

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

  button {  
    margin-top: 0;

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

}

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


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

.c-cart--parkings {

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

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

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

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

    }


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

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

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

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

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

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


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

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

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

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

    svg {
      vertical-align: middle;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

.c-cart--parking-recap {

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

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

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

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

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

}

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

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

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

}

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

.c-cart__vouchers {

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

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

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

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

No notes defined.