feat(theme-classic): respect prefers-reduced-motion: reduce mediaquery, bump Infima to alpha.43 (#8674)

This commit is contained in:
Sébastien Lorber 2023-02-17 13:03:38 +01:00 committed by GitHub
parent d98edcd95c
commit f8edeb0816
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 14 additions and 7 deletions

View file

@ -35,7 +35,7 @@
"@mdx-js/react": "^1.6.22", "@mdx-js/react": "^1.6.22",
"clsx": "^1.2.1", "clsx": "^1.2.1",
"copy-text-to-clipboard": "^3.0.1", "copy-text-to-clipboard": "^3.0.1",
"infima": "0.2.0-alpha.42", "infima": "0.2.0-alpha.43",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"postcss": "^8.4.21", "postcss": "^8.4.21",

View file

@ -72,7 +72,7 @@
border-radius: var(--ifm-global-radius); border-radius: var(--ifm-global-radius);
padding: 0.4rem; padding: 0.4rem;
line-height: 0; line-height: 0;
transition: opacity 200ms ease-in-out; transition: opacity var(--ifm-transition-fast) ease-in-out;
opacity: 0; opacity: 0;
} }

View file

@ -24,7 +24,7 @@
opacity: inherit; opacity: inherit;
width: inherit; width: inherit;
height: inherit; height: inherit;
transition: all 0.15s ease; transition: all var(--ifm-transition-fast) ease;
} }
.copyButtonSuccessIcon { .copyButtonSuccessIcon {

View file

@ -65,6 +65,10 @@ function applyCollapsedStyle(el: HTMLElement, collapsed: boolean) {
el.style.height = collapsedStyles.height; el.style.height = collapsedStyles.height;
} }
function userPrefersReducedMotion(): boolean {
return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
}
/* /*
Lex111: Dynamic transition duration is used in Material design, this technique Lex111: Dynamic transition duration is used in Material design, this technique
is good for a large number of items. is good for a large number of items.
@ -72,6 +76,9 @@ https://material.io/archive/guidelines/motion/duration-easing.html#duration-easi
https://github.com/mui-org/material-ui/blob/e724d98eba018e55e1a684236a2037e24bcf050c/packages/material-ui/src/styles/createTransitions.js#L40-L43 https://github.com/mui-org/material-ui/blob/e724d98eba018e55e1a684236a2037e24bcf050c/packages/material-ui/src/styles/createTransitions.js#L40-L43
*/ */
function getAutoHeightDuration(height: number) { function getAutoHeightDuration(height: number) {
if (userPrefersReducedMotion()) {
return 0;
}
const constant = height / 36; const constant = height / 36;
return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10); return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
} }

View file

@ -9009,10 +9009,10 @@ infer-owner@^1.0.4:
resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467" resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A== integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
infima@0.2.0-alpha.42: infima@0.2.0-alpha.43:
version "0.2.0-alpha.42" version "0.2.0-alpha.43"
resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.42.tgz#f6e86a655ad40877c6b4d11b2ede681eb5470aa5" resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.43.tgz#f7aa1d7b30b6c08afef441c726bac6150228cbe0"
integrity sha512-ift8OXNbQQwtbIt6z16KnSWP7uJ/SysSMFI4F87MNRTicypfl4Pv3E2OGVv6N3nSZFJvA8imYulCBS64iyHYww== integrity sha512-2uw57LvUqW0rK/SWYnd/2rRfxNA5DDNOh33jxF7fy46VWoNhGxiUQyVZHbBMjQ33mQem0cjdDVwgWVAmlRfgyQ==
inflight@^1.0.4: inflight@^1.0.4:
version "1.0.6" version "1.0.6"