Customize Widgets: Standardize reduced motion handling using media queries (#68425)

im3dabasia · im3dabasia · t-hamano · web-flow · commit 680f51ffb6a3 · 2025-01-14T16:38:13.000+09:00
Co-authored-by: im3dabasia &lt;im3dabasia1@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
diff --git a/packages/customize-widgets/src/components/header/style.scss b/packages/customize-widgets/src/components/header/style.scss
@@ -42,8 +42,9 @@
 		}
 
 		svg {
-			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
-			@include reduce-motion("transition");
+			@media not (prefers-reduced-motion) {
+				transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
+			}
 		}
 
 		&.is-pressed {

Original file line number	Diff line number	Diff line change
`@@ -42,8 +42,9 @@`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`svg {`
`45`		`- transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;`
`46`		`- @include reduce-motion("transition");`
	`45`	`+ @media not (prefers-reduced-motion) {`
	`46`	`+ transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;`
	`47`	`+ }`
`47`	`48`	`}`
`48`	`49`
`49`	`50`	`&.is-pressed {`