fix(table): add zebra color to sticky column (#984)

allianz · Jul 19, 2023 · f5d071a · f5d071a
1 parent 3f130cf
commit f5d071a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/projects/ng-aquila/src/shared-styles/theming/tokens.scss b/projects/ng-aquila/src/shared-styles/theming/tokens.scss
@@ -1197,7 +1197,7 @@ $nx-theme: (
     table-header-cell-background-color: transparent,
     table-row-background-color: transparent,
     // Sticky column can never be transparent
-    table-sticky-column-background-color: ui-03,
+    table-sticky-column-background-color: ui-background,
     // Selectable table
     selectable-table-row-hover-background-color: ui-02,
     selectable-table-row-active-background-color: ui-02,

diff --git a/projects/ng-aquila/src/table/table.component.scss b/projects/ng-aquila/src/table/table.component.scss
@@ -330,5 +330,53 @@ $sticky-shadow-size: nx-spacer(3xs);
                 box-shadow: -$sticky-shadow-size 0 $sticky-shadow-offset (-$sticky-shadow-size) v(shadow-small-color) inset;
             }
         }
+
+        // add the zebra color to the sticky column
+        ::ng-deep .nx-table-row:nth-child(2n) & {
+            :host(.nx-table--sticky-first.nx-table--zebra) &:first-child,
+            :host(.nx-table--sticky-last.nx-table--zebra) &:last-child {
+                background: v(zebra-table-even-row-background-color);
+            }
+        }
+
+        // add the selected row color to the sticky column
+        ::ng-deep .nx-table-row--selectable.is-selected & {
+            :host(.nx-table--sticky-first) &:first-child,
+            :host(.nx-table--sticky-last) &:last-child {
+                background: v(zebra-table-row-selected-background-color);
+            }
+        }
+
+        // add hover to the sticky column of non selected rows
+        ::ng-deep .nx-table-row--selectable:not(.is-selected):hover & {
+            :host(.nx-table--sticky-first) &:first-child,
+            :host(.nx-table--sticky-last) &:last-child {
+                background: v(selectable-table-row-hover-background-color);
+            }
+        }
+
+        // add hover to the sticky column of non selected zebra rows
+        ::ng-deep .nx-table-row--selectable:not(.is-selected):hover & {
+            :host(.nx-table--sticky-first.nx-table--zebra) &:first-child,
+            :host(.nx-table--sticky-last.nx-table--zebra) &:last-child {
+                background: v(zebra-table-row-hover-background-color);
+            }
+        }
+
+        // add hover to the sticky column of selected rows
+        ::ng-deep .nx-table-row--selectable.is-selected:hover & {
+            :host(.nx-table--sticky-first) &:first-child,
+            :host(.nx-table--sticky-last) &:last-child {
+                background: v(zebra-table-even-row-background-color);
+            }
+        }
+
+        // add active to the sticky column of non selected rows
+        ::ng-deep .nx-table-row--selectable:not(.is-selected):active & {
+            :host(.nx-table--sticky-first.nx-table--zebra) &:first-child,
+            :host(.nx-table--sticky-last.nx-table--zebra) &:last-child {
+                background: v(zebra-table-row-active-background-color);
+            }
+        }
     }
 }