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

Simplified reduced motion implementation for content tabs

Browse Source
This commit is contained in:
squidfunk 2021-12-19 11:54:27 +01:00
parent f3926bf444
commit 1f725cb388
7 changed files with 19 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
material/assets/javascripts/bundle.f881a9a8.min.js → material/assets/javascripts/bundle.adc5bf89.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
material/assets/javascripts/bundle.f881a9a8.min.js.map → material/assets/javascripts/bundle.adc5bf89.min.js.map
View File

File diff suppressed because one or more lines are too long

4
material/assets/stylesheets/main.3714f473.min.css → material/assets/stylesheets/main.052bca4c.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/main.3714f473.min.css.map → material/assets/stylesheets/main.052bca4c.min.css.map
View File

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -34,7 +34,7 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.3714f473.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/main.052bca4c.min.css' | url }}">
{% if config.theme.palette %} {% if config.theme.palette %}
{% set palette = config.theme.palette %} {% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.e6a45f82.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.e6a45f82.min.css' | url }}">
@ -213,7 +213,7 @@
</script> </script>
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<script src="{{ 'assets/javascripts/bundle.f881a9a8.min.js' | url }}"></script> <script src="{{ 'assets/javascripts/bundle.adc5bf89.min.js' | url }}"></script>
{% for path in config["extra_javascript"] %} {% for path in config["extra_javascript"] %}
<script src="{{ path | url }}"></script> <script src="{{ path | url }}"></script>
{% endfor %} {% endfor %}

13
src/assets/javascripts/components/content/tabs/index.ts
View File

@ -103,9 +103,6 @@ export function watchContentTabs(
export function mountContentTabs( export function mountContentTabs(
el: HTMLElement el: HTMLElement
): Observable<Component<ContentTabs>> { ): Observable<Component<ContentTabs>> {
const { matches: reduce } = matchMedia("(prefers-reduced-motion)")
/* Mount component on subscription */
const container = getElement(".tabbed-labels", el) const container = getElement(".tabbed-labels", el)
return defer(() => { return defer(() => {
const push$ = new Subject<ContentTabs>() const push$ = new Subject<ContentTabs>()
@ -119,13 +116,11 @@ export function mountContentTabs(
/* Handle emission */ /* Handle emission */
next([{ active }]) { next([{ active }]) {
const offset = getElementOffset(active) const offset = getElementOffset(active)
if (!reduce) { const { width } = getElementSize(active)
const { width } = getElementSize(active)
/* Set tab indicator offset and width */ /* Set tab indicator offset and width */
el.style.setProperty("--md-indicator-x", `${offset.x}px`) el.style.setProperty("--md-indicator-x", `${offset.x}px`)
el.style.setProperty("--md-indicator-width", `${width}px`) el.style.setProperty("--md-indicator-width", `${width}px`)
}
/* Smoothly scroll container */ /* Smoothly scroll container */
container.scrollTo({ container.scrollTo({

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

@ -88,7 +88,7 @@
} }
// [screen and no reduced motion]: Disable animation // [screen and no reduced motion]: Disable animation
@media screen and (prefers-reduced-motion: no-preference) { @media screen {
// [js]: Show animated tab indicator // [js]: Show animated tab indicator
.js & { .js & {
@ -109,6 +109,11 @@
transform 250ms; transform 250ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
content: ""; content: "";
// [reduced motion]: Disable animation
@media (prefers-reduced-motion) {
transition: none;
}
} }
} }
} }
@ -234,11 +239,6 @@
@media screen { @media screen {
color: var(--md-accent-fg-color); color: var(--md-accent-fg-color);
// [reduced motion]: Show border
@media (prefers-reduced-motion) {
border-color: var(--md-accent-fg-color);
}
// [no-js]: Show border (indicator is animated with JavaScript) // [no-js]: Show border (indicator is animated with JavaScript)
.no-js & { .no-js & {
border-color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color);