OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added scroll snap on navigation and table of contents

Browse Source
This commit is contained in:
squidfunk 2020-02-15 21:34:14 +01:00
parent 9fe7c62d77
commit 67406d26eb
2 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/assets/stylesheets/layout/_nav.scss
View File

@ -108,6 +108,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
scroll-snap-align: start;
// Icon // Icon
&::after { &::after {
@ -218,6 +219,8 @@
~ .md-nav__list { ~ .md-nav__list {
background-color: $md-color-white; background-color: $md-color-white;
box-shadow: 0 px2rem(1px) 0 $md-color-black--lightest inset; box-shadow: 0 px2rem(1px) 0 $md-color-black--lightest inset;
overflow-y: auto;
scroll-snap-type: y mandatory;
// Remove border for first list item // Remove border for first list item
& > .md-nav__item:first-child { & > .md-nav__item:first-child {
@ -268,7 +271,6 @@
// List of items // List of items
.md-nav__list { .md-nav__list {
flex: 1; flex: 1;
overflow-y: auto;
} }
// List item // List item
@ -469,20 +471,19 @@
// property must be calculated before transitioning // property must be calculated before transitioning
transition: max-height 0.25s cubic-bezier(0.86, 0, 0.07, 1); transition: max-height 0.25s cubic-bezier(0.86, 0, 0.07, 1);
// Hide nested navigation by default // Snap to title
.md-nav__toggle ~ & { .md-nav__title--site {
max-height: 0; scroll-snap-align: start;
overflow: hidden;
// Just hide links for accessibility if JavaScript is not available
.no-js & {
display: none;
}
} }
// Expand nested navigation, if toggle is checked // Hide nested navigation by default
.md-nav__toggle ~ & {
display: none;
}
// Show nested navigation, if toggle is checked
.md-nav__toggle:checked ~ & { .md-nav__toggle:checked ~ & {
max-height: 100%; display: block;
} }
// Hide titles for nested navigation // Hide titles for nested navigation

2
src/assets/stylesheets/layout/_sidebar.scss
View File

@ -140,6 +140,7 @@ $md-toggle__drawer--checked:
max-height: 100%; max-height: 100%;
margin: 0 px2rem(4px); margin: 0 px2rem(4px);
overflow-y: auto; overflow-y: auto;
scroll-snap-type: y mandatory;
// Hack: putting the scroll wrapper on the GPU massively reduces jitter // Hack: putting the scroll wrapper on the GPU massively reduces jitter
// when locking the sidebars into place // when locking the sidebars into place
backface-visibility: hidden; backface-visibility: hidden;
@ -155,6 +156,7 @@ $md-toggle__drawer--checked:
bottom: 0; bottom: 0;
left: 0; left: 0;
margin: 0; margin: 0;
scroll-snap-type: none;
} }
} }