@syncfusion/blazor-themes 23.2.6 → 24.1.41

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

@@ -346,6 +346,7 @@ $grid-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .5em !default;
 $grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .5em !default;
 $grid-ungroup-rtl-padding-right: -9px !default;
 $grid-headercelldiv-padding: 0 20px 0 5px !default;
+$grid-headercelldiv-sort-centeralign-padding-right: 5px !default;
 $grid-headercell-div-padding: 0 .4em !default;
 $grid-group-text-width: auto !default;
 $grid-grouptopleftcell-border-top: 2px solid !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 $primary-border-color !default;
+$grid-dragborder-cell-dashed: 1px dashed $primary-border-color !default;
 $grid-dragborder-position: relative !default;
 $grid-dragborder-z-index: 5 !default;
 $grid-dragicon-cell-border: 1px 0 0 0 !default;
@@ -598,6 +600,7 @@ $grid-responsive-toolbar-filter-font-size: $grid-bigger-icons-font-size !default
 $grid-responsive-tbar-btn-bgr-padding: 0 !default;
 $grid-responsive-btn-top: -10px !default;
 $grid-responsive-apply-btn-top: 4px !default;
+$grid-responsive-column-menu-icon-margin-top: 4px !default;
 
 $grid-rtl-headercelldiv-left-align-margin: 10px !default;
 $grid-rtl-filtermenudiv-left-align-margin: -2px !default;
@@ -651,6 +654,7 @@ $grid-rtl-group-span-padding: 0 8px !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-column-reorder-icon-color: $primary !default;
 $grid-bigger-headercell-top-padding: 10px !default;
+$grid-bigger-headercell-autofit-padding: 10px 6px 10px !default;
 $grid-bigger-icon-font-size: $text-base !default;
 $grid-rtl-mselect-dd-indicator-left: -6px !default;
 $grid-toolbar-text-opacity: .6 !default;
@@ -756,6 +760,10 @@ $grid-dropitems-count-margin-left: -4px !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;
@@ -1225,6 +1233,9 @@ $grid-dropitems-count-margin-left: -4px !default;
 
     &.e-device .e-groupheadercell {
       padding: $grid-device-group-headercell-padding;
+      @if $grid-skin == 'bootstrap5' {
+        padding: $grid-bigger-group-headercell-padding;
+      }
     }
 
     .e-groupheadercell:hover {
@@ -1490,10 +1501,16 @@ $grid-dropitems-count-margin-left: -4px !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%;
@@ -1503,13 +1520,19 @@ $grid-dropitems-count-margin-left: -4px !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;
     }
@@ -1739,6 +1762,31 @@ $grid-dropitems-count-margin-left: -4px !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 {
@@ -1890,6 +1938,12 @@ $grid-dropitems-count-margin-left: -4px !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%;
@@ -1898,7 +1952,7 @@ $grid-dropitems-count-margin-left: -4px !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 {
@@ -1930,6 +1984,9 @@ $grid-dropitems-count-margin-left: -4px !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 {
@@ -2789,6 +2846,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;
@@ -3106,6 +3179,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 {
@@ -5005,10 +5085,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%;
@@ -5018,13 +5104,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;
       }
@@ -5206,13 +5298,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']),
@@ -5436,7 +5538,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;
         }
@@ -5463,6 +5565,7 @@ margin: $grid-group-animator-cell-margin;
       & td::before{
         @if $grid-skin == 'fluent' {
           overflow: hidden;
+          bottom: 0;
         }
       }
     }
@@ -5613,12 +5716,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;
@@ -5673,7 +5874,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;
@@ -5784,8 +5985,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 {
@@ -5822,6 +6025,10 @@ margin: $grid-group-animator-cell-margin;
       }
     }
 
+    & .e-ccdlg {
+      border: transparent;
+    }
+
     & .e-xlflmenu {
       border: transparent;
 
@@ -5896,7 +6103,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;
@@ -5984,6 +6194,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;
     }
@@ -6012,8 +6231,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 {
@@ -6413,9 +6642,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;
       }
@@ -6933,11 +7162,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;
@@ -7170,6 +7404,10 @@ margin: $grid-group-animator-cell-margin;
       content: '\e726';
     }
 
+    .e-responsivetoolbaritems-btn::before {
+      content: '\e770';
+    }
+
     &.e-rtl {
       .e-icon-rowdragicon::before {
         content: '\e726';
@@ -7197,17 +7435,51 @@ margin: $grid-group-animator-cell-margin;
     content: '\e7f7';
   }
 
-  & .e-search-icon::before {
+  & .e-search-icon::before,
+  & .e-ccdlg span.e-ccsearch-icon::before {
     content: '\e754';
   }
 
-  & .e-chkcancel-icon::before {
+  & .e-chkcancel-icon::before,
+  & .e-ccdlg span.e-cc-cancel::before {
     content: '\e7e7';
   }
 
   & .e-icon-filter-clear::before {
     content: '\e72c';
   }
+
+  & .e-resfilter-icon.e-icons::before {
+    content: '\e7f7';
+  }
+
+  & .e-resascending-icon.e-icons::before {
+    content: '\e7df';
+  }
+
+  & .e-resdescending-icon.e-icons::before {
+    content: '\e7d8';
+  }
+
+  & .e-resgroup-icon.e-icons::before {
+    content: '\e724';
+  }
+
+  & .e-resungroup-icon.e-icons::before {
+    content: '\e724';
+  }
+}
+
+.e-grid-toolbarmenu {
+  .e-responsivetoolbar-menu .e-menu-icon.e-pdfexport::before  {
+    content: '\e700';
+  }
+  .e-responsivetoolbar-menu .e-menu-icon.e-excelexport::before  {
+    content: '\e7c1';
+  }
+  .e-responsivetoolbar-menu .e-menu-icon.e-csvexport::before  {
+    content: '\e7ba';
+  }
 }
 
 .e-row-responsive-filter {