Aeroporto di Bologna - Design System

Tablist: Billboards 

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

    <ul class="c-tablist__tabs">
        <li>
            <a href="#partenze" aria-current="true">Partenze</a>
        </li>
        <li>
            <a href="#arrivi">Arrivi</a>
        </li>
    </ul>

    <div class="c-billboards ">
        <div class="c-billboards__item c-tablist__section" id="partenze">
            <div class="c-billboard c-billboard--departures ">
                <input class="c-billboard__toggle" type="checkbox" name="billboard" id="radio-toggle-billboard-departures" aria-hidden="true">
                <label class="c-billboard__label" for="radio-toggle-billboard-departures">
                    <div class="icon"><svg class="c-icon c-icon--32">
                            <use xlink:href="#ic_flight_takeoff_black_24px"></use>
                        </svg></div>
                    <div class="text">
                        <p>Partenze</p>
                        <small>Ultimo aggiornamento 10:10</small>
                    </div>
                    <div class="status">

                        <div class='c-status c-status--delay'>
                            <div class='c-status__img'>
                                <svg height='69' viewBox='0 0 69 69' width='69' xmlns='http://www.w3.org/2000/svg'>
                                    <g fill='none' fill-rule='evenodd'>
                                        <circle cx='34.5' cy='34.5' fill='#e8ecf2' r='34.5'></circle>
                                        <g fill-rule='nonzero'>
                                            <g transform='translate(11 28.96)'>
                                                <path d='m30.7721607 21.4158365c2.2189691.839156 1.9580818 3.757661.003183 5.0503395-1.5308386 1.0122683-4.6580008 1.0122683-9.3814866 0-.8940848-.0000222-1.7454867-.429994-2.3394757-1.1814733l-3.0583814-3.8692307-15.996.000208v-18.450432h13.768882l2.2117455-1.76942938c.7010315-.56081379 1.5720533-.86634662 2.4698045-.86634662h14.6916754c1.1108814 0 2.0114286 1.18007711 2.0114286 2.635776s-.9005472 2.635776-2.0114286 2.635776h2.1371429c1.3886016 0 2.5142857 1.18007711 2.5142857 2.635776s-1.1256841 2.635776-2.5142857 2.635776h2.3885714c1.5274618 0 2.7657143 1.1800771 2.7657143 2.635776s-1.2382525 2.635776-2.7657143 2.635776h1.5085714c1.666322 0 3.0171429 1.1800771 3.0171429 2.635776s-1.3508209 2.635776-3.0171429 2.635776z' fill='#fecd05'></path>
                                                <rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472'></rect>
                                                <rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472' y='16.4736'></rect>
                                                <rect fill='#2b72b0' height='12.519936' rx='2.306304' width='11.202048' x='1.317888' y='5.930496'></rect>
                                                <path d='m5.76177737 14.669171-1.32383065-1.3238307c-.38235783-.3886368-.52634303-.7502363-.14083294-1.1357464.38551008-.3855101 1.18857604.3159297 1.57721282.6982875l.5143082.5143082 1.29884335-1.7318187c.32900917-.4386788 1.02957775-1.3957871 1.55630478-1.0605269.52672703.3352603.32900915.8466666 0 1.2853455l-1.98574597 2.6476613c-.17268596.2302592-.43679316.3742518-.72388715.394667-.02360831.0016548-.04707872.0024822-.07041124.0024822-.26329289 0-.51579118-.1046467-.7019612-.290829z' fill='#fff'></path>
                                            </g>
                                            <g transform='translate(30.36 14)'>
                                                <path d='m22.528 11.264c0 2.9968125-1.1634219 5.8172813-3.2757656 7.942-2.1111407 2.123-4.9214688 3.3025781-7.9143281 3.3214844-.0073907 0-.0154688.0005156-.0228594 0-.0166719.0005156-.0338594.0005156-.0510469.0005156-3.00832814 0-5.83704686-1.1713281-7.96451564-3.2991406-2.1278125-2.1272969-3.29948436-4.9561875-3.29948436-7.9648594 0-3.00867186 1.17167186-5.83704686 3.29948436-7.96485936 2.12746878-2.12746878 4.9561875-3.29914064 7.96451564-3.29914064.0171875 0 .0338594 0 .0510469.00051563.0079062 0 .0158125 0 .0237187.00034374 2.9925157.0194219 5.8026719 1.19865627 7.9134688 3.32165627 2.1123437 2.12471872 3.2757656 4.94501563 3.2757656 7.94148436z' fill='#ff4a05'></path>
                                                <g fill='#fff'>
                                                    <path d='m13.1965625 6.62028127v5.03525003c0 1.0350312-.8418438 1.8770468-1.8767031 1.8770468h-.0048125c-.4834844-.0140937-.9826094-.2093437-1.32257817-.5494844-.35423437-.3545781-.54965623-.8258593-.54965623-1.3275624v-5.03525003c0-1.02351563.84975-1.84765627 1.8722344-1.87704691h.0048125c1.0348593 0 1.8767031.8421875 1.8767031 1.87704691z'></path>
                                                    <path d='m13.0961875 15.9121875c0 .9798594-.7968125 1.7766719-1.7766719 1.7766719h-.0044687c-.9772813-.0022344-1.7718594-.7981875-1.7718594-1.7766719 0-.9781406.7945781-1.7740938 1.7718594-1.7763281h.0044687c.9798594 0 1.7766719.7968125 1.7766719 1.7763281z'></path>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </div>

                            <div class='c-status__txt'>
                                <strong>Presentati con ampio anticipo in aeroporto</strong>
                                <small>Causa controlli aggiuntivi dovuti al Covid-19</small>
                            </div>
                        </div>
                    </div>
                </label>
                <div class="c-billboard__table">
                    <table class="c-table c-table--flights">
                        <caption class="u-visuallyhidden"></caption>
                        <thead>
                            <tr>
                                <th class="no-mobile">Compagnia</th>
                                <th>Destinazione</th>
                                <th>N° Volo</th>
                                <th>Orario stimato</th>
                                <th>Stato</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="no-mobile c-table__cell-to-clamp">
                                    <div class="clamp">
                                        <a href="../../ /components/preview/page-flight-companies.html"><strong>Swiss International Air Lines</strong></a>
                                    </div>
                                </td>
                                <td class="c-table__cell-to-clamp">
                                    <div class="clamp"><strong>MARSA ALAM / SHARM EL SHEIKH</strong></div>
                                </td>
                                <td>
                                    <a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info FRANKFURT YU9001">YU9001</a>
                                </td>
                                <td>14:00</td>
                                <td class="situation">Check-in C 45→48</td>
                            </tr>
                            <tr>
                                <td class="no-mobile c-table__cell-to-clamp">
                                    <div class="clamp">
                                        <a href="../../ /components/preview/page-flight-companies.html"><strong>Swiss International Air Lines</strong></a>
                                    </div>
                                </td>
                                <td class="c-table__cell-to-clamp">
                                    <div class="clamp"><strong>MARSA ALAM / SHARM EL SHEIKH</strong></div>
                                </td>
                                <td>
                                    <a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info FRANKFURT YU9001">YU9001</a>
                                </td>
                                <td>14:00</td>
                                <td class="situation">Check-in C 45→48</td>
                            </tr>
                            <tr>
                                <td class="no-mobile c-table__cell-to-clamp">
                                    <div class="clamp">
                                        <a href="../../ /components/preview/page-flight-companies.html"><strong>Swiss International Air Lines</strong></a>
                                    </div>
                                </td>
                                <td class="c-table__cell-to-clamp">
                                    <div class="clamp"><strong>MARSA ALAM / SHARM EL SHEIKH</strong></div>
                                </td>
                                <td>
                                    <a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info FRANKFURT YU9001">YU9001</a>
                                </td>
                                <td>14:00</td>
                                <td class="situation">Check-in C 45→48</td>
                            </tr>
                            <tr>
                                <td class="no-mobile c-table__cell-to-clamp">
                                    <div class="clamp">
                                        <a href="../../ /components/preview/page-flight-companies.html"><strong>Swiss International Air Lines</strong></a>
                                    </div>
                                </td>
                                <td class="c-table__cell-to-clamp">
                                    <div class="clamp"><strong>MARSA ALAM / SHARM EL SHEIKH</strong></div>
                                </td>
                                <td>
                                    <a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info FRANKFURT YU9001">YU9001</a>
                                </td>
                                <td>14:00</td>
                                <td class="situation">Check-in C 45→48</td>
                            </tr>
                            <tr>
                                <td class="no-mobile"><a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a></td>
                                <td><strong>LONDON LHR</strong></td>
                                <td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info LONDON LHR CP9827">CP9827</a></td>
                                <td>14:00 <strong class="is-negative">14:20</strong></td>
                                <td class="situation">Check-in C 45→48</td>
                            </tr>
                        </tbody>
                    </table>
                    <p class="foot">
                        <a href="../preview/page-arrivals-departures#section-departures.html">Tutte le partenze</a>
                    </p>
                </div>
            </div>

            <div class="c-billboard__status status">

                <div class='c-status c-status--delay'>
                    <div class='c-status__img'>
                        <svg height='69' viewBox='0 0 69 69' width='69' xmlns='http://www.w3.org/2000/svg'>
                            <g fill='none' fill-rule='evenodd'>
                                <circle cx='34.5' cy='34.5' fill='#e8ecf2' r='34.5'></circle>
                                <g fill-rule='nonzero'>
                                    <g transform='translate(11 28.96)'>
                                        <path d='m30.7721607 21.4158365c2.2189691.839156 1.9580818 3.757661.003183 5.0503395-1.5308386 1.0122683-4.6580008 1.0122683-9.3814866 0-.8940848-.0000222-1.7454867-.429994-2.3394757-1.1814733l-3.0583814-3.8692307-15.996.000208v-18.450432h13.768882l2.2117455-1.76942938c.7010315-.56081379 1.5720533-.86634662 2.4698045-.86634662h14.6916754c1.1108814 0 2.0114286 1.18007711 2.0114286 2.635776s-.9005472 2.635776-2.0114286 2.635776h2.1371429c1.3886016 0 2.5142857 1.18007711 2.5142857 2.635776s-1.1256841 2.635776-2.5142857 2.635776h2.3885714c1.5274618 0 2.7657143 1.1800771 2.7657143 2.635776s-1.2382525 2.635776-2.7657143 2.635776h1.5085714c1.666322 0 3.0171429 1.1800771 3.0171429 2.635776s-1.3508209 2.635776-3.0171429 2.635776z' fill='#fecd05'></path>
                                        <rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472'></rect>
                                        <rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472' y='16.4736'></rect>
                                        <rect fill='#2b72b0' height='12.519936' rx='2.306304' width='11.202048' x='1.317888' y='5.930496'></rect>
                                        <path d='m5.76177737 14.669171-1.32383065-1.3238307c-.38235783-.3886368-.52634303-.7502363-.14083294-1.1357464.38551008-.3855101 1.18857604.3159297 1.57721282.6982875l.5143082.5143082 1.29884335-1.7318187c.32900917-.4386788 1.02957775-1.3957871 1.55630478-1.0605269.52672703.3352603.32900915.8466666 0 1.2853455l-1.98574597 2.6476613c-.17268596.2302592-.43679316.3742518-.72388715.394667-.02360831.0016548-.04707872.0024822-.07041124.0024822-.26329289 0-.51579118-.1046467-.7019612-.290829z' fill='#fff'></path>
                                    </g>
                                    <g transform='translate(30.36 14)'>
                                        <path d='m22.528 11.264c0 2.9968125-1.1634219 5.8172813-3.2757656 7.942-2.1111407 2.123-4.9214688 3.3025781-7.9143281 3.3214844-.0073907 0-.0154688.0005156-.0228594 0-.0166719.0005156-.0338594.0005156-.0510469.0005156-3.00832814 0-5.83704686-1.1713281-7.96451564-3.2991406-2.1278125-2.1272969-3.29948436-4.9561875-3.29948436-7.9648594 0-3.00867186 1.17167186-5.83704686 3.29948436-7.96485936 2.12746878-2.12746878 4.9561875-3.29914064 7.96451564-3.29914064.0171875 0 .0338594 0 .0510469.00051563.0079062 0 .0158125 0 .0237187.00034374 2.9925157.0194219 5.8026719 1.19865627 7.9134688 3.32165627 2.1123437 2.12471872 3.2757656 4.94501563 3.2757656 7.94148436z' fill='#ff4a05'></path>
                                        <g fill='#fff'>
                                            <path d='m13.1965625 6.62028127v5.03525003c0 1.0350312-.8418438 1.8770468-1.8767031 1.8770468h-.0048125c-.4834844-.0140937-.9826094-.2093437-1.32257817-.5494844-.35423437-.3545781-.54965623-.8258593-.54965623-1.3275624v-5.03525003c0-1.02351563.84975-1.84765627 1.8722344-1.87704691h.0048125c1.0348593 0 1.8767031.8421875 1.8767031 1.87704691z'></path>
                                            <path d='m13.0961875 15.9121875c0 .9798594-.7968125 1.7766719-1.7766719 1.7766719h-.0044687c-.9772813-.0022344-1.7718594-.7981875-1.7718594-1.7766719 0-.9781406.7945781-1.7740938 1.7718594-1.7763281h.0044687c.9798594 0 1.7766719.7968125 1.7766719 1.7763281z'></path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </svg>
                    </div>

                    <div class='c-status__txt'>
                        <strong>Presentati con ampio anticipo in aeroporto</strong>
                        <small>Causa controlli aggiuntivi dovuti al Covid-19</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-billboards__item c-tablist__section" hidden id="arrivi">
            <div class="c-billboard c-billboard--arrivals ">
                <input class="c-billboard__toggle" type="checkbox" name="billboard" id="radio-toggle-billboard-arrivals" aria-hidden="true">
                <label class="c-billboard__label" for="radio-toggle-billboard-arrivals">
                    <div class="icon"><svg class="c-icon c-icon--32">
                            <use xlink:href="#ic_flight_land_black_24px"></use>
                        </svg></div>
                    <div class="text">
                        <p>Arrivi</p>
                        <small>Ultimo aggiornamento 10:10</small>
                    </div>
                </label>
                <div class="c-billboard__table">
                    <table class="c-table c-table--flights">
                        <caption class="u-visuallyhidden"></caption>
                        <thead>
                            <tr>
                                <th class="no-mobile">Compagnia</th>
                                <th>Provenienza</th>
                                <th>N° Volo</th>
                                <th>Orario stimato</th>
                                <th>Stato</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="no-mobile c-table__cell-to-clamp">
                                    <div class="clamp">
                                        <a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a>
                                    </div>
                                </td>
                                <td class="c-table__cell-to-clamp">
                                    <div class="clamp">
                                        <strong>VIENNA</strong>
                                    </div>
                                </td>
                                <td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info VIENNA BE3783">BE3783</a></td>
                                <td>14:00</td>
                                <td class="situation">Atterrato</td>
                            </tr>
                            <tr>
                                <td class="no-mobile c-table__cell-to-clamp">
                                    <div class="clamp">
                                        <a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a>
                                    </div>
                                </td>
                                <td class="c-table__cell-to-clamp">
                                    <div class="clamp">
                                        <strong>VIENNA</strong>
                                    </div>
                                </td>
                                <td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info VIENNA BE3783">BE3783</a></td>
                                <td>14:00</td>
                                <td class="situation">Atterrato</td>
                            </tr>
                            <tr>
                                <td class="no-mobile c-table__cell-to-clamp">
                                    <div class="clamp">
                                        <a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a>
                                    </div>
                                </td>
                                <td class="c-table__cell-to-clamp">
                                    <div class="clamp">
                                        <strong>VIENNA</strong>
                                    </div>
                                </td>
                                <td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info VIENNA BE3783">BE3783</a></td>
                                <td>14:00</td>
                                <td class="situation">Atterrato</td>
                            </tr>
                            <tr>
                                <td class="no-mobile c-table__cell-to-clamp">
                                    <div class="clamp">
                                        <a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a>
                                    </div>
                                </td>
                                <td class="c-table__cell-to-clamp">
                                    <div class="clamp">
                                        <strong>VIENNA</strong>
                                    </div>
                                </td>
                                <td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info VIENNA BE3783">BE3783</a></td>
                                <td>14:00</td>
                                <td class="situation">Atterrato</td>
                            </tr>
                            <tr>
                                <td class="no-mobile"><a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a></td>
                                <td><strong>MADRID</strong></td>
                                <td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info MADRID AZ8783">AZ8783</a></td>
                                <td>14:00 <strong class="is-positive">13:50</strong></td>
                                <td class="situation">Atterrato</td>
                            </tr>
                        </tbody>
                    </table>
                    <p class="foot">
                        <a href="../preview/page-arrivals-departures#section-arrivals.html">Tutti gli arrivi</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

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

  <ul class="c-tablist__tabs">
    <li>
      <a href="#partenze" aria-current="true">Partenze</a>
    </li>
    <li>
      <a href="#arrivi">Arrivi</a>
    </li>
  </ul>

  <div class="c-billboards {{ modifier }}">
    <div class="c-billboards__item c-tablist__section" id="partenze">
      {{ render "@billboard--departures" }}
    </div>
    <div class="c-billboards__item c-tablist__section" hidden id="arrivi">
      {{ render "@billboard--arrivals" }}
    </div>
  </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>"
    }
  ]
}
  • 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.