@syncfusion/blazor-themes 23.2.7 → 24.1.41

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

@@ -187,7 +187,7 @@ $grid-rtl-stackedhader-firstcell-right-border-size: 1px !default;
 $grid-rtl-bothlines-stackedhader-firstcell-left-border-size: 1px !default;
 $grid-rtl-bothlines-stackedhader-firstcell-right-border-size: 0 !default;
 $grid-bigger-headercell-bootom-padding: 0 !default;
-$grid-bigger-grightarrow-icon-font-size: $font-icon-22 !default;
+$grid-bigger-grightarrow-icon-font-size: $text-lg !default;
 $group-bigger-sorticon-margin-right: 0 !default;
 $grid-bigger-groupdroparea-padding: 14.5px 24px !default;
 $grid-bigger-group-headercell-height: 36px !default;
@@ -402,7 +402,7 @@ $grid-header-border-width: 0 !default;
 $grid-bigger-groupedcell-padding: 0 !default;
 $grid-bigger-group-headercell-margin: 6px 0 6px 8px !default;
 $grid-bigger-group-headercell-padding: 6px 0 !default;
-$grid-device-group-headercell-padding: 0 !default;
+$grid-device-group-headercell-padding: 3px 0 6px !default;
 $grid-bigger-grouptext-marign: 0 !default;
 $grid-bigger-headercell-padding: 12px !default;
 $grid-bigger-icons-font-size: $text-base !default;
@@ -504,6 +504,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;
@@ -590,15 +591,16 @@ $grid-responsive-icon-filter-clear: 16px !default;
 $grid-responsive-icon-filter-clear-bottom: 10px !default;
 $grid-responsive-btn-icon-font-size: $grid-bigger-icons-font-size !default;
 $grid-responsive-back-btn-bottom: 12px !default;
-$grid-responsive-header-padding-top: 2px !default;
+$grid-responsive-header-padding-top: 3px !default;
 $grid-responsive-search-place-holder-margin-top: 2px !default;
 $grid-responsive-search-width: 0 !default;
 $grid-responsive-search-left-padding: 0 !default;
-$grid-responsive-filter-clear-margin: 0 !default;
+$grid-responsive-filter-clear-margin: -6px !default;
 $grid-responsive-toolbar-filter-font-size: $grid-bigger-icons-font-size !default;
 $grid-responsive-tbar-btn-bgr-padding: 0 !default;
 $grid-responsive-btn-top: -4px !default;
-$grid-responsive-apply-btn-top: 4px !default;
+$grid-responsive-apply-btn-top: 5px !default;
+$grid-responsive-column-menu-icon-margin-top: 4px !default;
 $grid-rtl-headercelldiv-left-align-margin: 10px !default;
 $grid-rtl-filtermenudiv-left-align-margin: -10px !default;
 $grid-rtl-sort-num-left-align-margin: 2px -2px 0 0 !default;
@@ -635,7 +637,7 @@ $grid-biggerreorderarrow-font-size: $text-sm !default;
 $grid-bigger-drag-count-padding: 3px 8px 4px !default;
 $grid-bigger-drag-count-top: -14px !default;
 $grid-bigger-check-select-all-font-size: $text-lg !default;
-$grid-adaptive-sort-clear-button-padding: 4px !default;
+$grid-adaptive-sort-clear-button-padding: 6px !default;
 $grid-cc-margin-top: 2px !default;
 $grid-bigger-rtl-cm-margin: -21px -18px -5px -22px !default;
 $grid-bigger-device-rtl-cm-margin: -25px -18px -5px -22px !default;
@@ -644,6 +646,7 @@ $grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercel
 $grid-rtl-group-span-padding: 4px 12px 4px 8px !default;
 $grid-ungroup-rtl-padding-left: 8px !default;
 $grid-bigger-headercell-top-padding: 0 !default;
+$grid-bigger-headercell-autofit-padding: 0 8px 0 !default;
 $grid-bigger-icon-font-size: $text-lg !default;
 $grid-rtl-mselect-dd-indicator-left: -6px !default;
 $grid-toolbar-text-opacity: .6 !default;
@@ -749,6 +752,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;
@@ -1218,6 +1225,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 {
@@ -1483,10 +1493,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%;
@@ -1496,13 +1512,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;
     }
@@ -1732,6 +1754,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 {
@@ -1883,6 +1930,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%;
@@ -1891,7 +1944,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 {
@@ -1923,6 +1976,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 {
@@ -3115,6 +3171,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 {
@@ -5014,10 +5077,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%;
@@ -5027,13 +5096,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;
       }
@@ -5215,13 +5290,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']),
@@ -5445,7 +5530,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;
         }
@@ -5472,6 +5557,7 @@ margin: $grid-group-animator-cell-margin;
       & td::before{
         @if $grid-skin == 'fluent' {
           overflow: hidden;
+          bottom: 0;
         }
       }
     }
@@ -5622,12 +5708,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;
@@ -5682,7 +5866,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;
@@ -5793,8 +5977,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 {
@@ -5831,6 +6017,10 @@ margin: $grid-group-animator-cell-margin;
       }
     }
 
+    & .e-ccdlg {
+      border: transparent;
+    }
+
     & .e-xlflmenu {
       border: transparent;
 
@@ -5905,7 +6095,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;
@@ -5993,6 +6186,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;
     }
@@ -6021,8 +6223,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 {
@@ -6422,9 +6634,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;
       }
@@ -6942,6 +7154,7 @@ 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;
     }
@@ -7183,6 +7396,10 @@ margin: $grid-group-animator-cell-margin;
       content: '\e726';
     }
 
+    .e-responsivetoolbaritems-btn::before {
+      content: '\e770';
+    }
+
     &.e-rtl {
       .e-icon-rowdragicon::before {
         content: '\e726';
@@ -7210,17 +7427,54 @@ 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-print::before  {
+    content: '\e75d';
+  }
+  .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 {