Dialog: Weekend fare

Same as 2018

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-dialog c-dialog--save-and-book js-fr-dialogmodal " id="dialog-weekend-fare">
    <div class="c-dialog__inner no-padding js-fr-dialogmodal-modal" aria-labelledby="dialog-weekend-fare-title">
        <div role="document">

            <img src="../../images/svgs/weekend-fare.svg" class="c-dialog__img" alt="Tariffa weekend" aria-hidden="true">

            <p class="c-dialog__title" id="dialog-weekend-fare-title">Parcheggia in Aeroporto e risparima con la Tariffa Weekend!</p>

            <p class="c-dialog__text c-dialog__text--centered">
                Valida tutto l'anno, nei parcheggi P1, P2, P3, dell'Aeroporto G. Marconi di Bologna, escluso il mese di agosto, per soste che hanno inizio dal venerdì e terminano non oltre le ore 24.00 di domenica. In caso di soste superiori, per ogni giorno supplementare si applica la tariffa standard.
            </p>

            <p class="c-dialog__text c-dialog__text--centered">
                Per soste che includono due o più fine settimana consecutivi, viene applicata solo con riferimento al primo weekend. Non cumulabile con altre convenzioni/promozioni.
            </p>

            <p class="c-dialog__text c-dialog__text--centered c-dialog__text--small">
                Si ricorda che, per avvalersi della Tariffa Weekend, al momento dell'ingresso al parcheggio prenotato, è necessario posizionare il QR Code sotto il lettore della colonnina d’ingresso e non rimuoverlo fino all’emissione automatica del biglietto. In assenza della prenotazione è necessario recarsi al Presidio parcheggi (situato alla base del parcheggio Multipiano di fronte all'aerostazione), oppure inserire nelle casse automatiche il buono da richiedere anticipatamente al Presidio il giorno di entrata nel parcheggio.
            </p>

            <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--save-and-book js-fr-dialogmodal {{ modifier }}" id="{{ id }}">
  <div class="c-dialog__inner no-padding js-fr-dialogmodal-modal" aria-labelledby="{{ id }}-{{ dialog-labelledby }}">
    <div role="document">
      
      <img src="{{ path '/images/svgs/weekend-fare.svg' }}" class="c-dialog__img" alt="Tariffa weekend" aria-hidden="true">

      <p class="c-dialog__title" id="{{ id }}-{{ dialog-labelledby }}">{{ title }}</p>

      <p class="c-dialog__text c-dialog__text--centered">
        Valida tutto l'anno, nei parcheggi P1, P2, P3, dell'Aeroporto G. Marconi di Bologna, escluso il mese di agosto, per soste che hanno inizio dal venerdì e terminano non oltre le ore 24.00 di domenica. In caso di soste superiori, per ogni giorno supplementare si applica la tariffa standard.
      </p>

      <p class="c-dialog__text c-dialog__text--centered">
        Per soste che includono due o più fine settimana consecutivi, viene applicata solo con riferimento al primo weekend. Non cumulabile con altre convenzioni/promozioni.
      </p>

      <p class="c-dialog__text c-dialog__text--centered c-dialog__text--small">
        Si ricorda che, per avvalersi della Tariffa Weekend, al momento dell'ingresso al parcheggio prenotato, è necessario posizionare il QR Code sotto il lettore della colonnina d’ingresso e non rimuoverlo fino all’emissione automatica del biglietto. In assenza della prenotazione è necessario recarsi al Presidio parcheggi (situato alla base del parcheggio Multipiano di fronte all'aerostazione), oppure inserire nelle casse automatiche il buono da richiedere anticipatamente al Presidio il giorno di entrata nel parcheggio.
      </p>

      <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-weekend-fare",
  "dialog-labelledby": "title",
  "title": "Parcheggia in Aeroporto e risparima con la Tariffa Weekend!"
}

File:

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

Handle: @dialog--weekendfare
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/dialogs/dialog/dialog--weekendfare.hbs
References (1): @icon
Referenced by (3): @product--pop, @product--stacked, @page-rates-conventions

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>

Size for images into Big Gallery

Horizontal images width: 800px

Vertical images heigt: 533px