Add animation styles and transitions to drop down menu and backdrop
This commit is contained in:
parent
c0b1c950a6
commit
35d1da8579
@ -1,30 +1,55 @@
|
|||||||
@use "../globals/" as *;
|
@use "../globals/" as *;
|
||||||
@use "../util/" as *;
|
@use "../util/" as *;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.drop-down {
|
.drop-down {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
min-width: 80%;
|
min-width: 80%;
|
||||||
width: 80%;
|
height: auto;
|
||||||
height: 0;
|
max-height: max-content;
|
||||||
max-height: 0;
|
width: 80%;
|
||||||
display: flex;
|
opacity: 0;
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
opacity: 0;
|
flex-direction: column;
|
||||||
pointer-events: none;
|
z-index: $dropdown-zindex;
|
||||||
z-index: $dropdown-zindex;
|
list-style: none;
|
||||||
list-style: none;
|
background-color: #fff;
|
||||||
background-color: #fff;
|
box-shadow: $base-box-shadow;
|
||||||
box-shadow: $base-box-shadow;
|
border-radius: $border-radius-lg;
|
||||||
border-radius: $border-radius-lg;
|
transition: all 0.3s ease-in-out;
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.drop-down.fade-in {
|
||||||
|
animation: fade-in 0.3s ease-in-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-down.fade-out {
|
||||||
|
animation: fade-out 0.3s ease-in-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-out {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@include breakpoint(sm) {
|
@include breakpoint(sm) {
|
||||||
.drop-down {
|
.drop-down {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -39,17 +64,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.backdrop {
|
.backdrop {
|
||||||
display: none;
|
z-index: $backdrop-zindex;
|
||||||
opacity: 0;
|
position: fixed;
|
||||||
z-index: $backdrop-zindex;
|
display: block;
|
||||||
position: fixed;
|
top: 0;
|
||||||
top: 0;
|
right: 0;
|
||||||
right: 0;
|
bottom: 0;
|
||||||
bottom: 0;
|
left: 0;
|
||||||
left: 0;
|
overflow: hidden;
|
||||||
overflow: hidden;
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
transition: all 0.3s ease-in-out;
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-header {
|
.dropdown-header {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user