@syncfusion/blazor-themes 26.1.40 → 26.1.42

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

@@ -110,7 +110,7 @@ $grid-columnchooser-input-padding-left: 4px !default;
 $grid-columnchooser-ul-margin: 13px 0 !default;
 $grid-column-chooser-dlg-footer-padding: 8px !default;
 $grid-rtl-bigger-sortnumber-margin: 4px 0 0 -20px !default;
-$grid-rtl-bigger-sortnumber-withfilter-margin: 2px 0 0 4px !default;
+$grid-rtl-bigger-sortnumber-withfilter-margin: 2px 0 0 11px !default;
 $grid-rtl-bigger-rightalign-sortnumber-margin: 3px 0 0 8px !default;
 $grid-rtl-group-text-marign-right: 0 !default;
 $grid-rtl-group-text-margin-right: 0 !default;
@@ -266,7 +266,7 @@ $grid-sortdiv-width: 18px !default;
 $grid-sortdiv-height: 18px !default;
 $grid-sortnumber-margin: 2px 10px 1px 8px !default;
 $grid-fltr-sortnumber-margin: 2px 8px 1px 8px !default;
-$grid-fltr-sortnumber-rightalign-margin: 2px 8px 0 10px !default;
+$grid-fltr-sortnumber-rightalign-margin: 2px 8px 0 3px !default;
 $grid-sortnumber-rightalign-margin: 2px 8px 0 10px !default;
 $grid-sortnumer-line-height: 14px !default;
 $grid-bigger-sortnumer-line-height: 16px !default;
@@ -322,9 +322,9 @@ $grid-ungroup-rtl-padding-top: 2px !default;
 $grid-bigger-ungroup-rtl-padding-top: $grid-ungroup-rtl-padding-top !default;
 $grid-rtl-group-headercell-margin-right: 5px !default;
 $grid-rtl-group-headercell-margin-left: 0 !default;
-$grid-fltr-rtl-sortnumber-margin: 1px 0 0 12px !default;
+$grid-fltr-rtl-sortnumber-margin: 1px 0 0 15px !default;
 $grid-rtl-sortnumber-margin: 1px 0 0 -10px !default;
-$grid-fltr-rtl-sortnumber-rightalign-margin: 1px 0 0 12px !default;
+$grid-fltr-rtl-sortnumber-rightalign-margin: 1px 0 0 15px !default;
 $grid-rtl-sortnumber-rightalign-margin: 1px 0 0 10px !default;
 $grid-rtl-sortcelldiv-margin: -10px 8px -12px -2px !default;
 $grid-rtl-sortcelldiv-right-align-margin: -10px 8px -12px -2px !default;
@@ -334,13 +334,13 @@ $grid-rtl-grouped-headercell-padding: 5px 0 !default;
 $grid-rtl-group-text-margin-left: 0 !default;
 $grid-rtl-group-sorticon-margin-right: -7px !default;
 $grid-rtl-headercell-border-width: 0 !default;
-$grid-rtl-headercelldiv-padding: 0 .4em 0 2.8em !default;
+$grid-rtl-headercelldiv-padding: 0 .4em 0 2em !default;
 $grid-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .5em !default;
 $grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .5em !default;
 $grid-ungroup-rtl-padding-right: -9px !default;
-$grid-headercelldiv-padding: 0 20px 0 5px !default;
+$grid-headercelldiv-padding: 0 10px 0 5px !default;
 $grid-headercelldiv-sort-centeralign-padding-right: 5px !default;
-$grid-headercell-div-padding: 0 .4em !default;
+$grid-headercell-div-padding: 0 1.5em 0 .4em !default;
 $grid-group-text-width: auto !default;
 $grid-grouptopleftcell-border-top: 2px solid !default;
 $grid-group-caption-font-size: $text-sm !default;
@@ -504,11 +504,11 @@ $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: 2px 4px 0 -6px !default;
+$grid-bigger-fltr-sortnumber-rightalign-margin: 2px 4px 0 -11px !default;
 $grid-bigger-sortnumber-rightalign-margin: 2px 4px 0 6px !default;
 $grid-bigger-columnmenu-bottom: 13px !default;
 $grid-bigger-sortnumber-margin: 2px 4px 0 4px !default;
-$grid-bigger-fltr-sortnumber-margin: 2px 4px 0 -6px !default;
+$grid-bigger-fltr-sortnumber-margin: 2px 4px 0 0 !default;
 $grid-rtl-searchclear: 0 !default;
 $grid-column-chosser-searchdiv-top: -41px !default;
 $grid-reorderarrow-font-size: $text-xxs !default;
@@ -592,7 +592,7 @@ $grid-responsive-apply-btn-top: 4px !default;
 $grid-responsive-column-menu-icon-margin-top: 4px !default;
 $grid-rtl-headercelldiv-left-align-margin: 10px !default;
 $grid-rtl-filtermenudiv-left-align-margin: -2px !default;
-$grid-rtl-sort-num-left-align-margin: 2px 8px 0 0 !default;
+$grid-rtl-sort-num-left-align-margin: 2px 8px 0 2px !default;
 $grid-frozen-mac-scrollbar-background: rgba(0, 0, 0, .5) !default;
 $grid-rowcell-color: $content-text-color !default;
 $grid-header-text-transform: none !default;
@@ -1173,7 +1173,7 @@ $grid-checkmark-color: $primary-text-color !default;
       .e-headercell.e-fltr-icon .e-headercelldiv .e-sortnumber {
         margin: $grid-rtl-bigger-sortnumber-withfilter-margin;
         @if $grid-skin == 'tailwind' {
-          margin-left: 0;
+          margin-left: 4px;
         }
       }
   
@@ -2513,7 +2513,17 @@ $grid-checkmark-color: $primary-text-color !default;
       text-transform: $grid-header-text-transform;
       user-select: none;
     }
-
+    
+    .e-rightalign:not(.e-fltr-icon) .e-headercelldiv {
+      padding: 0 .4em ;
+      @if $grid-skin == 'fabric' {
+        padding: 0 1px 0;
+      }
+      @if $grid-skin == 'highcontrast' {
+        padding: 0;
+      }
+    }
+    
     .e-headercelldiv.e-headerchkcelldiv {
       overflow: visible;
     }
@@ -3015,6 +3025,9 @@ $grid-checkmark-color: $primary-text-color !default;
         right: 2px;
       }
     }
+    &.e-rtl .e-sortfilter .e-rightalign .e-headercelldiv {
+      padding: $grid-headercelldiv-right-align-padding;
+    }
 
     .e-sortfilterdiv {
       float: right;
@@ -3061,7 +3074,7 @@ $grid-checkmark-color: $primary-text-color !default;
     }
 
     &.e-rtl .e-gridheader .e-sortfilter {
-      .e-centeralign.e-headercell[aria-sort="none"],
+      .e-centeralign.e-headercell[aria-sort="none"]:not(.e-centeralign),
       .e-centeralign.e-headercell:not([aria-sort]) {
         .e-headercelldiv,
         .e-stackedheadercelldiv {
@@ -4414,6 +4427,9 @@ $grid-checkmark-color: $primary-text-color !default;
           .e-headercelldiv.e-headerchkcelldiv {
             padding: $grid-rtl-headercelldiv-padding;
             text-align: right;
+            @if $grid-skin == 'highcontrast' {
+              margin: -7px 0;
+            }
 
             & .e-sortnumber {
               @include grid-flot-margin(left, $grid-fltr-rtl-sortnumber-margin);
@@ -4425,6 +4441,9 @@ $grid-checkmark-color: $primary-text-color !default;
         .e-headercelldiv.e-headerchkcelldiv {
           padding: $grid-rtl-headercelldiv-padding;
           text-align: right;
+          @if $grid-skin == 'highcontrast' {
+            margin: -7px 0;
+          }
 
           & .e-sortnumber {
             @include grid-flot-margin(left, $grid-rtl-sortnumber-margin);
@@ -4445,9 +4464,6 @@ $grid-checkmark-color: $primary-text-color !default;
 
             & .e-sortnumber {
               margin: $grid-rtl-sort-num-left-align-margin;
-              @if $grid-skin == 'bootstrap4' {
-                margin: 4px -2px 0 0;
-              }
             }
           }
 
@@ -4466,7 +4482,7 @@ $grid-checkmark-color: $primary-text-color !default;
           }
 
           & .e-headercelldiv {
-            padding: 0 25px 0 .7em;
+            padding: 0 1.6em 0 1.2em;
 
             & .e-sortnumber {
               @include grid-flot-margin(right, $grid-bigger-sort-right-margin);

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

@@ -1172,7 +1172,7 @@ $grid-checkmark-color: $theme-dark-font !default;
       .e-headercell.e-fltr-icon .e-headercelldiv .e-sortnumber {
         margin: $grid-rtl-bigger-sortnumber-withfilter-margin;
         @if $grid-skin == 'tailwind' {
-          margin-left: 0;
+          margin-left: 4px;
         }
       }
   
@@ -2512,7 +2512,17 @@ $grid-checkmark-color: $theme-dark-font !default;
       text-transform: $grid-header-text-transform;
       user-select: none;
     }
-
+    
+    .e-rightalign:not(.e-fltr-icon) .e-headercelldiv {
+      padding: 0 .4em ;
+      @if $grid-skin == 'fabric' {
+        padding: 0 1px 0;
+      }
+      @if $grid-skin == 'highcontrast' {
+        padding: 0;
+      }
+    }
+    
     .e-headercelldiv.e-headerchkcelldiv {
       overflow: visible;
     }
@@ -3014,6 +3024,9 @@ $grid-checkmark-color: $theme-dark-font !default;
         right: 2px;
       }
     }
+    &.e-rtl .e-sortfilter .e-rightalign .e-headercelldiv {
+      padding: $grid-headercelldiv-right-align-padding;
+    }
 
     .e-sortfilterdiv {
       float: right;
@@ -3060,7 +3073,7 @@ $grid-checkmark-color: $theme-dark-font !default;
     }
 
     &.e-rtl .e-gridheader .e-sortfilter {
-      .e-centeralign.e-headercell[aria-sort="none"],
+      .e-centeralign.e-headercell[aria-sort="none"]:not(.e-centeralign),
       .e-centeralign.e-headercell:not([aria-sort]) {
         .e-headercelldiv,
         .e-stackedheadercelldiv {
@@ -4413,6 +4426,9 @@ $grid-checkmark-color: $theme-dark-font !default;
           .e-headercelldiv.e-headerchkcelldiv {
             padding: $grid-rtl-headercelldiv-padding;
             text-align: right;
+            @if $grid-skin == 'highcontrast' {
+              margin: -7px 0;
+            }
 
             & .e-sortnumber {
               @include grid-flot-margin(left, $grid-fltr-rtl-sortnumber-margin);
@@ -4424,6 +4440,9 @@ $grid-checkmark-color: $theme-dark-font !default;
         .e-headercelldiv.e-headerchkcelldiv {
           padding: $grid-rtl-headercelldiv-padding;
           text-align: right;
+          @if $grid-skin == 'highcontrast' {
+            margin: -7px 0;
+          }
 
           & .e-sortnumber {
             @include grid-flot-margin(left, $grid-rtl-sortnumber-margin);
@@ -4444,9 +4463,6 @@ $grid-checkmark-color: $theme-dark-font !default;
 
             & .e-sortnumber {
               margin: $grid-rtl-sort-num-left-align-margin;
-              @if $grid-skin == 'bootstrap4' {
-                margin: 4px -2px 0 0;
-              }
             }
           }
 
@@ -4465,7 +4481,7 @@ $grid-checkmark-color: $theme-dark-font !default;
           }
 
           & .e-headercelldiv {
-            padding: 0 25px 0 .7em;
+            padding: 0 1.6em 0 1.2em;
 
             & .e-sortnumber {
               @include grid-flot-margin(right, $grid-bigger-sort-right-margin);

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

@@ -169,7 +169,7 @@ $grid-header-padding: 8px !default;
 $grid-header-first-last-cell-padding: 10px !default;
 $grid-headercelldiv-margin: 0 !default;
 $grid-headercelldiv-right-align-padding: 0 0 0 1em !default;
-$grid-headercelldiv-padding: 0 25px 0 0 !default;
+$grid-headercelldiv-padding: 0 9px 0 0 !default;
 $grid-headercelldiv-sort-centeralign-padding-right: 0 !default;
 $grid-rtl-headercelldiv-padding: 0 0 0 25px !default;
 $grid-rtl-headercelldiv-chkbox-padding: 0 0 0 0 !default;
@@ -409,7 +409,7 @@ $grid-bigger-columnchooser-content-padding: 25px 25px 5px 12px !default;
 $grid-bigger-columnchooser-content-margin: 30px 0 20px !default;
 $grid-bigger-cc-checkbox-padding-left: 13px !default;
 $grid-bigger-searchdiv-padding-left: 7px !default;
-$grid-headercell-div-padding: 0 1px 0 !default;
+$grid-headercell-div-padding: 0 9px 0 1px !default;
 $grid-columnchooser-toolbardiv-margin-top: -2px !default;
 $grid-column-chooser-footdiv: 0 !default;
 $grid-columnchooser-content-margin: 22px 0 20px !default;
@@ -449,7 +449,7 @@ $grid-sortdiv-filtericon-rightalign-margin: -20px 0 0 8px !default;
 $grid-sortnumber-filtericon-rightalign-margin: 8px 25px 0 5px !default;
 $grid-sortdiv-filtericon-margin: -20px 20px 0 0 !default;
 $grid-rtl-sortdiv-filtericon-rightalign-margin: -20px 0 0 14px !default;
-$grid-rtl-sortdiv-filtericon-margin: -20px 0 0 10px !default;
+$grid-rtl-sortdiv-filtericon-margin: -20px 16px 0 10px !default;
 $grid-bigger-fltricon-sortdiv-rightalign-margin: -22px 11px 0 0 !default;
 $grid-bigger-fltricon-sortdiv-margin: -22px 20px 0 0 !default;
 $grid-column-menu-sub-menu-box-shadow: 0 0 10px 0 rgba($shadow, .2) !default;
@@ -596,7 +596,7 @@ $grid-responsive-apply-btn-top: 3px !default;
 $grid-responsive-column-menu-icon-margin-top: 0 !default;
 $grid-rtl-headercelldiv-left-align-margin: 10px !default;
 $grid-rtl-filtermenudiv-left-align-margin: -5px !default;
-$grid-rtl-sort-num-left-align-margin: 8px -10px 0 0 !default;
+$grid-rtl-sort-num-left-align-margin: 8px -5px 0 0 !default;
 $grid-frozen-mac-scrollbar-background: rgba(0, 0, 0, .5) !default;
 $grid-rowcell-color: rgba($grid-content-font-color, $grid-conent-font-opacity) !default;
 $grid-reorderarrow-margin-top: -4.5px !default;
@@ -1171,7 +1171,7 @@ $grid-checkmark-color: $theme-primary-font !default;
       .e-headercell.e-fltr-icon .e-headercelldiv .e-sortnumber {
         margin: $grid-rtl-bigger-sortnumber-withfilter-margin;
         @if $grid-skin == 'tailwind' {
-          margin-left: 0;
+          margin-left: 4px;
         }
       }
   
@@ -2511,7 +2511,17 @@ $grid-checkmark-color: $theme-primary-font !default;
       text-transform: $grid-header-text-transform;
       user-select: none;
     }
-
+    
+    .e-rightalign:not(.e-fltr-icon) .e-headercelldiv {
+      padding: 0 .4em ;
+      @if $grid-skin == 'fabric' {
+        padding: 0 1px 0;
+      }
+      @if $grid-skin == 'highcontrast' {
+        padding: 0;
+      }
+    }
+    
     .e-headercelldiv.e-headerchkcelldiv {
       overflow: visible;
     }
@@ -3013,6 +3023,9 @@ $grid-checkmark-color: $theme-primary-font !default;
         right: 2px;
       }
     }
+    &.e-rtl .e-sortfilter .e-rightalign .e-headercelldiv {
+      padding: $grid-headercelldiv-right-align-padding;
+    }
 
     .e-sortfilterdiv {
       float: right;
@@ -3059,7 +3072,7 @@ $grid-checkmark-color: $theme-primary-font !default;
     }
 
     &.e-rtl .e-gridheader .e-sortfilter {
-      .e-centeralign.e-headercell[aria-sort="none"],
+      .e-centeralign.e-headercell[aria-sort="none"]:not(.e-centeralign),
       .e-centeralign.e-headercell:not([aria-sort]) {
         .e-headercelldiv,
         .e-stackedheadercelldiv {
@@ -4412,6 +4425,9 @@ $grid-checkmark-color: $theme-primary-font !default;
           .e-headercelldiv.e-headerchkcelldiv {
             padding: $grid-rtl-headercelldiv-padding;
             text-align: right;
+            @if $grid-skin == 'highcontrast' {
+              margin: -7px 0;
+            }
 
             & .e-sortnumber {
               @include grid-flot-margin(left, $grid-fltr-rtl-sortnumber-margin);
@@ -4423,6 +4439,9 @@ $grid-checkmark-color: $theme-primary-font !default;
         .e-headercelldiv.e-headerchkcelldiv {
           padding: $grid-rtl-headercelldiv-padding;
           text-align: right;
+          @if $grid-skin == 'highcontrast' {
+            margin: -7px 0;
+          }
 
           & .e-sortnumber {
             @include grid-flot-margin(left, $grid-rtl-sortnumber-margin);
@@ -4443,9 +4462,6 @@ $grid-checkmark-color: $theme-primary-font !default;
 
             & .e-sortnumber {
               margin: $grid-rtl-sort-num-left-align-margin;
-              @if $grid-skin == 'bootstrap4' {
-                margin: 4px -2px 0 0;
-              }
             }
           }
 
@@ -4464,7 +4480,7 @@ $grid-checkmark-color: $theme-primary-font !default;
           }
 
           & .e-headercelldiv {
-            padding: 0 25px 0 .7em;
+            padding: 0 1.6em 0 1.2em;
 
             & .e-sortnumber {
               @include grid-flot-margin(right, $grid-bigger-sort-right-margin);

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

@@ -173,7 +173,7 @@ $grid-columnchooser-ul-margin: 13px 0 !default;
 $grid-column-chooser-dlg-footer-padding: 8px !default;
 $grid-rtl-bigger-sortnumber-margin: 2px 0 0 -2px !default;
 $grid-rtl-bigger-sortnumber-withfilter-margin: 2px 0 0 12px !default;
-$grid-rtl-bigger-rightalign-sortnumber-margin: 2px 0 0 8px !default;
+$grid-rtl-bigger-rightalign-sortnumber-margin: 2px 0 0 11px !default;
 $grid-rtl-group-text-marign-right: 0 !default;
 $grid-rtl-group-text-margin-right: 0 !default;
 $grid-rtl-textwrap-srotnumber-margin: 3px 5px 0 12px !default;
@@ -310,7 +310,7 @@ $grid-sortdiv-width: 16px !default;
 $grid-sortdiv-height: 16px !default;
 $grid-sortnumber-margin: 2px 8px 0 8px !default;
 $grid-fltr-sortnumber-margin: $grid-sortnumber-margin !default;
-$grid-fltr-sortnumber-rightalign-margin: 2px 8px 0 8px !default;
+$grid-fltr-sortnumber-rightalign-margin: 2px 8px 0 0 !default;
 $grid-sortnumber-rightalign-margin: 2px 8px 0 8px !default;
 $grid-sortnumer-line-height: 16px !default;
 $grid-bigger-sortnumer-line-height: $grid-sortnumer-line-height !default;
@@ -369,9 +369,9 @@ $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: -11px !default;
-$grid-headercelldiv-padding: 0 20px 0 5px !default;
+$grid-headercelldiv-padding: 0 9px 0 5px !default;
 $grid-headercelldiv-sort-centeralign-padding-right: 5px !default;
-$grid-headercell-div-padding: 0 .4em !default;
+$grid-headercell-div-padding: 0 1.8em 0 .4em !default;
 $grid-group-text-width: auto !default;
 $grid-grouptopleftcell-border-top: 2px solid !default;
 $grid-group-caption-font-size: $text-sm !default;
@@ -519,10 +519,10 @@ $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: 2px 4px 0 -2px !default;
+$grid-bigger-fltr-sortnumber-rightalign-margin: 2px 4px 0 -5px !default;
 $grid-bigger-sortnumber-rightalign-margin: 2px 4px 0 2px !default;
 $grid-bigger-columnmenu-bottom: 13px !default;
-$grid-bigger-sortnumber-margin: 2px 1px 1px 2px !default;
+$grid-bigger-sortnumber-margin: 2px 7px 1px 2px !default;
 $grid-bigger-fltr-sortnumber-margin: $grid-bigger-sortnumber-margin !default;
 $grid-rtl-searchclear: 0 !default;
 $grid-column-chosser-searchdiv-top: -48px !default;
@@ -600,7 +600,7 @@ $grid-responsive-apply-btn-top: 5px !default;
 $grid-responsive-column-menu-icon-margin-top: 4px !default;
 $grid-rtl-headercelldiv-left-align-margin: 10px !default;
 $grid-rtl-filtermenudiv-left-align-margin: -10px !default;
-$grid-rtl-sort-num-left-align-margin: 2px -2px 0 0 !default;
+$grid-rtl-sort-num-left-align-margin: 2px -2px 0 2px !default;
 $grid-frozen-mac-scrollbar-background: rgba(0, 0, 0, .5) !default;
 $grid-header-text-transform: none !default;
 $grid-headerclone-font-size: $grid-content-font-size !default;
@@ -1174,7 +1174,7 @@ $grid-checkmark-color: $primary-text-color !default;
       .e-headercell.e-fltr-icon .e-headercelldiv .e-sortnumber {
         margin: $grid-rtl-bigger-sortnumber-withfilter-margin;
         @if $grid-skin == 'tailwind' {
-          margin-left: 0;
+          margin-left: 4px;
         }
       }
   
@@ -2514,7 +2514,17 @@ $grid-checkmark-color: $primary-text-color !default;
       text-transform: $grid-header-text-transform;
       user-select: none;
     }
-
+    
+    .e-rightalign:not(.e-fltr-icon) .e-headercelldiv {
+      padding: 0 .4em ;
+      @if $grid-skin == 'fabric' {
+        padding: 0 1px 0;
+      }
+      @if $grid-skin == 'highcontrast' {
+        padding: 0;
+      }
+    }
+    
     .e-headercelldiv.e-headerchkcelldiv {
       overflow: visible;
     }
@@ -3016,6 +3026,9 @@ $grid-checkmark-color: $primary-text-color !default;
         right: 2px;
       }
     }
+    &.e-rtl .e-sortfilter .e-rightalign .e-headercelldiv {
+      padding: $grid-headercelldiv-right-align-padding;
+    }
 
     .e-sortfilterdiv {
       float: right;
@@ -3062,7 +3075,7 @@ $grid-checkmark-color: $primary-text-color !default;
     }
 
     &.e-rtl .e-gridheader .e-sortfilter {
-      .e-centeralign.e-headercell[aria-sort="none"],
+      .e-centeralign.e-headercell[aria-sort="none"]:not(.e-centeralign),
       .e-centeralign.e-headercell:not([aria-sort]) {
         .e-headercelldiv,
         .e-stackedheadercelldiv {
@@ -4415,6 +4428,9 @@ $grid-checkmark-color: $primary-text-color !default;
           .e-headercelldiv.e-headerchkcelldiv {
             padding: $grid-rtl-headercelldiv-padding;
             text-align: right;
+            @if $grid-skin == 'highcontrast' {
+              margin: -7px 0;
+            }
 
             & .e-sortnumber {
               @include grid-flot-margin(left, $grid-fltr-rtl-sortnumber-margin);
@@ -4426,6 +4442,9 @@ $grid-checkmark-color: $primary-text-color !default;
         .e-headercelldiv.e-headerchkcelldiv {
           padding: $grid-rtl-headercelldiv-padding;
           text-align: right;
+          @if $grid-skin == 'highcontrast' {
+            margin: -7px 0;
+          }
 
           & .e-sortnumber {
             @include grid-flot-margin(left, $grid-rtl-sortnumber-margin);
@@ -4446,9 +4465,6 @@ $grid-checkmark-color: $primary-text-color !default;
 
             & .e-sortnumber {
               margin: $grid-rtl-sort-num-left-align-margin;
-              @if $grid-skin == 'bootstrap4' {
-                margin: 4px -2px 0 0;
-              }
             }
           }
 
@@ -4467,7 +4483,7 @@ $grid-checkmark-color: $primary-text-color !default;
           }
 
           & .e-headercelldiv {
-            padding: 0 25px 0 .7em;
+            padding: 0 1.6em 0 1.2em;
 
             & .e-sortnumber {
               @include grid-flot-margin(right, $grid-bigger-sort-right-margin);

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

@@ -173,7 +173,7 @@ $grid-columnchooser-ul-margin: 13px 0 !default;
 $grid-column-chooser-dlg-footer-padding: 8px !default;
 $grid-rtl-bigger-sortnumber-margin: 2px 0 0 -2px !default;
 $grid-rtl-bigger-sortnumber-withfilter-margin: 2px 0 0 12px !default;
-$grid-rtl-bigger-rightalign-sortnumber-margin: 2px 0 0 8px !default;
+$grid-rtl-bigger-rightalign-sortnumber-margin: 2px 0 0 11px !default;
 $grid-rtl-group-text-marign-right: 0 !default;
 $grid-rtl-group-text-margin-right: 0 !default;
 $grid-rtl-textwrap-srotnumber-margin: 3px 5px 0 12px !default;
@@ -310,7 +310,7 @@ $grid-sortdiv-width: 16px !default;
 $grid-sortdiv-height: 16px !default;
 $grid-sortnumber-margin: 2px 8px 0 8px !default;
 $grid-fltr-sortnumber-margin: $grid-sortnumber-margin !default;
-$grid-fltr-sortnumber-rightalign-margin: 2px 8px 0 8px !default;
+$grid-fltr-sortnumber-rightalign-margin: 2px 8px 0 0 !default;
 $grid-sortnumber-rightalign-margin: 2px 8px 0 8px !default;
 $grid-sortnumer-line-height: 16px !default;
 $grid-bigger-sortnumer-line-height: $grid-sortnumer-line-height !default;
@@ -369,9 +369,9 @@ $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: -11px !default;
-$grid-headercelldiv-padding: 0 20px 0 5px !default;
+$grid-headercelldiv-padding: 0 9px 0 5px !default;
 $grid-headercelldiv-sort-centeralign-padding-right: 5px !default;
-$grid-headercell-div-padding: 0 .4em !default;
+$grid-headercell-div-padding: 0 1.8em 0 .4em !default;
 $grid-group-text-width: auto !default;
 $grid-grouptopleftcell-border-top: 2px solid !default;
 $grid-group-caption-font-size: $text-sm !default;
@@ -519,10 +519,10 @@ $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: 2px 4px 0 -2px !default;
+$grid-bigger-fltr-sortnumber-rightalign-margin: 2px 4px 0 -5px !default;
 $grid-bigger-sortnumber-rightalign-margin: 2px 4px 0 2px !default;
 $grid-bigger-columnmenu-bottom: 13px !default;
-$grid-bigger-sortnumber-margin: 2px 1px 1px 2px !default;
+$grid-bigger-sortnumber-margin: 2px 7px 1px 2px !default;
 $grid-bigger-fltr-sortnumber-margin: $grid-bigger-sortnumber-margin !default;
 $grid-rtl-searchclear: 0 !default;
 $grid-column-chosser-searchdiv-top: -48px !default;
@@ -600,7 +600,7 @@ $grid-responsive-apply-btn-top: 5px !default;
 $grid-responsive-column-menu-icon-margin-top: 4px !default;
 $grid-rtl-headercelldiv-left-align-margin: 10px !default;
 $grid-rtl-filtermenudiv-left-align-margin: -10px !default;
-$grid-rtl-sort-num-left-align-margin: 2px -2px 0 0 !default;
+$grid-rtl-sort-num-left-align-margin: 2px -2px 0 2px !default;
 $grid-frozen-mac-scrollbar-background: rgba(0, 0, 0, .5) !default;
 $grid-header-text-transform: none !default;
 $grid-headerclone-font-size: $grid-content-font-size !default;
@@ -1174,7 +1174,7 @@ $grid-checkmark-color: $primary-text-color !default;
       .e-headercell.e-fltr-icon .e-headercelldiv .e-sortnumber {
         margin: $grid-rtl-bigger-sortnumber-withfilter-margin;
         @if $grid-skin == 'tailwind' {
-          margin-left: 0;
+          margin-left: 4px;
         }
       }
   
@@ -2514,7 +2514,17 @@ $grid-checkmark-color: $primary-text-color !default;
       text-transform: $grid-header-text-transform;
       user-select: none;
     }
-
+    
+    .e-rightalign:not(.e-fltr-icon) .e-headercelldiv {
+      padding: 0 .4em ;
+      @if $grid-skin == 'fabric' {
+        padding: 0 1px 0;
+      }
+      @if $grid-skin == 'highcontrast' {
+        padding: 0;
+      }
+    }
+    
     .e-headercelldiv.e-headerchkcelldiv {
       overflow: visible;
     }
@@ -3016,6 +3026,9 @@ $grid-checkmark-color: $primary-text-color !default;
         right: 2px;
       }
     }
+    &.e-rtl .e-sortfilter .e-rightalign .e-headercelldiv {
+      padding: $grid-headercelldiv-right-align-padding;
+    }
 
     .e-sortfilterdiv {
       float: right;
@@ -3062,7 +3075,7 @@ $grid-checkmark-color: $primary-text-color !default;
     }
 
     &.e-rtl .e-gridheader .e-sortfilter {
-      .e-centeralign.e-headercell[aria-sort="none"],
+      .e-centeralign.e-headercell[aria-sort="none"]:not(.e-centeralign),
       .e-centeralign.e-headercell:not([aria-sort]) {
         .e-headercelldiv,
         .e-stackedheadercelldiv {
@@ -4415,6 +4428,9 @@ $grid-checkmark-color: $primary-text-color !default;
           .e-headercelldiv.e-headerchkcelldiv {
             padding: $grid-rtl-headercelldiv-padding;
             text-align: right;
+            @if $grid-skin == 'highcontrast' {
+              margin: -7px 0;
+            }
 
             & .e-sortnumber {
               @include grid-flot-margin(left, $grid-fltr-rtl-sortnumber-margin);
@@ -4426,6 +4442,9 @@ $grid-checkmark-color: $primary-text-color !default;
         .e-headercelldiv.e-headerchkcelldiv {
           padding: $grid-rtl-headercelldiv-padding;
           text-align: right;
+          @if $grid-skin == 'highcontrast' {
+            margin: -7px 0;
+          }
 
           & .e-sortnumber {
             @include grid-flot-margin(left, $grid-rtl-sortnumber-margin);
@@ -4446,9 +4465,6 @@ $grid-checkmark-color: $primary-text-color !default;
 
             & .e-sortnumber {
               margin: $grid-rtl-sort-num-left-align-margin;
-              @if $grid-skin == 'bootstrap4' {
-                margin: 4px -2px 0 0;
-              }
             }
           }
 
@@ -4467,7 +4483,7 @@ $grid-checkmark-color: $primary-text-color !default;
           }
 
           & .e-headercelldiv {
-            padding: 0 25px 0 .7em;
+            padding: 0 1.6em 0 1.2em;
 
             & .e-sortnumber {
               @include grid-flot-margin(right, $grid-bigger-sort-right-margin);