@syncfusion/ej2-angular-grids 22.2.12 → 23.1.36

package/styles/grid/_material-definition.scss

@@ -12,6 +12,8 @@ $grid-bottom-border-size: $border-size !default;
 $grid-horizontal-border-size: $border-size !default;
 $grid-font-family: $font-family !default;
 $grid-maskedcell-virtual-background-color: rgba(0, 0, 0, .1) !default;
+$grid-frozen-shadow-background-color: rgba(0, 0, 0, .12) !default;
+$grid-frozen-row-shadow-background-color: rgba(0, 0, 0, .12) !default;
 
 $grid-headercell-div-padding: 0 .6em !default;
 $grid-grouped-headercell-span-padding: 0 !default;
@@ -247,6 +249,8 @@ $grid-filterbarcell-padding: 0 21px !default;
 $grid-vertical-border-size: 0 !default;
 $grid-content-padding: 8px !default;
 $grid-rowcell-line-height: 20px !default;
+$grid-rowcell-autofill-top-line-height: 18px !default;
+$grid-rowcell-autofill-top-bottom-line-height: 16px !default;
 $grid-headercell-line-height: 42px !default;
 $grid-filtercell-line-height: 42px !default;
 $grid-cell-border-color: $grey-300 !default;
@@ -359,6 +363,8 @@ $grid-bigger-header-first-last-cell-padding: round(math.div($grid-header-first-l
 $grid-bigger-content-padding: round(math.div($grid-content-padding, .75)) !default;
 $grid-bigger-content-right-padding: round(math.div($grid-content-right-padding, .75)) !default;
 $grid-bigger-rowcell-line-height: round(math.div($grid-rowcell-line-height, .75)) !default;
+$grid-bigger-rowcell-autofill-top-line-height: 25px !default;
+$grid-bigger-rowcell-autofill-top-bottom-line-height: 23px !default;
 $grid-bigger-first-last-rowcell-padding: round(math.div($grid-first-last-rowcell-padding, .75)) !default;
 $grid-bigger-group-line-height: round(math.div($grid-group-height, .75)) !default;
 $grid-bigger-group-headercell-height: round(math.div($grid-headecell-height, .75)) !default;
@@ -396,6 +402,7 @@ $grid-frozenborder-disabled-color: $content-bg-color !default;
 $grid-freezeline-right-border: rgba($accent, .6) !default;
 $grid-freezeline-border: 2px solid !default;
 $grid-cell-focus-shadow: 0 0 0 1px $grey-500 inset !default;
+$grid-cell-focus-border-color: $grey-500 !default;
 $grid-filtered-color: $accent !default;
 $grid-autofill-color: $accent !default;
 $grid-e-firstrow-dragborder-bcolor: $accent !default;
@@ -475,6 +482,8 @@ $grid-group-clone-box-shadow: 0 0 !default;
 $grid-unboundcelldiv-margin: 0 3.5px !default;
 $grid-bigger-flmenu-padding: $grid-flmenu-padding !default;
 $grid-rowcell-wrap-height: 18px !default;
+$grid-rowcell-autofill-top-height: 16px !default;
+$grid-rowcell-autofill-top-bottom-height: 14px !default;
 $grid-rowcell-wrap-max-height: 36px !default;
 $grid-bigger-fltr-sortnumber-rightalign-margin: 7px 2px 0 5px !default;
 $grid-bigger-sortnumber-rightalign-margin: $grid-bigger-fltr-sortnumber-rightalign-margin !default;
@@ -485,6 +494,8 @@ $grid-rtl-searchclear: 0 !default;
 $grid-column-chosser-searchdiv-top: -46px !default;
 $grid-reorderarrow-font-size: 8px !default;
 $grid-bigger-wrap-line-height: 18px !default;
+$grid-bigger-wrap-autofill-top-line-height: 16px !default;
+$grid-bigger-wrap-autofill-top-bottom-line-height: 14px !default;
 $grid-bigger-clone-padding: $grid-clone-padding !default;
 $grid-bigger-draganddrop-clone-padding: 0 !default;
 $grouped-bigger-text-font-size: $grouped-text-font-size !default;

package/styles/grid/_material3-definition.scss

@@ -8,6 +8,8 @@ $grid-vertical-border-size: 1px !default;
 $grid-horizontal-border-size: 1px !default;
 $grid-font-family: $font-family !default;
 $grid-maskedcell-virtual-background-color: rgba(0, 0, 0, .1) !default;
+$grid-frozen-shadow-background-color: rgba(0, 0, 0, .12) !default;
+$grid-frozen-row-shadow-background-color: rgba(0, 0, 0, .12) !default;
 
 $grid-header-font-size: 14px !default;
 $grid-bigger-header-font-size: 14px !default;
@@ -185,6 +187,10 @@ $grid-filtercell-both-border-width: 1px 0 0 1px !default;
 
 $grid-header-border-color: rgba($border-light) !default;
 $grid-rowcell-line-height: 20px !default;
+$grid-bigger-rowcell-autofill-top-line-height: 22px !default;
+$grid-bigger-rowcell-autofill-top-bottom-line-height: 20px !default;
+$grid-rowcell-autofill-top-line-height: 18px !default;
+$grid-rowcell-autofill-top-bottom-line-height: 16px !default;
 $grid-content-font-color: rgba($content-text-color) !default;
 $grid-hover-content-font-color: rgba($content-text-color-hover) !default;
 $grid-cell-border-color: rgba($border-light) !default;
@@ -406,6 +412,7 @@ $grid-edit-checkbox-bigger-padding-top: 8px !default;
 $frozen-border-color: $accent !default;
 $grid-frozenborder-disabled-color: rgba($content-bg-color) !default;
 $grid-cell-focus-shadow: 0 0 0 1px rgba($primary) inset !default;
+$grid-cell-focus-border-color: rgba($primary) !default;
 $grid-headercelldiv-fltricon-margin: -5px 20px -5px -5px !default;
 $grid-headercelldiv-rightalign-fltricon-margin: -5px 20px -5px 10px !default;
 $grid-rtl-headercelldiv-fltricon-margin: -5px !default;
@@ -482,6 +489,8 @@ $grid-group-clone-box-shadow: $shadow-md !default;
 $grid-unboundcelldiv-margin: 0 4px !default;
 $grid-bigger-flmenu-padding: 16px 0 0 !default;
 $grid-rowcell-wrap-height: 21px !default;
+$grid-rowcell-autofill-top-height: 19px !default;
+$grid-rowcell-autofill-top-bottom-height: 17px !default;
 $grid-rowcell-wrap-max-height: 36px !default;
 $grid-bigger-fltr-sortnumber-rightalign-margin: 0 3px 0 5px !default;
 $grid-bigger-sortnumber-rightalign-margin: 0 2px 0 8px !default;
@@ -492,6 +501,8 @@ $grid-rtl-searchclear: 0 !default;
 $grid-column-chosser-searchdiv-top: -41px !default;
 $grid-reorderarrow-font-size: 10px !default;
 $grid-bigger-wrap-line-height: 24px !default;
+$grid-bigger-wrap-autofill-top-line-height: 22px !default;
+$grid-bigger-wrap-autofill-top-bottom-line-height: 20px !default;
 $grid-bigger-clone-padding: 3px 0 0 8px !default;
 $grid-bigger-draganddrop-clone-padding: 0 !default;
 $grouped-bigger-text-font-size: 14px !default;
@@ -611,7 +622,7 @@ $grid-skin: 'material3' !default;
 $grid-biggerreorderarrow-font-size: 14px !default;
 $grid-bigger-drag-count-padding: 3px 8px 4px !default;
 $grid-bigger-drag-count-top: -13px !default;
-$grid-bigger-check-select-all-font-size: 10px !default;
+$grid-bigger-check-select-all-font-size: 14px !default;
 $grid-adaptive-sort-clear-button-padding: 0 !default;
 $grid-cc-margin-top: 0 !default;
 $grid-bigger-rtl-cm-margin: -14px 4px -12px -16px !default;

package/styles/grid/_tailwind-definition.scss

@@ -10,6 +10,8 @@ $grid-vertical-border-size: 1px !default;
 $grid-horizontal-border-size: 1px !default;
 $grid-font-family: $font-family !default;
 $grid-maskedcell-virtual-background-color: rgba(0, 0, 0, .1) !default;
+$grid-frozen-shadow-background-color: rgba(0, 0, 0, .12) !default;
+$grid-frozen-row-shadow-background-color: rgba(0, 0, 0, .12) !default;
 
 $grid-header-font-size: $text-xxs !default;
 $grid-bigger-header-font-size: $text-sm !default;
@@ -185,6 +187,10 @@ $grid-header-font-weight: $font-weight-medium !default;
 $grid-filtercell-both-border-width: 2px 0 0 1px !default;
 $grid-header-border-color: $border-light !default;
 $grid-rowcell-line-height: 22px !default;
+$grid-bigger-rowcell-autofill-top-line-height: 20px !default;
+$grid-bigger-rowcell-autofill-top-bottom-line-height: 18px !default;
+$grid-rowcell-autofill-top-line-height: 20px !default;
+$grid-rowcell-autofill-top-bottom-line-height: 18px !default;
 $grid-content-font-color: $content-text-color !default;
 $grid-hover-content-font-color: $content-text-color-hover !default;
 $grid-cell-border-color: $border-light !default;
@@ -402,6 +408,7 @@ $grid-freezeline-border: 3px solid !default;
 $grid-edit-checkbox-bigger-padding-left: 8px !default;
 $grid-edit-checkbox-bigger-padding-top: 8px !default;
 $grid-cell-focus-shadow: 0 0 0 1px $primary inset !default;
+$grid-cell-focus-border-color: $primary !default;
 $grid-headercelldiv-fltricon-margin: -5px 20px -5px -5px !default;
 $grid-headercelldiv-rightalign-fltricon-margin: -5px 15px -5px 0 !default;
 $grid-rtl-headercelldiv-fltricon-margin: -5px -5px -5px -5px !default;
@@ -482,6 +489,8 @@ $grid-group-clone-box-shadow: $shadow !default;
 $grid-unboundcelldiv-margin: 0 4px !default;
 $grid-bigger-flmenu-padding: 16px 0 0 !default;
 $grid-rowcell-wrap-height: 21px !default;
+$grid-rowcell-autofill-top-height: 19px !default;
+$grid-rowcell-autofill-top-bottom-height: 17px !default;
 $grid-rowcell-wrap-max-height: 36px !default;
 $grid-bigger-fltr-sortnumber-rightalign-margin: 0 6px 0 0 !default;
 $grid-bigger-sortnumber-rightalign-margin: 0 6px 0 6px !default;
@@ -492,6 +501,8 @@ $grid-rtl-searchclear: 0 !default;
 $grid-column-chosser-searchdiv-top: -41px !default;
 $grid-reorderarrow-font-size: $text-lg !default;
 $grid-bigger-wrap-line-height: 24px !default;
+$grid-bigger-wrap-autofill-top-line-height: 22px !default;
+$grid-bigger-wrap-autofill-top-bottom-line-height: 20px !default;
 $grid-bigger-clone-padding: 3px 0 0 8px !default;
 $grid-bigger-draganddrop-clone-padding: 3px 0 0 8px !default;
 $grouped-bigger-text-font-size: $text-base !default;

package/styles/grid/_theme.scss

@@ -30,6 +30,11 @@
       box-shadow: $grid-cell-focus-shadow;
     }
 
+    &.e-left-shadow .e-leftfreeze.e-freezeleftborder.e-focused:not(.e-menu-item,.e-xlsel-top-border,.e-xlsel-left-border,.e-xlsel-bottom-border,.e-xlsel-right-border),
+    &.e-right-shadow .e-rightfreeze.e-freezerightborder.e-focused:not(.e-menu-item,.e-xlsel-top-border,.e-xlsel-left-border,.e-xlsel-bottom-border,.e-xlsel-right-border) {
+      border-color: $grid-cell-focus-border-color;
+    }
+
     .e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow) {
       color: $grid-icon-default-color;
     }
@@ -67,6 +72,10 @@
       z-index: 1;
     }
 
+    .e-autofill.e-freeze-autofill {
+      z-index: 5;
+    }
+
     .e-xlsel {
       background-color: transparent;
       border-style: solid;
@@ -78,6 +87,7 @@
       background-color: $grid-autofill-color;
       border-color: $grid-autofill-color;
       position: absolute;
+      z-index: 3;
     }
 
     .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
@@ -90,10 +100,57 @@
     &.e-rtl .e-gridcontent .e-rowcell.e-dragborder,
     &.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder {
       box-shadow: $grid-dragborder-box-shadow;
-      position: $grid-dragborder-position;
       z-index: $grid-dragborder-z-index;
     }
 
+    .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder.e-leftfreeze,
+    .e-gridcontent .e-rowcell.e-dragborder.e-leftfreeze,
+    .e-gridcontent .e-groupcaption.e-dragborder.e-leftfreeze,
+    .e-gridcontent .e-summarycell.e-dragborder.e-leftfreeze,
+    .e-gridcontent .e-rowdragdrop.e-dragborder.e-leftfreeze,
+    & .e-gridheader thead tr th.e-firstrowdragborder.e-leftfreeze,
+    &.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder.e-leftfreeze,
+    &.e-rtl .e-gridcontent .e-rowcell.e-dragborder.e-leftfreeze,
+    &.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder.e-leftfreeze {
+      z-index: 6;
+    }
+
+    .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder.e-rightfreeze,
+    .e-gridcontent .e-rowcell.e-dragborder.e-rightfreeze,
+    .e-gridcontent .e-groupcaption.e-dragborder.e-rightfreeze,
+    .e-gridcontent .e-summarycell.e-dragborder.e-rightfreeze,
+    .e-gridcontent .e-rowdragdrop.e-dragborder.e-rightfreeze,
+    & .e-gridheader thead tr th.e-firstrowdragborder.e-rightfreeze,
+    &.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder.e-rightfreeze,
+    &.e-rtl .e-gridcontent .e-rowcell.e-dragborder.e-rightfreeze,
+    &.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder.e-rightfreeze {
+      z-index: 6;
+    }
+
+    .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder.e-fixedfreeze,
+    .e-gridcontent .e-rowcell.e-dragborder.e-fixedfreeze,
+    .e-gridcontent .e-groupcaption.e-dragborder.e-fixedfreeze,
+    .e-gridcontent .e-summarycell.e-dragborder.e-fixedfreeze,
+    .e-gridcontent .e-rowdragdrop.e-dragborder.e-fixedfreeze,
+    & .e-gridheader thead tr th.e-firstrowdragborder.e-fixedfreeze,
+    &.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder.e-fixedfreeze,
+    &.e-rtl .e-gridcontent .e-rowcell.e-dragborder.e-fixedfreeze,
+    &.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder.e-fixedfreeze {
+      z-index: 6;
+    }
+
+    .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
+    .e-gridcontent .e-rowcell.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
+    .e-gridcontent .e-groupcaption.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
+    .e-gridcontent .e-summarycell.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
+    .e-gridcontent .e-rowdragdrop.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
+    & .e-gridheader thead tr th.e-firstrowdragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
+    &.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
+    &.e-rtl .e-gridcontent .e-rowcell.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
+    &.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze) {
+      position: $grid-dragborder-position;
+    }
+
     .e-gridheader {
       background-color: $grid-header-bg-color;
       border-bottom-color: $grid-outter-border;
@@ -107,6 +164,12 @@
       }
     }
 
+    .e-gridcontent {
+      & tr:first-child td.e-xlsel-top-border {
+        border-top-color: $frozen-border-color;
+      }
+    }
+
     th.e-headercell[aria-sort = 'ascending'] .e-headertext,
     th.e-headercell[aria-sort = 'descending'] .e-headertext,
     th.e-headercell[aria-sort = 'ascending'] .e-sortfilterdiv,
@@ -254,6 +317,92 @@
       border-right-color: $grid-frozenborder-disabled-color;
     }
 
+    &.e-rtl .e-leftfreeze.e-freezeleftborder {
+      border-left-color: $frozen-border-color;
+    }
+      
+    &.e-rtl .e-rightfreeze.e-freezerightborder {
+      border-right-color: $frozen-border-color;
+    }
+    
+    &.e-rtl .e-filterbarcell.e-fixedfreeze.e-freezeleftborder,
+    &.e-rtl .e-fixedfreeze.e-freezeleftborder {
+      border-right-color: $frozen-border-color;
+    }
+    
+    &.e-rtl .e-filterbarcell.e-fixedfreeze.e-freezerightborder,
+    &.e-rtl .e-fixedfreeze.e-freezerightborder  {
+      border-left-color: $frozen-border-color;
+    }
+
+    .e-leftfreeze.e-freezeleftborder {
+      border-right-color: $frozen-border-color;
+    }
+
+    .e-rightfreeze.e-freezerightborder {
+      border-left-color: $frozen-border-color;
+    }
+
+    .e-filterbarcell.e-fixedfreeze.e-freezeleftborder,
+    .e-fixedfreeze.e-freezeleftborder {
+      border-left-color: $frozen-border-color;
+    }
+
+    .e-filterbarcell.e-fixedfreeze.e-freezerightborder,
+    .e-fixedfreeze.e-freezerightborder  {
+      border-right-color: $frozen-border-color;
+    }
+
+    .e-xlsel-top-border {
+      border-top-color: $frozen-border-color;
+    }
+
+    .e-xlsel-left-border {
+      border-left-color: $frozen-border-color;
+    }
+
+    .e-xlsel-right-border {
+      border-right-color: $frozen-border-color;
+    }
+
+    .e-xlsel-bottom-border {
+      border-bottom-color: $frozen-border-color;
+    }
+
+    .e-leftfreeze:not(.e-summarycell, .e-indentcell, .e-updatedtd, .e-selectionbackground, .e-columnselection, .e-groupcaption, .e-cellselectionbackground),
+    .e-rightfreeze:not(.e-summarycell, .e-updatedtd, .e-selectionbackground, .e-columnselection, .e-groupcaption, .e-cellselectionbackground),
+    .e-fixedfreeze:not(.e-summarycell, .e-selectionbackground, .e-updatedtd, .e-columnselection, .e-groupcaption, .e-cellselectionbackground) {
+      @if $grid-skin == 'material' $grid-skin == 'highcontrast' {
+        background-color: $grid-rows-bg-color;
+      }
+      @else {
+        background-color: $grid-content-bg-color;
+      }
+    }
+
+    .e-gridcontent .e-groupcaptionrow .e-leftfreeze.e-groupcaption,
+    .e-gridcontent .e-groupcaptionrow .e-leftfreeze.e-recordplusexpand,
+    .e-gridcontent .e-groupcaptionrow .e-leftfreeze.e-recordpluscollapse,
+    .e-gridcontent .e-groupcaptionrow .e-leftfreeze.ee-indentcell {
+      @if $grid-skin == 'material3' {
+        background: $group-row-bg-color;
+      }
+      @else {
+        background-color: $group-row-bg-color;
+      }
+    }
+
+    .e-gridfooter .e-leftfreeze,
+    .e-gridfooter .e-rightfreeze,
+    .e-gridfooter .e-fixedfreeze {
+      @if $grid-skin == 'material3' {
+        background: $grid-summary-row-bg-color;
+      }
+      @else {
+        background-color: $grid-summary-row-bg-color;
+      }
+    }
+
     .e-frozenheader.e-frozen-right-header > .e-table,
     .e-frozencontent.e-frozen-right-content > .e-table,
     .e-rowcell .e-frozen-default-cursor,
@@ -291,6 +440,34 @@
       }
     }
 
+    &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-leftfreeze,
+    &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-rightfreeze,
+    &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-unfreeze,
+    &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-fixedfreeze,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-leftfreeze,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-rightfreeze,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-unfreeze,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-fixedfreeze,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse.e-leftfreeze,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse.e-rightfreeze,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse.e-unfreeze,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse.e-fixedfreeze,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-leftfreeze,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-rightfreeze,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-unfreeze,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-fixedfreeze,
+    &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-leftfreeze,
+    &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-rightfreeze,
+    &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-unfreeze,
+    &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-fixedfreeze,
+    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
+      &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+        @if $grid-skin == 'material3' or grid-skin == 'bootstrap4' {
+          background-color: rgb(250 244 244);
+        }
+      }
+    }
+
     &.e-gridhover .e-dragclone .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
     &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
     &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
@@ -318,6 +495,34 @@
           }
         }
       }
+
+      &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-leftfreeze,
+      &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-rightfreeze,
+      &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-unfreeze,
+      &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-fixedfreeze,
+      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-leftfreeze,
+      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-rightfreeze,
+      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-unfreeze,
+      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-fixedfreeze,
+      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse.e-leftfreeze,
+      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse.e-rightfreeze,
+      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse.e-unfreeze,
+      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse.e-fixedfreeze,
+      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-leftfreeze,
+      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-rightfreeze,
+      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-unfreeze,
+      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-fixedfreeze,
+      &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-leftfreeze,
+      &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-rightfreeze,
+      &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-unfreeze,
+      &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-fixedfreeze,
+      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
+        &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+          @if $grid-skin == 'material3' or $grid-skin == 'bootstrap4' {
+            background-color: rgb(250 244 244);
+          }
+        }
+      }
     }
 
     & .e-row:hover .e-rowdragdrop {
@@ -352,6 +557,22 @@
       color: $grid-row-selection-color;
     }
 
+    td.e-active.e-leftfreeze:not(.e-updatedtd),
+    td.e-active.e-unfreeze:not(.e-updatedtd),
+    td.e-active.e-rightfreeze:not(.e-updatedtd),
+    td.e-active.e-fixedfreeze:not(.e-updatedtd),
+    .e-columnselection.e-leftfreeze:not(.e-updatedtd),
+    .e-columnselection.e-unfreeze:not(.e-updatedtd),
+    .e-columnselection.e-rightfreeze:not(.e-updatedtd),
+    .e-columnselection.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+      @else if $grid-skin == 'bootstrap4' {
+        background-color: rgb(212 205 205);
+      }
+    }
+
     .e-columnselection {
       background-color: $grid-row-selection-bg-color;
     }
@@ -442,7 +663,7 @@
       border: 0 none;
     }
 
-    &.e-resize-lines .e-headercell.e-stackedheadercell {
+    &.e-resize-lines .e-headercell.e-stackedheadercell:not(.e-freezerightborder, .e-freezeleftborder) {
       border-bottom: 1px solid $grid-header-border-color;
       border-right: 1px solid $grid-header-border-color;
     }
@@ -582,12 +803,12 @@
       color: $grid-content-batch-font-color;
     }
 
-    .e-gridcontent .e-normaledit .e-rowcell {
+    .e-gridcontent table tbody .e-normaledit .e-rowcell {
       border-top-color: $grid-header-border-color;
     }
 
-    .e-gridcontent .e-normaledit .e-dragindentcell,
-    .e-gridcontent .e-normaledit .e-detailrowcollapse {
+    .e-gridcontent table tbody .e-normaledit .e-dragindentcell,
+    .e-gridcontent table tbody .e-normaledit .e-detailrowcollapse {
       border-top: 1px solid $grid-header-border-color;
     }
 
@@ -612,7 +833,7 @@
         padding-top: 6px;
         padding-bottom: 6px;
       }
-
+      
       &.e-focused {
         box-shadow: none;
       }