Aeroporto di Bologna - Design System

Tablist: Forms 

<div class="c-tablist c-tablist--forms">

    <ul class="c-tablist__tabs" role="tablist">
        <li>
            <a href="#section-park-form" role="tab" rel="#section-park-form" aria-label="Prenota parcheggio">
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic_drive_eta_black_24px"></use>
                </svg> <span aria-hidden="true">Acquista <strong>parcheggio</strong></span>
                <span class="mobile-label" aria-hidden="true">Parcheggi</span>
            </a>
        </li>

        <li>
            <a href="#section-mbl-form" role="tab" rel="#section-mbl-form" aria-label="Prenota Vip Lounge" aria-current="true">
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic_weekend_black_24px"></use>
                </svg> <span aria-hidden="true">Acquista <strong>Vip Lounge</strong></span>
                <span class="mobile-label" aria-hidden="true">Vip Lounge</span>
            </a>
        </li>

        <li>
            <a href="#section-flight-form" role="tab" rel="#section-flight-form" aria-label="Acquista volo">
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic_airplanemode_active_black_24px"></use>
                </svg> <span aria-hidden="true">Acquista <strong>Volo</strong></span>
                <span class="mobile-label" aria-hidden="true">Voli</span>
            </a>
        </li>

        <li>
            <a href="#section-flight-express" role="tab" rel="#section-flight-express" aria-label="Biglietti Marconi Express">
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic-marconi-express-24px"></use>
                </svg> <span aria-hidden="true">Acquista <strong>Treno città</strong></span>
                <span class="mobile-label" aria-hidden="true">MEX</span>
            </a>
        </li>

    </ul>

    <div class="c-tablist__sections">

        <section class="c-tablist__section c-tablist__section--parkings has-banner" id="section-park-form">
            <div class="c-tablist__section-header">
                <h2 class="c-tablist__section-title">Cerca il tuo parcheggio:</h2>
                <div class="u-text-left"><button type="button" class="c-button c-button--as-link u-color-basic-white-100 js-fr-dialogmodal-open" aria-controls="dialog-useful-info">

                        Regole e info utili
                        <svg class="c-icon--18 u-color-sun-120">
                            <use xlink:href="#ic-info-serif"></use>
                        </svg>
                    </button></div>
            </div>
            <form action="/components/preview/page-parking-results" class="c-form c-form--parkings">

                <div class="c-form__el c-form__el--cal">
                    <label for="entrance-date" class="" aria-label="Scegli data di ingresso">

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

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

                        <p class="c-field__note " id="entrance-date-note">
                            Inserisci data di entrata
                        </p>

                    </label>

                </div>
                <div class="c-form__el c-form__el--sel">
                    <label for="entrance-time" class="" aria-label="">
                        Orario <span class="required-marker" aria-hidden="true">*</span>
                        <select id="entrance-time" class="" aria-describedby="select-note">
                            <option value="" disabled selected>Scegli orario</option>
                            <option value="00:00">00:00</option>
                            <option value="00:15">00:15</option>
                            <option value="00:30">00:30</option>
                            <option value="00:45">00:45</option>
                            <option value="01:00">01:00</option>
                            <option value="01:15">01:15</option>
                            <option value="01:30">01:30</option>
                            <option value="01:45">01:45</option>
                            <option value="02:00">02:00</option>
                            <option value="02:15">02:15</option>
                            <option value="02:30">02:30</option>
                            <option value="02:45">02:45</option>
                            <option value="03:00">03:00</option>
                        </select>
                        <em class="c-field__note " id="entrance-time-note">
                            Ora di ingresso
                        </em>
                    </label>
                </div>

                <div class="c-form__el c-form__el--cal">
                    <label for="exit-date" class="" aria-label="Scegli data di uscita">

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

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

                        <p class="c-field__note " id="exit-date-note">
                            Inserisci data di entrata uscita
                        </p>

                    </label>

                </div>

                <div class="c-form__el c-form__el--sel">
                    <label for="exit-time" class="" aria-label="">
                        Orario <span class="required-marker" aria-hidden="true">*</span>
                        <select id="exit-time" class="" aria-describedby="select-note">
                            <option value="" disabled selected>Scegli orario</option>
                            <option value="00:00">00:00</option>
                            <option value="00:15">00:15</option>
                            <option value="00:30">00:30</option>
                            <option value="00:45">00:45</option>
                            <option value="01:00">01:00</option>
                            <option value="01:15">01:15</option>
                            <option value="01:30">01:30</option>
                            <option value="01:45">01:45</option>
                            <option value="02:00">02:00</option>
                            <option value="02:15">02:15</option>
                            <option value="02:30">02:30</option>
                            <option value="02:45">02:45</option>
                            <option value="03:00">03:00</option>
                        </select>
                        <em class="c-field__note " id="exit-time-note">
                            Ora di uscita
                        </em>
                    </label>
                </div>

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

                        Cerca parcheggio

                    </button>
                </div>

                <div class="c-form__note is-negative u-visuallyhidden" id="parking-form-note">Inserisci una data e un orario di uscita successivi a quelli di entrata</div>

            </form>

            <div class="c-form--parkings-conventions"><a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-parking-form">Hai una convenzione?</a>
            </div>
            <div class="c-banner ">
                <img class="" src="/images/svgs/stk_mail_discount_reservation.svg" alt="stk_mail_discount_reservation" aria-hidden="true" />
                <span>
                    <strong>fino al 30% di sconto </strong> acquistando il parcheggio online!
                </span>
            </div>
        </section>

        <section class="c-tablist__section c-tablist__section--mbl" id="section-mbl-form">
            <div class="c-tablist__section-header">
                <h2 class="c-tablist__section-title">Prenota e acquista Vip Lounge:</h2>
                <div class="u-text-left"><button type="button" class="c-button c-button--as-link u-color-basic-white-100 js-fr-dialogmodal-open" aria-controls="dialog-useful-info">

                        Regole e info utili
                        <svg class="c-icon--18 u-color-sun-120">
                            <use xlink:href="#ic-info-serif"></use>
                        </svg>
                    </button></div>
            </div>

            <form action="../../#.html" class="c-form c-form--mbl " id="form-mbl">
                <div class="c-form__el c-form__el--23 c-form__el--cal">
                    <label for="departure-date-mobile" class="is-datepicker" aria-label="Scegli la data">

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

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

                        <p class="c-field__note " id="departure-date-mobile-note">
                            Seleziona la data di ingresso
                        </p>

                    </label>

                </div>

                <div class="c-form__el c-form__el--13 c-form__el--cal">
                    <label for="persons-select" class="" aria-label="">
                        N° persone <span class="required-marker" aria-hidden="true">*</span>
                        <select id="persons-select" class="" aria-describedby="persons-select-note">
                            <option value="" disabled selected></option>
                            <option value="option-1" selected>1</option>
                            <option value="option-2">2</option>
                            <option value="option-3">3</option>
                            <option value="option-4">4</option>
                        </select>
                        <em class="c-field__note " id="persons-select-note">
                            N° persone
                        </em>
                    </label>
                </div>

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

                        Prenota ora

                    </button>
                </div>
            </form>
        </section>

        <section class="c-tablist__section c-tablist__section--flights" id="section-flight-form">
            <div class="c-tablist__section-header">
                <h2 class="c-tablist__section-title">Cerca il tuo volo:</h2>
                <div class="u-text-left"><button type="button" class="c-button c-button--as-link u-color-basic-white-100 js-fr-dialogmodal-open" aria-controls="dialog-useful-info">

                        Regole e info utili
                        <svg class="c-icon--18 u-color-sun-120">
                            <use xlink:href="#ic-info-serif"></use>
                        </svg>
                    </button></div>
            </div>
            <form action="../../#.html" class="c-form c-form--flights " onsubmit="return false">

                <button class="js-close-overlay" aria-label="close">
                    <svg class="c-icon c-icon--24">
                        <use xlink:href="#ic_close_black_24px"></use>
                    </svg> </button>

                <div class="wrapper wrapper--extended">
                    <div role="radiogroup" aria-label="seleziona volo in economy o business class">
                        <label for="select-economy-business-selection" class="" aria-label="">
                            Tipo di viaggio:
                            <select id="select-economy-business-selection" class="is-small is-inline" aria-describedby="select-economy-business-selection-note">
                                <option value="" disabled selected></option>
                                <option value="option-1" selected>Economy</option>
                                <option value="option-2">Business Class</option>
                            </select>
                            <em class="c-field__note u-visuallyhidden" id="select-economy-business-selection-note">
                                Seleziona il tipo di viaggio
                            </em>
                        </label> <label for="select-round-trip-selection" class="" aria-label="">

                            <select id="select-round-trip-selection" class="is-small is-inline" aria-describedby="select-round-trip-selection-note">
                                <option value="" disabled selected></option>
                                <option value="option-1" selected>Andata e ritorno</option>
                                <option value="option-2">Solo andata</option>
                            </select>
                            <em class="c-field__note u-visuallyhidden" id="select-round-trip-selection-note">

                            </em>
                        </label>
                    </div>
                </div>

                <div class="wrapper wrapper--localities">
                    <div class="c-form__el c-form__el--pair">
                        <label for="from" class=" " aria-label="">
                            Da <span class="required-marker" aria-hidden="true">*</span>
                            <input id="from" type="text" class="js-combobox " placeholder="" value="" required aria-required="true" aria-describedby="from-note" list="departures" data-combobox-prefix-class="combobox" data-combobox-case-sensitive="no" data-combobox-search-option="containing" data-combobox-help-text="Premi il tasto TAB o le frecce direzionali per accedere e navigare attraverso i suggerimenti. Conferma la tua scelta col tasto INVIO, oppure premi il tasto ESC per chiudere la lista dei suggerimenti." data-suggestion-single="C'è " data-suggestion-plural="Ci sono " data-suggestion-word="Suggerimento" data-suggestion-word-plural="Suggerimenti" data-combobox-see-more-text="Guarda più risultati">
                            <datalist id="departures">
                                <option value="Dubai, Al Maktoum Intl [DWC] (EMIRATI ARABI)">
                                <option value="Roma, Fiumicino [FCO] (ITALIA)">
                                <option value="New York Ny, John F Kennedy Intl [JFK] (STATI UNITI)">
                                <option value="Parigi, Charles De Gaulle [CDG] (FRANCIA)">
                                <option value="Berlino, Schoenefeld [SXF] (GERMANIA)">
                                <option value="Londra, Heathrow [LHR] (REGNO UNITO)">
                                <option value="Los Angeles Ca, International [LAX] (STATI UNITI)">
                                <option value="Cana Brava Mg [NBV] (BRASILE)">
                                <option value="Pecs, Pogany [PEV] (UNGHERIA)">
                            </datalist>
                            <p class="c-field__note " id="from-note">
                                Digita e scegli la partenza
                            </p>
                        </label>
                    </div>
                    <div class="c-form__el c-form__el--icon">
                        <button type="button" class="switch-round-trip js-switch-btn" aria-label="Inverti origine e destinazione">
                            <svg class="c-icon c-icon--24">
                                <use xlink:href="#ic-switch-arrows-black-24px"></use>
                            </svg> </button>
                    </div>
                    <div class="c-form__el c-form__el--pair">
                        <label for="to" class=" " aria-label="">
                            A <span class="required-marker" aria-hidden="true">*</span>
                            <input id="to" type="text" class="js-combobox " placeholder="" value="" required aria-required="true" aria-describedby="to-note" list="arrivals" data-combobox-prefix-class="combobox" data-combobox-case-sensitive="no" data-combobox-search-option="containing" data-combobox-help-text="Premi il tasto TAB o le frecce direzionali per accedere e navigare attraverso i suggerimenti. Conferma la tua scelta col tasto INVIO, oppure premi il tasto ESC per chiudere la lista dei suggerimenti." data-suggestion-single="C'è " data-suggestion-plural="Ci sono " data-suggestion-word="Suggerimento" data-suggestion-word-plural="Suggerimenti" data-combobox-see-more-text="Guarda più risultati">
                            <datalist id="arrivals">
                                <option value="Dubai, Al Maktoum Intl [DWC] (EMIRATI ARABI)">
                                <option value="Roma, Fiumicino [FCO] (ITALIA)">
                                <option value="New York Ny, John F Kennedy Intl [JFK] (STATI UNITI)">
                                <option value="Parigi, Charles De Gaulle [CDG] (FRANCIA)">
                                <option value="Berlino, Schoenefeld [SXF] (GERMANIA)">
                                <option value="Londra, Heathrow [LHR] (REGNO UNITO)">
                                <option value="Los Angeles Ca, International [LAX] (STATI UNITI)">
                                <option value="Cana Brava Mg [NBV] (BRASILE)">
                                <option value="Pecs, Pogany [PEV] (UNGHERIA)">
                            </datalist>
                            <p class="c-field__note " id="to-note">
                                Digita e scegli l'arrivo
                            </p>
                        </label>
                    </div>
                </div>

                <div class="wrapper wrapper--dates">
                    <span class="c-form__note is-negative u-visuallyhidden" id="flights-form-note">Inserisci una data di uscita successiva a quella di entrata</span>
                    <div class="c-form__el c-form__el--pair js-round-desktop">
                        <label for="round-desktop" class="flatpickr-label" aria-label="Scegli la data di andata">

                            Andata

                            <input id="round-desktop" type="date" class="js-flatpickr flatpickr-input" placeholder="" value="" aria-describedby="round-desktop-note">

                            <p class="c-field__note " id="round-desktop-note">
                                Seleziona la data di andata
                            </p>

                        </label>

                    </div>
                    <div class="c-form__el c-form__el--pair js-trip-desktop">
                        <label for="trip-desktop" class="flatpickr-label" aria-label="Scegli la data di ritorno">

                            Ritorno

                            <input id="trip-desktop" type="date" class="js-flatpickr flatpickr-input" placeholder="" value="" aria-describedby="trip-desktop-note">

                            <p class="c-field__note " id="trip-desktop-note">
                                Seleziona la data di ritorno
                            </p>

                        </label>

                    </div>
                </div>

                <div class="wrapper wrapper--alone wrapper--pax">
                    <div class="c-form__el c-form__el--pax ">
                        <label for="text-field">
                            Passeggeri
                            <span class="required-marker" aria-hidden="true">*</span>
                            <button type="button" class="c-form__el--toggleFlightsPax js-toggleFlightsPax" aria-expanded="false" aria-label="1 passeggero" aria-describedby="pax-note" aria-controls="aria-paxChoiceDesc">
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic-person-black-24px"></use>
                                </svg> <strong>1
                                </strong>
                            </button>
                            <p class="c-field__note" id="pax-note" aria-hidden="true">
                                N. passeggeri
                            </p>
                        </label>
                        <div class="js-flightsPaxCnt" id="aria-paxChoice">
                            <div class="u-visuallyhidden" aria-live="polite" id="aria-paxChoiceDesc">
                                Procedi per modificare la quantità.
                            </div>
                            <div class="pax-type">
                                <label for="adult">
                                    <strong>Adulti</strong> (da 12 anni in su)</label>
                                <div class="c-button c-button--qty " aria-label="Seleziona il numero">
                                    <button type="button" class="minus js-toggle-remove" aria-label="Diminuisci di uno" data-toggle="lounge-service">-</button>
                                    <input type="number" class="js-qty-value" value="1" readonly id="adult" aria-label="Quantità" min="1">
                                    <button type="button" class="plus js-toggle-add" aria-label="Aumenta di uno" data-toggle="lounge-service">+</button>
                                </div>
                            </div>
                            <div class="pax-type">
                                <label for="child">
                                    <strong>Bambini</strong> (da 2 a 11 anni)</label>
                                <div class="c-button c-button--qty " aria-label="Seleziona il numero">
                                    <button type="button" class="minus js-toggle-remove" aria-label="Diminuisci di uno" data-toggle="lounge-service">-</button>
                                    <input type="number" class="js-qty-value" value="1" readonly id="child" aria-label="Quantità" min="1">
                                    <button type="button" class="plus js-toggle-add" aria-label="Aumenta di uno" data-toggle="lounge-service">+</button>
                                </div>
                            </div>
                            <div class="pax-type">
                                <label for="baby">
                                    <strong>Neonato</strong> (Meno di 2 anni)</label>
                                <div class="c-button c-button--qty " aria-label="Seleziona il numero">
                                    <button type="button" class="minus js-toggle-remove" aria-label="Diminuisci di uno" data-toggle="lounge-service">-</button>
                                    <input type="number" class="js-qty-value" value="1" readonly id="baby" aria-label="Quantità" min="1">
                                    <button type="button" class="plus js-toggle-add" aria-label="Aumenta di uno" data-toggle="lounge-service">+</button>
                                </div>
                            </div>
                            <button type="button" class="js-closeFlightsPax c-button c-button--as-link" aria-hidden="true">Chiudi</button>
                        </div>
                    </div>
                </div>

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

                            Cerca il tuo volo

                        </button>
                    </div>
                </div>

            </form>
        </section>

        <section class="c-tablist__section c-tablist__section--express" id="section-flight-express">
            <div class="c-tablist__section-header">
                <h2 class="c-tablist__section-title">Treni da e per Bologna:</h2>
                <div class="u-text-left"><button type="button" class="c-button c-button--as-link u-color-basic-white-100 js-fr-dialogmodal-open" aria-controls="dialog-useful-info">

                        Regole e info utili
                        <svg class="c-icon--18 u-color-sun-120">
                            <use xlink:href="#ic-info-serif"></use>
                        </svg>
                    </button></div>
            </div>
            <div class="c-form__fields">
                <div class="l-travel-home__organize o-adjacent o-adjacent--threeInARow">
                    <div class="o-adjacent__item">
                        <div class="c-card c-card--ticket ">

                            <div class="c-card__text">
                                <h2 aria-label="">Biglietto <strong>ordinario flex</strong></h2>

                                <div class="c-card__price-note">
                                    <span aria-label="prezzo sola andata">solo andata</span>
                                    <strong aria-label="8,70 €">8,70 €</strong>
                                </div>

                                <div class="c-card__price-note">
                                    <span aria-label="prezzo andata e ritorno">andata/ritorno</span>
                                    <strong aria-label="16,00 €">16,00 €</strong>
                                </div>

                            </div>

                            <div class="c-card__rip"></div>

                            <div class="c-card__footer">
                                <a href="#" class="c-link c-link--primary-disabled">
                                    <span>Disponibile a breve</span>
                                </a>

                                <div class="c-card__description">
                                    <a href="#">
                                        Scopri di più sul nuovo servizio
                                    </a> <input type="checkbox" id="check_express_flex" class="u-visuallyhidden u-chkbx-toggle">
                                    <label for="check_express_flex" aria-label="">Scopri di più su questa tariffa</label>
                                    <div class="u-chkbx-toggleReceiver">
                                        <p>Questa tariffa prevede biglietti <strong>utilizzabili in qualsiasi data entro 12 mesi dall’acquisto</strong>; nel caso dei biglietti andata e ritorno, il ritorno deve essere effettuato entro 30 giorni dall’andata.</p>
                                        <p><strong>Viaggi con dei bambini?</strong> I bambini fino a 4 anni accompagnati da un adulto con biglietto valido viaggiano gratuitamente.</p>
                                        <img src="../../images/svgs/marconi-express.svg" alt="Logo Marconi Express">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="o-adjacent__item">
                        <div class="c-card c-card--ticket ">

                            <div class="c-card__text">
                                <h2 aria-label="">Biglietto <strong>famiglia</strong></h2>

                                <div class="c-card__price-note">
                                    <span aria-label="prezzo sola andata">solo andata</span>
                                    <strong aria-label="18,00 €">18,00 €</strong>
                                </div>

                                <div class="c-card__price-note">
                                    <span aria-label="prezzo andata e ritorno">andata/ritorno</span>
                                    <strong aria-label="34,00 €">34,00 €</strong>
                                </div>

                            </div>

                            <div class="c-card__rip"></div>

                            <div class="c-card__footer">
                                <a href="#" class="c-link c-link--primary-disabled">
                                    <span>Disponibile a breve</span>
                                </a>

                                <div class="c-card__description">
                                    <a href="#">
                                        Scopri di più sul nuovo servizio
                                    </a> <input type="checkbox" id="check_express_family" class="u-visuallyhidden u-chkbx-toggle">
                                    <label for="check_express_family" aria-label="">Scopri di più su questa tariffa</label>
                                    <div class="u-chkbx-toggleReceiver">
                                        <p>Questa tariffa è <strong>valida per un massimo di 2 adulti e 3 ragazzi tra i 5 e i 16 anni compresi</strong>. I biglietti sono utilizzabili solo nelle date scelte in fase di acquisto, senza vincoli di orario, e sono nominativi.</p>
                                        <p><strong>Viaggi con dei bambini?</strong> I bambini fino a 4 anni accompagnati da un adulto con biglietto valido viaggiano gratuitamente.</p>
                                        <img src="../../images/svgs/marconi-express.svg" alt="Logo Marconi Express">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="o-adjacent__item">
                        <div class="c-card c-card--ticket ">

                            <div class="c-card__text">
                                <h2 aria-label="">Biglietto <strong>gruppi</strong></h2>

                                <div class="c-card__price-note">
                                    <span aria-label="prezzo sola andata">solo andata</span>
                                    <strong aria-label="7,00 €">7,00 €</strong>
                                </div>

                                <div class="c-card__price-note">
                                    <span aria-label="prezzo andata e ritorno">andata/ritorno</span>
                                    <strong aria-label="14,00 €">14,00 €</strong>
                                </div>

                            </div>

                            <div class="c-card__rip"></div>

                            <div class="c-card__footer">
                                <a href="#" class="c-link c-link--primary-disabled">
                                    <span>Disponibile a breve</span>
                                </a>

                                <div class="c-card__description">
                                    <a href="#">
                                        Scopri di più sul nuovo servizio
                                    </a> <input type="checkbox" id="check_express_group" class="u-visuallyhidden u-chkbx-toggle">
                                    <label for="check_express_group" aria-label="">Scopri di più su questa tariffa</label>
                                    <div class="u-chkbx-toggleReceiver">
                                        <p>Questa tariffa è da considerare a persona ed è <strong>acquistabile per un numero minimo di 10 passeggeri nello stesso viaggio</strong>. I biglietti sono utilizzabili solo nelle date scelte in fase di acquisto, senza vincoli di orario.</p>
                                        <p><strong>Viaggi con dei bambini?</strong> I bambini fino a 4 anni accompagnati da un adulto con biglietto valido viaggiano gratuitamente.</p>
                                        <img src="../../images/svgs/marconi-express.svg" alt="Logo Marconi Express">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>

</div>
 
<div class="c-tablist c-tablist--forms">

  <ul class="c-tablist__tabs" role="tablist">
    {{#if home-it}}
    <li>
      <a href="#section-park-form" role="tab" rel="#section-park-form" aria-label="Prenota parcheggio">
        {{> @icon class="c-icon c-icon--24" symbol="ic_drive_eta_black_24px" }}
        <span aria-hidden="true">Acquista <strong>parcheggio</strong></span>
        <span class="mobile-label" aria-hidden="true">Parcheggi</span>
      </a>
    </li>
    {{/if}}

    <li>
      <a href="#section-mbl-form" role="tab" rel="#section-mbl-form" aria-label="Prenota Vip Lounge" aria-current="true">
        {{> @icon class="c-icon c-icon--24" symbol="ic_weekend_black_24px" }}
        <span aria-hidden="true">Acquista <strong>Vip Lounge</strong></span>
        <span class="mobile-label" aria-hidden="true">Vip Lounge</span>
      </a>
    </li>

    {{#if home-it}}
    <li>
      <a href="#section-flight-form" role="tab" rel="#section-flight-form" aria-label="Acquista volo">
        {{> @icon class="c-icon c-icon--24" symbol="ic_airplanemode_active_black_24px" }}
        <span aria-hidden="true">Acquista <strong>Volo</strong></span>
        <span class="mobile-label" aria-hidden="true">Voli</span>
      </a>
    </li>
    {{/if}}

    <li>
      <a href="#section-flight-express" role="tab" rel="#section-flight-express" aria-label="Biglietti Marconi Express">
        {{> @icon class="c-icon c-icon--24" symbol="ic-marconi-express-24px" }}
        <span aria-hidden="true">Acquista <strong>Treno città</strong></span>
        <span class="mobile-label" aria-hidden="true">MEX</span>
      </a>
    </li>

  </ul>

  <div class="c-tablist__sections">

    {{#if home-it}}
    <section class="c-tablist__section c-tablist__section--parkings has-banner" id="section-park-form">
      <div class="c-tablist__section-header">
        <h2 class="c-tablist__section-title">Cerca il tuo parcheggio:</h2>
        <div class="u-text-left">{{> @button--as-link btn-useful-info }}</div>
      </div>
      {{ render "@form--parkings" forms merge=true }}
      {{#if form-belowbanner}}
      {{ render "@banner" form-belowbanner merge=true }}
      {{/if}}
    </section>
    {{/if}}

    <section class="c-tablist__section c-tablist__section--mbl" id="section-mbl-form">
      <div class="c-tablist__section-header">
        <h2 class="c-tablist__section-title">Prenota e acquista Vip Lounge:</h2>
        <div class="u-text-left">{{> @button--as-link btn-useful-info }}</div>
      </div>
      {{ render "@form--mbl" }}
    </section>

    {{#if home-it}}
    <section class="c-tablist__section c-tablist__section--flights" id="section-flight-form">
      <div class="c-tablist__section-header">
        <h2 class="c-tablist__section-title">Cerca il tuo volo:</h2>
        <div class="u-text-left">{{> @button--as-link btn-useful-info }}</div>
      </div>
      {{ render "@form--flights" form-flights merge=true }}
    </section>
    {{/if}}

    <section class="c-tablist__section c-tablist__section--express" id="section-flight-express">
      <div class="c-tablist__section-header">
        <h2 class="c-tablist__section-title">Treni da e per Bologna:</h2>
        <div class="u-text-left">{{> @button--as-link btn-useful-info }}</div>
      </div>
      {{ render "@form--express" }}
    </section>

  </div>

</div>
 
{
  "home-it": true,
  "tab": [
    {
      "anchor-id": "section-1",
      "tab-text": "Section 1",
      "tab-content-title": "Section title 1",
      "tab-content-text": "<p>111 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere nemo nihil dolor reprehenderit blanditiis dignissimos a nostrum. Quam, neque? Omnis non, facere modi adipisci et dicta. Voluptate, quo. Quia, adipisci.</p>"
    },
    {
      "anchor-id": "section-2",
      "tab-text": "Section 2",
      "tab-content-title": "Section title 2",
      "tab-content-text": "<p>222 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere nemo nihil dolor reprehenderit blanditiis dignissimos a nostrum. Quam, neque? Omnis non, facere modi adipisci et dicta. Voluptate, quo. Quia, adipisci.</p>"
    },
    {
      "anchor-id": "section-3",
      "tab-text": "Section 3",
      "tab-content-title": "Section title 3",
      "tab-content-text": "<p>333 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere nemo nihil dolor reprehenderit blanditiis dignissimos a nostrum. Quam, neque? Omnis non, facere modi adipisci et dicta. Voluptate, quo. Quia, adipisci.</p>"
    }
  ],
  "btn-useful-info": {
    "type": "button",
    "text": "Regole e info utili",
    "modifier": "c-button--as-link u-color-basic-white-100 js-fr-dialogmodal-open",
    "opens-dialog": "dialog-useful-info",
    "svg": {
      "symbol": "ic-info-serif",
      "class": "c-icon--18 u-color-sun-120"
    }
  },
  "form-belowbanner": {
    "sticker": {
      "img-src": "/images/svgs/stk_mail_discount_reservation.svg",
      "img-alt": "stk_mail_discount_reservation"
    },
    "text": "<strong>fino al 30% di sconto </strong> acquistando il parcheggio online!"
  },
  "form-flights": {
    "hide-switch": true
  }
}
  • Content: 
    .c-tablist {
  position: relative;
  text-align: center;

  // only IE 10 & 11
  @media all and (-ms-high-contrast: none),
  (-ms-high-contrast: active) {
    z-index: 2;
  }

  main & {
    grid-column: main;
  }

  .c-tablist__tabs {
    padding: 0;
    display: inline-flex;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    border-radius: remify(16px);
    border: 4px solid primary(night, 20);
    background-color: primary(night, 20);
    
  }

  .c-tablist__tabs li,
  .c-tablist__tabs a {
    display: inline-block;
    flex: 1;
    border-radius: remify(4px) remify(4px) 0 0;
  }

  .c-tablist__tabs a {
    text-decoration: none;
    padding: remify(8px) remify(20px);
    color: primary(night, 100);
    display: block;
    text-align: center;
    white-space: nowrap;
    min-width: remify(140px);

    background-color: primary(night, 20);
    color: primary(night, 100);
    border-radius: remify(12px);

    @include min-screen (bp(tablet)) {
      padding: remify(8px) remify(40px);
      min-width: remify(220px);
    }

    .c-icon {
      vertical-align: bottom;
      color: currentColor;
    }

    svg {
      * {
        fill: currentColor;
      }
    }
  }

  .c-tablist__tabs [aria-current="true"] {
    color: #fff;
    background-color: primary(night, 80);
  }

  .c-tablist__section {
    padding: remify(16px);
    
    @include min-screen(bp(tablet-p)) {
      padding: 0;
    }

    .disclaimer {
      text-align: center;
      font-size: 75%;
      margin-top: remify(20px);
    }

    .c-tablist__empty-message {
      color: primary(night, 100);
      font-weight: fw(regular);
      margin: remify(80px) 0;
      font-size: 150%;
      text-align: center;
    }
  }

  .c-tablist__section-header {
    padding: remify(16px);
    display: flex;
    flex-direction: column;
    gap: remify(16px);

    @include min-screen(bp(phone-p)) {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

  }

  .c-tablist__section-title {
    @include font-scale(level-3);
    color: #fff;
    // padding: remify(16px) 0 0 remify(16px);
    text-align: left;
  }
}

/*------------------------------------*\
  Flights-list modifier
\*------------------------------------*/

.c-tablist--flights-list,
.c-tablist--destination {
  .c-tablist__section {
    position: relative;

    @include min-screen(bp(tablet-l)) {
      padding: remify(48px);
    }
  }

}

/*------------------------------------*\
  Destination modifier
\*------------------------------------*/

.c-tablist--destination {
  margin-top: remify(40px);
}

/*------------------------------------*\
  Flights times modifier
\*------------------------------------*/

.c-tablist--flights-times {

  .c-tablist__tabs {
    z-index: 0; // To prevent the bug of autocomplete that goes under the tabs
    width: 100%;
    max-width: remify(450px);

    @include min-screen(bp(tablet-p)) {
      width: 50%;
      max-width: initial;
    }

  }

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

  // .c-main--arrivals-departures & {
  //   margin-top: remify(24px);
  // }

  .c-tablist__tabs a {
    font-size: 75%;

    @include min-screen(bp(phone-p)) {
      font-size: 100%;
    }
  }

  .status {
    text-align: center;
    margin-bottom: remify(32px);
    position: relative;

    @include min-screen(bp(tablet)) {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: center;
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
    }
  }

  .status__child {
    &.refresh {
      display: none;

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

    &.is-alone {
      margin-left: auto;
    }
  }

  .status__child+.status__child {
    margin-top: remify(16px);

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

  .status .days {
    display: flex;
    align-items: center;
    justify-content: center;

    // @include min-screen(bp(tablet-p)) {
    //   position: absolute;
    //   left: 50%;
    //   transform: translateX(-50%);
    // }

    .today {
      text-align: center;
      color: primary(night, 100);
    }

    p {
      font-size: 150%;
      margin: 0 remify(24px);
    }

    small {
      text-transform: uppercase;
    }

    a {
      max-height: remify(24px);
    }

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

  .last-update {
    text-align: center;
    width: 100%;
  }

  .last-update--mobile {
    display: block;
    margin-top: remify(24px);

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

  .last-update--desktop {
    display: none;

    @include min-screen(bp(tablet)) {
      display: block;
      margin-top: remify(8px);
    }
  }

  .c-tablist__time-switcher {
    display: none;
    position: sticky;
    z-index: 200;
    bottom: 0;

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

  .flight-items {
    max-width: remify(800px);
    margin-inline: auto;
    padding-inline: remify(16px);
  }

}

/*------------------------------------*\
  Forms modifier
\*------------------------------------*/

.c-tablist--forms {
  .c-tablist__sections {
    margin-top: 0;

    @include min-screen(bp(tablet)) {
      display:0 0 remify(48px);
    }

    // Dichiara un'altezza minima in modo da evitare il reflow della pagina
    min-height: remify(96px);
  }

  .c-tablist__section {
    box-shadow: none;
    padding: 0;
    margin: 0 auto;
    outline: none;
    max-width: remify(900px);
    background-color: primary(night, 100);
    border-radius: 0 0 remify(16px) remify(16px);

    &~.c-tablist__section {
      display: none;
    }

    // Rende visibile il tab corrente quando XIAO ha terminato il caricamento
    &[aria-label]:not([hidden]) {
      display: block;
    }
  }

  .c-tablist__section--flights {
    @include min-screen( $bp-form-flights ) {
      width: 100%;
      max-width: remify(1269px);
      border-radius: remify(16px);
      margin: 0 auto;
    }
  }



  .c-tablist__tabs {
    justify-content: space-between;
    flex-wrap: nowrap;
    border: none;
    border-radius: 0;
    width: 100%;
    max-width: remify(900px);
    border-radius: remify(16px) remify(16px) 0 0;
    overflow: hidden;

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

  .c-tablist__tabs li {
    flex: 0 1 25%;
    border-radius: 0;
  }

  .c-tablist__tabs a,
  .c-tablist__tabs [aria-current="true"] {
    padding: remify(16px) remify(4px);
    background-color: primary(night, 20);
    color: primary(night, 120);
    display: block;
    text-align: center;
    border-radius: 0;
    width: 100%;
    min-width: remify(40px);
    @include font-scale(level-1-5);

  }

  .c-tablist__tabs [aria-current="true"] {
    text-decoration: none;
    background-color: primary(night, 100);
    color: #fff;
  }

  .c-tablist__tabs li a:hover,
  .c-tablist__tabs [aria-current="true"] {

    @include max-screen(bp(tablet)) {
      background-color: primary(night, 120);
      color: primary(sun, 100);
    }
  }

  .c-tablist__tabs a svg {
    display: inline-block;

    * {
      fill: currentColor;
    }
  }

  .c-tablist__tabs span {
    display: none;

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

  .c-tablist__tabs .mobile-label {
    display: block;

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

  .c-tablist__section--express {
    .c-form__fields {
      padding: remify(16px);
    }
  }
}

/*------------------------------------*\
  HOMEPAGE forms modifier
\*------------------------------------*/

// .c-tablist--forms .c-tablist__section--parkings.has-banner:not([hidden]) {}

.c-tablist--forms .c-tablist__section {
  
  .c-form {
    padding: remify(16px);
    text-align: left;

    label {
      color: #fff;
    }

    .c-field__note  {
      color: #fff;
    }

    label.is-negative {
      color: status(light-negative);
      input {
        background-color: status(light-negative);
      }
      .c-field__note {
        color: status(light-negative);
      }
    }
    
  }
  .c-banner {
    border-radius: 0 0 remify(16px) remify(16px);
  }

  .c-form .pax-type label {
    color: inherit;
  }

}

/*------------------------------------*\
  Pax-guide modifier
\*------------------------------------*/

.c-tablist--pax-guide {
  *:focus {
    outline: none;
  }

  .c-tablist__section {
    margin-top: remify(8px);
    border-radius: remify(8px);
    background-color: primary(night, 120);
    color: #fff;

    a {
      color: currentColor;
    }
  }

  .c-tablist__tabs a,
  .c-tablist__tabs [aria-current="true"] {
    padding: remify(16px);
    background-color: primary(night, 100);
    color: #fff;
    display: block;
    text-align: center;
    height: 100%;
    border-radius: remify(4px);
    background-color: transparent;
    box-shadow: none;
    font-size: 150%;
    font-weight: fw(light);
  }

  .c-tablist__tabs [aria-current="true"] {
    text-decoration: none;
    font-weight: fw(semibold);

    &:before {
      position: absolute;
      @include css-triangle("down", 10px, primary(sun, 100));
      bottom: remify(-10px);
      left: 50%;
      transform: translateX(-50%);

      @include min-screen(bp(tablet)) {
        content: "";
      }
    }
  }
}

/*------------------------------------*\
  titolo-borsa modifier
\*------------------------------------*/

.c-tablist.c-tablist--titolo-borsa {
  margin: remify(40px) 0;

  .c-tablist__tabs {
    @include max-screen(bp(phone-p)) {
      align-items: flex-end;
    }
  }

  .c-tablist__tabs a {
    font-size: 75%;

    &[aria-current="true"] {
      border-top: remify(5px) solid;
    }

    &.departures {
      border-color: primary(sky, 100);
    }

    &.arrivals {
      border-color: primary(sun, 100);
    }

    @include min-screen(bp(phone-p)) {
      font-size: 100%;
    }

    @include min-screen(bp(tablet)) {
      font-size: 145%;
      line-height: 1.42;
    }
  }

  .iframes-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .iframes-container__item {
    flex: 0 1 remify(600px);
    padding: remify(8px);
  }
}



/*------------------------------------*\
  YouFirst modifier
\*------------------------------------*/

.c-tablist--youfirst {
  @include shadow(higher);
  max-width: remify(900px);
  margin: 0 auto;
  border: 1px solid primary(night, 20);
  border-radius: remify(24px);


  .c-tablist__sections {
    margin-top: 0;

    @include min-screen(bp(tablet)) {
      display:0 0 remify(48px);
    }

    // Dichiara un'altezza minima in modo da evitare il reflow della pagina
    min-height: remify(96px);
  }

  .c-tablist__section {
    box-shadow: none;
    padding: 0;
    margin: 0 auto;
    outline: none;
    border-radius: 0 0 remify(24px) remify(24px);
    background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);

    & ~ .c-tablist__section {
      display: none;
    }

    // Rende visibile il tab corrente quando XIAO ha terminato il caricamento
    &[aria-label]:not([hidden]) {
      display: block;
    }
  }


  .c-tablist__tabs {
    justify-content: space-between;
    flex-wrap: nowrap;
    border: none;
    border-radius: 0;
    width: 100%;
    border-radius: remify(24px) remify(24px) 0 0;
    overflow: hidden;

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

  .c-tablist__tabs li {
    flex: 0 1 100%;
    border-radius: 0;
  }

  .c-tablist__tabs a,
  .c-tablist__tabs [aria-current="true"] {
    padding: remify(16px) remify(4px);
    background-color: primary(night, 10);
    color: primary(night, 120);
    display: block;
    text-align: center;
    border-radius: 0;
    width: 100%;
    min-width: remify(40px);
    @include font-scale(level-1-5);


    .c-tablist__label--desktop { display: none;}
    .c-tablist__label--mobile { display: block;}

    @include min-screen(bp(tablet)) {
      .c-tablist__label--desktop { display: inline-block;}
      .c-tablist__label--mobile { display: none;}
    }
  

  }

  .c-tablist__tabs [aria-current="true"] {
    text-decoration: none;
    background-color: #fff;
  }

  .c-tablist__tabs a svg {
    display: inline-block;

    * {
      fill: currentColor;
    }
  }

  .c-tablist__tabs span {
    display: none;

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

  .c-tablist__section--express {
    .c-form__fields {
      padding: remify(16px);
    }
  }
}


.youfirst_tab {
  
  text-align: left;
  padding: remify(24px);

  @include min-screen(bp(tablet)) {
    padding: remify(24px) remify(48px) remify(48px);
  }
  .youfirst_tab__title {
    @include font-scale(level-4);
    color: primary(night, 120);
    margin-bottom: remify(24px);
  }

  .youfirst_tab__container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
  }

  .youfirst_tab__item {
    @include min-screen(bp(tablet-p)) {
      flex: 0 1 50%;
    }

    p {
      margin-bottom: remify(8px);
    }

    ul li{
      @include font-scale(level-1-5);
      list-style: disc;
      margin-bottom: remify(8px);
      margin-left: remify(16px);
    }

    .c-button--submit {
      width: 100%;
      margin-top: remify(24px);
    }

    &:first-child {
      @include min-screen(bp(tablet)) {
        padding-right: remify(48px);
        border-right: 1px solid primary(night, 20);
      }
    }

    &.youfirst_tab__item--images {

      display: none;

      @include min-screen(bp(tablet)) {
        padding-left: remify(48px);
        display: flex;
        justify-content: space-between;
        
        .youfirst_tab__image {
          flex: 0 1 46%;
        }
      }
    }
  }

  .u-chkbx-showmore ~ .u-chkbx-showmore-target  { display: block; max-height: 4rem; overflow: hidden; }
  .u-chkbx-showmore:checked ~ .u-chkbx-showmore-target  { display: block; max-height: 100%; }

  .u-chkbx-showmore ~ label .more { display: inline-block; }
  .u-chkbx-showmore:checked ~ label .more { display: none; }
  .u-chkbx-showmore ~ label .less { display: none; }
  .u-chkbx-showmore:checked ~ label .less { display: inline-block; }

  .u-chkbx-showmore-label {
    color: primary(sky, 120);
    @include font-scale(level-2);
    display: inline-block;
    margin: remify(8px) 0 remify(16px);

    &, & span {
      text-decoration: underline;
    }
    &:hover {
      cursor: pointer;
    }
  }

  .youfirst_tab__divider {
    text-align: center;
    padding: remify(8px) 0;
    margin: remify(8px) 0;
    position: relative;

    span {
      padding: 0 remify(16px);
      background-color: #fff;
      display: inline-block;
      position: relative;
      z-index: 2;
    }

    &:after {
      content: "";
      position: absolute;
      left: remify(24px);
      right: remify(24px);
      top: 50%;
      transform: translateY(-50%);
      border-bottom: 1px solid primary(night, 20);
      z-index: 1;
    }
  }
}
  • URL: /components/raw/tablist/_tablist.scss
  • Filesystem Path: src/views/03-organisms/tablist/_tablist.scss
  • Size: 15.1 KB
  • Content: 
    (function($) {

  /*
    This JS scrolls the page on the anchors in order to avoid the page goes to the top everytime.
  */

  var $tabs = $('.c-tablist__tabs a');


  $tabs.on( "click", function(e) {
    // console.log($(this).text());    
    // e.preventDefault();

    // $('html,body').animate({
    //   scrollTop: $(this).offset().top - 10
    // }, 500);    

  });

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

No notes defined.