2017-09-04 02:20:56 +00:00
|
|
|
.modalContainer {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
2019-05-11 01:56:04 +00:00
|
|
|
z-index: $modalZIndex;
|
2017-09-04 02:20:56 +00:00
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.modalBackdrop {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
2022-10-17 23:51:55 +00:00
|
|
|
background-color: var(--modalBackdropBackgroundColor);
|
2017-09-04 02:20:56 +00:00
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.modal {
|
|
|
|
position: relative;
|
|
|
|
display: flex;
|
|
|
|
max-height: 90%;
|
|
|
|
border-radius: 6px;
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.modalOpen {
|
|
|
|
/* Prevent the body from scrolling when the modal is open */
|
|
|
|
overflow: hidden !important;
|
|
|
|
}
|
|
|
|
|
2019-08-05 02:39:39 +00:00
|
|
|
.modalOpenIOS {
|
|
|
|
position: fixed;
|
|
|
|
right: 0;
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
|
2017-09-04 02:20:56 +00:00
|
|
|
/*
|
|
|
|
* Sizes
|
|
|
|
*/
|
|
|
|
|
|
|
|
.small {
|
|
|
|
composes: modal;
|
|
|
|
|
|
|
|
width: 480px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.medium {
|
|
|
|
composes: modal;
|
|
|
|
|
|
|
|
width: 720px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.large {
|
|
|
|
composes: modal;
|
|
|
|
|
|
|
|
width: 1080px;
|
|
|
|
}
|
|
|
|
|
2017-11-16 02:24:33 +00:00
|
|
|
.extraLarge {
|
|
|
|
composes: modal;
|
|
|
|
|
2018-08-08 00:57:15 +00:00
|
|
|
width: 1280px;
|
2017-11-16 02:24:33 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@media only screen and (max-width: $breakpointExtraLarge) {
|
|
|
|
.modal.extraLarge {
|
|
|
|
width: 90%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-09-04 02:20:56 +00:00
|
|
|
@media only screen and (max-width: $breakpointLarge) {
|
|
|
|
.modal.large {
|
|
|
|
width: 90%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media only screen and (max-width: $breakpointMedium) {
|
|
|
|
.modal.small,
|
|
|
|
.modal.medium {
|
|
|
|
width: 90%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media only screen and (max-width: $breakpointSmall) {
|
|
|
|
.modalContainer {
|
|
|
|
position: fixed;
|
|
|
|
}
|
|
|
|
|
|
|
|
.modal.small,
|
|
|
|
.modal.medium,
|
2017-11-16 02:24:33 +00:00
|
|
|
.modal.large,
|
|
|
|
.modal.extraLarge {
|
2017-09-04 02:20:56 +00:00
|
|
|
max-height: 100%;
|
|
|
|
width: 100%;
|
2017-11-16 02:24:33 +00:00
|
|
|
height: 100% !important;
|
2017-09-04 02:20:56 +00:00
|
|
|
}
|
|
|
|
}
|