74 lines
1.5 KiB
SCSS
74 lines
1.5 KiB
SCSS
|
|
.drawer {
|
|
position: relative;
|
|
width: 100%;
|
|
max-height: 0;
|
|
background: $drawer-background-color;
|
|
@include box-shadow(
|
|
inset $drawer-inner-shadow-x-offset #{-$drawer-inner-shadow-y-offset} $drawer-inner-shadow-blur $drawer-inner-shadow-color,
|
|
inset $drawer-inner-shadow-x-offset $drawer-inner-shadow-y-offset $drawer-inner-shadow-blur $drawer-inner-shadow-color);
|
|
;
|
|
overflow: hidden;
|
|
@include transition-duration(.3s);
|
|
&.active {
|
|
height: auto;
|
|
max-height: 800px;
|
|
@include transition-duration(.5s);
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -999999;
|
|
display: none;
|
|
background: rgb(0, 0, 0);
|
|
background: $modal-overlay-color;
|
|
> .content {
|
|
min-width: 50%;
|
|
max-width: 85%;
|
|
min-height: 50%;
|
|
max-height: 95%;
|
|
position: relative;
|
|
top: 5%;
|
|
margin: 0 auto;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
background: $modal-window-color;
|
|
z-index: 2;
|
|
overflow: auto;
|
|
@include respond(portrait-tablets) {
|
|
width: 90%;
|
|
min-height: 80%;
|
|
max-height: 95%;
|
|
top: 10%;
|
|
}
|
|
@include respond(all-phones) {
|
|
width: 92.5%;
|
|
min-height: 92.5%;
|
|
max-height: 95;
|
|
top: 3.75%;
|
|
}
|
|
> .close {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
&, > .content {
|
|
@include opacity(0);
|
|
@include transition-duration(.1s);
|
|
}
|
|
&.active {
|
|
display: block;
|
|
z-index: 999999;
|
|
&, > .content {
|
|
@include opacity(1);
|
|
}
|
|
}
|
|
}
|