agatha/maubot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add animations to sidebar toggling

Browse Source
This commit is contained in:
Tulir Asokan 2018-11-11 20:21:51 +02:00
parent 91cdfc9378
commit 5c5b3568cd
3 changed files with 6 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
maubot/management/frontend/src/style/pages/dashboard-grid.css
View File

@ -9,13 +9,6 @@
@media screen and (max-width: 35rem) { @media screen and (max-width: 35rem) {
.dashboard { .dashboard {
grid-template:
[row1-start] "topbar" 3.5rem [row1-end]
[row2-start] "main" auto [row2-end]
/ auto;
}
.dashboard.sidebar-open {
grid-template: grid-template:
[row1-start] "title topbar" 3.5rem [row1-end] [row1-start] "title topbar" 3.5rem [row1-end]
[row2-start] "user main" 2.5rem [row2-end] [row2-start] "user main" 2.5rem [row2-end]

7
maubot/management/frontend/src/style/pages/dashboard.sass
View File

@ -63,9 +63,10 @@
@import topbar @import topbar
@media screen and (max-width: 35rem) @media screen and (max-width: 35rem)
&:not(.sidebar-open) &:not(.sidebar-open) > *
> nav.sidebar, > a.title, > div.user transform: translateX(-15rem)
display: none !important > *
transition: transform 0.4s
> main.view > main.view
grid-area: main grid-area: main

3
maubot/management/frontend/src/style/pages/topbar.sass
View File

@ -47,7 +47,7 @@
transform-origin: 4px 0 transform-origin: 4px 0
//transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease transition: transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease
&:nth-of-type(1) &:nth-of-type(1)
transform-origin: 0 0 transform-origin: 0 0
@ -56,6 +56,7 @@
transform-origin: 0 100% transform-origin: 0 100%
transform: translateY(2px) transform: translateY(2px)
transition: transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0)
&.active &.active
transform: translateX(1px) translateY(4px) transform: translateX(1px) translateY(4px)