You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
1.4 KiB
107 lines
1.4 KiB
.modalContainer {
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: $modalZIndex;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.modalBackdrop {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--modalBackdropBackgroundColor);
|
|
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;
|
|
}
|
|
|
|
.modalOpenIOS {
|
|
position: fixed;
|
|
right: 0;
|
|
left: 0;
|
|
}
|
|
|
|
/*
|
|
* Sizes
|
|
*/
|
|
|
|
.small {
|
|
composes: modal;
|
|
|
|
width: 480px;
|
|
}
|
|
|
|
.medium {
|
|
composes: modal;
|
|
|
|
width: 720px;
|
|
}
|
|
|
|
.large {
|
|
composes: modal;
|
|
|
|
width: 1080px;
|
|
}
|
|
|
|
.extraLarge {
|
|
composes: modal;
|
|
|
|
width: 1280px;
|
|
}
|
|
|
|
|
|
.extraExtraLarge {
|
|
composes: modal;
|
|
|
|
width: 1600px;
|
|
}
|
|
|
|
@media only screen and (max-width: $breakpointExtraLarge) {
|
|
.modal.extraLarge {
|
|
width: 90%;
|
|
}
|
|
}
|
|
|
|
@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,
|
|
.modal.large,
|
|
.modal.extraLarge,
|
|
.modal.extraExtraLarge {
|
|
max-height: 100%;
|
|
width: 100%;
|
|
height: 100% !important;
|
|
}
|
|
}
|