Added active state for parent section in mobile navigation

This commit is contained in:
squidfunk 2020-02-26 09:33:24 +01:00
parent 63a309bd72
commit 2a63915a3e
6 changed files with 37 additions and 18 deletions

View File

@ -1,8 +1,8 @@
{
"assets/javascripts/bundle.js": "assets/javascripts/bundle.379e8f0f.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.379e8f0f.min.js.map",
"assets/javascripts/bundle.js": "assets/javascripts/bundle.a7251a2a.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.a7251a2a.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
"assets/stylesheets/main.scss": "assets/stylesheets/main.1e2c5b46.min.css",
"assets/stylesheets/main.scss": "assets/stylesheets/main.949e77d3.min.css",
"assets/stylesheets/palette.scss": "assets/stylesheets/palette.f5f04e6f.min.css"
}

View File

@ -43,7 +43,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.1e2c5b46.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.949e77d3.min.css' | url }}">
{% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.f5f04e6f.min.css' | url }}">
{% endif %}
@ -200,7 +200,7 @@
{% endblock %}
</div>
{% block scripts %}
<script src="{{ 'assets/javascripts/bundle.379e8f0f.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.a7251a2a.min.js' | url }}"></script>
{%- set translations = {} -%}
{%- for key in [
"clipboard.copy",

View File

@ -269,6 +269,11 @@
padding-left: px2rem(48px);
}
}
// Active parent item
&--active > .md-nav__link {
color: var(--md-primary-fg-color);
}
}
// Link inside item
@ -427,23 +432,37 @@
}
}
// [screen +]: Tree-like navigation
@include break-from-device(screen) {
// Animation is only possible if JavaScript is available, as the max-height
// property must be calculated before transitioning
transition: max-height 250ms cubic-bezier(0.86, 0, 0.07, 1);
// [tablet landscape +]: Tree-like navigation
@include break-from-device(tablet landscape) {
// List title
.md-nav__title {
&--secondary .md-nav__title {
// Snap to site and table of contents title
&[for="__drawer"],
// Snap to table of contents title
&[for="__toc"] {
scroll-snap-align: start;
}
// Hide icons
// Hide icon
.md-nav__icon {
display: none;
}
}
}
// [screen +]: Tree-like navigation
@include break-from-device(screen) {
transition: max-height 250ms cubic-bezier(0.86, 0, 0.07, 1);
// List title
&--primary .md-nav__title {
// Snap to site title
&[for="__drawer"] {
scroll-snap-align: start;
}
// Hide icon
.md-nav__icon {
display: none;
}