mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-02-09 11:04:23 +01:00
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:
parent
dd19323280
commit
15987abe0a
5 changed files with 74 additions and 124 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue