67 lines
1.2 KiB
SCSS
67 lines
1.2 KiB
SCSS
|
// Modal ===========================
|
||
|
|
.modal {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: rgba(0, 0, 0, .5);
|
||
|
|
backdrop-filter: blur(5px);
|
||
|
|
z-index: 50;
|
||
|
|
|
||
|
|
display: none;
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
display: block;
|
||
|
|
|
||
|
|
.modal_inner {
|
||
|
|
top: 50%;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&_inner {
|
||
|
|
position: absolute;
|
||
|
|
top: 60%;
|
||
|
|
left: 50%;
|
||
|
|
@include transform;
|
||
|
|
max-width: 600px;
|
||
|
|
width: calc(100% - 120px);
|
||
|
|
max-height: calc(100% - 150px);
|
||
|
|
padding: 70px 50px;
|
||
|
|
background: rgba(0, 0, 0, .5);
|
||
|
|
backdrop-filter: 5px;
|
||
|
|
@include transition;
|
||
|
|
opacity: 0.3;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
&_close {
|
||
|
|
position: absolute;
|
||
|
|
top: 30px;
|
||
|
|
right: 30px;
|
||
|
|
cursor: pointer;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
svg path {
|
||
|
|
fill: red
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
svg {
|
||
|
|
@include ImgCon;
|
||
|
|
@include transition;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&_video {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
video {
|
||
|
|
@include ImgCon;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|