fix(@clayui/css): Cadmin output the correct selector for c-prefers-re…

…duced-motion
liferay · Apr 25, 2023 · 9ff6965 · 9ff6965
1 parent 70003b9
commit 9ff6965
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 17 deletions.
diff --git a/packages/clay-css/src/scss/mixins/_globals.scss b/packages/clay-css/src/scss/mixins/_globals.scss
@@ -265,14 +265,19 @@
 
 					@if ($value != 'none' and $value != null) {
 						@at-root {
-							$selector: if(
-								variable-exists(cadmin-selector),
-								clay-insert-after(
+							$selector: '.c-prefers-reduced-motion &';
+
+							@if (variable-exists(cadmin-selector)) {
+								$selector: clay-insert-after(
 									'.cadmin ',
 									'.c-prefers-reduced-motion '
-								),
-								'.c-prefers-reduced-motion &'
-							);
+								);
+								$selector: clay-insert-after(
+									'.cadmin.',
+									'c-prefers-reduced-motion.',
+									$selector
+								);
+							}
 
 							#{$selector} {
 								animation: none;
@@ -296,14 +301,19 @@
 						}
 
 						@at-root {
-							$selector: if(
-								variable-exists(cadmin-selector),
-								clay-insert-after(
+							$selector: '.c-prefers-reduced-motion &';
+
+							@if (variable-exists(cadmin-selector)) {
+								$selector: clay-insert-after(
 									'.cadmin ',
 									'.c-prefers-reduced-motion '
-								),
-								'.c-prefers-reduced-motion &'
-							);
+								);
+								$selector: clay-insert-after(
+									'.cadmin.',
+									'c-prefers-reduced-motion.',
+									$selector
+								);
+							}
 
 							#{$selector} {
 								transition: none;

diff --git a/packages/clay-css/src/scss/mixins/_transition.scss b/packages/clay-css/src/scss/mixins/_transition.scss
@@ -34,11 +34,19 @@
 		}
 
 		@at-root {
-			$selector: if(
-				variable-exists(cadmin-selector),
-				clay-insert-after('.cadmin ', '.c-prefers-reduced-motion '),
-				'.c-prefers-reduced-motion &'
-			);
+			$selector: '.c-prefers-reduced-motion &';
+
+			@if (variable-exists(cadmin-selector)) {
+				$selector: clay-insert-after(
+					'.cadmin ',
+					'.c-prefers-reduced-motion '
+				);
+				$selector: clay-insert-after(
+					'.cadmin.',
+					'c-prefers-reduced-motion.',
+					$selector
+				);
+			}
 
 			#{$selector} {
 				transition: none;