<div class="c-dialog c-dialog--conventions js-fr-dialogmodal " id="dialog-conventions">
<div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-conventions-title">
<div role="document">
<p class="c-dialog__title" id="dialog-conventions-title">Convenzioni</p>
<p class="c-dialog__subtitle">
Controlla se puoi ottenere dei prezzi dedicati a te.
</p>
<div class="c-form">
<label for="select-conventions" class="" aria-label="">
Convenzione:
<select id="select-conventions" class="" aria-describedby="select-conventions-note">
<option value="" disabled selected>Seleziona l'accreditamento di cui far parte</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 u-visuallyhidden" id="select-conventions-note">
Seleziona un'opzione dal menù a tendina
</em>
</label>
<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>
</p>
<div class="c-dialog__action">
<button type="button" class="c-button c-button--submit c-button--large">
Attiva convenzione
</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--conventions 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" id="{{ id }}-{{ dialog-labelledby }}">{{ title }}</p>
<p class="c-dialog__subtitle">
Controlla se puoi ottenere dei prezzi dedicati a te.
</p>
<div class="c-form">
{{> @select select-conventions }}
<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}}
</p>
<div class="c-dialog__action">
{{> @button btn-conventions }}
</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-conventions",
"dialog-labelledby": "title",
"title": "Convenzioni",
"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": "Seleziona l'accreditamento di cui far parte",
"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": "u-visuallyhidden"
},
"btn-conventions": {
"name": "submit",
"type": "button",
"text": "Attiva convenzione",
"modifier": "c-button--submit c-button--large"
},
"checkbox": {
"class": "terms-conditions",
"id": "conventions-terms",
"name": "accespt",
"text": "<strong>Accetto le condizioni di utilizzo convenzione come sopra riportate</strong>"
}
}
.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