Improved accessibility of content tabs

This commit is contained in:
squidfunk 2020-08-16 15:40:58 +02:00
parent 4e8fa6e201
commit 972fb76843
7 changed files with 18 additions and 15 deletions

View File

@ -5,8 +5,8 @@
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.d1f5a259.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.fae956e7.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.fae956e7.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.78c1d7f2.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.78c1d7f2.min.css.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.062add1f.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.062add1f.min.css.map",
"assets/stylesheets/overrides.css": "assets/stylesheets/overrides.011ebae6.min.css",
"assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.011ebae6.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.2c2767bb.min.css",

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -41,7 +41,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.78c1d7f2.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.062add1f.min.css' | url }}">
{% if palette.scheme or palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.2c2767bb.min.css' | url }}">
{% endif %}

View File

@ -154,7 +154,7 @@ kbd {
transition: color 125ms;
}
// Focused or hover links
// Focused or hovered links
&:focus,
&:hover {
color: var(--md-accent-fg-color);

View File

@ -65,18 +65,26 @@
// Hide radio buttons
> input {
display: none;
position: absolute;
opacity: 0;
// Active tab label
&:checked + label {
color: var(--md-accent-fg-color);
border-color: var(--md-accent-fg-color);
color: var(--md-primary-fg-color);
border-color: var(--md-primary-fg-color);
// Show tabbed block content
& + .tabbed-content {
display: block;
}
}
// Focused or hovered tab label
&:focus + label,
&:hover + label {
color: var(--md-accent-fg-color);
border-color: var(--md-accent-fg-color);
}
}
// Tab label
@ -90,11 +98,6 @@
border-bottom: px2rem(2px) solid transparent;
cursor: pointer;
transition: color 250ms;
// Hovered tab label
html &:hover {
color: var(--md-accent-fg-color);
}
}
}
}