@syncfusion/blazor-themes 21.1.41 → 21.2.4

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

@@ -363,10 +363,12 @@ $grid-bigger-headercell-font-size: 16px !default;
 $grid-bigger-content-font-size: 16px !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: -1px !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 2px 8px 8px !default;
 $grid-bigger-group-headercell-margin: 15px 0 0 10px !default;
 $grid-bigger-group-headercell-padding: 6px 0 !default;
+$grid-device-group-headercell-padding: 0 !default;
 $grid-bigger-grouptext-marign: 0 !default;
 $grid-bigger-headercell-padding: 12px !default;
 $grid-bigger-icons-font-size: 16px !default;
@@ -376,9 +378,11 @@ $grid-bigger-grouped-headercell-border-radius: 6px !default;
 $grid-bigger-groupedcell-icons-marign-left: -8px !default;
 $grid-bigger-ungroupbutton-icons-font-size: 12px !default;
 $grid-bigger-groupcell-span-padding: 8px 4px 10px 12px !default;
+$grid-device-grouped-headercell-span-padding: 0 4px 0 12px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: -7px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: -1px !default;
-$grid-bigger-groupcell-span-line-height: 4px !default;
+$grid-device-ungroupbutton-icon-margin-top: -1px !default;
+$grid-bigger-groupcell-span-line-height: 24px !default;
 $grid-bigger-gdownarrow-icon-font-size: 12px !default;
 $grid-gd-clone-border-radius: 4px !default;
 $grid-bigger-group-clone-broder-radius: 6px !default;
@@ -620,6 +624,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 0 !default;
 $grid-bigger-rtl-cm-margin: $grid-rtl-column-menu-margin !default;
 $grid-bigger-rtl-group-span-padding: 8px 4px 10px 8px !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: 0 8px !default;
 $grid-ungroup-rtl-padding-left: 12px !default;
 $grid-column-reorder-icon-color: $grid-icon-default-color !default;
@@ -1127,6 +1132,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       font-size: $grouped-bigger-text-font-size;
     }
 
+    &.e-device .e-groupheadercell {
+      padding: $grid-device-group-headercell-padding;
+    }
+
     .e-groupheadercell:hover {
       padding: $grid-bigger-group-headercell-hover-padding;
     }
@@ -1183,6 +1192,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-device .e-groupheadercell span {
       line-height: $grid-device-groupheadercell-span-line-height;
+      padding: $grid-device-grouped-headercell-span-padding;
     }
 
     &.e-device .e-rowcell,
@@ -1263,6 +1273,13 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-ungroupbutton.e-icons {
+      margin-top: $grid-device-ungroupbutton-icon-margin-top;
+      @if $grid-skin == 'bootstrap4' {
+        padding-top: 0;
+      }
+    }
+
     span.e-ungroupbutton.e-icons:hover {
       @if $grid-skin == 'tailwind' {
         color: $cool-gray-700;
@@ -1281,6 +1298,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-groupsort.e-icons {
+      margin-top: $grid-device-group-sorticon-margin-top;
+    }
+
     &.e-rtl span.e-groupsort.e-icons {
       @if $grid-skin == 'fluent' {
           margin-top: 0;
@@ -4415,6 +4436,10 @@ $grid-dropitems-count-margin-left: -8px !default;
   &.e-rtl .e-groupheadercell span {
     padding: $grid-bigger-rtl-group-span-padding;
   }
+
+  &.e-device.e-rtl .e-groupheadercell span {
+    padding: $grid-device-rtl-grouped-headercell-span-padding;
+  }
 }
 
 #{&}.e-grid-min-height {

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

@@ -358,10 +358,12 @@ $grid-bigger-headercell-font-size: $text-base !default;
 $grid-bigger-content-font-size: $text-base !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: 1px !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 0 0 8px !default;
 $grid-bigger-group-headercell-margin: 8px 0 0 8px !default;
 $grid-bigger-group-headercell-padding: 7px 0 !default;
+$grid-device-group-headercell-padding: 0 !default;
 $grid-bigger-grouptext-marign: 0 !default;
 $grid-bigger-headercell-padding: 12px !default;
 $grid-bigger-icons-font-size: $text-base !default;
@@ -371,8 +373,10 @@ $grid-bigger-grouped-headercell-border-radius: 0 !default;
 $grid-bigger-groupedcell-icons-marign-left: -8px !default;
 $grid-bigger-ungroupbutton-icons-font-size: $text-base !default;
 $grid-bigger-groupcell-span-padding: 0 8px !default;
+$grid-device-grouped-headercell-span-padding: 0 8px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: -12px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: 1px !default;
+$grid-device-ungroupbutton-icon-margin-top: 0 !default;
 $grid-bigger-groupcell-span-line-height: 24px !default;
 $grid-bigger-gdownarrow-icon-font-size: $text-base !default;
 $grid-gd-clone-border-radius: 4px !default;
@@ -614,6 +618,7 @@ $grid-adaptive-sort-clear-button-padding: 4px !default;
 $grid-cc-margin-top: 4px !default;
 $grid-bigger-rtl-cm-margin: -12px 4px -12px -22px !default;
 $grid-bigger-rtl-group-span-padding: 0 8px !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: 0 8px !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-column-reorder-icon-color: $primary !default;
@@ -1121,6 +1126,10 @@ $grid-dropitems-count-margin-left: -4px !default;
       font-size: $grouped-bigger-text-font-size;
     }
 
+    &.e-device .e-groupheadercell {
+      padding: $grid-device-group-headercell-padding;
+    }
+
     .e-groupheadercell:hover {
       padding: $grid-bigger-group-headercell-hover-padding;
     }
@@ -1177,6 +1186,7 @@ $grid-dropitems-count-margin-left: -4px !default;
 
     &.e-device .e-groupheadercell span {
       line-height: $grid-device-groupheadercell-span-line-height;
+      padding: $grid-device-grouped-headercell-span-padding;
     }
 
     &.e-device .e-rowcell,
@@ -1257,6 +1267,13 @@ $grid-dropitems-count-margin-left: -4px !default;
       }
     }
 
+    &.e-device span.e-ungroupbutton.e-icons {
+      margin-top: $grid-device-ungroupbutton-icon-margin-top;
+      @if $grid-skin == 'bootstrap4' {
+        padding-top: 0;
+      }
+    }
+
     span.e-ungroupbutton.e-icons:hover {
       @if $grid-skin == 'tailwind' {
         color: $cool-gray-700;
@@ -1275,6 +1292,10 @@ $grid-dropitems-count-margin-left: -4px !default;
       }
     }
 
+    &.e-device span.e-groupsort.e-icons {
+      margin-top: $grid-device-group-sorticon-margin-top;
+    }
+
     &.e-rtl span.e-groupsort.e-icons {
       @if $grid-skin == 'fluent' {
           margin-top: 0;
@@ -4409,6 +4430,10 @@ $grid-dropitems-count-margin-left: -4px !default;
   &.e-rtl .e-groupheadercell span {
     padding: $grid-bigger-rtl-group-span-padding;
   }
+
+  &.e-device.e-rtl .e-groupheadercell span {
+    padding: $grid-device-rtl-grouped-headercell-span-padding;
+  }
 }
 
 #{&}.e-grid-min-height {

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

@@ -358,10 +358,12 @@ $grid-bigger-headercell-font-size: $text-base !default;
 $grid-bigger-content-font-size: $text-base !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: 1px !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 0 0 8px !default;
 $grid-bigger-group-headercell-margin: 8px 0 0 8px !default;
 $grid-bigger-group-headercell-padding: 7px 0 !default;
+$grid-device-group-headercell-padding: 0 !default;
 $grid-bigger-grouptext-marign: 0 !default;
 $grid-bigger-headercell-padding: 12px !default;
 $grid-bigger-icons-font-size: $text-base !default;
@@ -371,8 +373,10 @@ $grid-bigger-grouped-headercell-border-radius: 0 !default;
 $grid-bigger-groupedcell-icons-marign-left: -8px !default;
 $grid-bigger-ungroupbutton-icons-font-size: $text-base !default;
 $grid-bigger-groupcell-span-padding: 0 8px !default;
+$grid-device-grouped-headercell-span-padding: 0 8px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: -12px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: 1px !default;
+$grid-device-ungroupbutton-icon-margin-top: 0 !default;
 $grid-bigger-groupcell-span-line-height: 24px !default;
 $grid-bigger-gdownarrow-icon-font-size: $text-base !default;
 $grid-gd-clone-border-radius: 4px !default;
@@ -614,6 +618,7 @@ $grid-adaptive-sort-clear-button-padding: 4px !default;
 $grid-cc-margin-top: 4px !default;
 $grid-bigger-rtl-cm-margin: -12px 4px -12px -22px !default;
 $grid-bigger-rtl-group-span-padding: 0 8px !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: 0 8px !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-column-reorder-icon-color: $primary !default;
@@ -1121,6 +1126,10 @@ $grid-dropitems-count-margin-left: -4px !default;
       font-size: $grouped-bigger-text-font-size;
     }
 
+    &.e-device .e-groupheadercell {
+      padding: $grid-device-group-headercell-padding;
+    }
+
     .e-groupheadercell:hover {
       padding: $grid-bigger-group-headercell-hover-padding;
     }
@@ -1177,6 +1186,7 @@ $grid-dropitems-count-margin-left: -4px !default;
 
     &.e-device .e-groupheadercell span {
       line-height: $grid-device-groupheadercell-span-line-height;
+      padding: $grid-device-grouped-headercell-span-padding;
     }
 
     &.e-device .e-rowcell,
@@ -1257,6 +1267,13 @@ $grid-dropitems-count-margin-left: -4px !default;
       }
     }
 
+    &.e-device span.e-ungroupbutton.e-icons {
+      margin-top: $grid-device-ungroupbutton-icon-margin-top;
+      @if $grid-skin == 'bootstrap4' {
+        padding-top: 0;
+      }
+    }
+
     span.e-ungroupbutton.e-icons:hover {
       @if $grid-skin == 'tailwind' {
         color: $cool-gray-700;
@@ -1275,6 +1292,10 @@ $grid-dropitems-count-margin-left: -4px !default;
       }
     }
 
+    &.e-device span.e-groupsort.e-icons {
+      margin-top: $grid-device-group-sorticon-margin-top;
+    }
+
     &.e-rtl span.e-groupsort.e-icons {
       @if $grid-skin == 'fluent' {
           margin-top: 0;
@@ -4409,6 +4430,10 @@ $grid-dropitems-count-margin-left: -4px !default;
   &.e-rtl .e-groupheadercell span {
     padding: $grid-bigger-rtl-group-span-padding;
   }
+
+  &.e-device.e-rtl .e-groupheadercell span {
+    padding: $grid-device-rtl-grouped-headercell-span-padding;
+  }
 }
 
 #{&}.e-grid-min-height {

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

@@ -133,7 +133,9 @@ $grid-bigger-columnchooser-header-padding: 24px 24px 38px !default;
 $grid-bigger-columnchooser-ul-padding: 0 !default;
 $grid-bigger-columnchooser-toolbar-div-margin-top: 0 !default;
 $grid-bigger-sorticon-margin-top: 0 !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-bigger-groupcell-span-padding: 0 !default;
+$grid-device-grouped-headercell-span-padding: 0 !default;
 $grid-bigger-ungroupbutton-icon-margin-left: 0 !default;
 $grid-device-gridheader-row-span-padding: 20px !default;
 $frozen-border: 2px solid !default;
@@ -336,9 +338,11 @@ $grid-bigger-groupcaption-line-height: 27px !default;
 $grid-bigger-grouped-headercell-border-radius: 0 !default;
 $grid-bigger-group-headercell-margin: 9px 0 0 10px !default;
 $grid-bigger-group-headercell-padding: 0 10px !default;
+$grid-device-group-headercell-padding: 0 10px !default;
 $grid-bigger-ungroup-button-font-size: 13px !default;
 $grid-bigger-ungroupbutton-icons-font-size: 13px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: 1px !default;
+$grid-device-ungroupbutton-icon-margin-top: 1px !default;
 $grid-bigger-grouparea-font-size: 21px !default;
 $grid-bigger-rtl-group-headercell-margin: 8px 10px 0 0 !default;
 $grid-bigger-rtl-group-headercell-padding: 0 10px !default;
@@ -611,6 +615,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 3px !default;
 $grid-bigger-rtl-cm-margin: $grid-rtl-column-menu-margin !default;
 $grid-bigger-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
 $grid-ungroup-rtl-padding-left: 0 !default;
 $grid-column-reorder-icon-color: $grid-icon-default-color !default;
@@ -1118,6 +1123,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       font-size: $grouped-bigger-text-font-size;
     }
 
+    &.e-device .e-groupheadercell {
+      padding: $grid-device-group-headercell-padding;
+    }
+
     .e-groupheadercell:hover {
       padding: $grid-bigger-group-headercell-hover-padding;
     }
@@ -1174,6 +1183,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-device .e-groupheadercell span {
       line-height: $grid-device-groupheadercell-span-line-height;
+      padding: $grid-device-grouped-headercell-span-padding;
     }
 
     &.e-device .e-rowcell,
@@ -1254,6 +1264,13 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-ungroupbutton.e-icons {
+      margin-top: $grid-device-ungroupbutton-icon-margin-top;
+      @if $grid-skin == 'bootstrap4' {
+        padding-top: 0;
+      }
+    }
+
     span.e-ungroupbutton.e-icons:hover {
       @if $grid-skin == 'tailwind' {
         color: $cool-gray-700;
@@ -1272,6 +1289,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-groupsort.e-icons {
+      margin-top: $grid-device-group-sorticon-margin-top;
+    }
+
     &.e-rtl span.e-groupsort.e-icons {
       @if $grid-skin == 'fluent' {
           margin-top: 0;
@@ -4406,6 +4427,10 @@ $grid-dropitems-count-margin-left: -8px !default;
   &.e-rtl .e-groupheadercell span {
     padding: $grid-bigger-rtl-group-span-padding;
   }
+
+  &.e-device.e-rtl .e-groupheadercell span {
+    padding: $grid-device-rtl-grouped-headercell-span-padding;
+  }
 }
 
 #{&}.e-grid-min-height {

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

@@ -137,7 +137,9 @@ $grid-bigger-columnchooser-header-padding: 24px 24px 38px !default;
 $grid-bigger-columnchooser-ul-padding: 0 !default;
 $grid-bigger-columnchooser-toolbar-div-margin-top: 0 !default;
 $grid-bigger-sorticon-margin-top: 0 !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-bigger-groupcell-span-padding: 0 !default;
+$grid-device-grouped-headercell-span-padding: 0 !default;
 $grid-bigger-ungroupbutton-icon-margin-left: 0 !default;
 $grid-device-gridheader-row-span-padding: 20px !default;
 $frozen-border: 2px solid !default;
@@ -339,9 +341,11 @@ $grid-bigger-groupcaption-line-height: 27px !default;
 $grid-bigger-grouped-headercell-border-radius: 0 !default;
 $grid-bigger-group-headercell-margin: 9px 0 0 10px !default;
 $grid-bigger-group-headercell-padding: 0 10px !default;
+$grid-device-group-headercell-padding: 0 10px !default;
 $grid-bigger-ungroup-button-font-size: 13px !default;
 $grid-bigger-ungroupbutton-icons-font-size: 13px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: 0 !default;
+$grid-device-ungroupbutton-icon-margin-top: 0 !default;
 $grid-bigger-grouparea-font-size: 21px !default;
 $grid-bigger-rtl-group-headercell-margin: 8px 10px 0 0 !default;
 $grid-bigger-rtl-group-headercell-padding: 0 10px !default;
@@ -611,6 +615,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 3px !default;
 $grid-bigger-rtl-cm-margin: $grid-rtl-column-menu-margin !default;
 $grid-bigger-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
 $grid-ungroup-rtl-padding-left: 0 !default;
 $grid-column-reorder-icon-color: $grid-icon-default-color !default;
@@ -1118,6 +1123,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       font-size: $grouped-bigger-text-font-size;
     }
 
+    &.e-device .e-groupheadercell {
+      padding: $grid-device-group-headercell-padding;
+    }
+
     .e-groupheadercell:hover {
       padding: $grid-bigger-group-headercell-hover-padding;
     }
@@ -1174,6 +1183,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-device .e-groupheadercell span {
       line-height: $grid-device-groupheadercell-span-line-height;
+      padding: $grid-device-grouped-headercell-span-padding;
     }
 
     &.e-device .e-rowcell,
@@ -1254,6 +1264,13 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-ungroupbutton.e-icons {
+      margin-top: $grid-device-ungroupbutton-icon-margin-top;
+      @if $grid-skin == 'bootstrap4' {
+        padding-top: 0;
+      }
+    }
+
     span.e-ungroupbutton.e-icons:hover {
       @if $grid-skin == 'tailwind' {
         color: $cool-gray-700;
@@ -1272,6 +1289,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-groupsort.e-icons {
+      margin-top: $grid-device-group-sorticon-margin-top;
+    }
+
     &.e-rtl span.e-groupsort.e-icons {
       @if $grid-skin == 'fluent' {
           margin-top: 0;
@@ -4406,6 +4427,10 @@ $grid-dropitems-count-margin-left: -8px !default;
   &.e-rtl .e-groupheadercell span {
     padding: $grid-bigger-rtl-group-span-padding;
   }
+
+  &.e-device.e-rtl .e-groupheadercell span {
+    padding: $grid-device-rtl-grouped-headercell-span-padding;
+  }
 }
 
 #{&}.e-grid-min-height {

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

@@ -382,10 +382,12 @@ $grid-bigger-headercell-font-size: $text-base !default;
 $grid-bigger-content-font-size: $text-base !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: -4px !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 0 !default;
 $grid-bigger-group-headercell-margin: 6px 0 6px 8px !default;
 $grid-bigger-group-headercell-padding: 6px 0 !default;
+$grid-device-group-headercell-padding: 0 !default;
 $grid-bigger-grouptext-marign: 0 !default;
 $grid-bigger-headercell-padding: 12px !default;
 $grid-bigger-icons-font-size: $text-base !default;
@@ -395,8 +397,10 @@ $grid-bigger-grouped-headercell-border-radius: 0 !default;
 $grid-bigger-groupedcell-icons-marign-left: -8px !default;
 $grid-bigger-ungroupbutton-icons-font-size: $text-base !default;
 $grid-bigger-groupcell-span-padding: 8px 4px 14px 12px !default;
+$grid-device-grouped-headercell-span-padding: 0 8px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: 0 !default;
 $grid-bigger-ungroupbutton-icon-margin-top: -4px !default;
+$grid-device-ungroupbutton-icon-margin-top: 0 !default;
 $grid-bigger-groupcell-span-line-height: 30px !default;
 $grid-bigger-gdownarrow-icon-font-size: $text-lg !default;
 $grid-gd-clone-border-radius: 4px !default;
@@ -607,6 +611,7 @@ $grid-adaptive-sort-clear-button-padding: 4px !default;
 $grid-cc-margin-top: 2px !default;
 $grid-bigger-rtl-cm-margin: -20px -18px -5px -22px !default;
 $grid-bigger-rtl-group-span-padding: 11.5px 4px 14px 4px !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: 4px 12px 4px 8px !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-bigger-headercell-top-padding: 0 !default;
@@ -1113,6 +1118,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       font-size: $grouped-bigger-text-font-size;
     }
 
+    &.e-device .e-groupheadercell {
+      padding: $grid-device-group-headercell-padding;
+    }
+
     .e-groupheadercell:hover {
       padding: $grid-bigger-group-headercell-hover-padding;
     }
@@ -1169,6 +1178,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-device .e-groupheadercell span {
       line-height: $grid-device-groupheadercell-span-line-height;
+      padding: $grid-device-grouped-headercell-span-padding;
     }
 
     &.e-device .e-rowcell,
@@ -1249,6 +1259,13 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-ungroupbutton.e-icons {
+      margin-top: $grid-device-ungroupbutton-icon-margin-top;
+      @if $grid-skin == 'bootstrap4' {
+        padding-top: 0;
+      }
+    }
+
     span.e-ungroupbutton.e-icons:hover {
       @if $grid-skin == 'tailwind' {
         color: $cool-gray-700;
@@ -1267,6 +1284,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-groupsort.e-icons {
+      margin-top: $grid-device-group-sorticon-margin-top;
+    }
+
     &.e-rtl span.e-groupsort.e-icons {
       @if $grid-skin == 'fluent' {
           margin-top: 0;
@@ -4401,6 +4422,10 @@ $grid-dropitems-count-margin-left: -8px !default;
   &.e-rtl .e-groupheadercell span {
     padding: $grid-bigger-rtl-group-span-padding;
   }
+
+  &.e-device.e-rtl .e-groupheadercell span {
+    padding: $grid-device-rtl-grouped-headercell-span-padding;
+  }
 }
 
 #{&}.e-grid-min-height {

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

@@ -382,10 +382,12 @@ $grid-bigger-headercell-font-size: $text-base !default;
 $grid-bigger-content-font-size: $text-base !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: -4px !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 0 !default;
 $grid-bigger-group-headercell-margin: 6px 0 6px 8px !default;
 $grid-bigger-group-headercell-padding: 6px 0 !default;
+$grid-device-group-headercell-padding: 0 !default;
 $grid-bigger-grouptext-marign: 0 !default;
 $grid-bigger-headercell-padding: 12px !default;
 $grid-bigger-icons-font-size: $text-base !default;
@@ -395,8 +397,10 @@ $grid-bigger-grouped-headercell-border-radius: 0 !default;
 $grid-bigger-groupedcell-icons-marign-left: -8px !default;
 $grid-bigger-ungroupbutton-icons-font-size: $text-base !default;
 $grid-bigger-groupcell-span-padding: 8px 4px 14px 12px !default;
+$grid-device-grouped-headercell-span-padding: 0 8px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: 0 !default;
 $grid-bigger-ungroupbutton-icon-margin-top: -4px !default;
+$grid-device-ungroupbutton-icon-margin-top: 0 !default;
 $grid-bigger-groupcell-span-line-height: 30px !default;
 $grid-bigger-gdownarrow-icon-font-size: $text-lg !default;
 $grid-gd-clone-border-radius: 4px !default;
@@ -607,6 +611,7 @@ $grid-adaptive-sort-clear-button-padding: 4px !default;
 $grid-cc-margin-top: 2px !default;
 $grid-bigger-rtl-cm-margin: -20px -18px -5px -22px !default;
 $grid-bigger-rtl-group-span-padding: 11.5px 4px 14px 4px !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: 4px 12px 4px 8px !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-bigger-headercell-top-padding: 0 !default;
@@ -1113,6 +1118,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       font-size: $grouped-bigger-text-font-size;
     }
 
+    &.e-device .e-groupheadercell {
+      padding: $grid-device-group-headercell-padding;
+    }
+
     .e-groupheadercell:hover {
       padding: $grid-bigger-group-headercell-hover-padding;
     }
@@ -1169,6 +1178,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-device .e-groupheadercell span {
       line-height: $grid-device-groupheadercell-span-line-height;
+      padding: $grid-device-grouped-headercell-span-padding;
     }
 
     &.e-device .e-rowcell,
@@ -1249,6 +1259,13 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-ungroupbutton.e-icons {
+      margin-top: $grid-device-ungroupbutton-icon-margin-top;
+      @if $grid-skin == 'bootstrap4' {
+        padding-top: 0;
+      }
+    }
+
     span.e-ungroupbutton.e-icons:hover {
       @if $grid-skin == 'tailwind' {
         color: $cool-gray-700;
@@ -1267,6 +1284,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-groupsort.e-icons {
+      margin-top: $grid-device-group-sorticon-margin-top;
+    }
+
     &.e-rtl span.e-groupsort.e-icons {
       @if $grid-skin == 'fluent' {
           margin-top: 0;
@@ -4401,6 +4422,10 @@ $grid-dropitems-count-margin-left: -8px !default;
   &.e-rtl .e-groupheadercell span {
     padding: $grid-bigger-rtl-group-span-padding;
   }
+
+  &.e-device.e-rtl .e-groupheadercell span {
+    padding: $grid-device-rtl-grouped-headercell-span-padding;
+  }
 }
 
 #{&}.e-grid-min-height {

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

@@ -137,7 +137,9 @@ $grid-bigger-columnchooser-header-padding: 24px 24px 38px !default;
 $grid-bigger-columnchooser-ul-padding: 0 !default;
 $grid-bigger-columnchooser-toolbar-div-margin-top: 0 !default;
 $grid-bigger-sorticon-margin-top: 0 !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-bigger-groupcell-span-padding: 0 !default;
+$grid-device-grouped-headercell-span-padding: 0 !default;
 $grid-bigger-ungroupbutton-icon-margin-left: 0 !default;
 $grid-device-headercell-padding: 0 12px $grid-header-bottom-padding !default;
 $grid-device-headercell-fistchild-padding: 0 12px $grid-header-bottom-padding 16px !default;
@@ -330,9 +332,11 @@ $grid-bigger-groupcaption-line-height: 27px !default;
 $grid-bigger-grouped-headercell-border-radius: 0 !default;
 $grid-bigger-group-headercell-margin: 10px 0 0 10px !default;
 $grid-bigger-group-headercell-padding: 1px 10px !default;
+$grid-device-group-headercell-padding: 1px 10px !default;
 $grid-bigger-ungroup-button-font-size: 13px !default;
 $grid-bigger-ungroupbutton-icons-font-size: 13px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: 1px !default;
+$grid-device-ungroupbutton-icon-margin-top: 1px !default;
 $grid-bigger-grouparea-font-size: 21px !default;
 $grid-bigger-rtl-group-headercell-margin: 8px 10px 0 0 !default;
 $grid-bigger-rtl-group-headercell-padding: 0 10px !default;
@@ -611,6 +615,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 5px !default;
 $grid-bigger-rtl-cm-margin: $grid-rtl-column-menu-margin !default;
 $grid-bigger-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
+$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
 $grid-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
 $grid-ungroup-rtl-padding-left: 0 !default;
 $grid-column-reorder-icon-color: $grid-icon-default-color !default;
@@ -1118,6 +1123,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       font-size: $grouped-bigger-text-font-size;
     }
 
+    &.e-device .e-groupheadercell {
+      padding: $grid-device-group-headercell-padding;
+    }
+
     .e-groupheadercell:hover {
       padding: $grid-bigger-group-headercell-hover-padding;
     }
@@ -1174,6 +1183,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-device .e-groupheadercell span {
       line-height: $grid-device-groupheadercell-span-line-height;
+      padding: $grid-device-grouped-headercell-span-padding;
     }
 
     &.e-device .e-rowcell,
@@ -1254,6 +1264,13 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-ungroupbutton.e-icons {
+      margin-top: $grid-device-ungroupbutton-icon-margin-top;
+      @if $grid-skin == 'bootstrap4' {
+        padding-top: 0;
+      }
+    }
+
     span.e-ungroupbutton.e-icons:hover {
       @if $grid-skin == 'tailwind' {
         color: $cool-gray-700;
@@ -1272,6 +1289,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    &.e-device span.e-groupsort.e-icons {
+      margin-top: $grid-device-group-sorticon-margin-top;
+    }
+
     &.e-rtl span.e-groupsort.e-icons {
       @if $grid-skin == 'fluent' {
           margin-top: 0;
@@ -4406,6 +4427,10 @@ $grid-dropitems-count-margin-left: -8px !default;
   &.e-rtl .e-groupheadercell span {
     padding: $grid-bigger-rtl-group-span-padding;
   }
+
+  &.e-device.e-rtl .e-groupheadercell span {
+    padding: $grid-device-rtl-grouped-headercell-span-padding;
+  }
 }
 
 #{&}.e-grid-min-height {