mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Fixed navigation outlines on focus
This commit is contained in:
squidfunk
parent
9dd7511b65
commit
521f7272ee
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
material/templates/assets/stylesheets/main.82baac91.min.css
vendored
Normal file
1
material/templates/assets/stylesheets/main.82baac91.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -44,7 +44,7 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.821ccc56.min.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.82baac91.min.css' | url }}">
|
||||
{% if config.theme.palette %}
|
||||
{% set palette = config.theme.palette %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a5377069.min.css' | url }}">
|
||||
|
||||
@ -48,25 +48,26 @@
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if "navigation.sections" in features and level == 1 + (
|
||||
"navigation.tabs" in features
|
||||
) %}
|
||||
{% set tabs = "navigation.tabs" in features %}
|
||||
{% set sections = "navigation.sections" in features %}
|
||||
{% if tabs and level == 1 or sections and tabs >= level - 1 %}
|
||||
{% set class = class ~ " md-nav__item--section" %}
|
||||
{% set is_section = true %}
|
||||
{% elif not nav_item.active and "navigation.prune" in features %}
|
||||
{% set class = class ~ " md-nav__item--pruned" %}
|
||||
{% set prune = true %}
|
||||
{% set is_pruned = true %}
|
||||
{% endif %}
|
||||
<li class="{{ class }} md-nav__item--nested">
|
||||
{% if not prune %}
|
||||
{% set expanded = "navigation.expand" in features %}
|
||||
{% set active = nav_item.active or expanded %}
|
||||
{% if not is_pruned %}
|
||||
{% set checked = "checked" if nav_item.active %}
|
||||
{% if expanded and not checked %}
|
||||
{% set is_expanded = "navigation.expand" in features %}
|
||||
{% if is_expanded and not checked %}
|
||||
{% set indeterminate = "md-toggle--indeterminate" %}
|
||||
{% endif %}
|
||||
<input class="md-nav__toggle md-toggle {{ indeterminate }}" type="checkbox" id="{{ path }}" {{ checked }}>
|
||||
{% if not indexes %}
|
||||
<label class="md-nav__link" for="{{ path }}" id="{{ path }}_label" tabindex="0">
|
||||
{% set tabindex = "0" if not is_section %}
|
||||
<label class="md-nav__link" for="{{ path }}" id="{{ path }}_label" tabindex="{{ tabindex }}">
|
||||
{{ render_content(nav_item) }}
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
</label>
|
||||
@ -78,7 +79,8 @@
|
||||
{{ render_content(index, nav_item) }}
|
||||
</a>
|
||||
{% if nav_item.children | length > 1 %}
|
||||
<label class="md-nav__link {{ class }}" for="{{ path }}" id="{{ path }}_label" tabindex="0">
|
||||
{% set tabindex = "0" if not is_section %}
|
||||
<label class="md-nav__link {{ class }}" for="{{ path }}" id="{{ path }}_label" tabindex="{{ tabindex }}">
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
</label>
|
||||
{% endif %}
|
||||
|
||||
@ -80,16 +80,6 @@
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Navigation item
|
||||
&__item {
|
||||
padding: 0 px2rem(12px);
|
||||
|
||||
// Navigation item on level 2
|
||||
& & {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation link
|
||||
&__link {
|
||||
display: flex;
|
||||
@ -122,9 +112,9 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Always align navigation icons to the right
|
||||
// Always align navigation icons to the end
|
||||
.md-icon:last-child {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
// Navigation link icon
|
||||
@ -289,7 +279,6 @@
|
||||
|
||||
// Navigation item
|
||||
.md-nav__item {
|
||||
padding: 0;
|
||||
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
|
||||
|
||||
// Navigation link in active navigation
|
||||
@ -474,51 +463,89 @@
|
||||
|
||||
// [tablet landscape +]: Tree-like table of contents
|
||||
@include break-from-device(tablet landscape) {
|
||||
margin-bottom: px2rem(-8px);
|
||||
|
||||
// Navigation title
|
||||
&--secondary &__title {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
// Hack: because of the hack that we need to make .md-ellipsis work in
|
||||
// Safari, we need to set `z-index` here as - see https://bit.ly/3s5M2jm
|
||||
z-index: 1;
|
||||
background: var(--md-default-bg-color);
|
||||
box-shadow: 0 0 px2rem(8px) px2rem(8px) var(--md-default-bg-color);
|
||||
// Table of contents
|
||||
&--secondary {
|
||||
|
||||
// Adjust snapping behavior
|
||||
&[for="__toc"] {
|
||||
scroll-snap-align: start;
|
||||
// Navigation title
|
||||
.md-nav__title {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
// Hack: because of the hack that we need to make .md-ellipsis work in
|
||||
// Safari, we need to set `z-index` here as - see https://bit.ly/3s5M2jm
|
||||
z-index: 1;
|
||||
background: var(--md-default-bg-color);
|
||||
box-shadow: 0 0 px2rem(8px) px2rem(8px) var(--md-default-bg-color);
|
||||
|
||||
// Adjust snapping behavior
|
||||
&[for="__toc"] {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
// Hide navigation icon
|
||||
.md-nav__icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide navigation icon
|
||||
.md-nav__icon {
|
||||
display: none;
|
||||
// Adjust spacing for navigation list - same reason as below
|
||||
.md-nav__list {
|
||||
padding-inline-start: px2rem(12px);
|
||||
padding-bottom: px2rem(8px);
|
||||
}
|
||||
|
||||
// Adjust spacing for navigation link - before this change, we set spacing
|
||||
// on the left and right of a navigation item, but this led to the problem
|
||||
// of cropped focus outlines, because we must set `overflow: hidden` on
|
||||
// the navigation list for smooth expand and collapse transitions.
|
||||
.md-nav__item > .md-nav__link {
|
||||
margin-inline-end: px2rem(8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// [screen +]: Tree-like navigation
|
||||
@include break-from-device(screen) {
|
||||
margin-bottom: px2rem(-8px);
|
||||
transition: max-height 250ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
|
||||
// Navigation title
|
||||
&--primary &__title {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
// Hack: because of the hack that we need to make .md-ellipsis work in
|
||||
// Safari, we need to set `z-index` here as - see https://bit.ly/3s5M2jm
|
||||
z-index: 1;
|
||||
background: var(--md-default-bg-color);
|
||||
box-shadow: 0 0 px2rem(8px) px2rem(8px) var(--md-default-bg-color);
|
||||
// Primary navigation
|
||||
&--primary {
|
||||
|
||||
// Adjust snapping behavior
|
||||
&[for="__drawer"] {
|
||||
scroll-snap-align: start;
|
||||
// Navigation title
|
||||
.md-nav__title {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
// Hack: because of the hack that we need to make .md-ellipsis work in
|
||||
// Safari, we need to set `z-index` here as - see https://bit.ly/3s5M2jm
|
||||
z-index: 1;
|
||||
background: var(--md-default-bg-color);
|
||||
box-shadow: 0 0 px2rem(8px) px2rem(8px) var(--md-default-bg-color);
|
||||
|
||||
// Adjust snapping behavior
|
||||
&[for="__drawer"] {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
// Hide navigation icon
|
||||
.md-nav__icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide navigation icon
|
||||
.md-nav__icon {
|
||||
display: none;
|
||||
// Adjust spacing for navigation list - same reason as below
|
||||
.md-nav__list {
|
||||
padding-inline-start: px2rem(12px);
|
||||
padding-bottom: px2rem(8px);
|
||||
}
|
||||
|
||||
// Adjust spacing for navigation link - before this change, we set spacing
|
||||
// on the left and right of a navigation item, but this led to the problem
|
||||
// of cropped focus outlines, because we must set `overflow: hidden` on
|
||||
// the navigation list for smooth expand and collapse transitions.
|
||||
.md-nav__item > .md-nav__link {
|
||||
margin-inline-end: px2rem(8px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -588,6 +615,7 @@
|
||||
// Navigation
|
||||
> .md-nav {
|
||||
display: block;
|
||||
margin-inline-start: px2rem(-12px);
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
|
||||
@ -641,8 +669,7 @@
|
||||
// Modifier for when navigation tabs are rendered
|
||||
&--lifted {
|
||||
|
||||
// Hide nested level 0 navigation items and site title
|
||||
> .md-nav__list > .md-nav__item--nested,
|
||||
// Hide site title
|
||||
> .md-nav__title {
|
||||
display: none;
|
||||
}
|
||||
@ -654,16 +681,13 @@
|
||||
// Active parent navigation item
|
||||
&--active {
|
||||
display: block;
|
||||
padding: 0;
|
||||
|
||||
// Show navigation link as title
|
||||
> .md-nav__link {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
padding: 0 px2rem(12px);
|
||||
margin-top: 0;
|
||||
font-weight: 700;
|
||||
background: var(--md-default-bg-color);
|
||||
box-shadow: 0 0 px2rem(8px) px2rem(8px) var(--md-default-bg-color);
|
||||
|
||||
@ -671,12 +695,17 @@
|
||||
&:not(.md-nav__container) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Hide naviation icon
|
||||
.md-nav__icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust spacing for navigation section
|
||||
&.md-nav__item--section {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust spacing for nested navigation
|
||||
> .md-nav {
|
||||
margin-inline-start: px2rem(-12px);
|
||||
}
|
||||
|
||||
// Make labels discernable from links
|
||||
@ -686,14 +715,11 @@
|
||||
}
|
||||
|
||||
// Hack: Always show active navigation tab on breakpoint screen, despite
|
||||
// of checkbox being checked or not. Fixes #1655.
|
||||
// of checkbox being checked or not - see https://t.ly/Qc311
|
||||
.md-nav[data-md-level="1"] {
|
||||
display: block;
|
||||
|
||||
// Adjust spacing for level 1 navigation items
|
||||
> .md-nav__list > .md-nav__item {
|
||||
padding-inline-end: px2rem(12px);
|
||||
}
|
||||
grid-template-rows: 1fr;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -101,26 +101,26 @@
|
||||
{% endif %}
|
||||
|
||||
<!-- Determine whether to render item as a section -->
|
||||
{% if "navigation.sections" in features and level == 1 + (
|
||||
"navigation.tabs" in features
|
||||
) %}
|
||||
{% set tabs = "navigation.tabs" in features %}
|
||||
{% set sections = "navigation.sections" in features %}
|
||||
{% if tabs and level == 1 or sections and tabs >= level - 1 %}
|
||||
{% set class = class ~ " md-nav__item--section" %}
|
||||
{% set is_section = true %}
|
||||
|
||||
<!-- Determine whether to prune inactive item -->
|
||||
{% elif not nav_item.active and "navigation.prune" in features %}
|
||||
{% set class = class ~ " md-nav__item--pruned" %}
|
||||
{% set prune = true %}
|
||||
{% set is_pruned = true %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Nested navigation item -->
|
||||
<li class="{{ class }} md-nav__item--nested">
|
||||
{% if not prune %}
|
||||
{% set expanded = "navigation.expand" in features %}
|
||||
{% set active = nav_item.active or expanded %}
|
||||
{% if not is_pruned %}
|
||||
{% set checked = "checked" if nav_item.active %}
|
||||
|
||||
<!-- Determine checked and indeterminate state -->
|
||||
{% set checked = "checked" if nav_item.active %}
|
||||
{% if expanded and not checked %}
|
||||
{% set is_expanded = "navigation.expand" in features %}
|
||||
{% if is_expanded and not checked %}
|
||||
{% set indeterminate = "md-toggle--indeterminate" %}
|
||||
{% endif %}
|
||||
|
||||
@ -134,11 +134,12 @@
|
||||
|
||||
<!-- Toggle to expand nested items -->
|
||||
{% if not indexes %}
|
||||
{% set tabindex = "0" if not is_section %}
|
||||
<label
|
||||
class="md-nav__link"
|
||||
for="{{ path }}"
|
||||
id="{{ path }}_label"
|
||||
tabindex="0"
|
||||
tabindex="{{ tabindex }}"
|
||||
>
|
||||
{{ render_content(nav_item) }}
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
@ -158,11 +159,12 @@
|
||||
|
||||
<!-- Only render toggle if there's at least one more page -->
|
||||
{% if nav_item.children | length > 1 %}
|
||||
{% set tabindex = "0" if not is_section %}
|
||||
<label
|
||||
class="md-nav__link {{ class }}"
|
||||
for="{{ path }}"
|
||||
id="{{ path }}_label"
|
||||
tabindex="0"
|
||||
tabindex="{{ tabindex }}"
|
||||
>
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
</label>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user