fix(grid): Adding active styles for summaries, group row and header

Author: MPopov

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

@@ -48,6 +48,10 @@
         @extend %grid-summary--fixed-width !optional;
     }
 
+    @include m(active) {
+        @extend %igx-grid-summary--active !optional;
+    }
+
     @include m(cosy) {
         @extend %igx-grid-summary !optional;
         @extend %igx-grid-summary--cosy !optional;

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

@@ -212,6 +212,10 @@
         @extend %igx-grid__tr-container !optional;
     }
 
+    @include e(tr-container, $m: active) {
+        @extend %igx-grid__tr-container--active !optional;
+    }
+
     @include e(th) {
         @extend %grid-cell-display !optional;
         @extend %grid-cell-header !optional;
@@ -253,6 +257,10 @@
         @extend %igx-grid__th--selected !optional;
     }
 
+    @include e(th, $m: active) {
+        @extend %igx-grid__th--active !optional;
+    }
+
     @include e(th, $m: number) {
         @extend %grid-cell-number !optional;
     }
@@ -798,7 +806,7 @@
         @include e(hierarchical-expander) {
             @extend %igx-grid__hierarchical-expander--compact !optional;
         }
-        
+
         @include e(hierarchical-expander, $m: empty) {
             @extend %igx-grid__hierarchical-expander--compact !optional;
             @extend %igx-grid__hierarchical-expander--empty !optional;
@@ -874,3 +882,9 @@
         @extend %igx-group-label__count-badge !optional;
     }
 }
+
+@include b(igx-grid-summary) {
+    @include m(active) {
+        @extend %igx-grid-summary--active !optional;
+    }
+}

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

@@ -732,6 +732,7 @@
         background: --var($theme, 'header-background');
         color: --var($theme, 'header-text-color');
         overflow: hidden;
+        outline-style: none;
 
         %grid-row {
             position: relative;
@@ -918,6 +919,7 @@
         color: --var($theme, 'content-text-color');
         overflow: hidden;
         z-index: 1;
+        outline-style: none;
     }
 
     %grid-tbody-container {
@@ -1322,7 +1324,7 @@
         // border-bottom: 0;
 
         %igx-grid__tree-grouping-indicator {
-            color: --var($theme, 'cell-selected-text-color');
+            @extend %grid-cell--active;
 
             &:hover {
                 color: --var($theme, 'cell-selected-text-color');
@@ -1543,6 +1545,19 @@
         background: --var($theme, 'header-selected-background');
     }
 
+    %igx-grid__th--active {
+        @extend %grid-cell--active;
+
+        %igx-grid__th--selected,
+        %igx-grid__th--selectable {
+            @extend %grid-cell--active
+        }
+    }
+
+    %igx-grid-summary--active {
+        @extend %grid-cell--active
+    }
+
     %igx-grid__th--sortable {
         .sort-icon {
             cursor: pointer;
@@ -1842,6 +1857,7 @@
 
     %igx-grid__group-row--active {
         background: --var($theme, 'group-row-selected-background');
+        @extend %grid-cell--active;
 
         %igx-grid__grouping-indicator {
             color: --var($theme, 'expand-icon-color');
@@ -2092,7 +2108,6 @@
         user-select: none;
         justify-content: center;
         align-items: center;
-        background: inherit;
         z-index: 1;
         cursor: pointer;
         padding-#{$left}: map-get($grid-grouping-indicator-padding, 'comfortable');
@@ -2484,6 +2499,10 @@
         border-bottom: 1px solid --var($theme, 'row-border-color');
     }
 
+    %igx-grid__tr-container--active {
+        @extend %grid-cell--active;
+    }
+
     %igx-grid__hierarchical-expander {
         user-select: none;
         background: inherit;