fix(@clayui/css): Cadmin Treeview scope component-action, `componen…

…t-expander`, `component-icon`, `component-text` so styles don't bleed into other components fixes #4198
liferay · Jul 30, 2021 · 1ce70bd · 1ce70bd
1 parent b3d1b17
commit 1ce70bd
Showing 1 changed file with 40 additions and 37 deletions.
diff --git a/packages/clay-css/src/scss/cadmin/components/_treeview.scss b/packages/clay-css/src/scss/cadmin/components/_treeview.scss
@@ -19,6 +19,46 @@
 		@include clay-css($custom-control);
 	}
 
+	.component-expander {
+		$component-expander: setter(
+			map-get($cadmin-treeview, component-expander),
+			()
+		);
+
+		@include clay-button-variant($component-expander);
+
+		.lexicon-icon:not(.component-expanded-d-none) {
+			display: none;
+		}
+	}
+
+	.component-action {
+		$component-action: setter(
+			map-get($cadmin-treeview, component-action),
+			()
+		);
+
+		@include clay-button-variant($component-action);
+	}
+
+	.component-icon {
+		$component-icon: setter(map-get($cadmin-treeview, component-icon), ());
+
+		@include clay-css($component-icon);
+
+		.lexicon-icon {
+			$lexicon-icon: setter(map-get($component-icon, lexicon-icon), ());
+
+			@include clay-css($lexicon-icon);
+		}
+	}
+
+	.component-text {
+		$component-text: setter(map-get($cadmin-treeview, component-text), ());
+
+		@include clay-css($component-text);
+	}
+
 	&.show-component-expander-on-hover {
 		@include clay-css($cadmin-treeview-show-component-expander-on-hover);
 
@@ -131,43 +171,6 @@
 	}
 }
 
-.component-expander {
-	$component-expander: setter(
-		map-get($cadmin-treeview, component-expander),
-		()
-	);
-
-	@include clay-button-variant($component-expander);
-
-	.lexicon-icon:not(.component-expanded-d-none) {
-		display: none;
-	}
-}
-
-.component-action {
-	$component-action: setter(map-get($cadmin-treeview, component-action), ());
-
-	@include clay-button-variant($component-action);
-}
-
-.component-icon {
-	$component-icon: setter(map-get($cadmin-treeview, component-icon), ());
-
-	@include clay-css($component-icon);
-
-	.lexicon-icon {
-		$lexicon-icon: setter(map-get($component-icon, lexicon-icon), ());
-
-		@include clay-css($lexicon-icon);
-	}
-}
-
-.component-text {
-	$component-text: setter(map-get($cadmin-treeview, component-text), ());
-
-	@include clay-css($component-text);
-}
-
 .treeview-nested-margins {
 	@include clay-css($cadmin-treeview-nested-margins);