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/bootstrap-dark.scss CHANGED Viewed

@@ -137,7 +137,6 @@ $grid-bigger-group-text-line-height: 32px !default;
 $grid-bigger-groupcaption-line-height: 32px !default;
 $grid-bigger-rtl-group-headercell-margin: 3px 8px 0 0 !default;
 $grid-bigger-rtl-group-headercell-padding: 9px 0 4px 0 !default;
-$grid-bigger-rtl-ungroup-icon-margin-top: -4px !default;
 $grid-bigger-rtl-ungroup-icon-margin-right: -10px !default;
 $grid-bigger-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
 $grid-bigger-textwrap-sorticon-rightalign-margin: -9px 5px !default;
@@ -305,7 +304,7 @@ $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: 10px !default;
 $grid-group-right-arrow-icon-padding: 12px 9px 12px 10px !default;
-$grid-group-unpgroupicon-margin-top: 2px !default;
+$grid-group-unpgroupicon-padding-top: 4px !default;
 $grid-summary-cell-line-height: 19px !default;
 $grid-batch-updated-bg-color: #d7f9c7 !default;
 $grid-val-error-color: #f44336 !default;
@@ -315,7 +314,7 @@ $grid-edit-input-padding-top: 2px !default;
 $grid-edit-input-margin: 2px !default;
 $grid-edit-cell-padding: 2px !default;
 $grid-group-height: 52px !default;
-$grid-ungroup-rtl-padding-top: 0 !default;
+$grid-ungroup-rtl-padding-top: 4px !default;
 $grid-rtl-group-headercell-margin-right: 8px !default;
 $grid-rtl-group-headercell-margin-left: 0 !default;
 $grid-fltr-rtl-sortnumber-margin: 9px 0 0 9px !default;
@@ -509,6 +508,7 @@ $grid-bigger-clone-padding: $grid-clone-padding !default;
 $grid-bigger-draganddrop-clone-padding: 0 !default;
 $grouped-bigger-text-font-size: 16px !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;
@@ -1259,6 +1259,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;
       }
@@ -1315,9 +1316,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 {
@@ -1991,6 +1995,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       border-collapse: separate;
       table-layout: fixed;
       width: 100%;
+      border-spacing: 0.25px;
     }
     .e-tableborder {
@@ -2599,6 +2604,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,
@@ -3140,14 +3147,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 {
@@ -3933,6 +3935,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 {
@@ -4650,9 +4653,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/bootstrap.scss CHANGED Viewed

@@ -144,7 +144,6 @@ $grid-bigger-group-text-line-height: 32px !default;
 $grid-bigger-groupcaption-line-height: 32px !default;
 $grid-bigger-rtl-group-headercell-margin: 3px 8px 0 0 !default;
 $grid-bigger-rtl-group-headercell-padding: 9px 0 4px 0 !default;
-$grid-bigger-rtl-ungroup-icon-margin-top: -4px !default;
 $grid-bigger-rtl-ungroup-icon-margin-right: -10px !default;
 $grid-bigger-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
 $grid-bigger-textwrap-sorticon-rightalign-margin: -9px 5px !default;
@@ -309,7 +308,7 @@ $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: 10px !default;
 $grid-group-right-arrow-icon-padding: 12px 9px 12px 10px !default;
-$grid-group-unpgroupicon-margin-top: 2px !default;
+$grid-group-unpgroupicon-padding-top: 4px !default;
 $grid-summary-cell-line-height: 19px !default;
 $grid-batch-updated-bg-color: #d7f9c7 !default;
 $grid-val-error-color: #f44336 !default;
@@ -319,7 +318,7 @@ $grid-edit-input-padding-top: 2px !default;
 $grid-edit-input-margin: 2px !default;
 $grid-edit-cell-padding: 2px !default;
 $grid-group-height: 52px !default;
-$grid-ungroup-rtl-padding-top: 0 !default;
+$grid-ungroup-rtl-padding-top: 4px !default;
 $grid-rtl-group-headercell-margin-right: 8px !default;
 $grid-rtl-group-headercell-margin-left: 0 !default;
 $grid-fltr-rtl-sortnumber-margin: 9px 0 0 9px !default;
@@ -511,6 +510,7 @@ $grid-bigger-clone-padding: $grid-clone-padding !default;
 $grid-bigger-draganddrop-clone-padding: $grid-clone-padding !default;
 $grouped-bigger-text-font-size: 16px !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;
@@ -1261,6 +1261,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;
       }
@@ -1317,9 +1318,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 {
@@ -1993,6 +1997,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       border-collapse: separate;
       table-layout: fixed;
       width: 100%;
+      border-spacing: 0.25px;
     }
     .e-tableborder {
@@ -2601,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,
@@ -3142,14 +3149,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 {
@@ -3935,6 +3937,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 {
@@ -4652,9 +4655,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/bootstrap4.scss CHANGED Viewed

@@ -142,7 +142,6 @@ $grid-bigger-group-text-line-height: 3px !default;
 $grid-bigger-groupcaption-line-height: 32px !default;
 $grid-bigger-rtl-group-headercell-margin: 14px 9px 0 0 !default;
 $grid-bigger-rtl-group-headercell-padding: 6px 6px 4px 9px !default;
-$grid-bigger-rtl-ungroup-icon-margin-top: 3px !default;
 $grid-bigger-rtl-ungroup-icon-margin-right: -15px !default;
 $grid-bigger-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
 $grid-bigger-textwrap-sorticon-rightalign-margin: -9px 5px !default;
@@ -310,7 +309,7 @@ $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: 10px !default;
 $grid-group-right-arrow-icon-padding: 12px 9px 12px 10px !default;
-$grid-group-unpgroupicon-margin-top: 0 !default;
+$grid-group-unpgroupicon-padding-top: 4px !default;
 $grid-summary-cell-line-height: 21px !default;
 $grid-batch-updated-bg-color: #dcfacf !default;
 $grid-val-error-color: #f44336 !default;
@@ -376,7 +375,7 @@ $group-collapse-icon-text-indent: 11px !default;
 $grid-bigger-grouparea-font-size: 16px !default;
 $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-ungroupbutton-icons-font-size: 16px !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;
@@ -516,6 +515,7 @@ $grid-bigger-clone-padding: 2px 12px 1px !default;
 $grid-bigger-draganddrop-clone-padding: 2px 0 1px !default;
 $grouped-bigger-text-font-size: 14px !default;
 $grid-bigger-ungroupbutton-icon-margin-right: 8px !default;
+$grid-bigger-ungroupbutton-icon-padding-top: 8px !default;
 $grid-bigger-font-size: 16px !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: -20px 0 -18px -54px !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: -9px !default;
@@ -1265,6 +1265,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;
       }
@@ -1321,9 +1322,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 {
@@ -1997,6 +2001,7 @@ $grid-dropitems-count-margin-left: -8px !default;
       border-collapse: separate;
       table-layout: fixed;
       width: 100%;
+      border-spacing: 0.25px;
     }
     .e-tableborder {
@@ -2605,6 +2610,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,
@@ -3146,14 +3153,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 {
@@ -3939,6 +3941,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 {
@@ -4656,9 +4659,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/bootstrap5-dark.scss CHANGED Viewed

@@ -137,7 +137,6 @@ $grid-bigger-group-text-line-height: 24px !default;
 $grid-bigger-groupcaption-line-height: 20px !default;
 $grid-bigger-rtl-group-headercell-margin: 8px 8px 0 0 !default;
 $grid-bigger-rtl-group-headercell-padding: 7px 6px 7px 9px !default;
-$grid-bigger-rtl-ungroup-icon-margin-top: 1px !default;
 $grid-bigger-rtl-ungroup-icon-margin-right: -12px !default;
 $grid-bigger-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
 $grid-bigger-textwrap-sorticon-rightalign-margin: -9px 5px !default;
@@ -305,7 +304,7 @@ $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-sm !default;
 $grid-group-right-arrow-icon-padding: 11px 7px 12px 8px !default;
-$grid-group-unpgroupicon-margin-top: 2px !default;
+$grid-group-unpgroupicon-padding-top: 2px !default;
 $grid-summary-cell-line-height: 14px !default;
 $grid-batch-updated-bg-color: $success-light !default;
 $grid-val-error-color: $danger !default;
@@ -315,7 +314,7 @@ $grid-edit-input-padding-top: 2px !default;
 $grid-edit-input-margin: 1px !default;
 $grid-edit-cell-padding: 2px !default;
 $grid-group-height: 36px !default;
-$grid-ungroup-rtl-padding-top: 0 !default;
+$grid-ungroup-rtl-padding-top: 2px !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;
@@ -504,6 +503,7 @@ $grid-bigger-clone-padding: 3px 0 0 8px !default;
 $grid-bigger-draganddrop-clone-padding: 0 !default;
 $grouped-bigger-text-font-size: $text-base !default;
 $grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
+$grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $text-base !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: -14px 4px -14px -2px !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: -8px !default;
@@ -1259,6 +1259,7 @@ $grid-dropitems-count-margin-left: -4px !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;
       }
@@ -1315,9 +1316,12 @@ $grid-dropitems-count-margin-left: -4px !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 {
@@ -1991,6 +1995,7 @@ $grid-dropitems-count-margin-left: -4px !default;
       border-collapse: separate;
       table-layout: fixed;
       width: 100%;
+      border-spacing: 0.25px;
     }
     .e-tableborder {
@@ -2599,6 +2604,8 @@ $grid-dropitems-count-margin-left: -4px !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,
@@ -3140,14 +3147,9 @@ $grid-dropitems-count-margin-left: -4px !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 {
@@ -3933,6 +3935,7 @@ $grid-dropitems-count-margin-left: -4px !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 {
@@ -4650,9 +4653,17 @@ $grid-dropitems-count-margin-left: -4px !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/bootstrap5.scss CHANGED Viewed

@@ -137,7 +137,6 @@ $grid-bigger-group-text-line-height: 24px !default;
 $grid-bigger-groupcaption-line-height: 20px !default;
 $grid-bigger-rtl-group-headercell-margin: 8px 8px 0 0 !default;
 $grid-bigger-rtl-group-headercell-padding: 7px 6px 7px 9px !default;
-$grid-bigger-rtl-ungroup-icon-margin-top: 1px !default;
 $grid-bigger-rtl-ungroup-icon-margin-right: -12px !default;
 $grid-bigger-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
 $grid-bigger-textwrap-sorticon-rightalign-margin: -9px 5px !default;
@@ -305,7 +304,7 @@ $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-sm !default;
 $grid-group-right-arrow-icon-padding: 11px 7px 12px 8px !default;
-$grid-group-unpgroupicon-margin-top: 2px !default;
+$grid-group-unpgroupicon-padding-top: 2px !default;
 $grid-summary-cell-line-height: 14px !default;
 $grid-batch-updated-bg-color: $success-light !default;
 $grid-val-error-color: $danger !default;
@@ -315,7 +314,7 @@ $grid-edit-input-padding-top: 2px !default;
 $grid-edit-input-margin: 1px !default;
 $grid-edit-cell-padding: 2px !default;
 $grid-group-height: 36px !default;
-$grid-ungroup-rtl-padding-top: 0 !default;
+$grid-ungroup-rtl-padding-top: 2px !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;
@@ -504,6 +503,7 @@ $grid-bigger-clone-padding: 3px 0 0 8px !default;
 $grid-bigger-draganddrop-clone-padding: 0 !default;
 $grouped-bigger-text-font-size: $text-base !default;
 $grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
+$grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $text-base !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: -14px 4px -14px -2px !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: -8px !default;
@@ -1259,6 +1259,7 @@ $grid-dropitems-count-margin-left: -4px !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;
       }
@@ -1315,9 +1316,12 @@ $grid-dropitems-count-margin-left: -4px !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 {
@@ -1991,6 +1995,7 @@ $grid-dropitems-count-margin-left: -4px !default;
       border-collapse: separate;
       table-layout: fixed;
       width: 100%;
+      border-spacing: 0.25px;
     }
     .e-tableborder {
@@ -2599,6 +2604,8 @@ $grid-dropitems-count-margin-left: -4px !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,
@@ -3140,14 +3147,9 @@ $grid-dropitems-count-margin-left: -4px !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 {
@@ -3933,6 +3935,7 @@ $grid-dropitems-count-margin-left: -4px !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 {
@@ -4650,9 +4653,17 @@ $grid-dropitems-count-margin-left: -4px !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/fabric-dark.scss CHANGED Viewed

@@ -52,7 +52,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;
@@ -128,7 +128,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%;