Aeroporto di Bologna - Design System

Dialog: Parking Form Conventions 

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

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

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

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

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

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

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

                        Numero pratica

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

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

                    </label>

                </div>

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

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

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

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

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

                    </label>

                </div>

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

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

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

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

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

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

                    </label>

                </div>

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

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

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

                    <label for="conventions-terms" class="terms-conditions">
                        <strong>Accetto le condizioni di utilizzo convenzione come sopra riportate</strong>
                    </label> <br><br>

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

                        Cerca parcheggio

                    </button>
                </div>

            </div>

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

        </div>
    </div>
</div>
 
<div class="c-dialog c-dialog--parking-form js-fr-dialogmodal {{ modifier }}" id="{{ id }}">
  <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="{{ id }}-{{ dialog-labelledby }}">
    <div role="document">
      
      <p class="c-dialog__title c-dialog__text--centered" id="{{ id }}-{{ dialog-labelledby }}">{{ title }}</p>

      <p class="c-dialog__text c-dialog__text--centered">
        
        {{#if paragraph}}
        {{ paragraph }}
        {{ else }}
        Indicaci le date e l’orario del tuo prossimo parcheggio, acquistalo e ottieni il 20% di sconto sul tuo ingresso Vip Lounge.
        {{/if }}
        <br><br>
      </p>

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

        <div class="c-form__el c-form__el--cal">
          {{> @select select-conventions }}
        </div>
        
        <div class="c-form__el c-form__el--sel">
          {{> @input file-number }}
        </div>

        <div class="c-form__el c-form__el--icon">
          {{> @icon symbol="entrata-parcheggio-24px" class="c-icon c-icon--32" }}
        </div>

        <div class="c-form__el c-form__el--cal">
          {{> @input entrance-date }}
        </div>

        <div class="c-form__el c-form__el--sel">
          {{> @select entrance-time }}
        </div>

        <div class="c-form__el c-form__el--icon">
          {{> @icon symbol="uscita-parcheggio-24px" class="c-icon c-icon--32" }}
        </div>

        <div class="c-form__el c-form__el--cal">
          {{> @input exit-date }}
        </div>

        <div class="c-form__el c-form__el--sel">
          {{> @select exit-time }}
        </div>

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

        </p>
        <div class="c-form__el c-form__el--cta">
          {{> @button submit }}
        </div>

      </div>

      <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
        {{> @icon symbol="ic_close_black_24px" class="c-icon c-icon--32" }}
      </button>

    </div>
  </div>
</div>
 
{
  "modifier": "",
  "id": "dialog-parking-form",
  "dialog-labelledby": "title",
  "title": "Acquista il tuo parcheggio!",
  "entrance-date": {
    "label_id": "entrance-date",
    "label_message": "Entrata",
    "label_class": "is-datepicker",
    "screen-reader-text": "Scegli la data",
    "atom-input": {
      "id": "entrance-date",
      "type": "date",
      "class": null,
      "placeholder": "Scegli la data",
      "required": true,
      "hasNote": true,
      "describedby": "entrance-date-note"
    },
    "note_id": "entrance-date-note",
    "note_message": "Seleziona la data di entrata al parcheggio",
    "note_class": ""
  },
  "entrance-time": {
    "label_id": "entrance-time",
    "label_message": "Ore",
    "label_class": null,
    "atom-select": {
      "id": "entrance-time",
      "class": null,
      "required": true,
      "hasNote": true,
      "describedby": "entrance-time-note",
      "placeholder": "00:00",
      "options": [
        {
          "value": "option-1",
          "text": "20:00"
        },
        {
          "value": "option-2",
          "text": "20:15"
        },
        {
          "value": "option-3",
          "text": "20:30"
        },
        {
          "value": "option-4",
          "text": "20:45"
        }
      ]
    },
    "note_id": "entrance-time-note",
    "note_message": "Seleziona l'ora di ingresso al parcheggio",
    "note_class": ""
  },
  "exit-date": {
    "label_id": "exit-date",
    "label_message": "Uscita",
    "label_class": "is-datepicker",
    "screen-reader-text": "Scegli la data",
    "atom-input": {
      "id": "exit-date",
      "type": "date",
      "class": null,
      "placeholder": "Scegli la data",
      "required": true,
      "hasNote": true,
      "describedby": "exit-date-note"
    },
    "note_id": "exit-date-note",
    "note_message": "Seleziona la data di uscita dal parcheggio",
    "note_class": ""
  },
  "exit-time": {
    "label_id": "exit-time",
    "label_message": "Ore",
    "label_class": null,
    "atom-select": {
      "id": "exit-time",
      "class": null,
      "required": true,
      "hasNote": true,
      "describedby": "exit-time-note",
      "placeholder": "00:00",
      "options": [
        {
          "value": "option-1",
          "text": "20:00"
        },
        {
          "value": "option-2",
          "text": "20:15"
        },
        {
          "value": "option-3",
          "text": "20:30"
        },
        {
          "value": "option-4",
          "text": "20:45"
        }
      ]
    },
    "note_id": "exit-time-note",
    "note_message": "Seleziona l'ora di uscita dal parcheggio",
    "note_class": ""
  },
  "select-conventions": {
    "label_id": "select-conventions",
    "label_message": "Convenzione:",
    "label_class": "",
    "atom-select": {
      "id": "select-conventions",
      "class": "",
      "required": false,
      "hasNote": true,
      "describedby": "select-conventions-note",
      "placeholder": "Hai una convenzione?",
      "options": [
        {
          "value": "option-1",
          "text": "Alba Tour"
        },
        {
          "value": "option-2",
          "text": "Alpitour"
        },
        {
          "value": "option-3",
          "text": "Brixia Viaggi"
        },
        {
          "value": "option-4",
          "text": "Club Med"
        },
        {
          "value": "option-5",
          "text": "Domina Travel"
        },
        {
          "value": "option-6",
          "text": "In Viaggi"
        },
        {
          "value": "option-7",
          "text": "Marsupio Group"
        },
        {
          "value": "option-8",
          "text": "Smeg S.p.A."
        },
        {
          "value": "option-9",
          "text": "Viaggi Idea"
        }
      ]
    },
    "note_id": "select-conventions-note",
    "note_message": "Seleziona un'opzione dal menù a tendina",
    "note_class": ""
  },
  "file-number": {
    "label_id": "file-number",
    "label_message": "Numero pratica",
    "label_class": "",
    "atom-input": {
      "id": "file-number",
      "type": "text",
      "class": "",
      "placeholder": "es. AA46923757",
      "required": false,
      "hasNote": true,
      "describedby": "file-number-note"
    },
    "note_id": "file-number-note",
    "note_message": "Inserisci il numero di pratica della convenzione",
    "note_class": ""
  },
  "checkbox": {
    "class": "terms-conditions",
    "id": "conventions-terms",
    "name": "accespt",
    "text": "<strong>Accetto le condizioni di utilizzo convenzione come sopra riportate</strong>"
  },
  "submit": {
    "name": "submit",
    "type": "submit",
    "text": "Cerca parcheggio",
    "modifier": "c-button--submit"
  }
}
  • Content: 
    .c-dialog {
  padding: remify(16px);
  z-index: $zIndex-dialog;

  .js-available & {
    background-color: rgba( primary(night, 80), .95 );
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
  }

}

.c-dialog__inner {
  background-color: #FFFFFF;
  width: 100%;
  padding: remify(40px) remify(24px) remify(24px);

  .js-available & {
    // width: calc(100vw - 2rem ); // 2rem = 32px = 16px per lato come margine della dialog
    width: 100%;
    max-width: remify(900px);
    margin: 0 auto;
    border-radius: remify(12px);
  }

  @include min-screen( bp(tablet) ){
  
    .js-available & {
      padding: remify(40px) remify(48px);
    }

  }

  &.no-padding {
    @include min-screen( bp(tablet) ){
      padding: remify(40px) remify(24px) remify(24px);
    }
  }

}

.c-dialog__img {
  display: block;
  margin: 0 auto remify(40px) auto;
}

.c-dialog__title {
  text-align: center;
  color: primary(night, 100);
  @include font-scale(level-4, regular);
  margin-bottom: remify(24px);

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

}

.c-dialog__title + .c-dialog__text {
  margin-top: remify(16px);
}

.c-dialog__subtitle {
  color: primary(night, 100);
  text-align: center;
  margin-bottom: remify(16px);
  @include font-scale(level-2, light);

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

.c-dialog__text {
  font-size: 100%;
  line-height: 1.5;
  color: primary(night, 100);

  & + & {
    margin-top: remify(24px);
  }

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

}

  .c-dialog__text--centered {
    text-align: center;
  }

  .c-dialog__text--small {
    font-size: 75%;
    line-height: 1.5;
  }

.c-dialog__action {
  text-align: center;
  margin-top: remify(24px);

  & > button {
    margin-top: remify(24px);
  }
}

.c-dialog__close {
  display: none;
  position: absolute;
  z-index: $z-Index-dialog-close-btn;
  top: remify(8px);
  right: remify(8px);
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;

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

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

  .js-available & {
    display: block;
  }

  .c-form--tight & {
    margin: 0;
  }

}

/*------------------------------------*
  Modifier c-dialog--parking-info
*------------------------------------*/
.c-dialog--parking-info {

  .c-dialog__inner {
    max-width: remify(1352px);
    padding: remify(16px);

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

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

  .c-dialog__title {
    text-align: left;
  }

}

/*------------------------------------*\
  Modifier c-dialog--parking-map, c-dialog--mbl-map
\*------------------------------------*/

.c-dialog--parking-map,
.c-dialog--mbl-map {

  .c-dialog__title {
    @include max-screen( bp(tablet)) {
      display: none;
    }
  }

  .c-dialog__close {

    .js-available & {
      @include max-screen( bp(tablet)) {
        background-color: primary(night, 100);
        border-radius: remify(4px);
        width: remify(44px);
        height  : remify(44px);
        
        svg {
          position: relative;
          top: remify(2px);
        }

        svg * {
          fill: #fff;
        }

      }
    }

  }

  .c-dialog__inner {

    .js-available & {
      padding-left: remify(16px);
      padding-right: remify(16px);
      padding-bottom: remify(16px);
      @include max-screen( bp(tablet)) {
        position: fixed;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
        transform: initial;
        padding: 0;
      }
    }

  }

  .js-dialog-map {
    display: none;

    .js-available & {
      display: block;
      height: remify(600px);
      @include max-screen( bp(tablet)) {
        height: 100vh;
      }
    }

  }

  .c-dialog__map img {
    max-width: 600px;

    .js-available & {
      display: none;
    }

  }

  iframe {
    width: 100%;
    height: 100%;
  }

}

/*------------------------------------*\
  Modifier c-dialog--conventions
\*------------------------------------*/

.c-dialog--conventions {

  form {
    margin: remify(36px) 0;
  }

}

/*------------------------------------*\
  Modifier c-dialog--conventions
\*------------------------------------*/

.c-dialog--save-and-book,
.c-dialog--create-password {

  .no-js & {
    grid-column: main;
  }

  .c-dialog__inner {
    .js-available & {
      max-width: remify(640px);
    }

  }

  .c-dialog__action > .c-button {
    display: block;
    margin-bottom: remify(16px);
    margin-left: auto;
    margin-right: auto;

    &:last-child {
      margin-top: 0;
    }

  }

}

/*------------------------------------*\
  Modifier c-dialog--login
\*------------------------------------*/

.c-dialog--login {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  
  .c-dialog__inner {
    max-width: remify(780px);

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

  .c-form {
    margin-top: remify(24px);
    margin-bottom: remify(24px);
  }
  
  hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: remify(16px) 0;
  }

}

/*------------------------------------*\
  Modifier c-dialog--flights-form
\*------------------------------------*/

.c-dialog--flights-form,
.c-dialog--gallery {

  .c-dialog__title {
    margin-bottom: remify(16px);
    color: #fff;
  }

  .c-dialog__inner {
    max-width: $base-page-width;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    background-color: transparent;
  }

  .c-dialog__close svg * {
    fill: #fff;
  }

}


.c-dialog__formwrapper {
  background-color: primary(sky, 10);
  border-radius: remify(24px);
  @include shadow(higher);
  display: table;
  margin: remify(16px) auto 0;
  width: auto;
  max-width: remify($base-page-width);

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

}

.c-dialog__formwrapper span svg {
    vertical-align: text-bottom;
    margin-right: 0.5rem;
}

/*------------------------------------*\
  Modifier c-dialog--dayflight
\*------------------------------------*/

.c-dialog--dayflight {

  .c-dialog__title {
    text-align: left;
  }

  .c-dialog__inner {
    max-width: remify(1000px);
    margin: 0 auto;
  }

  .flightDetail__companyName {
    color: primary(night, 100);
    font-weight: fw(bold);
    text-transform: uppercase;
    text-align: center;
    margin: remify(24px) 0;
  }


  .flightDetail__route {
    margin-bottom: remify(8px);
    border-bottom: remify(1px) solid primary(night, 20);

    &:last-child {
      margin-bottom: 0;
      border-bottom: none;
    }

  }

}

/*------------------------------------*\
  Modifier c-dialog--bill-detail
\*------------------------------------*/

.c-dialog--bill-detail {

  table {
    border-collapse: collapse;
    margin-top: remify(32px);

    tr {
      display: flex;
      flex-wrap: wrap;

      @include min-screen(bp(phablet)) {
        display: table-row;
        flex-wrap: initial;
      }

    }

    td {
      padding: remify(8px) 0;
      flex: 1 0 100%;

      @include min-screen(bp(phablet)) {
        flex: initial;
      }

    }

    td.desc {
      @include min-screen(bp(phablet)) {
        border-bottom: 1px solid primary(night, 20);
      }
    }

    td.price {
      border-bottom: 1px solid primary(night, 20);
    }

    td.clean {
      padding: 0;
    }

  }

}

/*------------------------------------*\
  Modifier c-dialog--gallery
\*------------------------------------*/

.c-dialog--gallery {
  // padding-top: remify(4px);
  
  .js-available & {
    background-color: secondary(basic-white, 100);
  }

  .c-dialog__inner {
    max-width: 100%;
    padding-top: 0;
    height: 100%;
  }

  div[role="document"] {
    max-width: remify(850px);
    margin-inline: auto;
    height: 100%;
  }

  .c-dialog__title {
    color: primary(night, 120);
    margin-bottom: remify(24px);
    @include font-scale(level-3)
  }

  .img-desc {
    color: primary(night, 120);
    @include font-scale(level-2);
  }

  .c-carousel__counter {
    color: primary(night, 120);
    
  }

  .c-dialog__close {
    top: 0;
    right: 0;
  }

  .c-dialog__close svg * {
    fill: primary(night, 120);
  }

}

/*------------------------------------*
  Modifier c-dialog--payment-methods
*------------------------------------*/
.c-dialog--payment-methods {
  
  .c-dialog__inner {
    max-width: remify(1350px);
    padding: remify(24px) remify(16px);

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

  }

}

/*------------------------------------*
  Modifier c-dialog--confirm-offline
*------------------------------------*/

.c-dialog--confirm-offline,
.c-dialog--with-launches  {
  .o-flexgrid {
    flex-wrap: nowrap;
    gap: remify(24px);
  }

  .c-link {
    text-decoration: auto;
    width: 100%;
  }

  h4 {
    font-weight: unset;
  }

  h3 {
    font-weight: bold;
  }
}

/*------------------------------------*
  Modifier: c-dialog--fullscreen
*------------------------------------*/
.c-dialog--mob-fullscreen {

  @include max-screen(bp(tablet)) {
    padding: 0;
  }

  .c-dialog__inner {
    @include max-screen(bp(tablet)) {
      max-width: initial;
      border-radius: 0;
      min-height: 100svh;
    }
  }
}

/*------------------------------------*
  Modifier: c-dialog--flight-fares
*------------------------------------*/
.c-dialog--flight-fares {
  
  .c-dialog__inner {
    max-width: remify(1200px);
  }

  .fare-container {
    display: flex;
    justify-content: center;
    gap:  remify(16px);
  }

  .fare-container__item {
    max-width:  remify(360px);
  }

}
  • URL: /components/raw/dialog/_dialog.scss
  • Filesystem Path: src/views/03-organisms/dialogs/dialog/_dialog.scss
  • Size: 9.8 KB

Add this context-data to button for opening dialog:

{
    "modifier": "js-fr-dialogmodal-open",
    "opens-dialog": "dialog-car-valet"
}

Example:

<button class="js-fr-dialogmodal-open" aria-controls="dialog-car-valet"></button>

Horizontal images width: 800px

Vertical images heigt: 533px