Merge pull request #7877 from IgniteUI/simeonoff/fix-7857

fix(grid): header active styles are not applied correctly

Author: rkaraivanov

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

@@ -1587,15 +1587,16 @@
     }
 
     %igx-grid__th--active {
-        %grid-cell-header,
+        @extend %grid-cell--active;
+
         %igx-grid__th--selected,
         %igx-grid__th--selectable {
-            @extend %grid-cell--active
+            @extend %grid-cell--active;
         }
     }
 
     %igx-grid-summary--active {
-        @extend %grid-cell--active
+        @extend %grid-cell--active;
     }
 
     %igx-grid__th--sortable {

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

@@ -443,6 +443,9 @@ $_dark-indigo-grid: extend(
 
         cell-selected-background: (
             igx-color: ('grays', 200),
+            to-opaque: (
+                igx-color: 'surface',
+            )
         ),
 
         cell-selected-text-color: (

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

@@ -688,7 +688,8 @@ $_indigo-grid: extend(
 
         cell-selected-background: (
             igx-color: ('primary', 50),
-            rgba: .5
+            rgba: .5,
+            to-opaque: #fff
         ),
 
         cell-active-border-color: (