Merge pull request #8130 from IgniteUI/mpopov/remove-focus-styles

fix(grid): disable focus styles for min parts of the grid

Author: zdrawku

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -605,8 +605,7 @@
         }
 
         %cal-value,
-        %cal-value--label,
-        {
+        %cal-value--label {
             // 100 divided by the number of weekdays
             min-width: 14.28%;
 
@@ -683,11 +682,7 @@
 
                 &::after {
                     top: 100%;
-                    @if $not-bootstrap-theme{
-                        height: ($cal-row-padding / 2) + rem(2px);
-                    } @else {
-                        height: $cal-row-padding + rem(5px);
-                    }
+                    height: if($not-bootstrap-theme, ($cal-row-padding / 2) + rem(2px), $cal-row-padding + rem(5px));
                 }
 
                 &::before {
@@ -718,7 +713,7 @@
         }
 
         &:nth-child(2) {
-            @if $not-bootstrap-theme{
+            @if $not-bootstrap-theme {
                 margin-top: 0;
             }
         }
@@ -733,7 +728,7 @@
                 }
             }
 
-            @if $bootstrap-theme{
+            @if $bootstrap-theme {
                 margin-bottom: 0;
             }
         }

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

@@ -30,6 +30,10 @@
         igx-display-container {
             @extend %grid-display-container-thead !optional;
         }
+
+        &:focus {
+            @extend %disable-focus-styles !optional;
+        }
     }
 
     @include e(thead-title) {
@@ -64,6 +68,10 @@
 
     @include e(tbody-content) {
         @extend %grid-tbody !optional;
+
+        &:focus {
+            @extend %disable-focus-styles !optional;
+        }
     }
 
     @include e(tbody-message) {
@@ -104,6 +112,10 @@
 
     @include e(tfoot) {
         @extend %grid-tfoot !optional;
+
+        &:focus {
+            @extend %disable-focus-styles !optional;
+        }
     }
 
     @include e(tfoot-thumb) {

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

@@ -696,6 +696,10 @@
         indigo-design: 600,
     ), $variant);
 
+    %disable-focus-styles {
+        outline: 0;
+    }
+
     %grid-display {
         position: relative;
         display: grid;