fix(grid-theme): column moving styles in multi-column headers

Author: simeonoff

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

@@ -425,6 +425,7 @@
     }
 
     %grid-thead {
+        position: relative;
         grid-row: 2;
         border-bottom: 1px dotted igx-color($palette, 'grays', 400);
         z-index: 2;
@@ -558,6 +559,7 @@
     }
 
     %grid-cell-display {
+        position: relative;
         display: flex;
         flex: 1 1 0%;
         align-items: center;
@@ -582,7 +584,9 @@
     }
 
     %grid-cell--fixed-width {
+        position: relative;
         flex-grow: 0;
+        outline-style: none;
     }
 
     %grid-cell--selected {
@@ -625,7 +629,7 @@
         min-width: 0;
         padding: map-get($grid-header-padding, 'comfortable');
         border-right: 1px dotted igx-color($palette, 'grays', 400);
-        overflow: visible;
+        outline-style: none;
     }
 
     %grid-cell-header--cosy {
@@ -640,15 +644,22 @@
 
     %grid-cell-header-title {
         @include ellipsis();
-        display: inline-flex;
-        align-items: center;
+        min-width: 3ch;
         user-select: none;
         cursor: initial;
         flex-grow: 1; /* hey IE, the text should take most of the space */
         align-self: flex-end;
         line-height: map-get($grid-header-height, 'comfortable') / $grid-head-fs;
     }
 
+    %grid-cell-header-title--cosy {
+        line-height: map-get($grid-header-height, 'cosy') / $grid-head-fs;
+    }
+
+    %grid-cell-header-title--compact {
+        line-height: map-get($grid-header-height, 'compact') / $grid-head-fs;
+    }
+
     %grid-cell-header-icons {
         display: inline-flex;
         align-items: center;
@@ -670,12 +681,10 @@
         }
     }
 
-    %grid-cell-header-title--cosy,
     %grid-cell-header-icons--cosy {
         height: map-get($grid-header-height, 'cosy');
     }
 
-    %grid-cell-header-title--compact,
     %grid-cell-header-icons--compact {
         height: map-get($grid-header-height, 'compact');
     }
@@ -751,22 +760,20 @@
 
 
     // Column moving
-
-    %igx-grid__th-drop-indicator-left {
+    %igx-grid__th-drop-indicator-left,
+    %igx-grid__th-drop-indicator-right {
         position: absolute;
         width: 1px;
-        top: 0;
-        left: -1px;
         height: 100%;
+        top: 0;
     }
 
+    %igx-grid__th-drop-indicator-left {
+        left: -1px;
+    }
 
     %igx-grid__th-drop-indicator-right {
-        position: absolute;
-        width: 1px;
-        top: 0;
         right: -1px;
-        height: 100%;
     }
 
     %igx-grid__th-drop-indicator--active {
@@ -777,66 +784,65 @@
 
         &::after,
         &::before {
-            content: '';
             position: absolute;
+            content: '';
             width: 0;
             height: 0;
             border-style: solid;
-            left: -4.5px;
+            left: -3px;
         }
 
         &::before {
             bottom: 0;
-            border-width: 0 5px 5px;
+            border-width: 0 4px 4px;
             border-color: transparent transparent --var($theme, 'drop-indicator-color');
         }
 
         &::after {
             top: 0;
-            border-width: 5px 5px 0;
+            border-width: 4px 4px 0;
             border-color: --var($theme, 'drop-indicator-color') transparent transparent;
         }
     }
 
-    %grid__scroll-on-drag-left {
+    %grid__scroll-on-drag-left,
+    %grid__scroll-on-drag-right {
         position: absolute;
         width: 15px;
         top: 0;
-        left: 0;
         height: 100%;
         z-index: 25;
     }
 
+    %grid__scroll-on-drag-left {
+        left: 0;
+    }
+
     %grid__scroll-on-drag-right {
-        position: absolute;
-        width: 15px;
-        top: 0;
         right: 0;
-        height: 100%;
-        z-index: 25;
     }
 
     %grid__scroll-on-drag-pinned {
-        position: absolute;
         width: 15px;
         height: 100%;
         top: 0;
         z-index: 25;
     }
 
     %grid__drag-ghost-image {
-        background-color: --var($theme, 'ghost-header-background');
-        color: --var($theme, 'ghost-header-text-color');
         position: absolute;
-        z-index: 20;
+        display: flex;
         align-items: center;
+        background-color: --var($theme, 'ghost-header-background');
+        color: --var($theme, 'ghost-header-text-color');
         height: map-get($grid-header-height, 'comfortable');
         min-height: map-get($grid-header-height, 'comfortable');
         top: -99999px;
         left: -99999px;
-        overflow: visible;
-        display: inline-flex;
+        border: none;
         box-shadow: igx-elevation($elevations, 5);
+        overflow: hidden;
+        z-index: 20;
 
         %grid-cell-header-title {
             min-width: calc(100% - 24px);
@@ -845,6 +851,10 @@
         %grid-cell-header-icons {
             display: none;
         }
+
+        %grid-thead-title {
+            border: none;
+        }
     }
 
     %grid__drag-ghost-image--cosy {
@@ -859,19 +869,14 @@
 
     %grid__drag-ghost-image-icon {
         color: --var($theme, 'ghost-header-icon-color');
-        font-size: rem(24px);
         margin-right: rem(12px);
-        padding-bottom: rem(12px);
     }
 
     %grid__drag-ghost-image-icon-group {
         color: --var($theme, 'ghost-header-icon-color');
-        font-size: rem(24px);
-        margin-right: rem(12px);
-        padding-top: rem(12px);
-        padding-left: rem(12px);
+        padding: --var($grid-header-padding, 'comfortable');
+        padding-right: 0;
         margin-right: rem(8);
-        width: rem(24px);
     }
 
     %igx-grid__drag-col-header {
@@ -883,8 +888,7 @@
         }
     }
 
-    // Groupby section
-
+    // Group by section
     %igx-grid__group-row {
         background-color: --var($theme, 'group-row-background');
         display: flex;
@@ -1047,7 +1051,7 @@
         flex-wrap: wrap;
 
         &:focus {
-            outline: transparent;
+            outline-style: none;
         }
     }
 
@@ -1122,7 +1126,7 @@
 
         &:hover,
         &:focus {
-            outline: transparent;
+            outline-style: none;
 
             %igx-icon-display {
                 color: --var($theme, 'expand-icon-hover-color');