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

Improved focus outlines when using keyboard navigation

Browse Source
This commit is contained in:
squidfunk 2021-04-18 18:42:02 +02:00
parent 4247e3b440
commit 564c1dad43
14 changed files with 27 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
material/assets/stylesheets/main.7c7fd32f.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.7c7fd32f.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/main.dcbf0b87.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.dcbf0b87.min.css.map
View File

File diff suppressed because one or more lines are too long

2
material/base.html
View File

@ -39,7 +39,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.dcbf0b87.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.7c7fd32f.min.css' | url }}">
{% if config.theme.palette %}
{% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.ef6f36e2.min.css' | url }}">

6
src/assets/stylesheets/main/_typeset.scss
View File

@ -164,6 +164,12 @@ kbd {
&:hover {
color: var(--md-accent-fg-color);
}
// Text link on keyboard focus
&.focus-visible {
outline-color: var(--md-accent-fg-color);
outline-offset: px2rem(4px);
}
}
// Code block

1
src/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss
View File

@ -92,6 +92,7 @@
// Tab label on focus
&:focus + label {
outline-style: auto;
outline-color: var(--md-accent-fg-color);
}
// Hide outline for pointer devices

4
src/assets/stylesheets/main/layout/_base.scss
View File

@ -140,9 +140,10 @@ body {
display: block;
}
// Option label on focus
// Show outline for pointer devices
&.focus-visible + label {
outline-style: auto;
outline-color: var(--md-accent-fg-color);
}
}
@ -158,6 +159,7 @@ body {
font-size: px2rem(12.8px);
background-color: var(--md-default-fg-color);
border-radius: px2rem(2px);
outline-color: var(--md-accent-fg-color);
transform: translateY(px2rem(8px));
opacity: 0;

2
src/assets/stylesheets/main/layout/_clipboard.scss
View File

@ -41,6 +41,8 @@
height: px2em(24px);
color: var(--md-default-fg-color--lightest);
border-radius: px2rem(2px);
outline-color: var(--md-accent-fg-color);
outline-offset: px2rem(2px);
cursor: pointer;
transition: color 250ms;

1
src/assets/stylesheets/main/layout/_footer.scss
View File

@ -45,6 +45,7 @@
display: flex;
padding-top: px2rem(28px);
padding-bottom: px2rem(8px);
outline-color: var(--md-accent-fg-color);
transition: opacity 250ms;
// [tablet +]: Adjust width to 50/50

6
src/assets/stylesheets/main/layout/_header.scss
View File

@ -63,11 +63,6 @@
box-shadow 250ms;
}
// Link or button on focus
.focus-visible {
outline-color: currentColor;
}
// Header wrapper
&__inner {
display: flex;
@ -83,6 +78,7 @@
padding: px2rem(8px);
color: currentColor;
vertical-align: middle;
outline-color: var(--md-accent-fg-color);
cursor: pointer;
transition: opacity 250ms;

6
src/assets/stylesheets/main/layout/_nav.scss
View File

@ -125,6 +125,12 @@
color: var(--md-accent-fg-color);
}
// Navigation link on keyboard focus
&.focus-visible {
outline-color: var(--md-accent-fg-color);
outline-offset: px2rem(4px);
}
// Navigation link to table of contents
.md-nav--primary &[for="__toc"] {
display: none;

1
src/assets/stylesheets/main/layout/_source.scss
View File

@ -72,6 +72,7 @@
font-size: px2rem(13px);
line-height: 1.2;
white-space: nowrap;
outline-color: var(--md-accent-fg-color);
// Hack: promote to own layer to reduce jitter
backface-visibility: hidden;
transition: opacity 250ms;

2
src/assets/stylesheets/main/layout/_tabs.scss
View File

@ -76,6 +76,8 @@
display: block;
margin-top: px2rem(16px);
font-size: px2rem(14px);
outline-color: var(--md-accent-fg-color);
outline-offset: px2rem(4px);
// Hack: save a repaint when tabs are appearing on scrolling up
backface-visibility: hidden;
opacity: 0.7;