@syncfusion/blazor-themes 21.2.3 → 21.2.5

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

@@ -166,10 +166,12 @@ $grid-bigger-groupedcell-padding: 11px 0 12px !default;
 $grid-bigger-grouped-headercell-border-radius: 16px !default;
 $grid-bigger-group-headercell-margin: 4px 0 0 24px !default;
 $grid-bigger-group-headercell-padding: 0 8px 0 12px !default;
+$grid-device-group-headercell-padding: 0 8px 0 12px !default;
 $grid-bigger-group-clone-padding: 6px !default;
 $grid-bigger-grouptext-width: 76px !default;
 $grid-bigger-ungroup-button-font-size: 16px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: 0 !default;
+$grid-device-ungroupbutton-icon-margin-top: 0 !default;
 $grid-bigger-group-text-line-height: 32px !default;
 $grid-bigger-ungroupbutton-icons-font-size: 16px !default;
 $grid-bigger-groupcaption-line-height: 32px !default;
@@ -188,7 +190,9 @@ $grid-bigger-columnchooser-toolbar-div-margin-top: 0 !default;
 $grid-bigger-cc-checkbox-padding-left: 12px !default;
 $grid-bigger-searchdiv-padding-left: 6px !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-groupheadercell-span-line-height: 30px !default;
 $grid-device-ungroupbutton-line-height: 33px !default;
@@ -612,6 +616,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 1px !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;
@@ -1119,6 +1124,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;
     }
@@ -1175,6 +1184,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,
@@ -1255,6 +1265,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;
@@ -1273,6 +1290,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;
@@ -2576,6 +2597,8 @@ $grid-dropitems-count-margin-left: -8px !default;
       border-top-style: $grid-border-type;
       border-top-width: $grid-border-size;
       padding: .3em;
+      font-weight: normal;
+      text-align: left;
     }
 
     th.e-detailcell .e-rowcell,
@@ -3910,6 +3933,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       &.e-default.e-bothlines .e-detailcell {
         border-right-style: solid;
         border-right-width: 1px;
+        text-align: right;
       }
 
       & .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
@@ -4407,6 +4431,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 {
@@ -4623,9 +4651,17 @@ $grid-dropitems-count-margin-left: -8px !default;
       position: absolute;
       top: 6px;
       white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
       width: 45%;
     }
 
+    & .e-verticalwrap td::before {
+      line-height: $grid-rowcell-wrap-height;
+      white-space: normal;
+      word-wrap: break-word;
+    }
+    
     & td[data-cell] {
       padding-bottom: 5px;
       padding-left: 55%;

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

@@ -171,10 +171,12 @@ $grid-bigger-groupedcell-padding: 11px 0 12px !default;
 $grid-bigger-grouped-headercell-border-radius: 16px !default;
 $grid-bigger-group-headercell-margin: 4px 0 0 24px !default;
 $grid-bigger-group-headercell-padding: 0 8px 0 12px !default;
+$grid-device-group-headercell-padding: 0 8px 0 12px !default;
 $grid-bigger-group-clone-padding: 6px !default;
 $grid-bigger-grouptext-width: 76px !default;
 $grid-bigger-ungroup-button-font-size: 16px !default;
 $grid-bigger-ungroupbutton-icon-margin-top: 0 !default;
+$grid-device-ungroupbutton-icon-margin-top: 0 !default;
 $grid-bigger-group-text-line-height: 32px !default;
 $grid-bigger-ungroupbutton-icons-font-size: 16px !default;
 $grid-bigger-groupcaption-line-height: 32px !default;
@@ -193,7 +195,9 @@ $grid-bigger-columnchooser-toolbar-div-margin-top: 0 !default;
 $grid-bigger-cc-checkbox-padding-left: 12px !default;
 $grid-bigger-searchdiv-padding-left: 6px !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-groupheadercell-span-line-height: 30px !default;
 $grid-device-ungroupbutton-line-height: 33px !default;
@@ -610,6 +614,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 1px !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;
@@ -1117,6 +1122,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;
     }
@@ -1173,6 +1182,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,
@@ -1253,6 +1263,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;
@@ -1271,6 +1288,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;
@@ -2574,6 +2595,8 @@ $grid-dropitems-count-margin-left: -8px !default;
       border-top-style: $grid-border-type;
       border-top-width: $grid-border-size;
       padding: .3em;
+      font-weight: normal;
+      text-align: left;
     }
 
     th.e-detailcell .e-rowcell,
@@ -3908,6 +3931,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       &.e-default.e-bothlines .e-detailcell {
         border-right-style: solid;
         border-right-width: 1px;
+        text-align: right;
       }
 
       & .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
@@ -4405,6 +4429,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 {
@@ -4621,9 +4649,17 @@ $grid-dropitems-count-margin-left: -8px !default;
       position: absolute;
       top: 6px;
       white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
       width: 45%;
     }
 
+    & .e-verticalwrap td::before {
+      line-height: $grid-rowcell-wrap-height;
+      white-space: normal;
+      word-wrap: break-word;
+    }
+    
     & td[data-cell] {
       padding-bottom: 5px;
       padding-left: 55%;

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

@@ -361,10 +361,12 @@ $grid-bigger-headercell-font-size: $text-xs !default;
 $grid-bigger-content-font-size: $text-base !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: 0 !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 0 5px 5px !default;
 $grid-bigger-group-headercell-margin: 5px 6px 0 0 !default;
 $grid-bigger-group-headercell-padding: 6px 0 !default;
+$grid-device-group-headercell-padding: 0 !default;
 $grid-bigger-grouptext-marign: 8px !default;
 $grid-bigger-headercell-padding: 12px !default;
 $grid-bigger-icons-font-size: $text-base !default;
@@ -374,8 +376,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 0 0 8px !default;
+$grid-device-grouped-headercell-span-padding: 0 8px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: 0 !default;
 $grid-bigger-ungroupbutton-icon-margin-top: 0 !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;
@@ -621,6 +625,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 1px !default;
 $grid-bigger-rtl-cm-margin: -13px 6px -13px -16px !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-grouped-headercell-span-padding !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-column-reorder-icon-color: $primary !default;
@@ -1128,6 +1133,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;
     }
@@ -1184,6 +1193,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,
@@ -1264,6 +1274,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;
@@ -1282,6 +1299,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;
@@ -2585,6 +2606,8 @@ $grid-dropitems-count-margin-left: -8px !default;
       border-top-style: $grid-border-type;
       border-top-width: $grid-border-size;
       padding: .3em;
+      font-weight: normal;
+      text-align: left;
     }
 
     th.e-detailcell .e-rowcell,
@@ -3919,6 +3942,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       &.e-default.e-bothlines .e-detailcell {
         border-right-style: solid;
         border-right-width: 1px;
+        text-align: right;
       }
 
       & .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
@@ -4416,6 +4440,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 {
@@ -4632,9 +4660,17 @@ $grid-dropitems-count-margin-left: -8px !default;
       position: absolute;
       top: 6px;
       white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
       width: 45%;
     }
 
+    & .e-verticalwrap td::before {
+      line-height: $grid-rowcell-wrap-height;
+      white-space: normal;
+      word-wrap: break-word;
+    }
+    
     & td[data-cell] {
       padding-bottom: 5px;
       padding-left: 55%;

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

@@ -361,10 +361,12 @@ $grid-bigger-headercell-font-size: $text-xs !default;
 $grid-bigger-content-font-size: $text-base !default;
 $grid-filterbar-border-radius: 4px !default;
 $grid-bigger-sorticon-margin-top: 0 !default;
+$grid-device-group-sorticon-margin-top: 0 !default;
 $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 0 5px 5px !default;
 $grid-bigger-group-headercell-margin: 5px 6px 0 0 !default;
 $grid-bigger-group-headercell-padding: 6px 0 !default;
+$grid-device-group-headercell-padding: 0 !default;
 $grid-bigger-grouptext-marign: 8px !default;
 $grid-bigger-headercell-padding: 12px !default;
 $grid-bigger-icons-font-size: $text-base !default;
@@ -374,8 +376,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 0 0 8px !default;
+$grid-device-grouped-headercell-span-padding: 0 8px !default;
 $grid-bigger-ungroupbutton-icon-margin-left: 0 !default;
 $grid-bigger-ungroupbutton-icon-margin-top: 0 !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;
@@ -621,6 +625,7 @@ $grid-adaptive-sort-clear-button-padding: 5px !default;
 $grid-cc-margin-top: 1px !default;
 $grid-bigger-rtl-cm-margin: -13px 6px -13px -16px !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-grouped-headercell-span-padding !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-column-reorder-icon-color: $primary !default;
@@ -1128,6 +1133,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;
     }
@@ -1184,6 +1193,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,
@@ -1264,6 +1274,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;
@@ -1282,6 +1299,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;
@@ -2585,6 +2606,8 @@ $grid-dropitems-count-margin-left: -8px !default;
       border-top-style: $grid-border-type;
       border-top-width: $grid-border-size;
       padding: .3em;
+      font-weight: normal;
+      text-align: left;
     }
 
     th.e-detailcell .e-rowcell,
@@ -3919,6 +3942,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       &.e-default.e-bothlines .e-detailcell {
         border-right-style: solid;
         border-right-width: 1px;
+        text-align: right;
       }
 
       & .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
@@ -4416,6 +4440,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 {
@@ -4632,9 +4660,17 @@ $grid-dropitems-count-margin-left: -8px !default;
       position: absolute;
       top: 6px;
       white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
       width: 45%;
     }
 
+    & .e-verticalwrap td::before {
+      line-height: $grid-rowcell-wrap-height;
+      white-space: normal;
+      word-wrap: break-word;
+    }
+    
     & td[data-cell] {
       padding-bottom: 5px;
       padding-left: 55%;