Merge pull request #5392 from IgniteUI/fix-#5361

fix(grid summaries): summaries overlap pinned summaries

Author: zdrawku

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -349,12 +349,12 @@
 ///   // }
 ///   // otherwise, it will return the value for key 'icon-color' in the '$avatar-theme';
 /// @returns {String} - The value of the key in the passed map, or the name of key concatenated with the key name.
-@function --var($map, $key) {
+@function --var($map, $key, $fallback: '') {
     $igx-legacy-support: if(global-variable-exists('igx-legacy-support'), $igx-legacy-support, true);
 
     @if map-has-key($map, $key) {
         @if $igx-legacy-support == false {
-            @return unquote('var(--#{map-get($map, 'name')}-#{$key})');
+            @return unquote('var(--#{map-get($map, 'name')}-#{$key}, #{$fallback})');
         } @else {
             @return map-get($map, $key);
         }

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

@@ -9,6 +9,7 @@
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
 ///
 /// @param {Color} $background-color [null] - The summaries background color is inherited form igx-grid__tfoot
+/// @param {Color} $focus-background-color [null] - The background color when a summary item is on focus.
 /// @param {Color} $label-color [null] - The summaries label color.
 /// @param {Color} $result-color [null] - The summaries value/result color.
 /// @param {Color} $border-color [null] - The summaries border color.
@@ -35,6 +36,7 @@
     $schema: $light-schema,
 
     $background-color: null,
+    $focus-background-color: null,
     $label-color: null,
     $result-color: null,
     $border-color: null,
@@ -62,6 +64,7 @@
         name: $name,
         palette: $palette,
         background-color: $background-color,
+        focus-background-color: $focus-background-color,
         label-color: $label-color,
         result-color: $result-color,
         border-color: $border-color,
@@ -98,12 +101,27 @@
     );
 
     %igx-grid-summary {
+        position: relative;
         display: flex;
         flex-direction: column;
         flex: 1 1 0%;
         padding: map-get($summary-padding, 'comfortable');
-        background: --var($theme, 'background-color');
+        background: --var($theme, 'background-color', inherit);
         overflow: hidden;
+        outline-style: none;
+
+        &::after {
+            position: absolute;
+            content: '';
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+
+        &:focus::after {
+            background: --var($theme, 'focus-background-color');
+        }
     }
 
     %igx-grid-summary--cosy {

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

@@ -9,7 +9,8 @@
 /// Generates a light grid-summary schema.
 /// @type {Map}
 ///
-/// @property {Color} background-color [inherit] - The summaries background color is inherited form igx-grid__tfoot
+/// @property {Color} background-color [inherit] - The summaries background color is inherited form igx-grid__tfoot.
+/// @property {Color} focus-background-color [igx-color] - The background color when a summary item is on focus.
 /// @property {map} label-color [igx-color: ('primary', 500)] - The summaries label color.
 /// @property {Color} result-color [currentColor] - The summaries value/result color.
 /// @property {map} border-color [igx-color: ('grays', 400)] - The summaries border color.
@@ -24,6 +25,11 @@ $_light-grid-summary: extend(
     $_default-shape-grid-summary,
     (
         background-color: inherit,
+
+        focus-background-color: (
+            igx-color: ('grays', 100)
+        ),
+
         label-color: (
             igx-color: ('primary', 500)
         ),