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

Fixed focus/hover hierarchy of version selector

Browse Source
This commit is contained in:
squidfunk 2021-04-11 13:07:39 +02:00
parent 2c973e1755
commit 8015c3991e
13 changed files with 49 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
material/assets/javascripts/bundle.56defda5.min.js → material/assets/javascripts/bundle.4ea5477f.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
material/assets/javascripts/bundle.56defda5.min.js.map → material/assets/javascripts/bundle.4ea5477f.min.js.map
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -39,7 +39,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.9299cb39.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.ea5871b0.min.css' | url }}">
{% if config.theme.palette %}
{% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.ef6f36e2.min.css' | url }}">
@ -223,7 +223,7 @@
</script>
{% endblock %}
{% block scripts %}
<script src="{{ 'assets/javascripts/bundle.56defda5.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.4ea5477f.min.js' | url }}"></script>
{% for path in config["extra_javascript"] %}
<script src="{{ path | url }}"></script>
{% endfor %}

11
material/partials/header.html
View File

@ -27,9 +27,10 @@
</div>
</div>
</div>
{% if not config.theme.palette is mapping %}
{% set palette = config.theme.palette %}
{% if palette and not palette is mapping %}
<form class="md-header__option" data-md-component="palette">
{% for option in config.theme.palette %}
{% for option in palette %}
{% set primary = option.primary | replace(" ", "-") | lower %}
{% set accent = option.accent | replace(" ", "-") | lower %}
<input class="md-option" data-md-color-media="{{ option.media }}" data-md-color-scheme="{{ option.scheme }}" data-md-color-primary="{{ primary }}" data-md-color-accent="{{ accent }}" type="radio" name="__palette" id="__palette_{{ loop.index }}">
@ -45,14 +46,14 @@
<div class="md-header__option">
<div class="md-select">
{% set icon = config.theme.icon.alternate or "material/translate" %}
<span class="md-header__button md-icon">
<button class="md-header__button md-icon">
{% include ".icons/" ~ icon ~ ".svg" %}
</span>
</button>
<div class="md-select__inner">
<ul class="md-select__list">
{% for alt in config.extra.alternate %}
<li class="md-select__item">
<a href="{{ alt.link | url }}" class="md-select__link">
<a href="{{ alt.link | url }}" hreflang="{{ alt.lang }}" class="md-select__link">
{{ alt.name }}
</a>
</li>

4
src/assets/javascripts/templates/version/index.tsx
View File

@ -85,9 +85,9 @@ export function renderVersionSelector(versions: Version[]): HTMLElement {
/* Render version selector */
return (
<div class="md-version">
<span class="md-version__current">
<button class="md-version__current">
{active.title}
</span>
</button>
<ul class="md-version__list">
{versions.map(renderVersion)}
</ul>

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

@ -578,7 +578,7 @@
padding: px2em(12px) px2rem(16px);
color: var(--md-typeset-a-color);
font-size: px2rem(12.8px);
outline: 0;
outline: none;
cursor: pointer;
transition:
color 250ms,

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

@ -99,6 +99,7 @@
width: 100%;
padding-right: px2rem(24px);
padding-left: px2rem(12px);
outline: none;
cursor: pointer;
transition:
background-color 250ms,
@ -114,6 +115,11 @@
// Link on focus/hover
&:focus,
&:hover {
color: var(--md-accent-fg-color);
}
// Link on focus
&:focus {
background-color: var(--md-default-fg-color--lightest);
}
}

19
src/assets/stylesheets/main/layout/_version.scss
View File

@ -47,6 +47,9 @@
top: px2rem(1px);
margin-right: px2rem(8px);
margin-left: px2rem(28px);
color: inherit;
outline: none;
cursor: pointer;
// Adjust for right-to-left languages
[dir="rtl"] & {
@ -78,7 +81,7 @@
position: absolute;
top: px2rem(3px);
z-index: 1;
max-height: px2rem(36px);
max-height: 0;
margin: px2rem(4px) px2rem(16px);
padding: 0;
overflow: auto;
@ -95,13 +98,13 @@
opacity 250ms 250ms;
scroll-snap-type: y mandatory;
// List on focus/hover
&:focus-within,
&:hover {
// Version selection list on parent focus/hover
.md-version:focus-within &,
.md-version:hover & {
max-height: px2rem(200px);
opacity: 1;
transition:
max-height 250ms,
max-height 0ms,
opacity 250ms;
}
}
@ -118,6 +121,7 @@
padding-right: px2rem(24px);
padding-left: px2rem(12px);
white-space: nowrap;
outline: none;
cursor: pointer;
transition:
color 250ms,
@ -133,6 +137,11 @@
// Link on focus/hover
&:focus,
&:hover {
color: var(--md-accent-fg-color);
}
// Link on focus
&:focus {
background-color: var(--md-default-fg-color--lightest);
}
}

15
src/partials/header.html
View File

@ -64,9 +64,10 @@
</div>
<!-- Color palette -->
{% if not config.theme.palette is mapping %}
{% set palette = config.theme.palette %}
{% if palette and not palette is mapping %}
<form class="md-header__option" data-md-component="palette">
{% for option in config.theme.palette %}
{% for option in palette %}
{% set primary = option.primary | replace(" ", "-") | lower %}
{% set accent = option.accent | replace(" ", "-") | lower %}
<input
@ -98,14 +99,18 @@
<div class="md-header__option"></form>
<div class="md-select">
{% set icon = config.theme.icon.alternate or "material/translate" %}
<span class="md-header__button md-icon">
<button class="md-header__button md-icon">
{% include ".icons/" ~ icon ~ ".svg" %}
</span>
</button>
<div class="md-select__inner">
<ul class="md-select__list">
{% for alt in config.extra.alternate %}
<li class="md-select__item">
<a href="{{ alt.link | url }}" class="md-select__link">
<a
href="{{ alt.link | url }}"
hreflang="{{ alt.lang }}"
class="md-select__link"
>
{{ alt.name }}
</a>
</li>