refactor(tree): mnake sure that only the disabled tree node looks dis…

…abled
IgniteUI · Oct 18, 2023 · 7c2c5cb · 7c2c5cb
1 parent e2eee4c
commit 7c2c5cb
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 33 deletions.
diff --git a/src/components/tree/themes/light/tree-item.bootstrap.scss b/src/components/tree/themes/light/tree-item.bootstrap.scss
@@ -31,20 +31,20 @@ $theme: $bootstrap;
 }
 
 :host(:not([disabled])[selected]) {
-    background: var(--node-disabled-background, var-get($theme, 'background-selected'));
-    color: var(--node-disabled-foreground, var-get($theme, 'foreground-selected'));
+    background:var-get($theme, 'background-selected');
+    color: var-get($theme, 'foreground-selected');
 }
 
 :host(:not([disabled])[selected][active]) {
-    background: var(--node-disabled-background, var-get($theme, 'background-active-selected'));
-    color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected'));
+    background: var-get($theme, 'background-active-selected');
+    color: var-get($theme, 'foreground-active-selected');
 }
 
 :host(:not([disabled])[selected]),
 :host(:not([disabled])[selected][active]) {
     [part~='focused'] {
-        background: var(--node-disabled-background, var-get($theme, 'background-active-selected'));
-        color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected'));
+        background:  var-get($theme, 'background-active-selected');
+        color: var-get($theme, 'foreground-active-selected');
     }
 }
 
@@ -57,9 +57,8 @@ $theme: $bootstrap;
 }
 
 :host([disabled]) {
-    --node-disabled-foreground: #{var-get($theme, 'foreground-disabled')};
-    --node-disabled-background: #{var-get($theme, 'background-disabled')};
-
-    color: var(--node-disabled-foreground);
-    background: var(--node-disabled-background);
+    [part~='wrapper'] {
+        color: var-get($theme, 'foreground-disabled');
+        background: var-get($theme, 'background-disabled');
+    }
 }
diff --git a/src/components/tree/themes/light/tree-item.material.scss b/src/components/tree/themes/light/tree-item.material.scss
@@ -6,10 +6,6 @@ $theme: $material;
 
 :host {
     @include css-vars-from-theme($theme, 'ig-tree');
-
-    background: var(--node-disabled-background, var-get($theme, 'background'));
-    color: var(--node-disabled-foreground, var-get($theme, 'foreground'));
-
 }
 
 [part~='wrapper'] {
@@ -22,38 +18,35 @@ $theme: $material;
     }
 }
 
-:host(:not([disabled])[active]) {
+[part~='label'] {
+    max-height: var-get($theme, 'size');
+}
+
+[part~='active'] {
     background: var-get($theme, 'background-active');
     color: var-get($theme, 'foreground-active');
 }
 
-:host(:not([disabled])[selected]) {
+[part~='selected'] {
     background: var-get($theme, 'background-selected');
     color: var-get($theme, 'foreground-selected');
 }
 
-:host(:not([disabled])[selected][active]) {
-    background: var(--node-disabled-background, var-get($theme, 'background-active-selected'));
-    color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected'));
-}
-
-:host(:not([disabled])[selected]),
-:host(:not([disabled])[selected][active]) {
-    [part~='focused'] {
-        background: var(--node-disabled-background, var-get($theme, 'background-active-selected'));
-        color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected'));
-    }
+[part~='selected'][part~='focused'][part~='active'],
+[part~='selected'][part~='focused'],
+[part~='selected'][part~='active'] {
+    background: var-get($theme, 'background-active-selected');
+    color: var-get($theme, 'foreground-active-selected');
 }
 
 [part~='focused'] {
     box-shadow: inset 0 0 0 1px var-get($theme, 'border-color');
 }
 
 :host([disabled]) {
-    --node-disabled-foreground: #{var-get($theme, 'foreground-disabled')};
-    --node-disabled-background: #{var-get($theme, 'background-disabled')};
-
-    color: var(--node-disabled-foreground);
-    background: var(--node-disabled-background);
+    [part~='wrapper'] {
+        color: var-get($theme, 'foreground-disabled');
+        background: var-get($theme, 'background-disabled');
+    }
 }