fix(clay-css): Use selector-unify to combine parent selectors with …

…nested element selectors in mixins and components fixes #2392
liferay · Sep 10, 2019 · cb8e0a2 · cb8e0a2
1 parent afabdec
commit cb8e0a2
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 9 deletions.
diff --git a/packages/clay-css/src/scss/components/_utilities.scss b/packages/clay-css/src/scss/components/_utilities.scss
@@ -40,7 +40,7 @@
 	width: 100%;
 
 	@at-root {
-		ul#{&} {
+		#{selector-unify(&, ul)} {
 			@include list-unstyled;
 		}
 	}

diff --git a/packages/clay-css/src/scss/mixins/_buttons.scss b/packages/clay-css/src/scss/mixins/_buttons.scss
@@ -82,8 +82,8 @@
 	width: $width;
 
 	@at-root {
-		a#{&},
-		button#{&} {
+		#{selector-unify(&, a)},
+		#{selector-unify(&, button)} {
 			cursor: $cursor;
 		}
 	}
@@ -318,8 +318,8 @@
 	word-wrap: $word-wrap;
 
 	@at-root {
-		a#{&},
-		button#{&} {
+		#{selector-unify(&, a)},
+		#{selector-unify(&, button)} {
 			cursor: $cursor;
 		}
 	}

diff --git a/packages/clay-css/src/scss/mixins/_close.scss b/packages/clay-css/src/scss/mixins/_close.scss
@@ -179,7 +179,7 @@
 	}
 
 	@at-root {
-		button#{&} {
+		#{selector-unify(&, button)} {
 			&:focus {
 				box-shadow: $btn-focus-box-shadow;
 				outline: $btn-focus-outline;

diff --git a/packages/clay-css/src/scss/mixins/_labels.scss b/packages/clay-css/src/scss/mixins/_labels.scss
@@ -181,8 +181,8 @@
 	transition: $transition;
 
 	@at-root {
-		a#{&},
-		button#{&} {
+		#{selector-unify(&, a)},
+		#{selector-unify(&, button)} {
 			&:hover {
 				background-color: $hover-bg;
 				border-color: $hover-border-color;

diff --git a/packages/clay-css/src/scss/mixins/_links.scss b/packages/clay-css/src/scss/mixins/_links.scss
@@ -216,7 +216,7 @@
 	}
 
 	@at-root {
-		button#{&} {
+		#{selector-unify(&, button)} {
 			&:focus {
 				box-shadow: $btn-focus-box-shadow;
 				outline: $btn-focus-outline;