@syncfusion/blazor-themes 23.2.6 → 24.1.41

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

@@ -83,6 +83,7 @@ $grid-rtl-headercelldiv-padding: 0 .6em 0 1.8em !default;
 $grid-rtl-headercelldiv-chkbox-padding: 0 .6em 0 .55em !default;
 $grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .6em 0 1.15em !default;
 $grid-headercelldiv-padding: 0 1.8em 0 .6em !default;
+$grid-headercelldiv-sort-centeralign-padding-right: .6em !default;
 $grid-headercelldiv-right-align-padding: 0 .6em 0 1.9em !default;
 $grid-filterbarcell-text-input: 26px !default;
 $grid-summary-cell-line-height: 18px !default;
@@ -488,6 +489,7 @@ $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 $accent !default;
+$grid-dragborder-cell-dashed: 1px dashed $accent !default;
 $grid-dragborder-position: relative !default;
 $grid-dragborder-z-index: 5 !default;
 $grid-dragicon-cell-border: 1px 0 0 0 !default;
@@ -601,7 +603,8 @@ $grid-responsive-toolbar-filter-font-size: 22px !default;
 $grid-responsive-tbar-zero-value: 0 !default;
 $grid-responsive-tbar-btn-bgr-padding: $grid-responsive-tbar-zero-value 6px !default;
 $grid-responsive-btn-top: 0 !default;
-$grid-responsive-apply-btn-top: 3px !default;
+$grid-responsive-apply-btn-top: 4px !default;
+$grid-responsive-column-menu-icon-margin-top: 0 !default;
 
 $grid-rtl-headercelldiv-left-align-margin: 10px !default;
 $grid-rtl-filtermenudiv-left-align-margin: -5px !default;
@@ -649,6 +652,7 @@ $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;
 $grid-bigger-headercell-top-padding: 0 !default;
+$grid-bigger-headercell-autofit-padding: 0 28px 0 !default;
 $grid-bigger-icon-font-size: $grid-icon-font-size !default;
 $grid-rtl-mselect-dd-indicator-left: -6px !default;
 $grid-toolbar-text-opacity: .6 !default;
@@ -754,6 +758,10 @@ $grid-dropitems-count-margin-left: -8px !default;
       padding: $grid-bigger-headercell-top-padding $grid-bigger-headercell-padding $grid-bigger-headercell-bootom-padding;
     }
 
+    &.e-grid-autofit .e-headercell {
+      padding: $grid-bigger-headercell-autofit-padding;
+    }
+
     .e-headercelldiv {
       font-size: $grid-bigger-header-font-size;
       height: $grid-bigger-header-height;
@@ -1223,6 +1231,9 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-device .e-groupheadercell {
       padding: $grid-device-group-headercell-padding;
+      @if $grid-skin == 'bootstrap5' {
+        padding: $grid-bigger-group-headercell-padding;
+      }
     }
 
     .e-groupheadercell:hover {
@@ -1488,10 +1499,16 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     .e-rowcell .e-frozen-right-cursor,
+    .e-rowcell .e-frozen-fixedright-cursor,
     .e-rowcell .e-frozen-left-cursor,
+    .e-rowcell .e-frozen-fixedleft-cursor,
     .e-gridheader .e-headercell .e-frozen-right-cursor,
+    .e-gridheader .e-headercell .e-frozen-fixedright-cursor,
     .e-gridheader .e-headercell .e-frozen-left-cursor,
+    .e-gridheader .e-headercell .e-frozen-fixedleft-cursor,
     .e-gridheader .e-filterbarcell .e-frozen-right-cursor,
+    .e-gridheader .e-filterbarcell .e-frozen-fixedright-cursor,
+    .e-gridheader .e-filterbarcell .e-frozen-fixedleft-cursor,
     .e-gridheader .e-filterbarcell .e-frozen-left-cursor {
       cursor: move;
       height: 100%;
@@ -1501,13 +1518,19 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     .e-rowcell .e-frozen-left-cursor,
+    .e-rowcell .e-frozen-fixedright-cursor,
     .e-gridheader .e-headercell .e-frozen-left-cursor,
+    .e-gridheader .e-headercell .e-frozen-fixedright-cursor,
+    .e-gridheader .e-filterbarcell .e-frozen-fixedright-cursor,
     .e-gridheader .e-filterbarcell .e-frozen-left-cursor {
       right: 0;
     }
 
     .e-rowcell .e-frozen-right-cursor,
+    .e-rowcell .e-frozen-fixedleft-cursor,
     .e-gridheader .e-headercell .e-frozen-right-cursor,
+    .e-gridheader .e-headercell .e-frozen-fixedleft-cursor,
+    .e-gridheader .e-filterbarcell .e-frozen-fixedleft-cursor,
     .e-gridheader .e-filterbarcell .e-frozen-right-cursor {
       left: 0;
     }
@@ -1737,6 +1760,31 @@ $grid-dropitems-count-margin-left: -8px !default;
         }
     }
 
+    .e-gridcontent, .e-gridheader,
+    &.e-rtl .e-gridcontent,
+    &.e-rtl .e-gridheader { 
+        & .e-rowcell.e-dragtop,
+        & .e-rowdragdrop.e-dragtop,
+        & .e-rowcell.e-dragtop.e-dragright {
+          border-top: $grid-dragborder-cell-dashed;
+        }
+        & .e-rowdragdrop.e-dragtop.e-dragleft,
+        & .e-rowdragdrop.e-dragleft,
+        & .e-rowdragdrop.e-dragbottom.e-dragleft {
+          border-left: $grid-dragborder-cell-dashed;
+        }
+        & .e-rowcell.e-dragright {
+          border-right: $grid-dragborder-cell-dashed;
+        }
+        & .e-rowcell.e-dragbottom,
+        & .e-rowcell.e-lastrowcell.e-dragbottom,
+        & .e-rowcell.e-dragtop.e-dragbottom,
+        & .e-rowdragdrop.e-dragbottom {
+          border-bottom: $grid-dragborder-cell-dashed;
+        }
+
+    }
+
     .e-gridcontent, .e-gridheader,
     &.e-rtl .e-gridcontent,
     &.e-rtl .e-gridheader {
@@ -1888,6 +1936,12 @@ $grid-dropitems-count-margin-left: -8px !default;
             }
           }
 
+          & .e-toolbar-right:not(.e-responsive-right) {
+              & .e-search-wrapper:not(.e-responsive-right) {
+                  width: 40px;
+              }
+          }
+
           & .e-toolbar-right {
             & .e-search-wrapper {
               width: 100%;
@@ -1896,7 +1950,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
               & .e-search-icon {
                 font-size: $grid-res-toolbar-search-icon-font-size;
-                margin-top: $grid-responsive-header-search;
+                margin-top: 0;
               }
 
               & .e-input-group {
@@ -1928,6 +1982,9 @@ $grid-dropitems-count-margin-left: -8px !default;
 
       &.e-bigger .e-res-toolbar {
         & .e-toolbar-items {
+          & .e-tbar-btn:hover {
+            background: none;
+          }
           & .e-responsive-right {
             & .e-search-wrapper {
                 & .e-sicon.e-clear-icon {
@@ -2787,6 +2844,22 @@ margin: $grid-group-animator-cell-margin;
       padding: $grid-headercelldiv-padding;
     }
 
+    .e-gridheader .e-sortfilter .e-centeralign.e-headercell[aria-sort="none"],
+    .e-gridheader .e-sortfilter .e-centeralign.e-headercell:not([aria-sort]) {
+      .e-headercelldiv,
+      .e-stackedheadercelldiv {
+        padding-right: $grid-headercelldiv-sort-centeralign-padding-right;
+      }
+    }
+
+    &.e-rtl .e-gridheader .e-sortfilter .e-centeralign.e-headercell[aria-sort="none"],
+    &.e-rtl .e-gridheader .e-sortfilter .e-centeralign.e-headercell:not([aria-sort]) {
+      .e-headercelldiv,
+      .e-stackedheadercelldiv {
+        padding-left: $grid-headercelldiv-sort-centeralign-padding-right;
+      }
+    }
+
     .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
       @if $grid-skin == 'bootstrap5' {
         padding-left: 8px;
@@ -3104,6 +3177,13 @@ margin: $grid-group-animator-cell-margin;
       margin-top: 5px;
       min-height: 160px;
       overflow-y: auto;
+      &.e-checkbox-infinitescroll {
+        border-top-style: solid;
+        border-top-color: $grid-columnchooser-footer-border-color;
+        border-top-width: 1px;
+        margin-top: 0;
+        overflow-x: hidden;
+      }
     }
 
     .e-checkfltrnmdiv {
@@ -5003,10 +5083,16 @@ margin: $grid-group-animator-cell-margin;
       }
 
       .e-rowcell .e-frozen-right-cursor,
+      .e-rowcell .e-frozen-fixedright-cursor,
       .e-rowcell .e-frozen-left-cursor,
+      .e-rowcell .e-frozen-fixedleft-cursor,
       .e-gridheader .e-headercell .e-frozen-right-cursor,
+      .e-gridheader .e-headercell .e-frozen-fixedright-cursor,
       .e-gridheader .e-headercell .e-frozen-left-cursor,
+      .e-gridheader .e-headercell .e-frozen-fixedleft-cursor,
       .e-gridheader .e-filterbarcell .e-frozen-right-cursor,
+      .e-gridheader .e-filterbarcell .e-frozen-fixedright-cursor,
+      .e-gridheader .e-filterbarcell .e-frozen-fixedleft-cursor,
       .e-gridheader .e-filterbarcell .e-frozen-left-cursor {
         cursor: move;
         height: 100%;
@@ -5016,13 +5102,19 @@ margin: $grid-group-animator-cell-margin;
       }
 
       .e-rowcell .e-frozen-left-cursor,
+      .e-rowcell .e-frozen-fixedright-cursor,
       .e-gridheader .e-headercell .e-frozen-left-cursor,
+      .e-gridheader .e-headercell .e-frozen-fixedright-cursor,
+      .e-gridheader .e-filterbarcell .e-frozen-fixedright-cursor,
       .e-gridheader .e-filterbarcell .e-frozen-left-cursor {
         right: 0;
       }
 
       .e-rowcell .e-frozen-right-cursor,
+      .e-rowcell .e-frozen-fixedleft-cursor,
       .e-gridheader .e-headercell .e-frozen-right-cursor,
+      .e-gridheader .e-headercell .e-frozen-fixedleft-cursor,
+      .e-gridheader .e-filterbarcell .e-frozen-fixedleft-cursor,
       .e-gridheader .e-filterbarcell .e-frozen-right-cursor {
         left: 0;
       }
@@ -5204,13 +5296,23 @@ margin: $grid-group-animator-cell-margin;
         border-width: $grid-headercell-both-border-width;
       }
 
+      &.e-default.e-bothlines .e-headercell.e-leftfreeze.e-freezeleftborder,
+      &.e-default.e-verticallines .e-headercell.e-leftfreeze.e-freezeleftborder {
+        border-right-width: 2px;
+      }
+
+      &.e-default.e-bothlines .e-headercell.e-rightfreeze.e-freezerightborder,
+      &.e-default.e-verticallines .e-headercell.e-rightfreeze.e-freezerightborder {
+        border-left-width: 2px;
+      }
+
       &.e-bothlines .e-gridheader th.e-stackedheadercell {
         border-bottom-style: $grid-border-type;
         border-bottom-width: $grid-border-size;
         border-left-style: $grid-border-type;
         border-left-width: $grid-border-size;
       }
-      
+
       .e-bigger #{&}.e-grid.sf-grid,
       #{&}.e-grid.sf-grid.e-bigger {
         .e-gridheader table th:not([rowspan = '1']),
@@ -5434,7 +5536,7 @@ margin: $grid-group-animator-cell-margin;
   .e-edit-dialog.e-dlg-modal {
     .e-dlg-header-content{
       @if $grid-skin == 'fluent' {
-        padding: 13px 20px 27px 28px;
+        padding: 16px;
         .e-btn.e-dlg-closeicon-btn{
           bottom: 4px;
         }
@@ -5461,6 +5563,7 @@ margin: $grid-group-animator-cell-margin;
       & td::before{
         @if $grid-skin == 'fluent' {
           overflow: hidden;
+          bottom: 0;
         }
       }
     }
@@ -5611,12 +5714,110 @@ margin: $grid-group-animator-cell-margin;
     overflow: initial;
   }
 
+  .columnmenudiv {
+    .e-responsiveascendingdiv .e-resascending-icon,
+    .e-responsivedescendingdiv .e-resdescending-icon,
+    .e-responsivegroupdiv .e-resgroup-icon,
+    .e-responsiveungroupdiv .e-resungroup-icon,
+    .e-responsivecoldiv .e-ressort-icon,
+    .e-responsivefilterdiv .e-resfilter-icon {
+      margin-top: $grid-responsive-column-menu-icon-margin-top;
+      position: absolute;
+    }
+
+    /* stylelint-disable */
+    .e-responsivecoldiv .e-res-header-text.e-rescolumn-menu {
+      margin-left: 33px !important;
+    }
+    /* stylelint-enable */
+  }
+
+  .e-mainfilterdiv {
+    /* stylelint-disable */
+    .e-ccdlg.e-cc.e-control.e-dialog {
+      left: 0 !important;
+      max-height: 100% !important;
+      width: 100% !important;
+    }
+    /* stylelint-enable */
+
+    .e-ccdlg {
+      li.e-cclist {
+        padding: 13px 0 13px 6px;
+      }
+
+      .e-main-div.e-cc {
+        height: 100%;
+      }
+
+      /* stylelint-disable */
+      .e-cc-contentdiv {
+        height: 90% !important;
+        min-height: 160px;
+        overflow-y: auto !important;
+      }
+      /* stylelint-enable */
+
+      .e-dlg-content {
+        padding: 8px 16px 8px 8px;
+        overflow-y: hidden;
+      }
+
+      .e-ccul-ele {
+        margin: 13px 0;
+        padding: 0;
+      }
+
+      .e-chk-hidden {
+        -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+        height: 1px;
+        opacity: 0;
+        width: 1px;
+      }
+    }
+    /* stylelint-disable */
+      .e-cc-contentdiv {
+        height: 90% !important;
+        min-height: 160px;
+        overflow-y: auto !important;
+      }
+    /* stylelint-enable */
+    
+    .e-cc-searchBox {
+      padding-left: 8px;
+
+      .e-ccsearch-icon:hover,
+      .e-cc-cancel:hover {
+        background: none;
+        @if $grid-skin == 'bootstrap5' {
+          color: $grid-responsive-btn-background;
+        }
+      }
+    }
+
+    .e-ccsearch-icon,
+    .e-cc-cancel,
+    .e-search-icon,
+    .e-chkcancel-icon {
+      font-size: 20px;
+      @if $grid-skin == 'material' {
+        font-size: 16px;
+      }
+    }
+  }
+
   &.e-dialog .e-dlg-header-content {
     @if $grid-skin == 'material3' {
       padding: $grid-bigger-res-dlg-hdr-padding;
     }
   }
 
+  &.e-dialog .e-dlg-header-content {
+    @if $grid-skin == 'bootstrap5' {
+      padding: $grid-bigger-res-dlg-hdr-padding;
+    }
+  }
+
   & .e-dlg-header-content {
     background: $grid-responsive-header-background;
     border-bottom: 1px solid;
@@ -5671,7 +5872,7 @@ margin: $grid-group-animator-cell-margin;
       }
       @else if $grid-skin == 'material3' {
         line-height: 35px;
-        padding-top: 6px;
+        padding-top: 5px;
       }
       padding-left: 0;
       padding-right: 40px;
@@ -5782,8 +5983,10 @@ margin: $grid-group-animator-cell-margin;
     padding: 16px;
     padding-top: 0;
 
-    .e-checkfltrnmdiv {
+    .e-checkfltrnmdiv,
+    .e-ccnmdiv {
       text-align: center;
+      padding-top: 40px;
     }
 
     & .e-filtersetdiv {
@@ -5820,6 +6023,10 @@ margin: $grid-group-animator-cell-margin;
       }
     }
 
+    & .e-ccdlg {
+      border: transparent;
+    }
+
     & .e-xlflmenu {
       border: transparent;
 
@@ -5894,7 +6101,10 @@ margin: $grid-group-animator-cell-margin;
 
             & .e-search-icon:focus,
             & .e-search-icon:active,
-            & .e-search-icon:hover {
+            & .e-search-icon:hover,
+            & .e-chkcancel-icon:focus,
+            & .e-chkcancel-icon:active,
+            & .e-chkcancel-icon:hover {
               background: none;
               @if $grid-skin == 'bootstrap5' {
                 color: $grid-responsive-btn-background;
@@ -5982,6 +6192,15 @@ margin: $grid-group-animator-cell-margin;
 .e-bigger.e-responsive-dialog.e-ressortdiv {
   .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-res-apply-btn {
     padding-top: 0;
+    @if $grid-skin == 'material3' {
+      padding-top: 1px;
+    }
+    @if $grid-skin == 'fluent' {
+      padding-top: 3px;
+    }
+    @if $grid-skin == 'bootstrap4' or $grid-skin == 'material' {
+      padding-top: 2px;
+    }
     @if $grid-skin == 'tailwind' {
       margin-top: -8px;
     }
@@ -6010,8 +6229,18 @@ margin: $grid-group-animator-cell-margin;
   & .e-ressortbutton-parent {
     float: left;
   }
+
+  .columnmenudiv .e-responsivecoldiv .e-res-header-text.e-rescolumn-menu {
+    margin-right: 33px;
+  }
 }
 
+ /* stylelint-disable */
+.e-grid-toolbarmenu .e-responsivetoolbar-menu .e-menu-item.e-focused {
+  background-color: transparent !important;
+}
+/* stylelint-enable */
+
 /* stylelint-disable */
 .e-ddl.e-popup.e-popup-flmenu .e-dropdownbase,
 .e-ddl.e-popup.e-popup-flbar .e-dropdownbase {
@@ -6411,9 +6640,9 @@ margin: $grid-group-animator-cell-margin;
       border-bottom-color: $frozen-border-color;
     }
 
-    .e-leftfreeze:not(.e-summarycell, .e-indentcell, .e-updatedtd, .e-selectionbackground, .e-columnselection, .e-groupcaption, .e-cellselectionbackground),
-    .e-rightfreeze:not(.e-summarycell, .e-updatedtd, .e-selectionbackground, .e-columnselection, .e-groupcaption, .e-cellselectionbackground),
-    .e-fixedfreeze:not(.e-summarycell, .e-selectionbackground, .e-updatedtd, .e-columnselection, .e-groupcaption, .e-cellselectionbackground) {
+    .e-leftfreeze:not(.e-summarycell, .e-indentcell, .e-updatedtd, .e-selectionbackground, .e-columnselection, .e-groupcaption, .e-cellselectionbackground, .e-active),
+    .e-rightfreeze:not(.e-summarycell, .e-updatedtd, .e-selectionbackground, .e-columnselection, .e-groupcaption, .e-cellselectionbackground, .e-active),
+    .e-fixedfreeze:not(.e-summarycell, .e-selectionbackground, .e-updatedtd, .e-columnselection, .e-groupcaption, .e-cellselectionbackground, .e-active) {
       @if $grid-skin == 'material' $grid-skin == 'highcontrast' {
         background-color: $grid-rows-bg-color;
       }
@@ -6931,11 +7160,16 @@ margin: $grid-group-animator-cell-margin;
     }
 
     .e-ftrchk.e-chkfocus,
+    .e-menu-item.e-menufocus,
     li.e-cclist.e-colfocus {
       background-color: $grid-hover-bg-color;
     }
   }
 
+  .e-spreadsheet .e-ftrchk.e-chkfocus {
+    background-color: $grid-hover-bg-color;
+  }
+
   .e-tooltip-wrap.e-griderror,
   .e-control.e-tooltip-wrap.e-popup.e-griderror {
     background-color: $grid-val-error-bg-color;
@@ -7168,6 +7402,10 @@ margin: $grid-group-animator-cell-margin;
       content: '\e330';
     }
 
+    .e-responsivetoolbaritems-btn::before {
+      content: '\e984';
+    }
+
     &.e-rtl {
       .e-icon-rowdragicon::before {
         content: '\e330';
@@ -7190,17 +7428,54 @@ margin: $grid-group-animator-cell-margin;
     content: '\e7ee';
   }
 
-  & .e-search-icon::before {
+  & .e-search-icon::before,
+  & .e-ccdlg span.e-ccsearch-icon::before {
     content: '\e993';
   }
 
-  & .e-chkcancel-icon::before {
+  & .e-chkcancel-icon::before,
+  & .e-ccdlg span.e-cc-cancel::before {
     content: '\e7a7';
   }
 
   & .e-icon-filter-clear::before {
     content: '\e248';
   }
+
+  & .e-resfilter-icon.e-icons::before {
+    content: '\e251';
+  }
+
+  & .e-resascending-icon.e-icons::before {
+    content: '\e840';
+  }
+
+  & .e-resdescending-icon.e-icons::before {
+    content: '\e83f';
+  }
+
+  & .e-resgroup-icon.e-icons::before {
+    content: '\e926';
+  }
+
+  & .e-resungroup-icon.e-icons::before {
+    content: '\e926';
+  }
+}
+
+.e-grid-toolbarmenu {
+  .e-responsivetoolbar-menu .e-menu-icon.e-print::before  {
+    content: '\e813';
+  }
+  .e-responsivetoolbar-menu .e-menu-icon.e-pdfexport::before  {
+    content: '\e240';
+  }
+  .e-responsivetoolbar-menu .e-menu-icon.e-excelexport::before  {
+    content: '\e242';
+  }
+  .e-responsivetoolbar-menu .e-menu-icon.e-csvexport::before  {
+    content: '\e241';
+  }
 }
 
 .e-row-responsive-filter {