Aeroporto di Bologna - Design System

Form: Form flight 

<div class="c-form__fields">

    <h3>Il tuo rientro a Bologna</h3>
    <p>
        <strong>Indicaci l’aeroporto da dove partirà il volo di rientro a Bologna e la compagnia aerea che opererà il volo</strong>, ti potremo garantire il trasporto per raggiungere il parcheggio scelto.
    </p>

    <label for="select-return-flight" class="" aria-label="">
        Aeroporto per il rientro a Bologna: <span class="required-marker" aria-hidden="true">*</span>
        <select id="select-return-flight" class="" aria-describedby="select-return-flight-note">
            <option value="" disabled selected>Seleziona l&#x27;aeroporto nel quale ti imbarcherai per rientrare a Bologna</option>
            <option value="option-0">Non ho un volo di rientro</option>
            <option value="option-1">Roma</option>
            <option value="option-2">Londra</option>
            <option value="option-3">Berlino</option>
            <option value="option-4">Amsterdam</option>
        </select>
        <em class="c-field__note u-visuallyhidden" id="select-return-flight-note">
            Seleziona la città da dove tornerai
        </em>
    </label> <label for="select-flight-company" class="" aria-label="">
        Compagnia aerea: <span class="required-marker" aria-hidden="true">*</span>
        <select id="select-flight-company" class="" aria-describedby="select-flight-company-note">
            <option value="" disabled selected>Seleziona la compagnia aerea di rientro a Bologna</option>
            <option value="option-0">Non ho un volo di rientro</option>
            <option value="option-1">Alitalia</option>
            <option value="option-2">Ryanair</option>
            <option value="option-3">Easyjet</option>
            <option value="option-4">Transavia</option>
        </select>
        <em class="c-field__note u-visuallyhidden" id="select-flight-company-note">
            Seleziona la compagnia aerea di ritorno
        </em>
    </label> <label class="c-pax-number" aria-label="Seleziona il numero di passeggeri">N° passeggeri: <span aria-hidden="true">*</span>

        <div class="c-pax-number__items" role="radiogroup" aria-label="Scegli il numero dei passeggeri">
            <div class="c-pax-number__item">
                <label for="pax-1">
                    <input type="radio" name="passengers" id="pax-1" class="u-visuallyhidden">
                    <span>
                        1
                    </span>
                </label>
            </div>
            <div class="c-pax-number__item">
                <label for="pax-2">
                    <input type="radio" name="passengers" id="pax-2" class="u-visuallyhidden">
                    <span>
                        2
                    </span>
                </label>
            </div>
            <div class="c-pax-number__item">
                <label for="pax-3">
                    <input type="radio" name="passengers" id="pax-3" class="u-visuallyhidden">
                    <span>
                        3
                    </span>
                </label>
            </div>
            <div class="c-pax-number__item">
                <label for="pax-4">
                    <input type="radio" name="passengers" id="pax-4" class="u-visuallyhidden">
                    <span>
                        4
                    </span>
                </label>
            </div>
            <div class="c-pax-number__item">
                <label for="pax-5">
                    <input type="radio" name="passengers" id="pax-5" class="u-visuallyhidden">
                    <span>
                        5
                    </span>
                </label>
            </div>
            <div class="c-pax-number__item">
                <label for="pax-6">
                    <input type="radio" name="passengers" id="pax-6" class="u-visuallyhidden">
                    <span>
                        6
                    </span>
                </label>
            </div>
        </div>

    </label>

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

  <h3>Il tuo rientro a Bologna</h3>
  <p>
    <strong>Indicaci l’aeroporto da dove partirà il volo di rientro a Bologna e la compagnia aerea che opererà il volo</strong>, ti potremo garantire il trasporto per raggiungere il parcheggio scelto.
  </p>
  
  {{> @select return-flight }}
  {{> @select flight-company }}
  {{render "@pax-number"}}
  
</div>
 
{
  "previewClassName": "c-form c-form--sticker",
  "return-flight": {
    "label_id": "select-return-flight",
    "label_message": "Aeroporto per il rientro a Bologna:",
    "label_class": null,
    "atom-select": {
      "id": "select-return-flight",
      "class": null,
      "required": true,
      "hasNote": true,
      "describedby": "select-return-flight-note",
      "placeholder": "Seleziona l'aeroporto nel quale ti imbarcherai per rientrare a Bologna",
      "options": [
        {
          "value": "option-0",
          "text": "Non ho un volo di rientro"
        },
        {
          "value": "option-1",
          "text": "Roma"
        },
        {
          "value": "option-2",
          "text": "Londra"
        },
        {
          "value": "option-3",
          "text": "Berlino"
        },
        {
          "value": "option-4",
          "text": "Amsterdam"
        }
      ]
    },
    "note_id": "select-return-flight-note",
    "note_message": "Seleziona la città da dove tornerai",
    "note_class": "u-visuallyhidden"
  },
  "flight-company": {
    "label_id": "select-flight-company",
    "label_message": "Compagnia aerea:",
    "label_class": null,
    "atom-select": {
      "id": "select-flight-company",
      "class": null,
      "required": true,
      "hasNote": true,
      "describedby": "select-flight-company-note",
      "placeholder": "Seleziona la compagnia aerea di rientro a Bologna",
      "options": [
        {
          "value": "option-0",
          "text": "Non ho un volo di rientro"
        },
        {
          "value": "option-1",
          "text": "Alitalia"
        },
        {
          "value": "option-2",
          "text": "Ryanair"
        },
        {
          "value": "option-3",
          "text": "Easyjet"
        },
        {
          "value": "option-4",
          "text": "Transavia"
        }
      ]
    },
    "note_id": "select-flight-company-note",
    "note_message": "Seleziona la compagnia aerea di ritorno",
    "note_class": "u-visuallyhidden"
  }
}
  • Content: 
    .c-form {
  grid-column: main;
  
  button {
    
    &.c-multiselect__button {
      margin-left: initial;
      margin-right: initial;
      display: flex;
      height: 100%;
    }
  }

  .c-button--submit,
  .c-button--confirm {
    margin-top: remify(48px);

    &.u-mt-space-0 {
      margin-top: 0;
    }

  }

  .c-button--above {
    margin-top: 0;
  }

  .centered-link {
    display: block;
    text-align: center;
    margin-top: remify(16px);
  }

  input:disabled,
  textarea:disabled,
  button.js-toggleFlightsPax {
    color: secondary(text, 100);
  }
}

.c-form__samerow {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;

  .page-routes-guide & {
    flex-direction: column;

    @include min-screen(bp(tablet-p)) {
      flex-direction: row;
    }
  }

  &>label,
  &>label+.c-field__note {
    width: 100%;

    @include min-screen(bp(tablet)) {
      width: 49%;
      max-height: remify(120px);
    }
  }

  &>label.is-negative {
    @include min-screen(bp(tablet)) {
      margin-bottom: remify(64px);
    }
  }

  &>label.is-negative+.c-field__note {
    @include min-screen(bp(tablet)) {
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }

  &>label~label.is-negative+.c-field__note {
    @include min-screen(bp(tablet)) {
      right: 0;
      left: initial;
    }
  }
}

.c-form__note {
  color: secondary(page, 100);
  text-align: center;
  font-size: remify(14px);
  margin: remify(16px) 0 remify(40px);

  &.is-negative {
    width: 100%;
    text-align: left;
    display: block;
    background-color: status(negative);
    font-size: remify(12px);
    padding: remify(8px) remify(16px);
    margin-top: remify(4px);
    border-radius: remify(4px);

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

/*------------------------------------*\
  Modifier .c-form--tight
\*------------------------------------*/

.c-form--tight {
  // main & {
  width: 100%;
  max-width: remify(670px);
  grid-column: main;
  margin: 0px auto; // }

  button {
    display: block;
    margin: remify(48px) auto 0;
  }

  p {
    color: primary(night, 100);
    margin-bottom: remify(24px);
  }

  .c-detective p {
    color: secondary(page, 100) !important;
  }
}

/*------------------------------------*\
  Modifier .c-form--sticker
\*------------------------------------*/

.c-form--sticker {
  width: 100%;
  max-width: remify(660px);
  grid-column: main;
  margin: 0 auto;

  .c-form__fields {
    margin-top: remify(72px);
  }

  .c-form-image {
    display: none;
  }

  button:not(.c-dialog__close) {
    display: block;
    margin: remify(72px) auto 0;
  }

  .c-field__note {
    width: auto;
    margin-left: 0;
  }

  .c-form__alone {
    position: relative;
    margin-top: remify(16px);
  }

  h3 {
    font-size: 125%;
    font-weight: fw(regular);
    color: primary(night, 100); // margin-top: remify(72px);
    margin-bottom: remify(16px);

    @include min-screen(bp(tablet)) {
      font-size: 150%;
    }
  }

  p {
    color: primary(night, 100);
    margin-bottom: remify(24px);
  }
}

.c-form--stk-abs {
  position: relative;
  margin-bottom: remify(40px);

  .c-form__image {
    display: none;

    @include min-screen(bp(tablet-p)) {
      display: block;
      position: absolute;
      left: remify(-150px);
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

/*------------------------------------*\
  Modifier .c-form--outstanding
\*------------------------------------*/

.c-form--outstanding {
  width: 100%;
  max-width: remify(900px);
  margin: 0 auto;
  position: relative;

  @include min-screen(bp(tablet)) {
    padding: remify(64px) remify(115px) remify(40px);
    @include shadow(medium);
    margin-top: remify(100px);
    border-radius: remify(8px);
    background-color: #fff;
  }

  .c-canvas--content-template & {
    background-color: primary(sky, 10);
    box-shadow: none;
    padding: remify(16px) remify(24px) remify(24px);
  }

}

/*------------------------------------*\
  Modifier .c-form--menu
\*------------------------------------*/

.c-form--menu {
  border-bottom: remify(1px) solid primary(sky, 20);
  padding-bottom: remify(24px);
  margin-bottom: remify(24px);

  .c-button--submit,
  .c-button--confirm {
    margin-top: remify(24px);
  }
}

/*------------------------------------*\
  Modifier .c-form--parkings, .c-form--mbl
\*------------------------------------*/

.c-form--parkings,
.c-form--mbl,
.c-form--flights {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  @include min-screen(bp(tablet)) {
    align-items: center;
    justify-content: initial;
  }

  .c-estimate & {

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

    @include min-screen(bp(tablet-l)) {
      background-color: #fff;
      border-radius: remify(4px);
      padding: remify(12px) remify(16px);
      @include shadow(medium);
    }

  }

  .c-dialog--parking-form & {
    background-color: transparent;
  }

  label {

    @include min-screen(bp(tablet-p)) {
      margin-bottom: 0;
      box-shadow: none;
    }

    .c-dialog--parking-form & {
      margin-bottom: remify(16px);
    }

  }

  .c-form__el {
    flex-grow: 1;

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

  }

  .c-form__el--cal,
  .c-form__el--sel,
  .c-form__el--pair {
    flex-basis: 100%;
  }

  .c-form__el--cal {

    @include min-screen(bp(phone-p)) {
      flex-basis: 60%;
      padding-right: remify(16px);
    }

    @include min-screen(bp(tablet-p)) {
      flex-basis: 16%;
    }

    .c-dialog--parking-form & {
      @include min-screen(bp(phone-p)) {
        flex-basis: 60%;
        padding-right: remify(16px);
      }
    }

  }

  .c-form__el--23 {
    flex-grow: 3;
  }

  .c-form__el--13 {
    flex-grow: 1;
  }
  

  .c-form__el--sel {
    @include min-screen(bp(phone-p)) {
      flex-basis: 40%;
    }

    @include min-screen(bp(tablet-p)) {
      flex-basis: 12%;
    }

    .c-dialog--parking-form & {
      flex-basis: 40%;
    }
  }

  .c-form__el--icon {
    // display: none;
    
    @include min-screen(bp(tablet-p)) {
      display: block;
      flex-basis: 1%;
      flex-grow: 0;
      padding-top: remify(8px);
    }
    
    .c-estimate &,
    .c-dialog--parking-form & {
      display: none;
      @include min-screen(bp(tablet-p)) {
        display: none;
      }
    }

    .switch-round-trip {
      align-items: center;
      justify-content: center;
      background-color: primary(night,100);
      color: #fff;
      border-radius: remify(12px);
      width: remify(42px);
      height: remify(42px);
      display: flex;
      align-items: center;
      justify-content: center;

      svg {
        fill: #fff;
      }

      .o-spotlight & {
        background-color: primary(night,40);
      }
      .o-spotlight.is-active & {
        background-color: primary(sky,100);
      }
    }

  }

  .c-form__el--cta {
    padding-right: 0;
    flex: 1 1 100%;

    @include min-screen(bp(tablet-p)) {
      flex: 0 1 auto;
    }

    .c-estimate & {
      @include min-screen(bp(tablet-p)) {
        flex: 0 1 auto;
      }
    }
  }

  .c-form__el--desktop {
    display: none;

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

  .c-form__el--mobile {
    display: block;

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

  .c-button--disabled,
  .c-button--submit,
  .c-button--adding {
    margin: 0 auto;
    display: block;
    max-width: remify(375px);
    width: 100%;
    padding-left: remify(16px);
    padding-right: remify(16px);
    min-height: remify(44px);
    margin-top: remify(6px);
  }

  .c-button--qty button {
    width: remify(44px);

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

  }

  .c-button--qty.c-button--adding,
  .c-button--qty.c-button--adding button {
    background-color: #fff;
  }
  
}

.c-form--parkings-conventions {
  padding: remify(16px);
  text-align: left;
  color: #fff;
  @include font-scale(level-1-5);

  a {
    font-weight: bold;
    text-decoration: underline;
    color: #fff;
  }
}

/*------------------------------------*\
  MBL modifier
\*------------------------------------*/

.c-form--mbl {
  
   @include max-screen( bp(tablet-p)) {
      padding-top: remify(24px);
    }

  .c-main--area-meeting & {
    
    max-width: remify(890px);
    margin: 0 auto;

    @include min-screen( bp(tablet-p)) {
      min-width: remify(800px);
    }


    @media all and (-ms-high-contrast: none),
    (-ms-high-contrast: active) {
      /* IE10+ CSS styles */
      position: relative;
      @include centerer-horizontal;
    }


    select {
      
    }
  }

  &+.form-support-text {
    text-align: center;
    color: primary(night, 100);
    margin-bottom: remify(72px);
    margin-top: remify(16px);

    @supports (display: grid) {
      grid-column: main;
      margin-top: 0;
    }
  }
}



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

.c-form--flights {
  display: block;
  text-align: left;

  @include min-screen(bp(tablet)) {
    display: flex;
    align-items: initial;
  }

  background-color: transparent;

  .c-tablist--forms & {
    input[type=checkbox] + label, 
    input[type=radio] + label,
    label {
      color: #fff;
    }
    label input {
      background-color: #fff;
      border-color: primary(night, 20);
      padding-left: remify(16px);
    }

    .switch-round-trip {
      background-color: primary(sky,120);
    }
  }

  .is-active & {
    background-color: primary(night, 100);

    input[type=checkbox] + label, 
    input[type=radio] + label,
    label {
      color: #fff;
    }

    label input {
      background-color: #fff;
      border-color: primary(night, 20);
      padding-left: remify(16px);
    }

    .c-icon {
      fill: #fff;
    }

    &:after {
      content: "";
      width: 200vw;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      background-color: primary(night, 100);
      z-index: -1;
      transform: translateX(-50%);
    }

    .c-field__note {
      color: #fff;
    }
  }

  .js-close-overlay {
    height: 24px;
    border: none;
    background: transparent;
    position: absolute;
    top: -30px;
    right: 0;
    display: none;
    padding: 0;

    svg * {
      fill: #fff;
    }
  }

  .wrapper {
    @include min-screen(bp(tablet)) {
      flex: 1 0 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    @include min-screen( $bp-form-flights ) {
      flex: 2;
    }
  }

  .wrapper--extended {
    width: 100%;
    flex: auto;
    padding-top: remify(16px);
    
    @include min-screen(bp(tablet-l)) {
      padding-top: 0;
    }

    label {
      display: inline-block;

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

    label select.is-inline {
      @include max-screen(bp(tablet)) {
       display: block;
       margin-left: 0;
       margin-top: remify(16px);
       margin-right: remify(8px);
      }
    }
  }

  .wrapper--alone {
    flex: 1 1 100%;

    @include min-screen( $bp-form-flights ) {
      flex: 0 1 auto;
      justify-content: flex-end;
    }
  }

  .wrapper--localities {
    .c-form__el--pair:last-child {
      @include max-screen( $bp-form-flights ) {
        padding-right: 0;
      }
    }
  }

  .wrapper--dates {
    @media (min-width: bp(tablet)) and (max-width: $bp-form-flights) {
      // background-color: purple;
      max-width: 80%;
    }
  }

  .wrapper--pax {
    @media (min-width: bp(tablet)) and (max-width: $bp-form-flights) {
      // background-color: purple;
      max-width: 20%;

      & .c-form__el {
        // padding-left: remify(16px);
      }
    }
  }

  label {
    margin-bottom: remify(16px);
    border: none;

    &:focus-within {
      border: none;
    }

    @include min-screen( $bp-form-flights ) {
      margin-bottom: 0;
      box-shadow: none;
      padding: remify(16px) 0;
    }
  }

  .has-border {
    position: relative;
    padding-right: 0;

    @include min-screen( $bp-form-flights ) {
      padding-right: remify(16px);
    }

    &:after {
      content: '';
      position: absolute;
      border-right: remify(1px) solid #ccc;
      z-index: 1;
      width: remify(1px);
      height: 60%;
      right: remify(10px);
      top: 50%;
      transform: translateY(-50%);
      display: none;

      @include min-screen( $bp-form-flights ) {
        display: block;
      }
    }
  }

  .has-border-before {
    position: relative;
    padding-right: 0;

    @include min-screen( $bp-form-flights ) {
      padding-right: remify(16px);
    }

    &:before {
      content: '';
      position: absolute;
      border-left: remify(1px) solid #ccc;
      z-index: 1;
      width: remify(1px);
      height: 60%;
      left: remify(-8px);
      top: 50%;
      transform: translateY(-50%);
      display: none;

      @include min-screen( $bp-form-flights ) {
        display: block;
      }
    }
  }

  .c-form__el--pair {
    @include min-screen(bp(tablet)) {
      flex-basis: 50%;
    }

    @include min-screen( $bp-form-flights ) {
      flex-basis: 16%;
    }
  }

  .js-round-desktop {
    flex-grow: 1;
  }

  .c-form__el--icon {
    display: none;

    @include min-screen( $bp-form-flights ) {
      display: block;
    }

    button {
      background: none;
      border: 0;
    }
  }

  .c-form__el--pax {
    position: relative;
    padding-right: 0;

    @include min-screen( $bp-form-flights ) {
      padding-right: remify(16px);
      max-width: remify(130px);
    }
    
  }

  .c-form__el--cta {
    padding-right: 0;
    flex: 1 0 100%;
    
    margin-top: remify(16px);
    margin-bottom: remify(16px);

    @include min-screen( $bp-form-flights ) {
      padding-top: remify(8px);
      flex: 0 1 auto;
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  .c-form__el--toggleFlightsPax {
    border: 1px solid primary(night, 20);
    background-color: #fff;
    margin-left: 0;
    width: 100%;
    text-align: left;
    border-radius: remify(12px);
    padding: remify(12px) remify(16px) remify(12px) remify(16px);
    margin-top: remify(4px);
    font-size: remify(16px);

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

    .is-active & {
      background-color: #fff;
      padding-left: remify(16px);

      .c-icon {
        fill: primary(night, 120);
      }
    }

    .c-tablist--forms & {
      .c-icon {
        fill: primary(night, 120);
      }
    }

  }

  .js-flightsPaxCnt {
    display: none;
    width: 100%;
    background-color: #fff;
    padding: remify(16px);
    @include shadow(high);
    border-radius: 0 0 remify(12px) remify(12px);
    margin-bottom: remify(16px);
    margin-top: -1rem;
    right: 0;
    // max-width: remify(450px);
    // transform: translateX(25%);
    position: relative;

    @media (min-width: bp(tablet)) and (max-width: $bp-form-flights) {
      position: absolute;
      z-index: 999;
      min-width: remify(400px);
    
    }

    @include min-screen( $bp-form-flights ) {
      z-index: $zIndex-autocomplete;
      position: absolute;
      top: calc(100%);
      margin-top: 0;
      border-radius: remify(12px);
      transform: translateX(25%);
      width: remify(450px);
      max-width: initial;
    }

    &.is-visible {
      display: block;
    }

    .pax-type {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: remify(16px);

      &:last-of-type {
        margin-bottom: remify(24px);
      }

      label {
        font-size: 75%;
        line-height: 1.5;
        font-weight: fw(regular);
        text-transform: initial;
        padding: 0;
        margin: 0;
        box-shadow: none;
        color: secondary(text, 100);

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

      .c-button--qty {
        width: auto;
      }
    }
  }

  // .foot {
  //   padding: remify(8px) remify(16px);
  //   flex: 1 0 100%;
  //   align-self: flex-end;
  //   margin-top: remify(-14px);
  //   margin-bottom: remify(16px);
  //   border-radius: remify(4px);

  //   @include min-screen(bp(phone-p)) {
  //     display: flex;
  //     align-items: center;
  //     min-height: remify(42px);
  //   }

  //   @include min-screen( $bp-form-flights ) {
  //     margin-top: 0;
  //     margin-bottom: 0;
  //     border-radius: 0;
  //   }

  //   input[type="checkbox"]+label,
  //   input[type="radio"]+label {
  //     margin-bottom: 0;
  //   }

  //   input[type="radio"]+label {
  //     margin-right: remify(16px);
  //   }
  // }

  // .foot--first {
  //   & div:first-child {
  //     margin-bottom: remify(16px);

  //     @include min-screen(bp(phone-p)) {
  //       margin-right: remify(60px);
  //       margin-bottom: initial;
  //     }

  //   }

  //   @include min-screen( $bp-form-flights ) {
  //     margin-left: remify(-16px);
  //   }
  // }

  // .foot--last {
  //   display: none;

  //   @include min-screen( $bp-form-flights ) {
  //     margin-right: remify(-16px);
  //     display: block;
  //     min-height: remify(42px);
  //   }
  // }
}

/*------------------------------------*\
  Flights edit modifier
\*------------------------------------*/

.c-form--flights.c-form--flights-edit {
  
  // Hides the form fields on mobile viewports except the button
  @include max-screen(bp(tablet)) {
    padding: remify(16px) remify(32px);
    .wrapper {
      display: none;
    }
    .wrapper--alone {
      display: block;
      .c-form__el--pax {
        display: none;
      }
    }
  }
  @include max-screen(bp(tablet-l)) {
    padding-left: 16px;
    padding-right: 16px;
  }

  // .foot {
  //   display: none;
  // }

  // .foot--block {
  //   display: flex;
  // }

  // .foot--block.foot--first {
  //   display: flex;
  // }

  // .foot--block.foot--last {
  //   display: none;

  //   @include min-screen( $bp-form-flights ) {
  //     display: flex;
  //   }
  // }

  .js-flight-btn-confirm-modifies {
    display: none;
    margin-top: remify(56px);
    @include min-screen(bp(tablet-p)) {
      margin-top: 0;
    }
  }

  // .foot--desktop {
  //   display: none;

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

  // .foot--mobile {
  //   display: flex;

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

.c-form--flights {
  .c-form__el--flights {
    flex-basis: 100%;
  }

  // .foot--desktop {
  //   display: none;

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

  // .foot--mobile {
  //   display: flex;

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

// Shows the form fields on mobile viewports when the button is pressed
.c-form--flights.c-form--flights-edit.o-spotlight__element--overlay {
  @include max-screen(bp(tablet)) {
    .wrapper {
      display: block;
    }

    .wrapper--alone .c-form__el--pax {
      display: block;
    }
  }
}


/*------------------------------------*\
  Desktop only modifier
\*------------------------------------*/

.c-form--desktop-only {
  @include max-screen(bp(tablet-l)) {
    display: none;
  }
}

/*------------------------------------*\
  Parkings form modifier
\*------------------------------------*/

.c-form--parkings {

}

/*------------------------------------*\
  MyBLQ Login into customer care reclaim modifier
\*------------------------------------*/

.c-form--myblqLogin {
  max-width: remify(400px);
  margin-left: auto;
  margin-right: auto;
}

/*------------------------------------*\
  wrapped with background
\*------------------------------------*/

.c-form--wrapped {
    background-color: #d3e0eb;
    border-radius: remify(24px);
    padding: remify(16px);
}
/*------------------------------------*\
  Search results only modifier
\*------------------------------------*/

.c-form--search-results {
  width: 100%;
  max-width: remify(670px);
  margin: 0 auto;

  .c-form--search-flight {
    a {
    color: secondary(text,100); 
    @include min-screen(bp(tablet)) { 
      font-weight: fw(bold); 
    }
    }
    font-size: remify(16px);

    @include min-screen(bp(tablet)) {
      font-size: remify(12px);
      text-align: right;
      position: relative;
      top: remify(-40px);
    }
  }
}
  • URL: /components/raw/form/_form.scss
  • Filesystem Path: src/views/03-organisms/form/_form.scss
  • Size: 20.5 KB
  • Content: 
    (function($){
  'use strict';

  if(!$.tangible){
    $.tangible = new Object();
  };

  $.tangible.formFlights = function(el, options){
    var base = this;

    base.$el = $(el);
    base.el = el;

    base.init = function(){

      base.$btnPax = $('.js-toggleFlightsPax');
      base.$btnClosePaxCnt = $('.js-closeFlightsPax');
      base.$paxCnt = $('.js-flightsPaxCnt');

      // Variables for c-form--flights-edit
      base.$flightEditInputs = $('.c-form--flights-edit input');
      base.$flightEditSelects = $('.c-form--flights-edit select');
      base.$flightEditInputsArray = $('.c-form--flights-edit input').toArray();
      base.$flightSwitchButton = $('.c-form--flights-edit .js-switch-btn');
      base.$flightEditButtonEdit = $('.c-form--flights-edit .js-flight-btn-edit');
      base.$flightEditButtonConfirm = $('.c-form--flights-edit .js-flight-btn-confirm-modifies');
      base.$overlay = $('.o-spotlight__element');
      base.$closeOverlayBtn = $('.js-close-overlay');

      // Opens the box of passengers
      base.$btnPax.click(function(e){
        e.preventDefault();
        base.$paxCnt.toggleClass('is-visible');
        // Switches the state of aria-expanded
        var expanded = $(this).attr('aria-expanded') === 'true' || false;
        $(this).attr('aria-expanded', !expanded);
        
        // if( $( window ).width() < 768 ) {
        //   // Scroll to element
        //   $('html, body').animate({
        //     scrollTop: base.$paxCnt.offset().top
        //   }, 800);
        // }
        
      });
      
      // Closes the box of passengers
      base.$btnClosePaxCnt.click(function(e){
        e.preventDefault();
        base.$paxCnt.removeClass('is-visible');
        // Set the state of aria-expanded to false
        base.$btnPax.attr('aria-expanded', false);
      });

      // Adds Readonly attribute on c-form--flights-edit inputs
      base.addsReadonly();
      
      // Calls functions when flightEditButtonEdit is pressed
      base.$flightEditButtonEdit.click(function(e){
        e.preventDefault();
        base.removesReadonly();
        base.setFocusOnFirstInput();
        base.showEditButtonConfirm($(this));
        base.showSwitchButton($(this));
        base.addsOverlay();
      });

      base.$closeOverlayBtn.click(function(e){
        e.preventDefault();
        base.removesOverlay( $(this) );
        base.addsReadonly();
        base.$flightEditButtonEdit.show();
        base.$flightEditButtonConfirm.hide();
        //base.$flightSwitchButton.hide();
      });

      $( window ).resize(function() {
        base.checkWindowSize();
      });
      
    };

    ///////// FUNCTIONS FOR C-FORM--FLIGHTS-EDIT /////////

      // Adds readonly
      base.addsReadonly = function() {
        base.$flightEditInputs.prop('readonly', true);
        base.$flightEditInputs.prop('disabled', true);
        base.$flightEditSelects.prop('readonly', true);
        base.$flightEditSelects.prop('disabled', true);
        $('.c-form--flights-edit .js-toggleFlightsPax').prop('disabled', true);
        base.$flightEditInputs.parent('label').addClass("is-readonly");
      }

      // Removes readonly
      base.removesReadonly = function() {
        base.$flightEditInputs.prop('readonly', false);
        base.$flightEditInputs.prop('disabled', false);
        base.$flightEditSelects.prop('readonly', false);
        base.$flightEditSelects.prop('disabled', false);
        $('.c-form--flights-edit .js-toggleFlightsPax').prop('disabled', false);
        base.$flightEditInputs.parent().removeClass("is-readonly");
      }

      // Set focus on first input
      base.setFocusOnFirstInput = function() {
        base.$flightEditInputsArray[0].focus();
      }

      // Change button properties
      base.showEditButtonConfirm = function(el) {
        el.hide();
        base.$flightEditButtonConfirm.css('display', 'block');
      }
    
      // Change Switch button properties
      base.showSwitchButton = function(el) {
        el.hide();
       // base.$flightSwitchButton.css('display', 'flex');
      }

      // Adds overlay
      base.addsOverlay = function() {
        base.$overlay.addClass('o-spotlight__element--overlay');
        base.$overlay.closest('.o-spotlight').addClass('is-active');
        base.$closeOverlayBtn.show();
      }

      // Removes overlay
      base.removesOverlay = function(elem) {
        base.$overlay.removeClass('o-spotlight__element--overlay');
        base.$overlay.closest('.o-spotlight').removeClass('is-active');
        elem.hide();
      }

      base.checkWindowSize = function() {
        if( $( window ).width() < 1024 ) {
          base.$flightEditButtonEdit.text('Modifica la ricerca');
        } else {
          base.$flightEditButtonEdit.text('Modifica');
        }
      }
    
    ///////// END FUNCTIONS FOR C-FORM--FLIGHTS-EDIT /////////

    base.init();
    base.checkWindowSize();

  };

  $.fn.tangible_formFlights = function(options){
    return this.each(function(){
      (new $.tangible.formFlights(this, options));
    });
  };

})(jQuery);
  • URL: /components/raw/form/form-flights.js
  • Filesystem Path: src/views/03-organisms/form/form-flights.js
  • Size: 5.1 KB
  • Content: 
    (function($) {

  // DETECT FLATPICKR FIELDS AND FIELDS WRAPPERS ON MOBILE DEVICES
   function detectmob() { 
       if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) {

           // nascondi campi input dei form ecommerce desktop
        //    $("#round-trip-desktop.js-flatpickr").closest("label").hide();
        //    $("#round-desktop.js-flatpickr").closest("label").hide();           
        //    $("#entrance-date-time-desktop.js-flatpickr").closest("label").hide();
        //    $("#exit-date-time-desktop.js-flatpickr").closest("label").hide();
        
           // mostra/nascondi wrapper dei form ecommerce desktop/mobile
        //    $(".c-form__el--desktop").hide();
        //    $(".c-form__el--mobile").show();
        
           // mostra input form ecommerce voli
        //    $("#round-mobile").closest("label").show();
        //    $("#trip-mobile").closest("label").show();
       }
   }

    detectmob(); 

})(jQuery);
  • URL: /components/raw/form/form-mobile-detect.js
  • Filesystem Path: src/views/03-organisms/form/form-mobile-detect.js
  • Size: 2.9 KB

No notes defined.