From 8572861f8268be71cfe12e2b8313b881168c2870 Mon Sep 17 00:00:00 2001
From: Mysterious_Dev <40738104+Mysterious-Dev@users.noreply.github.com>
Date: Fri, 17 Feb 2023 12:02:25 +0100
Subject: [PATCH] feat: disable animated transitions by default when
 `prefers-reduced-motion: reduce` (#281)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
---
 packages/core/styles/common/variables.pcss  | 7 +++++++
 packages/core/styles/components/navbar.pcss | 6 ++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/core/styles/common/variables.pcss b/packages/core/styles/common/variables.pcss
index 56f6d68c..510135e6 100644
--- a/packages/core/styles/common/variables.pcss
+++ b/packages/core/styles/common/variables.pcss
@@ -149,4 +149,11 @@
   --ifm-z-index-overlay: 400;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --ifm-transition-fast: 0ms;
+    --ifm-transition-slow: 0ms;
+  }
+}
+
 @custom-media --ifm-narrow-window (max-width: 996px);
diff --git a/packages/core/styles/components/navbar.pcss b/packages/core/styles/components/navbar.pcss
index 49db0bd0..f872b59f 100644
--- a/packages/core/styles/components/navbar.pcss
+++ b/packages/core/styles/components/navbar.pcss
@@ -215,7 +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;
+    @mixin transition opacity visibility transform, var(--ifm-transition-fast),
+      ease-in-out;
 
     &--show {
       ^&,
@@ -238,7 +239,8 @@ html[data-theme='dark'],
       right: 0;
       top: 0;
       visibility: hidden;
-      @mixin transition opacity visibility, 100ms, ease-in-out;
+      @mixin transition opacity visibility, var(--ifm-transition-fast),
+        ease-in-out;
     }
 
     &__brand {