Added smooth transition to sidebar navigation

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

View File

@ -385,7 +385,7 @@
background-color: transparent;
}
// Toggle for nested navigation
// Hide nested navigation
&__toggle ~ & {
display: flex;
opacity: 0;
@ -522,14 +522,32 @@
}
}
// Hide toggle for nested navigation
// Hide nested navigation
&__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
&__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