style(Nav): improve Nav transition for open/close (#652)

* Revert "Animated sidebar (#649)"

This reverts commit dd19323280.

* in progress

* style(Nav): improve transition for Nav
This commit is contained in:
Danny Avila 2023-07-15 10:43:15 -04:00 committed by GitHub
parent dd19323280
commit 15987abe0a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 74 additions and 124 deletions

View file

@ -3,11 +3,6 @@
visibility: visible;
}
.nav-open-button {
display: block;
position: absolute;
}
.nav-close-button {
margin-left: 8px;
}
@ -15,11 +10,9 @@
.nav {
position: fixed;
z-index: 40;
left: calc(-100%);
top: 0;
width: calc(100% - 60px);
max-width: 260px;
/* max-width: 260px; */
bottom: 0;
opacity: 0;
@ -27,20 +20,10 @@
.nav.active {
position: relative;
animation: nav-open 1000ms ease-in-out forwards;
left: 0;
opacity: 1;
}
@keyframes nav-open {
0% {
width: 0%;
}
100%{
width: 100%;
}
}
.nav-mask.active {
opacity: 1;
pointer-events: auto;
@ -48,9 +31,9 @@
@media (max-width: 767px) {
.nav {
width: calc(100% - 60px);
width: calc(100% - 10px) ;
transition: all 0.2s;
}
.nav-mask {
position: fixed;
z-index: 35;
@ -62,9 +45,14 @@
padding-left: 420px;
padding-top: 12px;
opacity: 0;
transition: all 0.5s;
pointer-events: none;
}
.nav-open-button {
opacity: 0;
}
.nav-mask.active {
opacity: 1;
pointer-events: auto;
@ -72,7 +60,6 @@
.nav.active {
position: fixed;
animation: none;
}
}