50 lines
735 B
SCSS
50 lines
735 B
SCSS
@import '~/css/helpers';
|
|
|
|
.modal {
|
|
@include respond-to('mobile') {
|
|
min-width: unset;
|
|
width: 90vw;
|
|
}
|
|
|
|
min-width: tovw(700px, 'default', 700px);
|
|
background-color: unset;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 50vw;
|
|
transform: translate(-50%, -50%);
|
|
padding: 0;
|
|
margin: 0;
|
|
animation: fadein 1200ms;
|
|
|
|
&__bg {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgb(0 0 0 / 0.5);
|
|
z-index: 50;
|
|
backdrop-filter: blur(5px);
|
|
animation: fadein 800ms;
|
|
}
|
|
}
|
|
|
|
@keyframes fadein {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
[data-theme='light'] {
|
|
.modal {
|
|
&__bg {
|
|
background: rgb(251 251 251 / 0.35);
|
|
}
|
|
}
|
|
}
|