Tablist: Flights List Toggle

Same as 2018

HTML
View
Context
Assets
Info
Notes


        
        <div class=''>
    <ul class='c-switcher'>
        <li>
            <a href='#section-cheaper' aria-label='Risultati ordinati per prezzo crescente'>
                Il volo più economico
                <strong>
                    129,90 €
                </strong>
            </a>
        </li>
        <li>
            <a href='#section-quickest' aria-label='Risultati ordinati per durata del volo crescente'>
                Il volo più veloce
                <strong>
                    3h 56'
                </strong>
            </a>
        </li>
    </ul>
</div>


        <div class=''>
  <ul class='c-switcher'>
    <li>
      <a
        href='#section-cheaper'
        aria-label='Risultati ordinati per prezzo crescente'
      >
        Il volo più economico
        <strong>
          129,90 €
        </strong>
      </a>
    </li>
    <li>
      <a
        href='#section-quickest'
        aria-label='Risultati ordinati per durata del volo crescente'
      >
        Il volo più veloce
        <strong>
          3h 56'
        </strong>
      </a>
    </li>
  </ul>
</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>"
    }
  ]
}

File:

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

Handle: @tablist--flights-list-toggle
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/tablist/tablist--flights-list-toggle.hbs
Referenced by (1): @skimming

No notes defined.