@syncfusion/blazor-themes 20.4.52 → 20.4.54

package/SCSS-Themes/grids/grid/material.scss

@@ -65,7 +65,7 @@ $grid-group-clone-text-align: center !default;
 $grid-group-unpgroupicon-margin-top: 0 !default;
 $grid-ungroup-rtl-padding-right: 6px !default;
 $filter-text-color: $content-font-color !default;
-$grid-wrap-line-height: 18px !default;
+$grid-wrap-line-height: 3px !default;
 $grid-wrap-margin-bottom: 2px !default;
 $grid-wrap-margin-top: 0 !default;
 
@@ -83,6 +83,8 @@ $grid-summary-row-bg-color: lighten($group-row-bg-stcolor, 4%) !default;
 $grid-filtercell-both-border-width: 1px 0 0 1px !default;
 $grid-headercelldiv-margin: -7px !default;
 $grid-rtl-headercelldiv-padding: 0 .6em 0 1.8em !default;
+$grid-rtl-headercelldiv-chkbox-padding: 0 .6em 0 .55em !default;
+$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .6em 0 1.15em !default;
 $grid-headercelldiv-padding: 0 1.8em 0 .6em !default;
 $grid-headercelldiv-right-align-padding: 0 .6em 0 1.9em !default;
 $grid-filterbarcell-text-input: 26px !default;
@@ -101,8 +103,8 @@ $grid-sortdiv-padding: 3px !default;
 $grid-sortnumer-line-height: 16px !default;
 $grid-bigger-sortnumer-line-height: $grid-sortnumer-line-height !default;
 $grid-sortnumber-border-radius: 65% !default;
-$grid-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
-$grid-textwrap-srotnumber-margin: 3px 5px 0 2px !default;
+$grid-textwrap-srotnumber-rightalign-margin: 1px 2px 0 15px !default;
+$grid-textwrap-srotnumber-margin: 2px -5px 0 2px !default;
 $grid-textwrap-sorticon-margin: -9px 10px !default;
 $grid-columnchooser-header-padding: 11px 18px 15px !default;
 $grid-cc-checkbox-padding-left: 9px !default;
@@ -235,18 +237,18 @@ $grid-rtl-headercelldiv-fltricon-padding: 0 1.6em 0 10px !default;
 $grid-sortnumber-filtericon-rightalign-margin: 7px 2px 0 5px !default;
 $grid-bigger-checkbox-filter-min-height: 352px !default;
 $grid-checkbox-filter-min-height: 322px !default;
-$grid-rtl-bigger-fltricon-sortdiv-margin: -15px 30px 0 0 !default;
-$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -16px 0 !default;
+$grid-rtl-bigger-fltricon-sortdiv-margin: -20px 30px 0 14px !default;
+$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -20px 14px !default;
 $grid-rows-bg-color: $content-bg-color !default;
 $grid-resize-border-width: 1px !default;
 $grid-filterbarcell-input-padding: 0 26px 0 10px !default;
 $grid-header-wrap-rightalign-sortfilter-div-margin: -18px 5px !default;
-$grid-header-wrap-filtericon-sortfilter-div-margin: -11px 24px !default;
+$grid-header-wrap-filtericon-sortfilter-div-margin: -20px 18px !default;
 $grid-bigger-wrap-sortdiv-margin: -20px 8px !default;
 $grid-bigger-wrap-rightalign-sortdiv-margin: -20px 2px !default;
 $grid-bigger-wrap-fltricon-sortdiv-margin: -10px 18px !default;
 $grid-bigger-wrap-rightalign-fltricon-sortdiv-margin: -12px 2px !default;
-$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -10px 5px !default;
+$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -20px 14px !default;
 $grid-header-padding: 21px !default;
 $grid-header-first-last-cell-padding: 21px !default;
 $grid-header-bottom-padding: 0 !default;
@@ -494,7 +496,7 @@ $grid-bigger-fltr-sortnumber-margin: $grid-bigger-sortnumber-margin !default;
 $grid-rtl-searchclear: 0 !default;
 $grid-column-chosser-searchdiv-top: -46px !default;
 $grid-reorderarrow-font-size: 8px !default;
-$grid-bigger-wrap-line-height: $grid-wrap-line-height !default;
+$grid-bigger-wrap-line-height: 18px !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;
@@ -859,9 +861,7 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-bigger-rtl-headercelldiv-chkbox-padding;
     }
 
     .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
@@ -2417,11 +2417,10 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-rtl-headercelldiv-chkbox-padding;
     }
 
+
     .e-filtermenudiv {
       float: $grid-fltrdiv-float;
       margin: $grid-fltrdiv-margin;
@@ -2534,7 +2533,7 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-wrap .e-columnmenu {
-      margin: $grid-textwrap-column-menu-margin;
+      line-height: $grid-wrap-line-height;
     }
 
     &.e-rtl .e-columnmenu {
@@ -2548,7 +2547,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-wrap {
       &.e-rtl  .e-columnmenu {
-        margin: $grid-rtl-textwrap-column-menu-margin;
+        line-height: $grid-wrap-line-height;
       }
     }
 
@@ -3730,6 +3729,13 @@ $grid-dropitems-count-margin-left: -8px !default;
         margin: $grid-rtl-headercelldiv-rightalign-fltricon-margin;
       }
 
+      &.e-wrap .e-columnheader .e-rightalign.e-fltr-icon .e-headercelldiv,
+      & .e-columnheader.e-wrap .e-rightalign.e-fltr-icon .e-headercelldiv {
+        height: auto;
+        margin-bottom: $grid-wrap-margin-bottom;
+        margin-top: $grid-wrap-margin-top;
+      }
+
       & .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
         margin: $grid-rtl-headercelldiv-fltricon-margin;
       }
@@ -4048,7 +4054,8 @@ $grid-dropitems-count-margin-left: -8px !default;
     &.e-wrap {
       & .e-rowcell,
       & .e-columnheader .e-stackedheadercelldiv,
-      & .e-columnheader .e-headercelldiv {
+      & .e-columnheader .e-headercelldiv,
+      & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
         height: Auto;
         line-height: $grid-rowcell-wrap-height;
         overflow-wrap: break-word;
@@ -4064,25 +4071,30 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-wrap .e-columnheader .e-headercelldiv,
-    & .e-columnheader.e-wrap .e-headercelldiv {
+    &.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv {
       margin-bottom: $grid-wrap-margin-bottom;
       margin-top: $grid-wrap-margin-top;
     }
 
-    &.e-wrap .e-columnheader .e-filtermenudiv {
+    &.e-wrap .e-columnheader .e-filtermenudiv,
+    &.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
-    & .e-columnheader.e-wrap .e-filtermenudiv {
+    & .e-columnheader.e-wrap .e-filtermenudiv,
+    & .e-columnheader.e-wrap .e-sortfilterdiv.e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
     & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv,
     & .e-columnheader.e-wrap .e-stackedheadercelldiv,
     & .e-gridcontent.e-wrap .e-rowcell,
     & .e-frozenhdrcont.e-wrap .e-rowcell {
       height: Auto;
-      line-height: $grid-wrap-line-height;
+      line-height: $grid-rowcell-wrap-height;
       overflow-wrap: break-word;
       text-overflow: clip;
       white-space: normal;
@@ -5269,8 +5281,8 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
-    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
-    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
+    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
+    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
       &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
         background-color: $grid-hover-bg-color;

package/SCSS-Themes/grids/grid/tailwind-dark.scss

@@ -57,7 +57,7 @@ $group-droparea-hover-color: $black !default;
 $grid-group-broder-color:  $border-light !default;
 $grid-group-hover-broder-color: $border-hover !default;
 $grid-group-text-line-height: 21px !default;
-$grid-wrap-line-height: 18px !default;
+$grid-wrap-line-height: 1px !default;
 $grid-wrap-margin-bottom: 2px !default;
 $grid-wrap-margin-top: 0 !default;
 
@@ -90,8 +90,8 @@ $grid-filterdiv-padding: 0 !default;
 $grid-headercelldiv-height: 29px !default;
 $grid-filterbarcell-input-height: 26px !default;
 $grid-sortnumber-border-radius: 65% !default;
-$grid-textwrap-srotnumber-rightalign-margin: 3px 2px 0 10px !default;
-$grid-textwrap-srotnumber-margin: 3px 5px 0 2px !default;
+$grid-textwrap-srotnumber-rightalign-margin: 5px 2px 0 15px !default;
+$grid-textwrap-srotnumber-margin: 6px 5px 0 2px !default;
 $grid-textwrap-sorticon-margin: -9px 10px !default;
 $grid-columnchooser-header-padding: 11px 18px 15px !default;
 $grid-columnchooser-toolbar-button-padding: 0 12px !default;
@@ -335,6 +335,8 @@ $grid-rtl-group-text-margin-left: -8px !default;
 $grid-rtl-group-sorticon-margin-right: 0 !default;
 $grid-rtl-headercell-border-width: 0 !default;
 $grid-rtl-headercelldiv-padding: 0 .4em 0 4.2em !default;
+$grid-rtl-headercelldiv-chkbox-padding: 0 .5em 0 .45em !default;
+$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .4em !default;
 $grid-ungroup-rtl-padding-right: -9px !default;
 $grid-headercelldiv-padding: 0 20px 0 5px !default;
 $grid-headercell-div-padding: 0 .4em !default;
@@ -462,12 +464,12 @@ $grid-content-batch-font-color: $success !default;
 $grid-bigger-group-headercell-hover-padding: $grid-bigger-group-headercell-padding !default;
 
 $grid-header-wrap-rightalign-sortfilter-div-margin: -21px -5px !default;
-$grid-header-wrap-filtericon-sortfilter-div-margin: -14px 20px -29px 0 !default;
+$grid-header-wrap-filtericon-sortfilter-div-margin: -20px 20px -29px 14px !default;
 $grid-bigger-wrap-sortdiv-margin: -31px 8px !default;
 $grid-bigger-wrap-rightalign-sortdiv-margin: -30px -5px !default;
 $grid-bigger-wrap-rightalign-fltricon-sortdiv-margin: -26px -20px 0 0 !default;
 $grid-bigger-wrap-fltricon-sortdiv-margin: -30px 28px -31px 0 !default;
-$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -14px 0 !default;
+$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -20px 14px !default;
 $grid-drag-font-size: $text-lg !default;
 $grid-drag-icon-font-weight: $font-weight-bold !default;
 $grid-drag-move-icon: 10px !default;
@@ -870,9 +872,7 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-bigger-rtl-headercelldiv-chkbox-padding;
     }
 
     .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
@@ -2428,11 +2428,10 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-rtl-headercelldiv-chkbox-padding;
     }
 
+
     .e-filtermenudiv {
       float: $grid-fltrdiv-float;
       margin: $grid-fltrdiv-margin;
@@ -2545,7 +2544,7 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-wrap .e-columnmenu {
-      margin: $grid-textwrap-column-menu-margin;
+      line-height: $grid-wrap-line-height;
     }
 
     &.e-rtl .e-columnmenu {
@@ -2559,7 +2558,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-wrap {
       &.e-rtl  .e-columnmenu {
-        margin: $grid-rtl-textwrap-column-menu-margin;
+        line-height: $grid-wrap-line-height;
       }
     }
 
@@ -3741,6 +3740,13 @@ $grid-dropitems-count-margin-left: -8px !default;
         margin: $grid-rtl-headercelldiv-rightalign-fltricon-margin;
       }
 
+      &.e-wrap .e-columnheader .e-rightalign.e-fltr-icon .e-headercelldiv,
+      & .e-columnheader.e-wrap .e-rightalign.e-fltr-icon .e-headercelldiv {
+        height: auto;
+        margin-bottom: $grid-wrap-margin-bottom;
+        margin-top: $grid-wrap-margin-top;
+      }
+
       & .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
         margin: $grid-rtl-headercelldiv-fltricon-margin;
       }
@@ -4059,7 +4065,8 @@ $grid-dropitems-count-margin-left: -8px !default;
     &.e-wrap {
       & .e-rowcell,
       & .e-columnheader .e-stackedheadercelldiv,
-      & .e-columnheader .e-headercelldiv {
+      & .e-columnheader .e-headercelldiv,
+      & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
         height: Auto;
         line-height: $grid-rowcell-wrap-height;
         overflow-wrap: break-word;
@@ -4075,25 +4082,30 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-wrap .e-columnheader .e-headercelldiv,
-    & .e-columnheader.e-wrap .e-headercelldiv {
+    &.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv {
       margin-bottom: $grid-wrap-margin-bottom;
       margin-top: $grid-wrap-margin-top;
     }
 
-    &.e-wrap .e-columnheader .e-filtermenudiv {
+    &.e-wrap .e-columnheader .e-filtermenudiv,
+    &.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
-    & .e-columnheader.e-wrap .e-filtermenudiv {
+    & .e-columnheader.e-wrap .e-filtermenudiv,
+    & .e-columnheader.e-wrap .e-sortfilterdiv.e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
     & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv,
     & .e-columnheader.e-wrap .e-stackedheadercelldiv,
     & .e-gridcontent.e-wrap .e-rowcell,
     & .e-frozenhdrcont.e-wrap .e-rowcell {
       height: Auto;
-      line-height: $grid-wrap-line-height;
+      line-height: $grid-rowcell-wrap-height;
       overflow-wrap: break-word;
       text-overflow: clip;
       white-space: normal;
@@ -5280,8 +5292,8 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
-    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
-    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
+    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
+    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
       &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
         background-color: $grid-hover-bg-color;

package/SCSS-Themes/grids/grid/tailwind.scss

@@ -57,7 +57,7 @@ $group-droparea-hover-color: $black !default;
 $grid-group-broder-color:  $border-light !default;
 $grid-group-hover-broder-color: $border-hover !default;
 $grid-group-text-line-height: 21px !default;
-$grid-wrap-line-height: 18px !default;
+$grid-wrap-line-height: 1px !default;
 $grid-wrap-margin-bottom: 2px !default;
 $grid-wrap-margin-top: 0 !default;
 
@@ -90,8 +90,8 @@ $grid-filterdiv-padding: 0 !default;
 $grid-headercelldiv-height: 29px !default;
 $grid-filterbarcell-input-height: 26px !default;
 $grid-sortnumber-border-radius: 65% !default;
-$grid-textwrap-srotnumber-rightalign-margin: 3px 2px 0 10px !default;
-$grid-textwrap-srotnumber-margin: 3px 5px 0 2px !default;
+$grid-textwrap-srotnumber-rightalign-margin: 5px 2px 0 15px !default;
+$grid-textwrap-srotnumber-margin: 6px 5px 0 2px !default;
 $grid-textwrap-sorticon-margin: -9px 10px !default;
 $grid-columnchooser-header-padding: 11px 18px 15px !default;
 $grid-columnchooser-toolbar-button-padding: 0 12px !default;
@@ -335,6 +335,8 @@ $grid-rtl-group-text-margin-left: -8px !default;
 $grid-rtl-group-sorticon-margin-right: 0 !default;
 $grid-rtl-headercell-border-width: 0 !default;
 $grid-rtl-headercelldiv-padding: 0 .4em 0 4.2em !default;
+$grid-rtl-headercelldiv-chkbox-padding: 0 .5em 0 .45em !default;
+$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .4em !default;
 $grid-ungroup-rtl-padding-right: -9px !default;
 $grid-headercelldiv-padding: 0 20px 0 5px !default;
 $grid-headercell-div-padding: 0 .4em !default;
@@ -462,12 +464,12 @@ $grid-content-batch-font-color: $success !default;
 $grid-bigger-group-headercell-hover-padding: $grid-bigger-group-headercell-padding !default;
 
 $grid-header-wrap-rightalign-sortfilter-div-margin: -21px -5px !default;
-$grid-header-wrap-filtericon-sortfilter-div-margin: -14px 20px -29px 0 !default;
+$grid-header-wrap-filtericon-sortfilter-div-margin: -20px 20px -29px 14px !default;
 $grid-bigger-wrap-sortdiv-margin: -31px 8px !default;
 $grid-bigger-wrap-rightalign-sortdiv-margin: -30px -5px !default;
 $grid-bigger-wrap-rightalign-fltricon-sortdiv-margin: -26px -20px 0 0 !default;
 $grid-bigger-wrap-fltricon-sortdiv-margin: -30px 28px -31px 0 !default;
-$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -14px 0 !default;
+$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -20px 14px !default;
 $grid-drag-font-size: $text-lg !default;
 $grid-drag-icon-font-weight: $font-weight-bold !default;
 $grid-drag-move-icon: 10px !default;
@@ -870,9 +872,7 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-bigger-rtl-headercelldiv-chkbox-padding;
     }
 
     .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
@@ -2428,11 +2428,10 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-rtl-headercelldiv-chkbox-padding;
     }
 
+
     .e-filtermenudiv {
       float: $grid-fltrdiv-float;
       margin: $grid-fltrdiv-margin;
@@ -2545,7 +2544,7 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-wrap .e-columnmenu {
-      margin: $grid-textwrap-column-menu-margin;
+      line-height: $grid-wrap-line-height;
     }
 
     &.e-rtl .e-columnmenu {
@@ -2559,7 +2558,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-wrap {
       &.e-rtl  .e-columnmenu {
-        margin: $grid-rtl-textwrap-column-menu-margin;
+        line-height: $grid-wrap-line-height;
       }
     }
 
@@ -3741,6 +3740,13 @@ $grid-dropitems-count-margin-left: -8px !default;
         margin: $grid-rtl-headercelldiv-rightalign-fltricon-margin;
       }
 
+      &.e-wrap .e-columnheader .e-rightalign.e-fltr-icon .e-headercelldiv,
+      & .e-columnheader.e-wrap .e-rightalign.e-fltr-icon .e-headercelldiv {
+        height: auto;
+        margin-bottom: $grid-wrap-margin-bottom;
+        margin-top: $grid-wrap-margin-top;
+      }
+
       & .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
         margin: $grid-rtl-headercelldiv-fltricon-margin;
       }
@@ -4059,7 +4065,8 @@ $grid-dropitems-count-margin-left: -8px !default;
     &.e-wrap {
       & .e-rowcell,
       & .e-columnheader .e-stackedheadercelldiv,
-      & .e-columnheader .e-headercelldiv {
+      & .e-columnheader .e-headercelldiv,
+      & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
         height: Auto;
         line-height: $grid-rowcell-wrap-height;
         overflow-wrap: break-word;
@@ -4075,25 +4082,30 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-wrap .e-columnheader .e-headercelldiv,
-    & .e-columnheader.e-wrap .e-headercelldiv {
+    &.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv {
       margin-bottom: $grid-wrap-margin-bottom;
       margin-top: $grid-wrap-margin-top;
     }
 
-    &.e-wrap .e-columnheader .e-filtermenudiv {
+    &.e-wrap .e-columnheader .e-filtermenudiv,
+    &.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
-    & .e-columnheader.e-wrap .e-filtermenudiv {
+    & .e-columnheader.e-wrap .e-filtermenudiv,
+    & .e-columnheader.e-wrap .e-sortfilterdiv.e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
     & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv,
     & .e-columnheader.e-wrap .e-stackedheadercelldiv,
     & .e-gridcontent.e-wrap .e-rowcell,
     & .e-frozenhdrcont.e-wrap .e-rowcell {
       height: Auto;
-      line-height: $grid-wrap-line-height;
+      line-height: $grid-rowcell-wrap-height;
       overflow-wrap: break-word;
       text-overflow: clip;
       white-space: normal;
@@ -5280,8 +5292,8 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
-    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
-    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
+    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
+    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
       &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
         background-color: $grid-hover-bg-color;

package/SCSS-Themes/highcontrast.scss

@@ -36028,7 +36028,7 @@ $datepicker-icon: '\e93a' !default;
 $datepicker-popup-bg-color: $bg-base-0 !default;
 $datepicker-popup-border: 1px solid $border-default !default;
 $datepicker-icon-font-size: 16px !default;
-$datepicker-bigger-icon-font-size: 20px !default;
+$datepicker-bigger-icon-font-size: 18px !default;
 $datepicker-overlay: rgba($bg-base-0, .6) !default;
 $datepicker-icon-normal-margin: 0 !default;
 $datepicker-icon-bigger-margin: 0 !default;
@@ -39604,7 +39604,7 @@ $range-icon-bigger-padding: 15px !default;
 $range-icon-normal-padding: 9px 10px !default;
 $range-preset-normal-list-height: 36px !default;
 $range-preset-bigger-list-height: 45px !default;
-$range-bigger-icon-font-size: 20px !default;
+$range-bigger-icon-font-size: 18px !default;
 $range-list-hover-color: $range-calendar-header-dark-color !default;
 $range-calendar-active-border: 1px solid $hover-bg !default;
 $range-calendar-today-color: $selection-font !default;
@@ -40866,7 +40866,7 @@ $datetime-list-normal-padding: 0 !default;
 $datetime-list-bigger-padding: 8px !default;
 $datetime-time-font-icon: '\e97f' !default;
 $datetime-icon-normal-font-size: 16px !default;
-$datetime-icon-bigger-font-size: 20px !default;
+$datetime-icon-bigger-font-size: 18px !default;
 $datetime-date-icon-margin: 0 !default;
 $datetime-time-icon-margin: 0 !default;
 $datetime-time-bigger-icon-margin: 0 !default;
@@ -71013,6 +71013,8 @@ $grid-indentcell-border-width: 0 1px 0 0 !default;
 $grid-headercelldiv-line-height: 29px !default;
 $grid-bigger-headercelldiv-line-height: $grid-headercelldiv-line-height !default;
 $grid-rtl-headercelldiv-padding: 0 .6em 0 1.8em !default;
+$grid-rtl-headercelldiv-chkbox-padding: 0 0 0 0 !default;
+$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 0 0 .2em !default;
 $grid-td-checkbox-margin-top: 5px !default;
 $grid-groupdroparea-rtl-text-align: center !default;
 $grid-gd-clone-border-radius: 0 !default;
@@ -71382,12 +71384,12 @@ $grid-bigger-group-headercell-hover-padding: 0 9px !default;
 
 $grid-header-wrap-sortfilter-div-margin: -18px 11px !default;
 $grid-header-wrap-rightalign-sortfilter-div-margin: -17px 10px 0 0 !default;
-$grid-header-wrap-filtericon-sortfilter-div-margin: -16px 30px !default;
+$grid-header-wrap-filtericon-sortfilter-div-margin: -17px 18px !default;
 $grid-bigger-wrap-sortdiv-margin: -19px 6px !default;
 $grid-bigger-wrap-rightalign-sortdiv-margin: -19px -4px !default;
 $grid-bigger-wrap-fltricon-sortdiv-margin: -17px 11px !default;
 $grid-bigger-wrap-rightalign-fltricon-sortdiv-margin: -18px 11px !default;
-$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -15px 8px !default;
+$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -17px 8px !default;
 
 $grid-drag-font-size: 12px !default;
 $grid-drag-icon-font-weight: bold !default;
@@ -71422,7 +71424,7 @@ $grid-bigger-fltr-sortnumber-margin: $grid-bigger-sortnumber-margin !default;
 $grid-rtl-searchclear: 0 !default;
 $grid-column-chosser-searchdiv-top: -46px !default;
 $grid-reorderarrow-font-size: 8px !default;
-$grid-bigger-wrap-line-height: $grid-wrap-line-height !default;
+$grid-bigger-wrap-line-height: 18px !default;
 $grid-bigger-clone-padding: $grid-clone-padding !default;
 $grid-bigger-draganddrop-clone-padding: $grid-clone-padding !default;
 $grouped-bigger-text-font-size: $grouped-text-font-size !default;
@@ -71786,9 +71788,7 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-bigger-rtl-headercelldiv-chkbox-padding;
     }
 
     .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
@@ -73344,11 +73344,10 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-rtl-headercelldiv-chkbox-padding;
     }
 
+
     .e-filtermenudiv {
       float: $grid-fltrdiv-float;
       margin: $grid-fltrdiv-margin;
@@ -73461,7 +73460,7 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-wrap .e-columnmenu {
-      margin: $grid-textwrap-column-menu-margin;
+      line-height: $grid-wrap-line-height;
     }
 
     &.e-rtl .e-columnmenu {
@@ -73475,7 +73474,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-wrap {
       &.e-rtl  .e-columnmenu {
-        margin: $grid-rtl-textwrap-column-menu-margin;
+        line-height: $grid-wrap-line-height;
       }
     }
 
@@ -74657,6 +74656,13 @@ $grid-dropitems-count-margin-left: -8px !default;
         margin: $grid-rtl-headercelldiv-rightalign-fltricon-margin;
       }
 
+      &.e-wrap .e-columnheader .e-rightalign.e-fltr-icon .e-headercelldiv,
+      & .e-columnheader.e-wrap .e-rightalign.e-fltr-icon .e-headercelldiv {
+        height: auto;
+        margin-bottom: $grid-wrap-margin-bottom;
+        margin-top: $grid-wrap-margin-top;
+      }
+
       & .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
         margin: $grid-rtl-headercelldiv-fltricon-margin;
       }
@@ -74975,7 +74981,8 @@ $grid-dropitems-count-margin-left: -8px !default;
     &.e-wrap {
       & .e-rowcell,
       & .e-columnheader .e-stackedheadercelldiv,
-      & .e-columnheader .e-headercelldiv {
+      & .e-columnheader .e-headercelldiv,
+      & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
         height: Auto;
         line-height: $grid-rowcell-wrap-height;
         overflow-wrap: break-word;
@@ -74991,25 +74998,30 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-wrap .e-columnheader .e-headercelldiv,
-    & .e-columnheader.e-wrap .e-headercelldiv {
+    &.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv {
       margin-bottom: $grid-wrap-margin-bottom;
       margin-top: $grid-wrap-margin-top;
     }
 
-    &.e-wrap .e-columnheader .e-filtermenudiv {
+    &.e-wrap .e-columnheader .e-filtermenudiv,
+    &.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
-    & .e-columnheader.e-wrap .e-filtermenudiv {
+    & .e-columnheader.e-wrap .e-filtermenudiv,
+    & .e-columnheader.e-wrap .e-sortfilterdiv.e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
     & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv,
     & .e-columnheader.e-wrap .e-stackedheadercelldiv,
     & .e-gridcontent.e-wrap .e-rowcell,
     & .e-frozenhdrcont.e-wrap .e-rowcell {
       height: Auto;
-      line-height: $grid-wrap-line-height;
+      line-height: $grid-rowcell-wrap-height;
       overflow-wrap: break-word;
       text-overflow: clip;
       white-space: normal;
@@ -76196,8 +76208,8 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
-    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
-    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
+    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
+    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
       &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
         background-color: $grid-hover-bg-color;
@@ -96342,7 +96354,7 @@ $timepicker-list-normal-padding: 0 !default;
 $timepicker-list-bigger-padding: 0 !default;
 $timepicker-font-icon: '\e97f' !default;
 $timepicker-icon-normal-font-size: 16px !default;
-$timepicker-icon-bigger-font-size: 20px !default;
+$timepicker-icon-bigger-font-size: 18px !default;
 $timepicker-disable-text: $disable !default;
 $timepicker-disable-opacity: 1 !default;
 $timepicker-default-overlay: rgba($bg-base-0, .6) !default;