From 158928074ed6bd13729cf258a71a4c304c276f4c Mon Sep 17 00:00:00 2001 From: Mysterious_Dev Date: Sat, 7 Jan 2023 14:47:59 +0100 Subject: [PATCH 1/8] Use prefers-reduced-motion media feature to disable motion transitions for dropdown & navbar --- packages/core/styles/components/dropdown.pcss | 4 ++++ packages/core/styles/components/navbar.pcss | 12 ++++++++++++ 2 files changed, 16 insertions(+) diff --git a/packages/core/styles/components/dropdown.pcss b/packages/core/styles/components/dropdown.pcss index 789f8a76..f11c8c2a 100644 --- a/packages/core/styles/components/dropdown.pcss +++ b/packages/core/styles/components/dropdown.pcss @@ -57,6 +57,10 @@ visibility: hidden; z-index: var(--ifm-z-index-dropdown); @mixin transition opacity transform visibility; + + @media (prefers-reduced-motion) { + @mixin transition visibility; + } } &__link { diff --git a/packages/core/styles/components/navbar.pcss b/packages/core/styles/components/navbar.pcss index 49db0bd0..8b4aca3b 100644 --- a/packages/core/styles/components/navbar.pcss +++ b/packages/core/styles/components/navbar.pcss @@ -217,6 +217,10 @@ html[data-theme='dark'], width: var(--ifm-navbar-sidebar-width); @mixin transition opacity visibility transform, 250ms, ease-in-out; + @media (prefers-reduced-motion) { + @mixin transition visibility, 250ms, ease-in-out; + } + &--show { ^&, ^&__backdrop { @@ -239,6 +243,10 @@ html[data-theme='dark'], top: 0; visibility: hidden; @mixin transition opacity visibility, 100ms, ease-in-out; + + @media (prefers-reduced-motion) { + @mixin transition visibility, 100ms, ease-in-out; + } } &__brand { @@ -257,6 +265,10 @@ html[data-theme='dark'], transform: translateZ(0); transition: transform var(--ifm-transition-fast) ease-in-out; + @media (prefers-reduced-motion) { + transition: none; + } + &--show-secondary { transform: translate3d( calc((var(--ifm-navbar-sidebar-width)) * -1), From 3355f700ff2c3125c104b3c174dfceff781deee5 Mon Sep 17 00:00:00 2001 From: Mysterious_Dev Date: Sat, 7 Jan 2023 15:09:51 +0100 Subject: [PATCH 2/8] Disable motion for caret --- packages/core/styles/components/menu.pcss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/core/styles/components/menu.pcss b/packages/core/styles/components/menu.pcss index ddf900c6..879ebdfd 100644 --- a/packages/core/styles/components/menu.pcss +++ b/packages/core/styles/components/menu.pcss @@ -23,6 +23,10 @@ transform: rotate(180deg); width: 1.25rem; @mixin transition transform, var(--ifm-transition-fast), linear; + + @media (prefers-reduced-motion) { + transition: none; + } } @define-mixin menu-item { From 8d9fdd04c1884f7d3b6e5ebef6d270e7e997a57e Mon Sep 17 00:00:00 2001 From: Mysterious_Dev Date: Thu, 19 Jan 2023 14:13:38 +0100 Subject: [PATCH 3/8] Delete some media query to use variable --- packages/core/styles/common/variables.pcss | 6 ++++++ packages/core/styles/components/menu.pcss | 4 ---- packages/core/styles/components/navbar.pcss | 4 ---- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/core/styles/common/variables.pcss b/packages/core/styles/common/variables.pcss index 56f6d68c..96d33efa 100644 --- a/packages/core/styles/common/variables.pcss +++ b/packages/core/styles/common/variables.pcss @@ -149,4 +149,10 @@ --ifm-z-index-overlay: 400; } +@media (prefers-reduced-motion: reduce) { + :root { + --ifm-transition-fast: 0ms; + } +} + @custom-media --ifm-narrow-window (max-width: 996px); diff --git a/packages/core/styles/components/menu.pcss b/packages/core/styles/components/menu.pcss index 879ebdfd..ddf900c6 100644 --- a/packages/core/styles/components/menu.pcss +++ b/packages/core/styles/components/menu.pcss @@ -23,10 +23,6 @@ transform: rotate(180deg); width: 1.25rem; @mixin transition transform, var(--ifm-transition-fast), linear; - - @media (prefers-reduced-motion) { - transition: none; - } } @define-mixin menu-item { diff --git a/packages/core/styles/components/navbar.pcss b/packages/core/styles/components/navbar.pcss index 8b4aca3b..c82a5d58 100644 --- a/packages/core/styles/components/navbar.pcss +++ b/packages/core/styles/components/navbar.pcss @@ -265,10 +265,6 @@ html[data-theme='dark'], transform: translateZ(0); transition: transform var(--ifm-transition-fast) ease-in-out; - @media (prefers-reduced-motion) { - transition: none; - } - &--show-secondary { transform: translate3d( calc((var(--ifm-navbar-sidebar-width)) * -1), From e3d2117528eba61c533f8a365c47ad14a6687c7b Mon Sep 17 00:00:00 2001 From: Mysterious_Dev Date: Fri, 20 Jan 2023 17:08:28 +0100 Subject: [PATCH 4/8] Fix for reviews 1 & 2 --- packages/core/styles/components/dropdown.pcss | 4 ---- packages/core/styles/components/navbar.pcss | 7 ++----- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/core/styles/components/dropdown.pcss b/packages/core/styles/components/dropdown.pcss index f11c8c2a..789f8a76 100644 --- a/packages/core/styles/components/dropdown.pcss +++ b/packages/core/styles/components/dropdown.pcss @@ -57,10 +57,6 @@ visibility: hidden; z-index: var(--ifm-z-index-dropdown); @mixin transition opacity transform visibility; - - @media (prefers-reduced-motion) { - @mixin transition visibility; - } } &__link { diff --git a/packages/core/styles/components/navbar.pcss b/packages/core/styles/components/navbar.pcss index c82a5d58..202cb9cb 100644 --- a/packages/core/styles/components/navbar.pcss +++ b/packages/core/styles/components/navbar.pcss @@ -215,11 +215,8 @@ html[data-theme='dark'], transform: translate3d(-100%, 0, 0); visibility: hidden; width: var(--ifm-navbar-sidebar-width); - @mixin transition opacity visibility transform, 250ms, ease-in-out; - - @media (prefers-reduced-motion) { - @mixin transition visibility, 250ms, ease-in-out; - } + @mixin transition opacity visibility transform, var(--ifm-transition-fast), + ease-in-out; &--show { ^&, From 3cf742eac3e1bc04ab6ce84decdce24d8580d981 Mon Sep 17 00:00:00 2001 From: Mysterious_Dev Date: Fri, 20 Jan 2023 17:11:20 +0100 Subject: [PATCH 5/8] Fix format From c174ecbe9eb24792a5b85a426a481d7655249940 Mon Sep 17 00:00:00 2001 From: Mysterious_Dev Date: Fri, 20 Jan 2023 17:14:01 +0100 Subject: [PATCH 6/8] Retry Fix format From 97693d953298de29eac2b0eb860188855935f386 Mon Sep 17 00:00:00 2001 From: Mysterious_Dev Date: Fri, 20 Jan 2023 17:17:05 +0100 Subject: [PATCH 7/8] Simplify navbar backdrop --- packages/core/styles/components/navbar.pcss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/core/styles/components/navbar.pcss b/packages/core/styles/components/navbar.pcss index 202cb9cb..f872b59f 100644 --- a/packages/core/styles/components/navbar.pcss +++ b/packages/core/styles/components/navbar.pcss @@ -239,11 +239,8 @@ html[data-theme='dark'], right: 0; top: 0; visibility: hidden; - @mixin transition opacity visibility, 100ms, ease-in-out; - - @media (prefers-reduced-motion) { - @mixin transition visibility, 100ms, ease-in-out; - } + @mixin transition opacity visibility, var(--ifm-transition-fast), + ease-in-out; } &__brand { From 24af02dca7c87815eb519d2ba5af0b016d0c0803 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Fri, 17 Feb 2023 11:58:58 +0100 Subject: [PATCH 8/8] Update packages/core/styles/common/variables.pcss --- packages/core/styles/common/variables.pcss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/styles/common/variables.pcss b/packages/core/styles/common/variables.pcss index 96d33efa..510135e6 100644 --- a/packages/core/styles/common/variables.pcss +++ b/packages/core/styles/common/variables.pcss @@ -152,6 +152,7 @@ @media (prefers-reduced-motion: reduce) { :root { --ifm-transition-fast: 0ms; + --ifm-transition-slow: 0ms; } }