npm - @syncfusion/blazor-themes - Versions diffs - 21.2.4 → 21.2.6 - Mend

@syncfusion/blazor-themes 21.2.4 → 21.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (103) hide show

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

@@ -55,7 +55,7 @@ $group-droparea-hover-color: $active-font-color !default;
 $group-header-hover-color: $header-font-color !default;
 $group-row-bg-stcolor: #ececec !default;
 $grid-group-clone-text-align: center !default;
-$grid-group-unpgroupicon-margin-top: 0 !default;
+$grid-group-unpgroupicon-padding-top: 0 !default;
 $grid-ungroup-rtl-padding-right: 6px !default;
 $filter-text-color: $content-font-color !default;
 $grid-wrap-line-height: 18px !default;
@@ -132,7 +132,6 @@ $grid-bigger-groupedcell-padding: 11px 11px 12px !default;
 $grid-bigger-group-clone-padding: 6px !default;
 $grid-bigger-grouptext-width: 76px !default;
 $grid-bigger-group-text-line-height: 32px !default;
-$grid-bigger-rtl-ungroup-icon-margin-top: 0 !default;
 $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;
@@ -506,6 +505,7 @@ $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;
 $grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
+$grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $grid-font-size !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: $grid-rtl-bigger-fltrdiv-margin !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: 0 !default;
@@ -1256,6 +1256,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       margin-left: $grid-bigger-ungroupbutton-icon-margin-left;
       margin-top: $grid-bigger-ungroupbutton-icon-margin-top;
       margin-right: $grid-bigger-ungroupbutton-icon-margin-right;
+      padding-top: $grid-bigger-ungroupbutton-icon-padding-top;
       @if $grid-skin == 'fluent' {
         padding: 0 4px;
       }
@@ -1312,9 +1313,12 @@ $grid-dropitems-count-margin-left: -8px !default;
     &.e-rtl span.e-ungroupbutton.e-icons {
       margin-left: $grid-bigger-rtl-ungroup-icon-margin-left;
       margin-right: $grid-bigger-rtl-ungroup-icon-margin-right;
-      margin-top: $grid-bigger-rtl-ungroup-icon-margin-top;
-      padding-top: $grid-ungroup-rtl-padding-top;
+      margin-top: $grid-bigger-sorticon-margin-top;
       padding-left: $grid-ungroup-rtl-padding-left;
+      @if $grid-skin == 'fluent' {
+        margin-top: 0;
+        padding: 0 4px;
+      }
     }
     .e-groupcaption {
@@ -1988,6 +1992,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       border-collapse: separate;
       table-layout: fixed;
       width: 100%;
+      border-spacing: 0.25px;
     }
     .e-tableborder {
@@ -2596,6 +2601,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,
@@ -3137,14 +3144,9 @@ $grid-dropitems-count-margin-left: -8px !default;
     span.e-ungroupbutton.e-icons {
       margin-left: $group-unpgrouicon-margin-left;
-      margin-top: $grid-group-unpgroupicon-margin-top;
+      margin-top: $group-sorticon-margin-top;
+      padding-top: $grid-group-unpgroupicon-padding-top;
       padding-right: $grid-group-unpgroupicon-padding-right;
-      @if $grid-skin == 'bootstrap4' {
-        padding-top: 4px;
-      }
-      @else if $grid-skin == 'tailwind' {
-        padding-top: 1px;
-      }
     }
     span.e-ungroupbutton.e-icons:hover {
@@ -3930,6 +3932,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 {
@@ -4647,9 +4650,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/fluent-dark.scss CHANGED Viewed

@@ -192,7 +192,6 @@ $grid-bigger-group-text-line-height: .2em !default;
 $grid-bigger-groupcaption-line-height: 16px !default;
 $grid-bigger-rtl-group-headercell-margin: 6px 8px 6px 0 !default;
 $grid-bigger-rtl-group-headercell-padding: 4px 6px 4px 9px !default;
-$grid-bigger-rtl-ungroup-icon-margin-top: -4px !default;
 $grid-bigger-rtl-ungroup-icon-margin-right: -6px !default;
 $grid-bigger-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
 $grid-bigger-textwrap-sorticon-rightalign-margin: -9px 5px !default;
@@ -332,14 +331,14 @@ $grid-rowcell-both-border-width: 1px 0 0 1px !default;
 $grid-indentcell-border-width: 0 1px 0 0 !default;
 $grid-group-right-arrow-icon-font-size: $text-base !default;
 $grid-group-right-arrow-icon-padding: 8px 7px 11px 7px !default;
-$grid-group-unpgroupicon-margin-top: 1px !default;
+$grid-group-unpgroupicon-padding-top: 8px !default;
 $grid-summary-cell-line-height: 14px !default;
 $grid-edit-input-padding-bottom: 1px !default;
 $grid-edit-input-padding-top: 2px !default;
 $grid-edit-input-margin: 2px !default;
 $grid-edit-cell-padding: 2px !default;
 $grid-group-height: 44px !default;
-$grid-ungroup-rtl-padding-top: 4px !default;
+$grid-ungroup-rtl-padding-top: 8px !default;
 $grid-rtl-group-headercell-margin-right: 4px !default;
 $grid-rtl-group-headercell-margin-left: 0 !default;
 $grid-fltr-rtl-sortnumber-margin: 2px 0 0 15px !default;
@@ -511,6 +510,7 @@ $grid-bigger-clone-padding: 3px 0 0 8px !default;
 $grid-bigger-draganddrop-clone-padding: 3px 0 0 8px !default;
 $grouped-bigger-text-font-size: $text-base !default;
 $grid-bigger-ungroupbutton-icon-margin-right: 4px !default;
+$grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $text-base !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: -23px 0 -18px -42px !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: -9px !default;
@@ -1251,6 +1251,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       margin-left: $grid-bigger-ungroupbutton-icon-margin-left;
       margin-top: $grid-bigger-ungroupbutton-icon-margin-top;
       margin-right: $grid-bigger-ungroupbutton-icon-margin-right;
+      padding-top: $grid-bigger-ungroupbutton-icon-padding-top;
       @if $grid-skin == 'fluent' {
         padding: 0 4px;
       }
@@ -1307,9 +1308,12 @@ $grid-dropitems-count-margin-left: -8px !default;
     &.e-rtl span.e-ungroupbutton.e-icons {
       margin-left: $grid-bigger-rtl-ungroup-icon-margin-left;
       margin-right: $grid-bigger-rtl-ungroup-icon-margin-right;
-      margin-top: $grid-bigger-rtl-ungroup-icon-margin-top;
-      padding-top: $grid-ungroup-rtl-padding-top;
+      margin-top: $grid-bigger-sorticon-margin-top;
       padding-left: $grid-ungroup-rtl-padding-left;
+      @if $grid-skin == 'fluent' {
+        margin-top: 0;
+        padding: 0 4px;
+      }
     }
     .e-groupcaption {
@@ -1983,6 +1987,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       border-collapse: separate;
       table-layout: fixed;
       width: 100%;
+      border-spacing: 0.25px;
     }
     .e-tableborder {
@@ -2591,6 +2596,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,
@@ -3132,14 +3139,9 @@ $grid-dropitems-count-margin-left: -8px !default;
     span.e-ungroupbutton.e-icons {
       margin-left: $group-unpgrouicon-margin-left;
-      margin-top: $grid-group-unpgroupicon-margin-top;
+      margin-top: $group-sorticon-margin-top;
+      padding-top: $grid-group-unpgroupicon-padding-top;
       padding-right: $grid-group-unpgroupicon-padding-right;
-      @if $grid-skin == 'bootstrap4' {
-        padding-top: 4px;
-      }
-      @else if $grid-skin == 'tailwind' {
-        padding-top: 1px;
-      }
     }
     span.e-ungroupbutton.e-icons:hover {
@@ -3925,6 +3927,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 {
@@ -4642,9 +4645,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/fluent.scss CHANGED Viewed

@@ -192,7 +192,6 @@ $grid-bigger-group-text-line-height: .2em !default;
 $grid-bigger-groupcaption-line-height: 16px !default;
 $grid-bigger-rtl-group-headercell-margin: 6px 8px 6px 0 !default;
 $grid-bigger-rtl-group-headercell-padding: 4px 6px 4px 9px !default;
-$grid-bigger-rtl-ungroup-icon-margin-top: -4px !default;
 $grid-bigger-rtl-ungroup-icon-margin-right: -6px !default;
 $grid-bigger-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
 $grid-bigger-textwrap-sorticon-rightalign-margin: -9px 5px !default;
@@ -332,14 +331,14 @@ $grid-rowcell-both-border-width: 1px 0 0 1px !default;
 $grid-indentcell-border-width: 0 1px 0 0 !default;
 $grid-group-right-arrow-icon-font-size: $text-base !default;
 $grid-group-right-arrow-icon-padding: 8px 7px 11px 7px !default;
-$grid-group-unpgroupicon-margin-top: 1px !default;
+$grid-group-unpgroupicon-padding-top: 8px !default;
 $grid-summary-cell-line-height: 14px !default;
 $grid-edit-input-padding-bottom: 1px !default;
 $grid-edit-input-padding-top: 2px !default;
 $grid-edit-input-margin: 2px !default;
 $grid-edit-cell-padding: 2px !default;
 $grid-group-height: 44px !default;
-$grid-ungroup-rtl-padding-top: 4px !default;
+$grid-ungroup-rtl-padding-top: 8px !default;
 $grid-rtl-group-headercell-margin-right: 4px !default;
 $grid-rtl-group-headercell-margin-left: 0 !default;
 $grid-fltr-rtl-sortnumber-margin: 2px 0 0 15px !default;
@@ -511,6 +510,7 @@ $grid-bigger-clone-padding: 3px 0 0 8px !default;
 $grid-bigger-draganddrop-clone-padding: 3px 0 0 8px !default;
 $grouped-bigger-text-font-size: $text-base !default;
 $grid-bigger-ungroupbutton-icon-margin-right: 4px !default;
+$grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $text-base !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: -23px 0 -18px -42px !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: -9px !default;
@@ -1251,6 +1251,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       margin-left: $grid-bigger-ungroupbutton-icon-margin-left;
       margin-top: $grid-bigger-ungroupbutton-icon-margin-top;
       margin-right: $grid-bigger-ungroupbutton-icon-margin-right;
+      padding-top: $grid-bigger-ungroupbutton-icon-padding-top;
       @if $grid-skin == 'fluent' {
         padding: 0 4px;
       }
@@ -1307,9 +1308,12 @@ $grid-dropitems-count-margin-left: -8px !default;
     &.e-rtl span.e-ungroupbutton.e-icons {
       margin-left: $grid-bigger-rtl-ungroup-icon-margin-left;
       margin-right: $grid-bigger-rtl-ungroup-icon-margin-right;
-      margin-top: $grid-bigger-rtl-ungroup-icon-margin-top;
-      padding-top: $grid-ungroup-rtl-padding-top;
+      margin-top: $grid-bigger-sorticon-margin-top;
       padding-left: $grid-ungroup-rtl-padding-left;
+      @if $grid-skin == 'fluent' {
+        margin-top: 0;
+        padding: 0 4px;
+      }
     }
     .e-groupcaption {
@@ -1983,6 +1987,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       border-collapse: separate;
       table-layout: fixed;
       width: 100%;
+      border-spacing: 0.25px;
     }
     .e-tableborder {
@@ -2591,6 +2596,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,
@@ -3132,14 +3139,9 @@ $grid-dropitems-count-margin-left: -8px !default;
     span.e-ungroupbutton.e-icons {
       margin-left: $group-unpgrouicon-margin-left;
-      margin-top: $grid-group-unpgroupicon-margin-top;
+      margin-top: $group-sorticon-margin-top;
+      padding-top: $grid-group-unpgroupicon-padding-top;
       padding-right: $grid-group-unpgroupicon-padding-right;
-      @if $grid-skin == 'bootstrap4' {
-        padding-top: 4px;
-      }
-      @else if $grid-skin == 'tailwind' {
-        padding-top: 1px;
-      }
     }
     span.e-ungroupbutton.e-icons:hover {
@@ -3925,6 +3927,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 {
@@ -4642,9 +4645,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/highcontrast.scss CHANGED Viewed

@@ -51,7 +51,7 @@ $group-droparea-hover-color: $active-font-color !default;
 $group-header-hover-color: $header-font-color !default;
 $group-row-bg-stcolor: #ececec !default;
 $grid-group-clone-text-align: center !default;
-$grid-group-unpgroupicon-margin-top: 0 !default;
+$grid-group-unpgroupicon-padding-top: 0 !default;
 $grid-ungroup-rtl-padding-right: 6px !default;
 $filter-text-color: $content-font-color !default;
 $grid-wrap-line-height: 18px !default;
@@ -132,7 +132,6 @@ $grid-bigger-groupdroparea-padding: 22px 24px !default;
 $grid-bigger-groupedcell-padding: 11px 11px 12px !default;
 $grid-bigger-group-clone-padding: 6px !default;
 $grid-bigger-grouptext-width: 76px !default;
-$grid-bigger-rtl-ungroup-icon-margin-top: 0 !default;
 $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;
@@ -506,6 +505,7 @@ $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;
 $grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
+$grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $grid-font-size !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: $grid-rtl-bigger-fltrdiv-margin !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: 0 !default;
@@ -1256,6 +1256,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       margin-left: $grid-bigger-ungroupbutton-icon-margin-left;
       margin-top: $grid-bigger-ungroupbutton-icon-margin-top;
       margin-right: $grid-bigger-ungroupbutton-icon-margin-right;
+      padding-top: $grid-bigger-ungroupbutton-icon-padding-top;
       @if $grid-skin == 'fluent' {
         padding: 0 4px;
       }
@@ -1312,9 +1313,12 @@ $grid-dropitems-count-margin-left: -8px !default;
     &.e-rtl span.e-ungroupbutton.e-icons {
       margin-left: $grid-bigger-rtl-ungroup-icon-margin-left;
       margin-right: $grid-bigger-rtl-ungroup-icon-margin-right;
-      margin-top: $grid-bigger-rtl-ungroup-icon-margin-top;
-      padding-top: $grid-ungroup-rtl-padding-top;
+      margin-top: $grid-bigger-sorticon-margin-top;
       padding-left: $grid-ungroup-rtl-padding-left;
+      @if $grid-skin == 'fluent' {
+        margin-top: 0;
+        padding: 0 4px;
+      }
     }
     .e-groupcaption {
@@ -1988,6 +1992,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       border-collapse: separate;
       table-layout: fixed;
       width: 100%;
+      border-spacing: 0.25px;
     }
     .e-tableborder {
@@ -2596,6 +2601,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,
@@ -3137,14 +3144,9 @@ $grid-dropitems-count-margin-left: -8px !default;
     span.e-ungroupbutton.e-icons {
       margin-left: $group-unpgrouicon-margin-left;
-      margin-top: $grid-group-unpgroupicon-margin-top;
+      margin-top: $group-sorticon-margin-top;
+      padding-top: $grid-group-unpgroupicon-padding-top;
       padding-right: $grid-group-unpgroupicon-padding-right;
-      @if $grid-skin == 'bootstrap4' {
-        padding-top: 4px;
-      }
-      @else if $grid-skin == 'tailwind' {
-        padding-top: 1px;
-      }
     }
     span.e-ungroupbutton.e-icons:hover {
@@ -3930,6 +3932,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 {
@@ -4647,9 +4650,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-dark.scss CHANGED Viewed

@@ -58,7 +58,7 @@ $grid-group-down-arrow-icon-padding: 14px 9px 12px 9px !default;
 $grid-group-right-arrow-icon-font-size: 10px !default;
 $grid-group-right-arrow-icon-padding: 14px 9px 14px 10px !default;
 $grid-group-clone-text-align: center !default;
-$grid-group-unpgroupicon-margin-top: 0 !default;
+$grid-group-unpgroupicon-padding-top: 0 !default;
 $grid-ungroup-rtl-padding-right: 6px !default;
 $filter-text-color: $content-font-color !default;
 $grid-wrap-line-height: 3px !default;
@@ -177,7 +177,6 @@ $grid-bigger-ungroupbutton-icons-font-size: 16px !default;
 $grid-bigger-groupcaption-line-height: 32px !default;
 $grid-bigger-grouparea-font-size: 19px !default;
 $grid-bigger-rtl-group-headercell-margin: 3px 24px 0 0 !default;
-$grid-bigger-rtl-ungroup-icon-margin-top: 0 !default;
 $grid-bigger-rtl-ungroup-icon-margin-right: 6px !default;
 $grid-bigger-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
 $grid-bigger-textwrap-sorticon-rightalign-margin: -9px 5px !default;
@@ -505,6 +504,7 @@ $grid-bigger-clone-padding: $grid-clone-padding !default;
 $grid-bigger-draganddrop-clone-padding: 0 !default;
 $grouped-bigger-text-font-size: $grouped-text-font-size !default;
 $grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
+$grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $grid-font-size !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: $grid-rtl-bigger-fltrdiv-margin !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: 0 !default;
@@ -1257,6 +1257,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       margin-left: $grid-bigger-ungroupbutton-icon-margin-left;
       margin-top: $grid-bigger-ungroupbutton-icon-margin-top;
       margin-right: $grid-bigger-ungroupbutton-icon-margin-right;
+      padding-top: $grid-bigger-ungroupbutton-icon-padding-top;
       @if $grid-skin == 'fluent' {
         padding: 0 4px;
       }
@@ -1313,9 +1314,12 @@ $grid-dropitems-count-margin-left: -8px !default;
     &.e-rtl span.e-ungroupbutton.e-icons {
       margin-left: $grid-bigger-rtl-ungroup-icon-margin-left;
       margin-right: $grid-bigger-rtl-ungroup-icon-margin-right;
-      margin-top: $grid-bigger-rtl-ungroup-icon-margin-top;
-      padding-top: $grid-ungroup-rtl-padding-top;
+      margin-top: $grid-bigger-sorticon-margin-top;
       padding-left: $grid-ungroup-rtl-padding-left;
+      @if $grid-skin == 'fluent' {
+        margin-top: 0;
+        padding: 0 4px;
+      }
     }
     .e-groupcaption {
@@ -1989,6 +1993,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       border-collapse: separate;
       table-layout: fixed;
       width: 100%;
+      border-spacing: 0.25px;
     }
     .e-tableborder {
@@ -2597,6 +2602,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,
@@ -3138,14 +3145,9 @@ $grid-dropitems-count-margin-left: -8px !default;
     span.e-ungroupbutton.e-icons {
       margin-left: $group-unpgrouicon-margin-left;
-      margin-top: $grid-group-unpgroupicon-margin-top;
+      margin-top: $group-sorticon-margin-top;
+      padding-top: $grid-group-unpgroupicon-padding-top;
       padding-right: $grid-group-unpgroupicon-padding-right;
-      @if $grid-skin == 'bootstrap4' {
-        padding-top: 4px;
-      }
-      @else if $grid-skin == 'tailwind' {
-        padding-top: 1px;
-      }
     }
     span.e-ungroupbutton.e-icons:hover {
@@ -3931,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 {
@@ -4648,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 CHANGED Viewed

@@ -62,7 +62,7 @@ $grid-group-down-arrow-icon-padding: 14px 9px 12px 9px !default;
 $grid-group-right-arrow-icon-font-size: 10px !default;
 $grid-group-right-arrow-icon-padding: 14px 9px 14px 10px !default;
 $grid-group-clone-text-align: center !default;
-$grid-group-unpgroupicon-margin-top: 0 !default;
+$grid-group-unpgroupicon-padding-top: 0 !default;
 $grid-ungroup-rtl-padding-right: 6px !default;
 $filter-text-color: $content-font-color !default;
 $grid-wrap-line-height: 3px !default;
@@ -182,7 +182,6 @@ $grid-bigger-ungroupbutton-icons-font-size: 16px !default;
 $grid-bigger-groupcaption-line-height: 32px !default;
 $grid-bigger-grouparea-font-size: 19px !default;
 $grid-bigger-rtl-group-headercell-margin: 3px 24px 0 0 !default;
-$grid-bigger-rtl-ungroup-icon-margin-top: 0 !default;
 $grid-bigger-rtl-ungroup-icon-margin-right: 6px !default;
 $grid-bigger-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
 $grid-bigger-textwrap-sorticon-rightalign-margin: -9px 5px !default;
@@ -504,6 +503,7 @@ $grid-bigger-clone-padding: $grid-clone-padding !default;
 $grid-bigger-draganddrop-clone-padding: 0 !default;
 $grouped-bigger-text-font-size: $grouped-text-font-size !default;
 $grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
+$grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $grid-font-size !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: $grid-rtl-bigger-fltrdiv-margin !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: 0 !default;
@@ -1255,6 +1255,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       margin-left: $grid-bigger-ungroupbutton-icon-margin-left;
       margin-top: $grid-bigger-ungroupbutton-icon-margin-top;
       margin-right: $grid-bigger-ungroupbutton-icon-margin-right;
+      padding-top: $grid-bigger-ungroupbutton-icon-padding-top;
       @if $grid-skin == 'fluent' {
         padding: 0 4px;
       }
@@ -1311,9 +1312,12 @@ $grid-dropitems-count-margin-left: -8px !default;
     &.e-rtl span.e-ungroupbutton.e-icons {
       margin-left: $grid-bigger-rtl-ungroup-icon-margin-left;
       margin-right: $grid-bigger-rtl-ungroup-icon-margin-right;
-      margin-top: $grid-bigger-rtl-ungroup-icon-margin-top;
-      padding-top: $grid-ungroup-rtl-padding-top;
+      margin-top: $grid-bigger-sorticon-margin-top;
       padding-left: $grid-ungroup-rtl-padding-left;
+      @if $grid-skin == 'fluent' {
+        margin-top: 0;
+        padding: 0 4px;
+      }
     }
     .e-groupcaption {
@@ -1987,6 +1991,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       border-collapse: separate;
       table-layout: fixed;
       width: 100%;
+      border-spacing: 0.25px;
     }
     .e-tableborder {
@@ -2595,6 +2600,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,
@@ -3136,14 +3143,9 @@ $grid-dropitems-count-margin-left: -8px !default;
     span.e-ungroupbutton.e-icons {
       margin-left: $group-unpgrouicon-margin-left;
-      margin-top: $grid-group-unpgroupicon-margin-top;
+      margin-top: $group-sorticon-margin-top;
+      padding-top: $grid-group-unpgroupicon-padding-top;
       padding-right: $grid-group-unpgroupicon-padding-right;
-      @if $grid-skin == 'bootstrap4' {
-        padding-top: 4px;
-      }
-      @else if $grid-skin == 'tailwind' {
-        padding-top: 1px;
-      }
     }
     span.e-ungroupbutton.e-icons:hover {
@@ -3929,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 {
@@ -4646,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%;