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

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

@ -108,6 +108,7 @@
text-overflow: ellipsis;
cursor: pointer;
overflow: hidden;
scroll-snap-align: start;
// Icon
&::after {
@ -218,6 +219,8 @@
~ .md-nav__list {
background-color: $md-color-white;
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
& > .md-nav__item:first-child {
@ -268,7 +271,6 @@
// List of items
.md-nav__list {
flex: 1;
overflow-y: auto;
}
// List item
@ -469,20 +471,19 @@
// property must be calculated before transitioning
transition: max-height 0.25s cubic-bezier(0.86, 0, 0.07, 1);
// Snap to title
.md-nav__title--site {
scroll-snap-align: start;
}
// Hide nested navigation by default
.md-nav__toggle ~ & {
max-height: 0;
overflow: hidden;
// Just hide links for accessibility if JavaScript is not available
.no-js & {
display: none;
}
}
// Expand nested navigation, if toggle is checked
// Show nested navigation, if toggle is checked
.md-nav__toggle:checked ~ & {
max-height: 100%;
display: block;
}
// 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%;
margin: 0 px2rem(4px);
overflow-y: auto;
scroll-snap-type: y mandatory;
// Hack: putting the scroll wrapper on the GPU massively reduces jitter
// when locking the sidebars into place
backface-visibility: hidden;
@ -155,6 +156,7 @@ $md-toggle__drawer--checked:
bottom: 0;
left: 0;
margin: 0;
scroll-snap-type: none;
}
}