<div class="c-dialog c-dialog--flights-form js-fr-dialogmodal " id="dialog-flights-form">
<div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-flights-form-title">
<div role="document">
<p class="c-dialog__title" id="dialog-flights-form-title">Cerca il tuo volo da Bologna ad Atene</p>
<div class="c-dialog__formwrapper">
<form action="../../#.html" class="c-form c-form--flights " onsubmit="return false">
<button class="js-close-overlay" aria-label="close">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
<div class="wrapper wrapper--extended">
<div role="radiogroup" aria-label="seleziona volo in economy o business class">
<label for="select-economy-business-dialog" class="" aria-label="">
Tipo di viaggio:
<select id="select-economy-business-dialog" class="is-small is-inline" aria-describedby="select-economy-business-dialog-note">
<option value="" disabled selected></option>
<option value="option-1" selected>Economy</option>
<option value="option-2">Business Class</option>
</select>
<em class="c-field__note u-visuallyhidden" id="select-economy-business-dialog-note">
Seleziona il tipo di viaggio
</em>
</label> <label for="select-round-trip-dialog" class="" aria-label="">
<select id="select-round-trip-dialog" class="is-small is-inline" aria-describedby="select-round-trip-dialog-note">
<option value="" disabled selected></option>
<option value="option-1" selected>Andata e ritorno</option>
<option value="option-2">Solo andata</option>
</select>
<em class="c-field__note u-visuallyhidden" id="select-round-trip-dialog-note">
</em>
</label>
</div>
</div>
<div class="wrapper wrapper--localities">
<div class="c-form__el c-form__el--pair">
<label for="from" class=" " aria-label="">
Da <span class="required-marker" aria-hidden="true">*</span>
<input id="from" type="text" class="js-combobox " placeholder="" value="" required aria-required="true" aria-describedby="from-note" list="departures" data-combobox-prefix-class="combobox" data-combobox-case-sensitive="no" data-combobox-search-option="containing" data-combobox-help-text="Premi il tasto TAB o le frecce direzionali per accedere e navigare attraverso i suggerimenti. Conferma la tua scelta col tasto INVIO, oppure premi il tasto ESC per chiudere la lista dei suggerimenti." data-suggestion-single="C'è " data-suggestion-plural="Ci sono " data-suggestion-word="Suggerimento" data-suggestion-word-plural="Suggerimenti" data-combobox-see-more-text="Guarda più risultati">
<datalist id="departures">
<option value="Dubai, Al Maktoum Intl [DWC] (EMIRATI ARABI)">
<option value="Roma, Fiumicino [FCO] (ITALIA)">
<option value="New York Ny, John F Kennedy Intl [JFK] (STATI UNITI)">
<option value="Parigi, Charles De Gaulle [CDG] (FRANCIA)">
<option value="Berlino, Schoenefeld [SXF] (GERMANIA)">
<option value="Londra, Heathrow [LHR] (REGNO UNITO)">
<option value="Los Angeles Ca, International [LAX] (STATI UNITI)">
<option value="Cana Brava Mg [NBV] (BRASILE)">
<option value="Pecs, Pogany [PEV] (UNGHERIA)">
</datalist>
<p class="c-field__note " id="from-note">
Inserisci la partenza
</p>
</label>
</div>
<div class="c-form__el c-form__el--icon">
<button type="button" class="switch-round-trip js-switch-btn" aria-label="Inverti origine e destinazione">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic-switch-arrows-black-24px"></use>
</svg> </button>
</div>
<div class="c-form__el c-form__el--pair">
<label for="to" class=" " aria-label="">
A <span class="required-marker" aria-hidden="true">*</span>
<input id="to" type="text" class="js-combobox " placeholder="" value="" required aria-required="true" aria-describedby="to-note" list="arrivals" data-combobox-prefix-class="combobox" data-combobox-case-sensitive="no" data-combobox-search-option="containing" data-combobox-help-text="Premi il tasto TAB o le frecce direzionali per accedere e navigare attraverso i suggerimenti. Conferma la tua scelta col tasto INVIO, oppure premi il tasto ESC per chiudere la lista dei suggerimenti." data-suggestion-single="C'è " data-suggestion-plural="Ci sono " data-suggestion-word="Suggerimento" data-suggestion-word-plural="Suggerimenti" data-combobox-see-more-text="Guarda più risultati">
<datalist id="arrivals">
<option value="Dubai, Al Maktoum Intl [DWC] (EMIRATI ARABI)">
<option value="Roma, Fiumicino [FCO] (ITALIA)">
<option value="New York Ny, John F Kennedy Intl [JFK] (STATI UNITI)">
<option value="Parigi, Charles De Gaulle [CDG] (FRANCIA)">
<option value="Berlino, Schoenefeld [SXF] (GERMANIA)">
<option value="Londra, Heathrow [LHR] (REGNO UNITO)">
<option value="Los Angeles Ca, International [LAX] (STATI UNITI)">
<option value="Cana Brava Mg [NBV] (BRASILE)">
<option value="Pecs, Pogany [PEV] (UNGHERIA)">
</datalist>
<p class="c-field__note " id="to-note">
Inserisci la destinazione
</p>
</label>
</div>
</div>
<div class="wrapper wrapper--dates">
<span class="c-form__note is-negative u-visuallyhidden" id="flights-form-note">Inserisci una data di uscita successiva a quella di entrata</span>
<div class="c-form__el c-form__el--pair js-round-desktop">
<label for="round-desktop" class="flatpickr-label" aria-label="Scegli la data">
Andata
<input id="round-desktop" type="date" class="js-flatpickr flatpickr-input" placeholder="" value="" aria-describedby="round-desktop-note">
<p class="c-field__note " id="round-desktop-note">
Seleziona la data di andata
</p>
</label>
</div>
<div class="c-form__el c-form__el--pair js-trip-desktop">
<label for="trip-desktop" class="flatpickr-label" aria-label="Scegli la data">
Ritorno
<input id="trip-desktop" type="date" class="js-flatpickr flatpickr-input" placeholder="" value="" aria-describedby="trip-desktop-note">
<p class="c-field__note " id="trip-desktop-note">
Seleziona la data di ritorno
</p>
</label>
</div>
</div>
<div class="wrapper wrapper--alone wrapper--pax">
<div class="c-form__el c-form__el--pax ">
<label for="text-field">
Passeggeri
<span class="required-marker" aria-hidden="true">*</span>
<button type="button" class="c-form__el--toggleFlightsPax js-toggleFlightsPax" aria-expanded="false" aria-label="1 passeggero" aria-describedby="pax-note" aria-controls="aria-paxChoiceDesc">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic-person-black-24px"></use>
</svg> <strong>1
</strong>
</button>
<p class="c-field__note" id="pax-note" aria-hidden="true">
N. passeggeri
</p>
</label>
<div class="js-flightsPaxCnt" id="aria-paxChoice">
<div class="u-visuallyhidden" aria-live="polite" id="aria-paxChoiceDesc">
Procedi per modificare la quantità.
</div>
<div class="pax-type">
<label for="adult">
<strong>Adulti</strong> (da 12 anni in su)</label>
<div class="c-button c-button--qty " aria-label="Seleziona il numero">
<button type="button" class="minus js-toggle-remove" aria-label="Diminuisci di uno" data-toggle="lounge-service">-</button>
<input type="number" class="js-qty-value" value="1" readonly id="adult" aria-label="Quantità" min="1">
<button type="button" class="plus js-toggle-add" aria-label="Aumenta di uno" data-toggle="lounge-service">+</button>
</div>
</div>
<div class="pax-type">
<label for="child">
<strong>Bambini</strong> (da 2 a 11 anni)</label>
<div class="c-button c-button--qty " aria-label="Seleziona il numero">
<button type="button" class="minus js-toggle-remove" aria-label="Diminuisci di uno" data-toggle="lounge-service">-</button>
<input type="number" class="js-qty-value" value="1" readonly id="child" aria-label="Quantità" min="1">
<button type="button" class="plus js-toggle-add" aria-label="Aumenta di uno" data-toggle="lounge-service">+</button>
</div>
</div>
<div class="pax-type">
<label for="baby">
<strong>Neonato</strong> (Meno di 2 anni)</label>
<div class="c-button c-button--qty " aria-label="Seleziona il numero">
<button type="button" class="minus js-toggle-remove" aria-label="Diminuisci di uno" data-toggle="lounge-service">-</button>
<input type="number" class="js-qty-value" value="1" readonly id="baby" aria-label="Quantità" min="1">
<button type="button" class="plus js-toggle-add" aria-label="Aumenta di uno" data-toggle="lounge-service">+</button>
</div>
</div>
<button type="button" class="js-closeFlightsPax c-button c-button--as-link" aria-hidden="true">Chiudi</button>
</div>
</div>
</div>
<div class="wrapper wrapper--alone">
<div class="c-form__el c-form__el--cta">
<button type="submit" class="c-button c-button--submit">
Cerca il tuo volo
</button>
</div>
</div>
</form>
<div class="c-superhero__blurred">
<span>
<svg class="c-icon c-icon--24">
<use xlink:href="#ic-call-black-24px"></use>
</svg> <strong>Non sei abituato ad acquistare online?</strong> <a href="#">Scopri come prenotare il tuo volo da
telefono
<span aria-hidden="true">→</span></a>
</span>
</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--flights-form js-fr-dialogmodal {{ modifier }}" id="{{ id }}">
<div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="{{ id }}-{{ dialog-labelledby }}">
<div role="document">
{{#if title}}
<p class="c-dialog__title" id="{{ id }}-{{ dialog-labelledby }}">{{ title }}</p>
{{/if}}
<div class="c-dialog__formwrapper">
{{ render "@form--flights-dialog" }}
<div class="c-superhero__blurred">
<span>
{{> @icon icon }}
<strong>Non sei abituato ad acquistare online?</strong> <a href="#">Scopri come prenotare il tuo volo da
telefono
<span aria-hidden="true">→</span></a>
</span>
</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-flights-form",
"dialog-labelledby": "title",
"title": "Cerca il tuo volo da Bologna ad Atene",
"icon": {
"symbol": "ic-call-black-24px",
"class": "c-icon c-icon--24"
},
"flights-form": {
"from": {
"atom-input": {
"value": "Bologna, Guglielmo Marconi [BLQ] (ITALIA)"
}
},
"to": {
"atom-input": {
"value": "Atene, Eleftherios Venizelos [ATH] (GRECIA)"
}
},
"round-mobile": {
"label_id": "dialog-round-mobile",
"label_message": "Andata",
"label_class": "is-datepicker flatpickr-label",
"screen-reader-text": "Scegli la data",
"atom-input": {
"id": "dialog-round-mobile",
"type": "date",
"class": "js-flatpickr flatpickr-input",
"required": true,
"hasNote": true,
"describedby": "dialog-round-mobile-note",
"min-date": true
},
"note_id": "dialog-round-mobile-note",
"note_message": "Seleziona la data di andata del volo",
"note_class": "u-visuallyhidden"
},
"trip-mobile": {
"label_id": "dialog-trip-mobile",
"label_message": "Ritorno",
"label_class": "is-datepicker flatpickr-label",
"screen-reader-text": "Scegli la data",
"atom-input": {
"id": "dialog-trip-mobile",
"type": "date",
"class": "js-flatpickr flatpickr-input",
"required": true,
"hasNote": true,
"describedby": "dialog-trip-mobile-note",
"min-date": true
},
"note_id": "dialog-trip-mobile-note",
"note_message": "Seleziona una data di ritorno successiva alla data di andata",
"note_class": "u-visuallyhidden"
}
}
}
.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);
}
}
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