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 smooth transition to sidebar navigation

Browse Source
This commit is contained in:
squidfunk 2023-09-23 09:31:48 +02:00
parent 62bd70a6d2
commit 208ac1ac3a
No known key found for this signature in database
GPG Key ID: 5ED40BC4F9C436DF
1 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/templates/assets/stylesheets/main/components/_nav.scss
View File

@ -385,7 +385,7 @@
background-color: transparent; background-color: transparent;
} }
// Toggle for nested navigation // Hide nested navigation
&__toggle ~ & { &__toggle ~ & {
display: flex; display: flex;
opacity: 0; opacity: 0;
@ -522,14 +522,32 @@
} }
} }
// Hide toggle for nested navigation // Hide nested navigation
&__toggle ~ & { &__toggle ~ & {
display: none; display: grid;
grid-template-rows: 0fr;
visibility: collapse;
opacity: 0;
transition:
grid-template-rows 250ms cubic-bezier(0.86, 0, 0.07, 1),
opacity 250ms,
visibility 0ms 250ms;
// Navigation list
> .md-nav__list {
overflow: hidden;
}
} }
// Show nested navigation when toggle is active or indeterminate // Show nested navigation when toggle is active or indeterminate
&__toggle:is(:checked, :indeterminate) ~ & { &__toggle:is(:checked, :indeterminate) ~ & {
display: block; grid-template-rows: 1fr;
visibility: visible;
opacity: 1;
transition:
grid-template-rows 250ms cubic-bezier(0.86, 0, 0.07, 1),
opacity 150ms 100ms,
visibility 0ms;
} }
// Hide navigation title in nested navigation // Hide navigation title in nested navigation