feat(@clayui/css): Utilities adds c-prefers-reduced-motion

- This removes CSS transitions in child elements
liferay · Mar 28, 2023 · 89deb26 · 89deb26
1 parent 5be7ff6
commit 89deb26
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 0 deletions.
diff --git a/packages/clay-css/src/scss/cadmin/components/_utilities-functional-important.scss b/packages/clay-css/src/scss/cadmin/components/_utilities-functional-important.scss
@@ -840,3 +840,9 @@
 .invisible {
 	visibility: hidden !important;
 }
+
+// Transitions
+
+.c-prefers-reduced-motion {
+	@include clay-css($cadmin-c-prefers-reduced-motion);
+}
diff --git a/packages/clay-css/src/scss/cadmin/variables/_utilities.scss b/packages/clay-css/src/scss/cadmin/variables/_utilities.scss
@@ -541,3 +541,14 @@ $cadmin-text-decorations: map-deep-merge(
 	),
 	$cadmin-text-decorations
 );
+
+// Transitions
+
+$cadmin-c-prefers-reduced-motion: () !default;
+$cadmin-c-prefers-reduced-motion: map-merge(
+	(
+		scroll-behavior: auto,
+		transition: clay-enable-transitions(none),
+	),
+	$cadmin-c-prefers-reduced-motion
+);
diff --git a/packages/clay-css/src/scss/components/_utilities-functional-important.scss b/packages/clay-css/src/scss/components/_utilities-functional-important.scss
@@ -816,3 +816,9 @@
 .invisible {
 	visibility: hidden !important;
 }
+
+// Transitions
+
+.c-prefers-reduced-motion {
+	@include clay-css($c-prefers-reduced-motion);
+}
diff --git a/packages/clay-css/src/scss/mixins/_globals.scss b/packages/clay-css/src/scss/mixins/_globals.scss
@@ -275,6 +275,12 @@
 						@media (prefers-reduced-motion: reduce) {
 							transition: none;
 						}
+
+						@at-root {
+							.c-prefers-reduced-motion & {
+								transition: none;
+							}
+						}
 					}
 				} @else if ($key == 'extend') {
 					@extend #{$value} !optional;

diff --git a/packages/clay-css/src/scss/mixins/_transition.scss b/packages/clay-css/src/scss/mixins/_transition.scss
@@ -32,5 +32,11 @@
 		@media (prefers-reduced-motion: reduce) {
 			transition: none;
 		}
+
+		@at-root {
+			.c-prefers-reduced-motion & {
+				transition: none;
+			}
+		}
 	}
 }
diff --git a/packages/clay-css/src/scss/variables/_utilities.scss b/packages/clay-css/src/scss/variables/_utilities.scss
@@ -525,3 +525,14 @@ $text-decorations: map-deep-merge(
 	),
 	$text-decorations
 );
+
+// Transitions
+
+$c-prefers-reduced-motion: () !default;
+$c-prefers-reduced-motion: map-merge(
+	(
+		scroll-behavior: auto,
+		transition: clay-enable-transitions(none),
+	),
+	$c-prefers-reduced-motion
+);