style(table): Fixes issue where active indicator on expandable-row is…

… inherited by nested table(s) expandable-row(s) with indicator Signed-off-by: Bartosz Bobin <bartosz.bobin@dynatrace.com>
dynatrace-oss · Jul 14, 2020 · ddae66b · ddae66b
1 parent 79f77cf
commit ddae66b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/libs/barista-components/table/src/expandable/_expandable-row-theme.scss b/libs/barista-components/table/src/expandable/_expandable-row-theme.scss
@@ -11,7 +11,7 @@
   }
 
   :host {
-    .dt-expandable-row-base-expanded {
+    > .dt-expandable-row-base-expanded {
       border-top-color: $border-color;
 
       $bg-color: get-color($theme-name, 100);
@@ -35,7 +35,7 @@
     $default-color: dt-get-theme-color($palette, 'default');
 
     :host.dt-table-row-indicator.dt-color-#{$name}
-      .dt-expandable-row-base::before {
+      > .dt-expandable-row-base::before {
       background-color: $default-color;
     }
   }

diff --git a/libs/barista-components/table/src/expandable/expandable-row.scss b/libs/barista-components/table/src/expandable/expandable-row.scss
@@ -8,6 +8,7 @@
   &:nth-child(even) {
     background-color: #ffffff;
   }
+
   &:nth-child(odd) {
     background-color: $gray-100;
   }
@@ -56,18 +57,20 @@
   }
 }
 
-:host.dt-table-row-indicator .dt-expandable-row-base::before {
-  @include dt-table-row-indicator();
-}
+:host.dt-table-row-indicator > {
+  .dt-expandable-row-base::before {
+    @include dt-table-row-indicator();
+  }
 
-:host.dt-table-row-indicator .dt-expandable-row-base-collapsed:hover::before {
-  height: calc(100% - 6px);
-  left: 3px;
-}
+  .dt-expandable-row-base-collapsed:hover::before {
+    height: calc(100% - 6px);
+    left: 3px;
+  }
 
-:host.dt-table-row-indicator .dt-expandable-row-base-expanded::before {
-  height: calc(100% - 4px);
-  left: 4px;
+  .dt-expandable-row-base-expanded::before {
+    height: calc(100% - 4px);
+    left: 4px;
+  }
 }
 
 // Apply current theme