@syncfusion/blazor-themes 20.4.52 → 20.4.54

package/SCSS-Themes/calendars/datetimepicker/highcontrast.scss

@@ -32,7 +32,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;

package/SCSS-Themes/calendars/datetimepicker/material-dark.scss

@@ -33,7 +33,7 @@ $datetime-list-normal-padding: 8px !default;
 $datetime-list-bigger-padding: 8px !default;
 $datetime-time-font-icon: '\e20c' !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 0 4px !default;
 $datetime-time-icon-margin: 0 0 4px 6px !default;
 $datetime-time-bigger-icon-margin: 5px 0 6px 8px !default;

package/SCSS-Themes/calendars/datetimepicker/material.scss

@@ -32,7 +32,7 @@ $datetime-list-normal-padding: 8px !default;
 $datetime-list-bigger-padding: 8px !default;
 $datetime-time-font-icon: '\e20c' !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 0 4px !default;
 $datetime-time-icon-margin: 0 0 4px 6px !default;
 $datetime-time-bigger-icon-margin: 5px 0 6px 8px !default;

package/SCSS-Themes/calendars/timepicker/bootstrap-dark.scss

@@ -29,7 +29,7 @@ $timepicker-list-normal-padding: 0 !default;
 $timepicker-list-bigger-padding: 0 !default;
 $timepicker-font-icon: '\e93e' !default;
 $timepicker-icon-normal-font-size: 16px !default;
-$timepicker-icon-bigger-font-size: 16px !default;
+$timepicker-icon-bigger-font-size: 18px !default;
 $timepicker-disable-text: $grey-8c !default;
 $timepicker-disable-opacity: 1 !default;
 $timepicker-default-overlay: rgba($grey-base, .6) !default;

package/SCSS-Themes/calendars/timepicker/bootstrap.scss

@@ -28,7 +28,7 @@ $timepicker-list-normal-padding: 0 !default;
 $timepicker-list-bigger-padding: 0 !default;
 $timepicker-font-icon: '\e93e' !default;
 $timepicker-icon-normal-font-size: 16px !default;
-$timepicker-icon-bigger-font-size: 16px !default;
+$timepicker-icon-bigger-font-size: 18px !default;
 $timepicker-disable-text: rgba($grey, .65) !default;
 $timepicker-disable-opacity: 1 !default;
 $timepicker-default-overlay: rgba($grey-base, .6) !default;

package/SCSS-Themes/calendars/timepicker/fabric-dark.scss

@@ -29,7 +29,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: $neutral-tertiary-alt !default;
 $timepicker-disable-opacity: 1 !default;
 $timepicker-default-overlay: rgba($neutral-black, .6) !default;

package/SCSS-Themes/calendars/timepicker/fabric.scss

@@ -28,7 +28,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: $neutral-tertiary-alt !default;
 $timepicker-disable-opacity: 1 !default;
 $timepicker-default-overlay: rgba($neutral-black, .6) !default;

package/SCSS-Themes/calendars/timepicker/highcontrast.scss

@@ -28,7 +28,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;

package/SCSS-Themes/calendars/timepicker/material-dark.scss

@@ -29,7 +29,7 @@ $timepicker-list-normal-padding: 0 !default;
 $timepicker-list-bigger-padding: 0 !default;
 $timepicker-font-icon: '\e20c' !default;
 $timepicker-icon-normal-font-size: 16px !default;
-$timepicker-icon-bigger-font-size: 20px !default;
+$timepicker-icon-bigger-font-size: 18px !default;
 $timepicker-normal-input-min-height: 20px !default;
 $timepicker-normal-input-min-width: 20px !default;
 $timepicker-bigger-input-min-height: 22px !default;

package/SCSS-Themes/calendars/timepicker/material.scss

@@ -28,7 +28,7 @@ $timepicker-list-normal-padding: 0 !default;
 $timepicker-list-bigger-padding: 0 !default;
 $timepicker-font-icon: '\e20c' !default;
 $timepicker-icon-normal-font-size: 16px !default;
-$timepicker-icon-bigger-font-size: 20px !default;
+$timepicker-icon-bigger-font-size: 18px !default;
 $timepicker-normal-input-min-height: 20px !default;
 $timepicker-normal-input-min-width: 20px !default;
 $timepicker-bigger-input-min-height: 22px !default;

package/SCSS-Themes/fabric-dark.scss

@@ -36134,7 +36134,7 @@ $datepicker-calendar-border-style: none !default;
 $datepicker-icon: '\e93a' !default;
 $datepicker-popup-border: 1px solid $neutral-light !default;
 $datepicker-icon-font-size: 16px !default;
-$datepicker-bigger-icon-font-size: 20px !default;
+$datepicker-bigger-icon-font-size: 18px !default;
 $datepicker-overlay: rgba($neutral-black, .6) !default;
 $datepicker-icon-normal-margin: 0 !default;
 $datepicker-icon-bigger-margin: 0 !default;
@@ -39728,7 +39728,7 @@ $range-icon-bigger-padding: 15px !default;
 $range-icon-normal-padding: 11px !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: none !default;
 $range-calendar-today-start-color: none !default;
@@ -40992,7 +40992,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;
@@ -71021,8 +71021,8 @@ $grid-rowselect-text-indent: 1px !default;
 $grid-toolbar-border-width: 1px solid !default;
 $grid-headercelldiv-height: 29px !default;
 $grid-filterbarcell-input-height: 26px !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: 3px 2px 0 15px !default;
+$grid-textwrap-srotnumber-margin: 3px -5px 0 2px !default;
 $grid-columnchooser-header-padding: 11px 18px 15px !default;
 $grid-columnchooser-ul-padding: 0 !default;
 $grid-column-chosser-searchdiv-opactiy: .6 !default;
@@ -71092,6 +71092,8 @@ $grid-headercelldiv-margin: 0 0 0 -5px !default;
 $grid-headercelldiv-right-align-padding: 0 0 0 1em !default;
 $grid-headercelldiv-padding: 0 20px 0 5px !default;
 $grid-rtl-headercelldiv-padding: 0 .7em 0 25px !default;
+$grid-rtl-headercelldiv-chkbox-padding: 0 0 0 4px !default;
+$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 0 0 8px !default;
 $grid-headercell-both-border-width: 0 0 0 1px !default;
 $grid-header-font-weight: normal !default;
 $grid-headecell-span-height: 26px !default;
@@ -71377,12 +71379,12 @@ $grid-content-batch-font-color: $grid-content-font-color !default;
 $grid-bigger-group-headercell-hover-padding: $grid-bigger-group-headercell-padding !default;
 
 $grid-header-wrap-rightalign-sortfilter-div-margin: -17px 10px 0 0 !default;
-$grid-header-wrap-filtericon-sortfilter-div-margin: -17px 30px 0 0 !default;
+$grid-header-wrap-filtericon-sortfilter-div-margin: -17px 18px 0 14px !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 20px !default;
 $grid-bigger-wrap-rightalign-fltricon-sortdiv-margin: -17px 0 !default;
-$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -14px 8px !default;
+$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -17px 14px !default;
 $grid-sortnumber-bg-color: $neutral-quintenary !default;
 $grid-sortnumber-color: $neutral-light-fontalt !default;
 $grid-summary-row-bg-color: $neutral-lighter !default;
@@ -71420,7 +71422,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;
@@ -71784,9 +71786,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,
@@ -73342,11 +73342,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;
@@ -73459,7 +73458,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 {
@@ -73473,7 +73472,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;
       }
     }
 
@@ -74655,6 +74654,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;
       }
@@ -74973,7 +74979,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;
@@ -74989,25 +74996,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;
@@ -76194,8 +76206,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;
@@ -96343,7 +96355,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: $neutral-tertiary-alt !default;
 $timepicker-disable-opacity: 1 !default;
 $timepicker-default-overlay: rgba($neutral-black, .6) !default;

package/SCSS-Themes/fabric.scss

@@ -35956,7 +35956,7 @@ $datepicker-icon: '\e93a' !default;
 $datepicker-popup-border: 1px solid $neutral-light !default;
 $datepicker-popup-bg-color: $content-bg-color !default;
 $datepicker-icon-font-size: 16px !default;
-$datepicker-bigger-icon-font-size: 20px !default;
+$datepicker-bigger-icon-font-size: 18px !default;
 $datepicker-overlay: rgba($neutral-black, .6) !default;
 $datepicker-icon-normal-margin: 0 !default;
 $datepicker-icon-bigger-margin: 0 !default;
@@ -39530,7 +39530,7 @@ $range-icon-bigger-padding: 15px !default;
 $range-icon-normal-padding: 11px !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: none !default;
 $range-calendar-today-start-color: none !default;
@@ -40791,7 +40791,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;
@@ -70787,8 +70787,8 @@ $grid-rowselect-text-indent: 1px !default;
 $grid-toolbar-border-width: 1px solid !default;
 $grid-headercelldiv-height: 29px !default;
 $grid-filterbarcell-input-height: 26px !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: 3px 2px 0 15px !default;
+$grid-textwrap-srotnumber-margin: 3px -5px 0 2px !default;
 $grid-columnchooser-header-padding: 11px 18px 15px !default;
 $grid-columnchooser-ul-padding: 0 !default;
 $grid-column-chosser-searchdiv-opactiy: .6 !default;
@@ -70858,6 +70858,8 @@ $grid-headercelldiv-margin: 0 !default;
 $grid-headercelldiv-right-align-padding: 0 0 0 1em !default;
 $grid-headercelldiv-padding: 0 25px 0 0 !default;
 $grid-rtl-headercelldiv-padding: 0 0 0 25px !default;
+$grid-rtl-headercelldiv-chkbox-padding: 0 0 0 0 !default;
+$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 0 0 3px !default;
 $grid-headercell-both-border-width: 0 0 0 1px !default;
 $grid-header-font-weight: normal !default;
 $grid-headecell-span-height: 24px !default;
@@ -71142,12 +71144,12 @@ $grid-content-batch-font-color: $grid-content-font-color !default;
 $grid-bigger-group-headercell-hover-padding: $grid-bigger-group-headercell-padding !default;
 
 $grid-header-wrap-rightalign-sortfilter-div-margin: -17px 10px 0 0 !default;
-$grid-header-wrap-filtericon-sortfilter-div-margin: -17px 30px 0 0 !default;
+$grid-header-wrap-filtericon-sortfilter-div-margin: -17px 18px 0 14px !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 20px !default;
 $grid-bigger-wrap-rightalign-fltricon-sortdiv-margin: -17px 0 !default;
-$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -14px 8px !default;
+$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -17px 14px !default;
 
 $grid-drag-font-size: 12px !default;
 $grid-drag-icon-font-weight: bold !default;
@@ -71182,7 +71184,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;
@@ -71546,9 +71548,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,
@@ -73104,11 +73104,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;
@@ -73221,7 +73220,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 {
@@ -73235,7 +73234,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;
       }
     }
 
@@ -74417,6 +74416,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;
       }
@@ -74735,7 +74741,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;
@@ -74751,25 +74758,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;
@@ -75956,8 +75968,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;
@@ -96107,7 +96119,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: $neutral-tertiary-alt !default;
 $timepicker-disable-opacity: 1 !default;
 $timepicker-default-overlay: rgba($neutral-black, .6) !default;

package/SCSS-Themes/fluent-dark.scss

@@ -36360,12 +36360,12 @@ $gridline-border-radius: $model-radius-small !default;
 
 //default
 $datepicker-icon: '\e901' !default;
-$datepicker-icon-font-size: 18px !default;
+$datepicker-icon-font-size: 16px !default;
 $datepicker-icon-container-min-height: 18px !default;
 $datepicker-icon-container-min-width: 30px !default;
 $datepicker-bigger-icon-container-min-height: 18px !default;
 $datepicker-bigger-icon-container-min-width: 36px !default;
-$datepicker-bigger-icon-font-size: 22px !default;
+$datepicker-bigger-icon-font-size: 18px !default;
 $datepicker-icon-normal-margin: 0 !default;
 $datepicker-icon-bigger-margin: 0 !default;
 $datepicker-icon-border-radius: 50% !default;
@@ -71597,7 +71597,7 @@ $grid-font-family: $font-family !default;
 $grid-header-font-size: $text-sm !default;
 $grid-bigger-header-font-size: $text-base !default;
 $grid-group-text-line-height: 22px !default;
-$grid-wrap-line-height: 18px !default;
+$grid-wrap-line-height: 10px !default;
 $grid-wrap-margin-bottom: 2px !default;
 $grid-wrap-margin-top: 0 !default;
 $grid-header-bottom-padding: 7px !default;
@@ -71628,8 +71628,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: 5px 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;
@@ -71840,6 +71840,8 @@ $grid-rtl-group-text-margin-left: 0 !default;
 $grid-rtl-group-sorticon-margin-right: -8px !default;
 $grid-rtl-headercell-border-width: 0 !default;
 $grid-rtl-headercelldiv-padding: 0 .4em 0 1.8em !default;
+$grid-rtl-headercelldiv-chkbox-padding: 0 4px 0 .35em !default;
+$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 4px 0 .3em !default;
 $grid-ungroup-rtl-padding-right: -14px !default;
 $grid-headercelldiv-padding: 0 20px 0 5px !default;
 $grid-headercell-div-padding: 0 .4em !default;
@@ -71953,12 +71955,12 @@ $grid-grouped-headercell-hover-padding: $grid-grouped-headercell-padding !defaul
 $grid-drag-clone-font-weight: $font-weight-normal !default;
 $grid-bigger-group-headercell-hover-padding: $grid-bigger-group-headercell-padding !default;
 $grid-header-wrap-rightalign-sortfilter-div-margin: -34px -5px !default;
-$grid-header-wrap-filtericon-sortfilter-div-margin: -28px -4px 0 16px !default;
+$grid-header-wrap-filtericon-sortfilter-div-margin: -33px 18px 0 16px !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: -28px 0 !default;
+$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -33px 14px !default;
 $grid-drag-font-size: $text-base !default;
 $grid-drag-icon-font-weight: $font-weight-bold !default;
 $grid-drag-move-icon: 10px !default;
@@ -72339,9 +72341,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,
@@ -73897,11 +73897,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;
@@ -74014,7 +74013,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 {
@@ -74028,7 +74027,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;
       }
     }
 
@@ -75210,6 +75209,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;
       }
@@ -75528,7 +75534,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;
@@ -75544,25 +75551,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;
@@ -76749,8 +76761,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;