@syncfusion/ej2-angular-grids 21.2.10 → 22.1.34

package/styles/grid/_tailwind-definition.scss

@@ -94,6 +94,7 @@ $grid-columnchooser-input-padding-left: 4px !default;
 $grid-columnchooser-ul-margin: 13px 0 !default;
 $grid-column-chooser-dlg-footer-padding: 8px !default;
 $grid-rtl-bigger-sortnumber-margin: 0 6px 0 5px !default;
+$grid-rtl-bigger-sortnumber-withfilter-margin: $grid-rtl-bigger-sortnumber-margin !default;
 $grid-rtl-bigger-rightalign-sortnumber-margin: 0 6px 0 5px !default;
 $grid-rtl-group-text-marign-right: 0 !default;
 $grid-rtl-group-text-margin-right: 0 !default;
@@ -134,6 +135,9 @@ $grid-device-filterbarcell-padding: $grid-content-padding 12px !default;
 $grid-device-filterbarcell-firstchild-padding: $grid-content-padding 12px $grid-content-padding 16px !default;
 $grid-device-filterbarcell-lastchild-padding: $grid-content-padding 16px $grid-content-padding 12px !default;
 $grid-device-gridheader-row-span-padding: 20px !default;
+$grid-touch-device-hdrcell-span-line-height: 26px !default;
+$grid-touch-device-hdrcell-ungroup-line-height: 20px !default;
+$grid-device-groupsort-margin-top: 0;
 $grid-edit-input-bigger-padding-bottom: 0 !default;
 $grid-edit-input-bigger-padding-top: 0 !default;
 $grid-edit-input-bigger-device-padding-bottom: 0 !default;
@@ -195,6 +199,7 @@ $grid-content-right-padding: 8px !default;
 $grid-first-last-rowcell-padding: 8px !default;
 $grid-toolbar-search-margin-bottom: 0 !default;
 $grid-toolbar-search-width: 230px !default;
+$grid-bigger-toolbar-search-width: $grid-toolbar-search-width !default;
 $grid-toolbar-search-icon-min-width: 32px !default;
 $grid-toolbar-search-clear-icon-min-width: 33px !default;
 $grid-toolbar-search-clear-icon-font-size: $text-lg !default;
@@ -215,6 +220,7 @@ $grid-rtl-responsive-toolbar-search-clear-icon-margin: 0 !default;
 $grid-res-toolbar-clear-icon-width: 100% !default;
 $grid-res-toolbar-clear-icon-margin: 0 !default;
 $grid-res-toolbar-search-clear-icon-font-size: $text-base !default;
+$grid-res-toolbar-search-icon-font-size: 16px !default;
 $grid-res-toolbar-search-wrapper-padding: 3px 16px 3px 0 !default;
 $grid-res-toolbar-search-icon-padding-left: 0 !default;
 $grid-toolbar-search-wrapper-padding-bottom: 3px !default;
@@ -293,10 +299,11 @@ $grid-edit-input-margin: 2px !default;
 $grid-edit-cell-padding: 2px !default;
 $grid-group-height: 39px !default;
 $grid-ungroup-rtl-padding-top: 4px !default;
+$grid-bigger-ungroup-rtl-padding-top: $grid-ungroup-rtl-padding-top !default;
 $grid-rtl-group-headercell-margin-right: 0 !default;
 $grid-rtl-group-headercell-margin-left: 4px !default;
-$grid-fltr-rtl-sortnumber-margin: 0 4px 0 32px !default;
-$grid-rtl-sortnumber-margin: 0 4px 0 5px !default;
+$grid-fltr-rtl-sortnumber-margin: 0 4px 0 4px !default;
+$grid-rtl-sortnumber-margin: 0 4px 0 -18px !default;
 $grid-fltr-rtl-sortnumber-rightalign-margin: 0 4px 0 6px !default;
 $grid-rtl-sortnumber-rightalign-margin: 0 4px 0 !default;
 $grid-rtl-sortcelldiv-margin: -13px 4px -13px -6px !default;
@@ -304,26 +311,26 @@ $grid-rtl-sortcelldiv-right-align-margin: -13px 4px -13px -6px !default;
 $grid-rtl-bigger-sortcelldiv-right-align-margin: -14.5px 6px -14.5px -4px !default;
 $grid-rtl-bigger-sortcelldiv-margin: -14.5px 6px -14.5px -4px !default;
 $grid-rtl-grouped-headercell-padding: 5px 0 3px !default;
-$grid-rtl-group-text-margin-left: -8px !default;
+$grid-rtl-group-text-margin-left: -7px !default;
 $grid-rtl-group-sorticon-margin-right: 0 !default;
 $grid-rtl-headercell-border-width: 0 !default;
 $grid-rtl-headercelldiv-padding: 0 .4em 0 4.2em !default;
 $grid-rtl-headercelldiv-chkbox-padding: 0 .5em 0 .45em !default;
 $grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .4em !default;
-$grid-ungroup-rtl-padding-right: -9px !default;
+$grid-ungroup-rtl-padding-right: -8px !default;
 $grid-headercelldiv-padding: 0 20px 0 5px !default;
 $grid-headercell-div-padding: 0 .4em !default;
 $grid-group-text-width: auto !default;
 $grid-grouptopleftcell-border-top: 2px solid !default;
 $grid-group-caption-font-size: $text-xs !default;
 $grid-group-caption-header-padding: .7em !default;
-$group-sorticon-margin-left: -8px !default;
+$group-sorticon-margin-left: -7px !default;
 $group-sorticon-margin-top: -2px !default;
 $grid-bigger-headercell-line-height: 42px !default;
 $grid-bigger-rhandler-height: $grid-bigger-headercell-line-height !default;
 $grid-bigger-rowcell-line-height: 24px !default;
 $grid-bigger-font-size: $text-base !default;
-$group-unpgrouicon-margin-left: -9px !default;
+$group-unpgrouicon-margin-left: -8px !default;
 $grid-group-ungroupicon-margin-left: -9px !default;
 $grid-group-clone-text-align: left !default;
 $grid-clone-padding: 2px 8px 1px !default;
@@ -347,14 +354,15 @@ $grid-bigger-icons-font-size: $text-base !default;
 $group-collapse-icon-text-indent: 11px !default;
 $grid-bigger-grouparea-font-size: $grid-bigger-content-font-size !default;
 $grid-bigger-grouped-headercell-border-radius: 0 !default;
-$grid-bigger-groupedcell-icons-marign-left: -8px !default;
+$grid-bigger-groupedcell-icons-marign-left: -6px !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-groupcell-span-line-height: 22px !default;
+$grid-bigger-groupcell-span-height: 24px !default;
 $grid-bigger-gdownarrow-icon-font-size: $text-base !default;
 $grid-gd-clone-border-radius: 4px !default;
 $grid-bigger-group-clone-broder-radius: 6px !default;
@@ -384,7 +392,7 @@ $grid-filterbarcell-text-input: 32px !default;
 $grid-bigger-filterbarcell-text-input: 39px !default;
 $grid-columnchooser-li-padding: 7px 0 !default;
 $grid-edit-input-bigger-margin: 2px !default;
-$grid-device-ungroupbutton-line-height: 37px !default;
+$grid-device-ungroupbutton-line-height: 33px !default;
 $grid-device-groupheadercell-span-line-height: 33px !default;
 $frozen-border-color: $border-light !default;
 $grid-frozenborder-disabled-color: $content-bg-color !default;
@@ -426,7 +434,8 @@ $grid-checkbox-filter-min-height: 307px !default;
 $grid-column-menu-margin: -13px -18px -13px 4px !default;
 $grid-column-menu-padding: 3px !default;
 $grid-textwrap-column-menu-margin: -19px -20px -20px -20px !default;
-$grid-bigger-column-menu-margin: -14px -15px !default;
+$grid-bigger-column-menu-margin: -13px -18px -13px 4px !default;
+$grid-bigger-device-column-menu-margin: -18px -15px !default;
 $grid-column-menu-top-touch: 23px !default;
 $grid-column-menu-bottom-touch: 24px !default;
 $grid-column-menu-right-touch: 26px !default;
@@ -450,6 +459,7 @@ $grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -20px 14px !defau
 $grid-drag-font-size: $text-lg !default;
 $grid-drag-icon-font-weight: $font-weight-bold !default;
 $grid-drag-move-icon: 10px !default;
+$grid-drag-area-border: 1px solid !default;
 $grid-dragdrop-padding: 2px !default;
 $grid-dragborder-box-shadow: 0 2px 0 0 $primary !default;
 $grid-dragborder-position: relative !default;
@@ -535,6 +545,7 @@ $grid-responsive-search-icon-right: 9px !default;
 $grid-responsive-search-padding-right: 16px !default;
 $grid-responsive-search-padding-left: 16px !default;
 $grid-responsive-header-background: $content-bg-color !default;
+$grid-bigger-res-dlg-hdr-padding: 16px !default;
 $grid-responsive-header-search: 4px !default;
 $grid-responsive-filter-reset-color: $grid-filtered-color !default;
 $grid-responsive-toolbar-icon-color: $grid-icon-color !default;
@@ -588,7 +599,11 @@ $grid-sort-number-size: 16px !default;
 $grid-bigger-sort-number-size: 18px !default;
 $grid-sort-number-font-size: $text-xs !default;
 $grid-filter-border-radius: 6px !default;
+$grid-bigger-filter-border-radius: $grid-filter-border-radius !default;
 $grid-adaptive-toolbar-icon-hover-bottom: 0 !default;
+$grid-adaptive-cell-padding-bottom: 5px !default;
+$grid-adaptive-cell-padding-top: 5px !default;
+$grid-bigger-adaptive-cell-position-top: 6px !default;
 $grid-bigger-sort-margin: -14px -5px !default;
 $grid-bigger-sort-right-margin: 0 -1px 0 4px !default;
 $grid-skin: 'tailwind' !default;
@@ -599,6 +614,7 @@ $grid-bigger-check-select-all-font-size: $grid-bigger-header-icons-font-size !de
 $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-device-rtl-cm-margin: -18px 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;

package/styles/grid/_theme.scss

@@ -41,6 +41,16 @@
 
     .e-groupdroparea .e-icons {
       color: $grid-header-icon-color;
+      @if $grid-skin == 'material3' {
+        border-radius: 4px;
+      }
+    }
+
+    @if $grid-skin == 'material3' {
+      .e-groupdroparea .e-icons:hover,
+      .e-groupdroparea .e-icons.e-focused {
+        background-color: rgba($on-surface-variant, $opacity8);
+      }
     }
 
     .e-tableborder {
@@ -72,6 +82,8 @@
 
     .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
     .e-gridcontent .e-rowcell.e-dragborder,
+    .e-gridcontent .e-groupcaption.e-dragborder,
+    .e-gridcontent .e-summarycell.e-dragborder,
     .e-gridcontent .e-rowdragdrop.e-dragborder,
     & .e-gridheader thead tr th.e-firstrowdragborder,
     &.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
@@ -132,7 +144,12 @@
     }
 
     .e-gridfooter {
-      background-color: $grid-summary-row-bg-color;
+      @if $grid-skin == 'material3' {
+        background: $grid-summary-row-bg-color;
+      }
+      @else {
+        background-color: $grid-summary-row-bg-color;
+      }
     }
 
     .e-headercontent {
@@ -170,7 +187,12 @@
     }
 
     .e-summarycell {
-      background-color: $group-row-bg-color;
+      @if $grid-skin == 'material3' {
+        background: $group-row-bg-color;
+      }
+      @else {
+        background-color: $group-row-bg-color;
+      }
       border-color: $grid-header-border-color;
       color: $grid-header-color;
     }
@@ -178,8 +200,14 @@
     .e-summaryrow .e-summarycell,
     .e-summaryrow .e-templatecell,
     .e-summarycontent .e-indentcell,
-    .e-indentcell.e-detailindentcelltop {
-      background-color: $grid-summary-row-bg-color;
+    .e-indentcell.e-detailindentcelltop,
+    .e-groupfooterrow.e-summaryrow .e-indentcell.e-indentcelltop {
+      @if $grid-skin == 'material3' {
+        background: $grid-summary-row-bg-color;
+      }
+      @else {
+        background-color: $grid-summary-row-bg-color;
+      }
       border-color: $grid-header-border-color;
       color: $grid-header-color;
     }
@@ -263,12 +291,46 @@
       }
     }
 
+    &.e-gridhover .e-dragclone .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
+    &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
+    &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
+    &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
+    &.e-rtl .e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
+    &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
+      &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+        @if $grid-skin == 'material3' {
+          background: $content-bg-color-alt3;
+        }
+      }
+    }
+
+    .e-bigger &,
+    &.e-bigger {
+      &.e-gridhover .e-dragclone .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
+      &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
+      &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
+      &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
+      &.e-rtl .e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
+      &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
+        &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+          @if $grid-skin == 'material3' {
+            background: $content-bg-color-alt3;
+          }
+        }
+      }
+    }
+
     & .e-row:hover .e-rowdragdrop {
       cursor: move;
     }
 
     .e-sortnumber {
-      background-color: $grid-sortnumber-bg-color;
+      @if $grid-skin == 'material3' {
+        background: $grid-sortnumber-bg-color;
+      }
+      @else {
+        background-color: $grid-sortnumber-bg-color;
+      }
       color: $grid-sortnumber-color;
     }
 
@@ -339,8 +401,14 @@
     }
 
     .e-cloneproperties {
-      background-color: $grid-drag-clone-bg-color;
-      border-color: $grid-drag-clone-border-color;
+      @if $grid-skin == 'material3' {
+        background: $grid-drag-clone-bg-color;
+        border: none;
+      }
+      @else {
+        background-color: $grid-drag-clone-bg-color;
+        border-color: $grid-drag-clone-border-color;
+      }
       color: $grid-drag-clone-color;
     }
 
@@ -404,7 +472,9 @@
 
     .e-cloneproperties.e-draganddrop {
       box-shadow: $grid-clone-prop-box-shadow;
-      opacity: .95;
+      @if $grid-skin != 'material3' {
+        opacity: .95;
+      }
       overflow: visible;
     }
 
@@ -414,13 +484,23 @@
     }
 
     .e-griddragarea {
-      background-color: $grid-drag-clone-bg-color;
-      border-color: $grid-drag-clone-bg-color;
+      @if $grid-skin == 'material3' {
+        background: rgba($primary, .18);
+      }
+      @else {
+        background-color: $grid-drag-clone-bg-color;
+        border-color: $grid-drag-clone-bg-color;
+      }
       color: $grid-row-selection-color;
     }
 
     .e-groupdroparea {
-      background-color: $group-droparea-bg-color;
+      @if $grid-skin == 'material3' {
+        background: $group-droparea-bg-color;
+      }
+      @else {
+        background-color: $group-droparea-bg-color;
+      }
       border-top-color: $grid-header-border-color;
       color: $group-droparea-color;
     }
@@ -433,11 +513,22 @@
     }
 
     .e-groupdroparea.e-grouped {
-      background-color: $grouped-droparea-bg-color;
+      @if $grid-skin == 'material3' {
+        background: $grouped-droparea-bg-color;
+      }
+      @else {
+        background-color: $grouped-droparea-bg-color;
+      }
     }
 
     .e-groupheadercell {
-      background-color: $group-header-bg-color;
+      @if $grid-skin == 'material3' {
+        background: $group-header-bg-color;
+        border-style: solid;
+      }
+      @else {
+        background-color: $group-header-bg-color;
+      }
       border-color: $grid-group-broder-color;
       border-radius: $group-header-border-radius;
       color: $group-header-color;
@@ -446,6 +537,9 @@
     .e-groupheadercell:hover {
       background-color: $group-header-hover-bg-color;
       border-color: $grid-group-hover-broder-color;
+      @if $grid-skin == 'material3' {
+        border-style: solid;
+      }
     }
 
     .e-ungroupbutton:hover {
@@ -461,7 +555,12 @@
     .e-indentcell,
     .e-recordplusexpand,
     .e-recordpluscollapse {
-      background-color: $group-row-bg-color;
+      @if $grid-skin == 'material3' {
+        background: $group-row-bg-color;
+      }
+      @else {
+        background-color: $group-row-bg-color;
+      }
       color: $group-caption-font-color;
     }
 
@@ -509,12 +608,22 @@
 
     .e-cloneproperties.e-draganddrop .e-rowcell {
       color: $grid-content-font-color;
+      @if $grid-skin == 'material3' {
+        padding-top: 6px;
+        padding-bottom: 6px;
+      }
     }
 
     .e-cloneproperties.e-draganddrop table,
     .e-cloneproperties.e-draganddrop table .e-selectionbackground {
-      background-color: $grid-clone-dragdrop-bg-color;
-      height: 30px;
+      @if $grid-skin == 'material3' {
+        background: $grid-clone-dragdrop-bg-color;
+        height: 32px;
+      }
+      @else {
+        background-color: $grid-clone-dragdrop-bg-color;
+        height: 30px;
+      }
     }
 
     &.e-rtl {

package/styles/grid/bootstrap-dark.css

@@ -639,7 +639,7 @@
 }
 .e-bigger .e-grid.e-rtl .e-gridheader .e-fltr-icon .e-sortfilterdiv,
 .e-grid.e-bigger.e-rtl .e-gridheader .e-fltr-icon .e-sortfilterdiv {
-  margin: -29px 0 0 22px;
+  margin: -29px -5px 0 7px;
 }
 .e-bigger .e-grid.e-rtl .e-gridheader .e-rightalign.e-fltr-icon .e-sortfilterdiv,
 .e-grid.e-bigger.e-rtl .e-gridheader .e-rightalign.e-fltr-icon .e-sortfilterdiv {
@@ -661,11 +661,11 @@
 .e-bigger .e-grid.e-rtl .e-headercell.e-rightalign .e-headercelldiv .e-sortnumber, .e-bigger .e-grid.e-rtl .e-detailheadercell.e-rightalign .e-headercelldiv .e-sortnumber,
 .e-grid.e-bigger.e-rtl .e-headercell.e-rightalign .e-headercelldiv .e-sortnumber,
 .e-grid.e-bigger.e-rtl .e-detailheadercell.e-rightalign .e-headercelldiv .e-sortnumber {
-  margin: 8px 0 0 4px;
+  margin: 6px 0 0 10px;
 }
 .e-bigger .e-grid.e-rtl .e-headercell.e-fltr-icon .e-headercelldiv .e-sortnumber,
 .e-grid.e-bigger.e-rtl .e-headercell.e-fltr-icon .e-headercelldiv .e-sortnumber {
-  margin: 6px 0 0 10px;
+  margin: 8px 0 0 10px;
 }
 .e-bigger .e-grid .e-rowcell,
 .e-bigger .e-grid .e-summarycell,
@@ -724,6 +724,10 @@
 .e-bigger .e-grid.e-bigger .e-columnmenu,
 .e-grid.e-bigger.e-bigger .e-columnmenu {
   bottom: 16px;
+  margin: -20px -20px;
+}
+.e-bigger .e-grid.e-device .e-columnmenu,
+.e-grid.e-bigger.e-device .e-columnmenu {
   margin: -20px -18px;
 }
 .e-bigger .e-grid .e-columnmenu,
@@ -833,7 +837,7 @@
 }
 .e-bigger .e-grid.e-device .e-groupheadercell .e-ungroupbutton,
 .e-grid.e-bigger.e-device .e-groupheadercell .e-ungroupbutton {
-  line-height: 37px;
+  line-height: 39px;
 }
 .e-bigger .e-grid.e-device .e-normaledit .e-rowcell,
 .e-grid.e-bigger.e-device .e-normaledit .e-rowcell {
@@ -870,16 +874,16 @@
 .e-grid.e-bigger .e-groupsort,
 .e-grid.e-bigger span.e-ungroupbutton,
 .e-grid.e-bigger .e-toggleungroup {
-  margin-left: -8px;
+  margin-left: -6px;
   margin-top: -4px;
 }
 .e-bigger .e-grid span.e-ungroupbutton.e-icons,
 .e-grid.e-bigger span.e-ungroupbutton.e-icons {
   font-size: 14px;
-  margin-left: -7px;
+  margin-left: -5px;
+  padding-top: 0;
   margin-top: -3px;
   margin-right: 0;
-  padding-top: 0;
 }
 .e-bigger .e-grid.e-device span.e-ungroupbutton.e-icons,
 .e-grid.e-bigger.e-device span.e-ungroupbutton.e-icons {
@@ -903,7 +907,7 @@
 .e-bigger .e-grid.e-rtl span.e-ungroupbutton.e-icons,
 .e-grid.e-bigger.e-rtl span.e-ungroupbutton.e-icons {
   margin-left: 0;
-  margin-right: -10px;
+  margin-right: -8px;
   margin-top: -4px;
   padding-left: 8px;
 }
@@ -1019,7 +1023,6 @@
       -ms-user-select: none;
           user-select: none;
 }
-
 .e-grid {
   border-radius: 4px;
   border-style: none solid solid;
@@ -1415,6 +1418,7 @@
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -1711,13 +1715,13 @@
 .e-grid .e-sortfilterdiv {
   float: right;
   height: 16px;
-  margin: -29px -10px;
+  margin: -29px 0;
   padding: 15px 0;
   width: 16px;
 }
 .e-grid .e-gridheader .e-rightalign .e-sortfilterdiv {
   float: left;
-  margin: -29px -5px;
+  margin: -29px 5px;
 }
 .e-grid .e-gridheader .e-sortfilter .e-rightalign .e-headercelldiv,
 .e-grid .e-gridheader .e-rightalign .e-stackedheadercelldiv {
@@ -1799,10 +1803,10 @@
   margin: 8px 0 0 20px;
 }
 .e-grid .e-gridheader .e-fltr-icon .e-sortfilterdiv {
-  margin: -29px 14px -29px 0;
+  margin: -29px 18px -29px 0;
 }
 .e-grid .e-gridheader .e-rightalign.e-fltr-icon .e-sortfilterdiv {
-  margin: -29px -11px 0 0;
+  margin: -29px -11px 0 7px;
 }
 .e-grid.e-wrap .e-gridheader .e-rightalign .e-sortnumber {
   margin: 3px 2px 0 20px;
@@ -1821,7 +1825,7 @@
   position: absolute;
   right: 23px;
   float: right;
-  margin: -20px;
+  margin: -20.5px -20px;
   padding: 6px;
 }
 .e-grid.e-wrap .e-columnmenu {
@@ -1830,7 +1834,7 @@
 .e-grid.e-rtl .e-columnmenu {
   left: 5px;
   right: auto;
-  margin: -20px -18px -18px 1px;
+  margin: -20px -18px -18px -4px;
 }
 .e-grid.e-wrap.e-rtl .e-columnmenu {
   line-height: 10px;
@@ -2036,12 +2040,22 @@
   font-size: 14px;
   padding: 4px;
 }
-.e-grid .e-lastsummarycell {
+.e-grid .e-footerpadding .e-lastsummarycell {
+  border-left: none;
   border-right: 1px solid;
 }
+.e-grid.e-rtl .e-footerpadding tr.e-summaryrow td.e-lastsummarycell:last-child {
+  border-right: none;
+  border-left: 1px solid #484848;
+}
 .e-grid .e-footerpadding {
+  padding-left: 0;
   padding-right: 14px;
 }
+.e-grid.e-rtl .e-footerpadding {
+  padding-left: 14px;
+  padding-right: 0;
+}
 .e-grid .e-gridpopup span {
   border: 1px solid transparent;
   cursor: pointer;
@@ -2157,6 +2171,7 @@
 .e-grid td.e-active {
   font-weight: normal;
 }
+.e-grid:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
 .e-grid td.e-cellselectionbackground {
   font-weight: normal;
 }
@@ -2251,7 +2266,10 @@
   line-height: 26px;
 }
 .e-grid.e-device .e-groupheadercell .e-ungroupbutton {
-  line-height: 28px;
+  line-height: 23px;
+}
+.e-grid.e-device .e-groupheadercell .e-groupsort {
+  margin-top: 0;
 }
 .e-grid .e-groupheadercell .e-cancel {
   padding-right: 12px;
@@ -2263,14 +2281,14 @@
 .e-grid .e-ungroupbutton,
 .e-grid .e-toggleungroup {
   font-size: 12px;
-  margin-left: -8px;
+  margin-left: -6px;
 }
 .e-grid .e-groupsort {
   margin-right: 0;
   margin-top: -3px;
 }
 .e-grid span.e-ungroupbutton.e-icons {
-  margin-left: -8px;
+  margin-left: -6px;
   margin-top: -3px;
   padding-top: 4px;
   padding-right: 8px;
@@ -2662,7 +2680,7 @@
 .e-grid.e-rtl .e-headercell.e-fltr-icon .e-headercelldiv.e-headerchkcelldiv .e-sortnumber, .e-grid.e-rtl .e-detailheadercell.e-fltr-icon .e-headercelldiv .e-sortnumber,
 .e-grid.e-rtl .e-detailheadercell.e-fltr-icon .e-headercelldiv.e-headerchkcelldiv .e-sortnumber {
   float: left;
-  margin: 9px 0 0 9px;
+  margin: 8px 0 0 9px;
 }
 .e-grid.e-rtl .e-headercell .e-headercelldiv,
 .e-grid.e-rtl .e-headercell .e-headercelldiv.e-headerchkcelldiv, .e-grid.e-rtl .e-detailheadercell .e-headercelldiv,
@@ -2674,7 +2692,7 @@
 .e-grid.e-rtl .e-headercell .e-headercelldiv.e-headerchkcelldiv .e-sortnumber, .e-grid.e-rtl .e-detailheadercell .e-headercelldiv .e-sortnumber,
 .e-grid.e-rtl .e-detailheadercell .e-headercelldiv.e-headerchkcelldiv .e-sortnumber {
   float: left;
-  margin: 9px 0 0 9px;
+  margin: 8px 0 0 9px;
 }
 .e-grid.e-rtl .e-headercell .e-filterbarcell input, .e-grid.e-rtl .e-detailheadercell .e-filterbarcell input {
   border-width: 0;
@@ -2705,7 +2723,7 @@
 }
 .e-grid.e-rtl .e-headercell.e-fltr-icon.e-rightalign .e-sortnumber, .e-grid.e-rtl .e-detailheadercell.e-fltr-icon.e-rightalign .e-sortnumber {
   float: left;
-  margin: 7px 0 0 6px;
+  margin: 8px 0 0 6px;
 }
 .e-grid.e-rtl .e-headercell.e-rightalign .e-sortnumber, .e-grid.e-rtl .e-detailheadercell.e-rightalign .e-sortnumber {
   float: left;
@@ -2859,7 +2877,7 @@
 }
 .e-grid.e-rtl span.e-ungroupbutton.e-icons {
   margin-left: 0;
-  margin-right: -10px;
+  margin-right: -8px;
   padding-top: 4px;
 }
 .e-grid.e-rtl.e-default.e-bothlines .e-headercell, .e-grid.e-rtl.e-default.e-bothlines .e-detailheadercell {
@@ -3183,9 +3201,17 @@
   padding-left: 0;
   padding-right: 4px;
 }
+.e-bigger .e-grid .e-columnmenu,
+.e-bigger.e-grid .e-columnmenu {
+  margin: -20px -20px;
+}
 .e-bigger .e-grid.e-rtl .e-columnmenu,
 .e-bigger.e-grid.e-rtl .e-columnmenu {
-  margin: -20px -18px -18px 1px;
+  margin: -20px -18px -18px -4px;
+}
+.e-bigger .e-grid.e-rtl.e-device .e-columnmenu,
+.e-bigger.e-grid.e-rtl.e-device .e-columnmenu {
+  margin: -20px -18px -18px -4px;
 }
 .e-bigger .e-grid.e-rtl .e-groupheadercell span,
 .e-bigger.e-grid.e-rtl .e-groupheadercell span {
@@ -3494,9 +3520,9 @@
 }
 .e-bigger .e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-dlg-custom-header,
 .e-bigger.e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-dlg-custom-header {
-  font-weight: 500;
   padding-top: 10px;
   width: 100%;
+  font-weight: 500;
 }
 .e-bigger .e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-res-filter-clear-btn,
 .e-bigger.e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-res-filter-clear-btn {
@@ -3805,6 +3831,8 @@
 }
 .e-grid .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
 .e-grid .e-gridcontent .e-rowcell.e-dragborder,
+.e-grid .e-gridcontent .e-groupcaption.e-dragborder,
+.e-grid .e-gridcontent .e-summarycell.e-dragborder,
 .e-grid .e-gridcontent .e-rowdragdrop.e-dragborder, .e-grid .e-gridheader thead tr th.e-firstrowdragborder, .e-grid.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder, .e-grid.e-rtl .e-gridcontent .e-rowcell.e-dragborder, .e-grid.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder {
   box-shadow: 0 2px 0 0 #0070f0;
   position: relative;
@@ -3881,7 +3909,8 @@
 .e-grid .e-summaryrow .e-summarycell,
 .e-grid .e-summaryrow .e-templatecell,
 .e-grid .e-summarycontent .e-indentcell,
-.e-grid .e-indentcell.e-detailindentcelltop {
+.e-grid .e-indentcell.e-detailindentcelltop,
+.e-grid .e-groupfooterrow.e-summaryrow .e-indentcell.e-indentcelltop {
   background-color: #1a1a1a;
   border-color: #484848;
   color: #f0f0f0;