From 386c259c9e06fbfd412901ed7fc3947a9fe12c5f Mon Sep 17 00:00:00 2001 From: Sainath Poojary Date: Tue, 31 Dec 2024 14:45:07 +0530 Subject: [PATCH] FormToggle: Standardize reduced motion handling using media queries --- .../components/src/form-toggle/style.scss | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss index 900874b59004b..8ae46d2355827 100644 --- a/packages/components/src/form-toggle/style.scss +++ b/packages/components/src/form-toggle/style.scss @@ -24,10 +24,13 @@ $transition-duration: 0.2s; width: $toggle-width; height: $toggle-height; border-radius: math.div($toggle-height, 2); - transition: - $transition-duration background-color ease, - $transition-duration border-color ease; - @include reduce-motion("transition"); + + @media not (prefers-reduced-motion) { + transition: + $transition-duration background-color ease, + $transition-duration border-color ease; + } + overflow: hidden; // Windows High Contrast Mode @@ -39,8 +42,9 @@ $transition-duration: 0.2s; // Expand the border to fake a solid in Windows High Contrast Mode. border-top: #{ $toggle-height } solid transparent; - transition: $transition-duration opacity ease; - @include reduce-motion("transition"); + @media not (prefers-reduced-motion) { + transition: $transition-duration opacity ease; + } opacity: 0; } @@ -55,10 +59,13 @@ $transition-duration: 0.2s; width: $toggle-thumb-size; height: $toggle-thumb-size; border-radius: $radius-round; - transition: - $transition-duration transform ease, - $transition-duration background-color ease-out; - @include reduce-motion("transition"); + + @media not (prefers-reduced-motion) { + transition: + $transition-duration transform ease, + $transition-duration background-color ease-out; + } + background-color: $gray-900; box-shadow: $elevation-x-small;