Connected/Connected.Components
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add animation styles and transitions to drop down menu and backdrop

Browse Source
This commit is contained in:
Matija Koželj 2023-03-15 10:25:00 +01:00
parent c0b1c950a6
commit 35d1da8579
1 changed files with 56 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/Connected.Components/Styles/components/_dropdown.scss
View File

@ -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 {