Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: better sidebar transition #556

Closed
wants to merge 4 commits into from
Closed

feat: better sidebar transition #556

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
461af2d
style: better sidebar transition
ulivz Jun 7, 2018
66e1cf9
chore: apply backface-visibility
ulivz Jun 7, 2018
bc2129c
chore: tweaks
ulivz Jun 7, 2018
083e5b1
chore: use transform3d and aviod fixed issue at mobile side
ulivz Jun 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions lib/default-theme/styles/mobile.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,20 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
@media (max-width: $MQMobile)
.sidebar
top 0
padding-top $navbarHeight
transform translateX(-100%)
transition transform .2s ease
bottom unset
height 100%
padding-top .5rem
box-shadow 0 0 10px rgba(0,0,0,0.2)
transition transform 0.4s cubic-bezier(0.4, 0, 0, 1)
transform translate3d(-105%, 0, 0)
backface-visibility hidden

.page
padding-left 0
.theme-container
&.sidebar-open
.sidebar
transform translateX(0)
transform translate3d(0, 0, 0)
&.no-navbar
.sidebar
padding-top: 0
Expand Down
12 changes: 7 additions & 5 deletions lib/default-theme/styles/theme.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ body

.navbar
position fixed
z-index 20
z-index 8
top 0
left 0
right 0
Expand All @@ -38,7 +38,8 @@ body
left 0
width 100vw
height 100vh
display none
transition visibility .3s, background-color .3s
visibility hidden

.sidebar
font-size 15px
Expand Down Expand Up @@ -151,8 +152,8 @@ hr
table
border-collapse collapse
margin 1rem 0
display: block
overflow-x: auto
display block
overflow-x auto

tr
border-top 1px solid #dfe2e5
Expand All @@ -169,7 +170,8 @@ th, td
.theme-container
&.sidebar-open
.sidebar-mask
display: block
visibility visible
// background-color rgba(0, 0, 0, .75)
&.no-navbar
.content:not(.custom) > h1, h2, h3, h4, h5, h6
margin-top 1.5rem
Expand Down