fix(themes): pinned and selected cells would show content under

Closes #3163

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -212,6 +212,10 @@
         @extend %grid-cell--fixed-width !optional;
     }
 
+    @include e(td, $mods: (pinned, selected)) {
+        @extend %grid-cell--pinned-selected !optional;
+    }
+
     @include e(td-text) {
         @extend %grid-cell-text !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -146,6 +146,7 @@
 
     $tree-selected-filtered-row-text-color: rgba(text-contrast(map-get($theme, 'row-selected-background')), .5);
     $tree-selected-filtered-cell-text-color: rgba(text-contrast(map-get($theme, 'cell-selected-background')), .5);
+    $row-selected-cell-background: darken(map-get($theme, 'row-selected-background'), 8%);
 
     @if not($ghost-header-icon-color) and $ghost-header-background {
         $ghost-header-icon-color: rgba(text-contrast($ghost-header-background), .07);
@@ -358,7 +359,8 @@
 
         tree-filtered-text-color: $tree-filtered-text-color,
         tree-selected-filtered-row-text-color: $tree-selected-filtered-row-text-color,
-        tree-selected-filtered-cell-text-color: $tree-selected-filtered-cell-text-color
+        tree-selected-filtered-cell-text-color: $tree-selected-filtered-cell-text-color,
+        row-selected-cell-background: $row-selected-cell-background
     ));
 }
 
@@ -654,6 +656,11 @@
         color: --var($theme, 'row-selected-text-color');
         background-color: --var($theme, 'row-selected-background');
 
+        %grid-cell--selected,
+        %grid-cell--pinned-selected {
+            background-color: --var($theme, 'row-selected-cell-background');
+        }
+
         &:hover {
             background-color: --var($theme, 'row-selected-background');
             color: --var($theme, 'row-selected-text-color');
@@ -820,7 +827,7 @@
 
     %grid-cell--selected {
         color: --var($theme, 'cell-selected-text-color');
-        background-color: --var($theme, 'cell-selected-background') !important;
+        background-color: --var($theme, 'cell-selected-background');
         border-bottom: 0;
 
         %igx-grid__tree-grouping-indicator {
@@ -869,6 +876,12 @@
         z-index: 9999;
     }
 
+    %grid-cell--pinned-selected {
+        color: --var($theme, 'cell-selected-text-color');
+        background-color: --var($theme, 'cell-selected-background');
+        border-bottom: 0;
+    }
+
     %grid-cell--pinned-last {
         border-right: map-get($cell-pin, 'style') map-get($cell-pin, 'color') !important;
 

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss

@@ -11,11 +11,12 @@
 /// @prop {Color} content-background [#222] - The table body background color.
 /// @prop {Color} row-odd-background [#222] - The background color of odd rows.
 /// @prop {Color} row-even-background [#222] - The background color of even rows.
-/// @prop {Map} row-hover-background [igx-color: ('grays', 200), hexrgba: #222] - The hover row background color.
+/// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #222] - The hover row background color.
 /// @prop {Map} row-selected-background [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222] - The selected row background color.
 /// @prop {Color} row-selected-text-color [#fff] - The selected row text color.
 /// @prop {Color} ghost-header-background [#222] - The dragged header background color.
 /// @prop {Color} cell-editing-background [#222] - The background for the cell in editing mode.
+/// @prop {Map} cell-selected-background [igx-color: ('grays', 200), hexrgba: #222] - The selected cell background color.
 /// @prop {Map} cell-selected-text-color [#fff] - The selected cell text color.
 /// @prop {Map} grouparea-background [igx-color: ('grays', 100), hexrgba: #222] - The grid group area background color.
 /// @prop {Map} group-row-background [igx-color: ('grays', 100), hexrgba: #222] - The grid group row background color.
@@ -38,7 +39,7 @@ $_dark-grid: extend($_light-grid, (
     row-even-background: #222,
 
     row-hover-background: (
-        igx-color: ('grays', 200),
+        igx-color: ('grays', 100),
         hexrgba: #222
     ),
 
@@ -56,6 +57,11 @@ $_dark-grid: extend($_light-grid, (
 
     cell-editing-background: #222,
 
+    cell-selected-background: (
+        igx-color: ('grays', 200),
+        hexrgba: #222
+    ),
+
     grouparea-background: (
         igx-color: ('grays', 100),
         hexrgba: #222

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss

@@ -22,13 +22,13 @@
 /// @prop {Color} row-even-text-color [inherit] - The text color of even rows.
 /// @prop {Map} row-selected-background [igx-color: ('secondary', 50), hexrgba: #fff] - The selected row background color.
 /// @prop {Map} row-selected-text-color [igx-contrast-color: ('secondary', 50)] - The selected row text color.
-/// @prop {Map} row-hover-background [igx-color: ('grays', 200), hexrgba: #fff] - The hover row background color.
+/// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #fff] - The hover row background color.
 /// @prop {Map} row-hover-text-color [igx-contrast-color: ('grays', 200)] - The hover row text color.
 /// @prop {Map} row-border-color [igx-color: ('grays', 300)] - The row bottom border color.
 /// @prop {Number} pinned-border-width [2px] - The border width of the pinned border.
 /// @prop {String} pinned-border-style [solid] - The CSS border style of the pinned border.
 /// @prop {Map} pinned-border-color [igx-color: ('grays', 400)] - The color of the pinned border.
-/// @prop {Map} cell-selected-background [igx-color: ('grays', 200)] - The selected cell background color.
+/// @prop {Map} cell-selected-background [igx-color: ('grays', 200), hexrgba: #fff] - The selected cell background color.
 /// @prop {Map} cell-selected-text-color [igx-contrast-color: ('grays', 200)] - The selected cell text color.
 /// @prop {Map} resize-line-color [igx-color: ('secondary', 500)] - The table header resize line color.
 /// @prop {Map} grouparea-background [igx-color: ('grays', 100), hexrgba: #fff] - The grid group area background color.
@@ -102,7 +102,7 @@ $_light-grid: (
     ),
 
     row-hover-background: (
-        igx-color: ('grays', 200),
+        igx-color: ('grays', 100),
         hexrgba: #fff
     ),
 
@@ -122,6 +122,7 @@ $_light-grid: (
 
     cell-selected-background: (
         igx-color: ('grays', 200),
+        hexrgba: #fff
     ),
 
     cell-selected-text-color: (

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -705,7 +705,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
             const column = this.gridAPI.get(this.gridID).columns[editCell.cellID.columnID];
 
             if (column.inlineEditorTemplate === undefined && (
-                (column.dataType === DataType.Boolean &&  (key !== KEYS.SPACE && key !== KEYS.SPACE_IE))
+                (column.dataType === DataType.Boolean && (key !== KEYS.SPACE && key !== KEYS.SPACE_IE))
                 || column.dataType === DataType.Date)) {
                 event.preventDefault();
             }
@@ -728,11 +728,11 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
                     (this.gridAPI as any).trigger_row_expansion_toggle(
                         this.gridID, this.row.treeRow, !this.row.expanded, event, this.visibleColumnIndex);
                 }
-            return;
+                return;
             }
         }
 
-        const args = {cell: this, groupRow: null, event: event, cancel: false };
+        const args = { cell: this, groupRow: null, event: event, cancel: false };
         this.grid.onFocusChange.emit(args);
         if (args.cancel) {
             return;
@@ -886,8 +886,8 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
             'igx_grid__cell--edit': this.inEditMode,
             'igx-grid__td--number': this.gridAPI.should_apply_number_style(this.column),
             'igx-grid__td--editing': this.inEditMode,
-            'igx-grid__th--pinned': this.column.pinned,
-            'igx-grid__th--pinned-last': this.isLastPinned,
+            'igx-grid__td--pinned': this.column.pinned,
+            'igx-grid__td--pinned-last': this.isLastPinned,
             'igx-grid__td--selected': this.selected,
             'igx-grid__td--edited': this.dirty
         };
@@ -905,7 +905,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
      */
     public calculateSizeToFit(range: any): number {
         return Math.max(...Array.from(this.nativeElement.children)
-                   .map((child) => getNodeSizeViaRange(range, child)));
+            .map((child) => getNodeSizeViaRange(range, child)));
     }
 
     private isToggleKey(key) {