@syncfusion/blazor-themes 23.2.7 → 24.1.43

package/SCSS-Themes/grids/grid/bootstrap4.scss

@@ -501,6 +501,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 #317ab9 !default;
+$grid-dragborder-cell-dashed: 1px dashed #317ab9 !default;
 $grid-dragborder-position: relative !default;
 $grid-dragborder-z-index: 5 !default;
 $grid-dragicon-cell-border: 1px 0 0 0 !default;
@@ -599,19 +600,20 @@ $grid-responsive-res-apply-btn-font-size: 15px !default;
 $grid-responsive-res-apply-btn-margin-top: 0 !default;
 $grid-responsive-sort-clear-btn-font-size: 15px !default;
 $grid-responsive-sort-clear-margin-top: 0 !default;
-$grid-responsive-icon-filter-clear: 15px !default;
+$grid-responsive-icon-filter-clear: 16px !default;
 $grid-responsive-icon-filter-clear-bottom: 10px !default;
-$grid-responsive-btn-icon-font-size: 14px !default;
+$grid-responsive-btn-icon-font-size: 16px !default;
 $grid-responsive-back-btn-bottom: 12px !default;
-$grid-responsive-header-padding-top: 8px !default;
+$grid-responsive-header-padding-top: 10px !default;
 $grid-responsive-search-place-holder-margin-top: 2px !default;
 $grid-responsive-search-width: 0 !default;
 $grid-responsive-search-left-padding: 7px !default;
-$grid-responsive-filter-clear-margin: 6px !default;
+$grid-responsive-filter-clear-margin: 5px !default;
 $grid-responsive-toolbar-filter-font-size: 18px !default;
 $grid-responsive-tbar-btn-bgr-padding: 1.5px 5.5px !default;
 $grid-responsive-btn-top: 0 !default;
-$grid-responsive-apply-btn-top: 3px !default;
+$grid-responsive-apply-btn-top: 7px !default;
+$grid-responsive-column-menu-icon-margin-top: 4px !default;
 
 $grid-rtl-headercelldiv-left-align-margin: 10px !default;
 $grid-rtl-filtermenudiv-left-align-margin: -5px !default;
@@ -649,7 +651,7 @@ $grid-biggerreorderarrow-font-size: $grid-reorderarrow-font-size !default;
 $grid-bigger-drag-count-padding: 3px 7px 4px !default;
 $grid-bigger-drag-count-top: -10px !default;
 $grid-bigger-check-select-all-font-size: $grid-bigger-header-icons-font-size !default;
-$grid-adaptive-sort-clear-button-padding: 5px !default;
+$grid-adaptive-sort-clear-button-padding: 7px !default;
 $grid-cc-margin-top: 0 !default;
 $grid-bigger-rtl-cm-margin: -20.5px -18px -18px -22px !default;
 $grid-bigger-device-rtl-cm-margin: -20px -18px -18px -22px !default;
@@ -659,6 +661,7 @@ $grid-rtl-group-span-padding: 0 8px !default;
 $grid-ungroup-rtl-padding-left: 12px !default;
 $grid-column-reorder-icon-color: $grid-icon-default-color !default;
 $grid-bigger-headercell-top-padding: 0 !default;
+$grid-bigger-headercell-autofit-padding: 0 8px 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;
@@ -764,6 +767,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;
@@ -1233,6 +1240,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 {
@@ -1498,10 +1508,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%;
@@ -1511,13 +1527,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;
     }
@@ -1747,6 +1769,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 {
@@ -1898,6 +1945,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%;
@@ -1906,7 +1959,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 {
@@ -1938,6 +1991,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 {
@@ -3130,6 +3186,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 {
@@ -5029,10 +5092,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%;
@@ -5042,13 +5111,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;
       }
@@ -5230,13 +5305,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']),
@@ -5460,7 +5545,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;
         }
@@ -5487,6 +5572,7 @@ margin: $grid-group-animator-cell-margin;
       & td::before{
         @if $grid-skin == 'fluent' {
           overflow: hidden;
+          bottom: 0;
         }
       }
     }
@@ -5637,12 +5723,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;
@@ -5697,7 +5881,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;
@@ -5808,8 +5992,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 {
@@ -5846,6 +6032,10 @@ margin: $grid-group-animator-cell-margin;
       }
     }
 
+    & .e-ccdlg {
+      border: transparent;
+    }
+
     & .e-xlflmenu {
       border: transparent;
 
@@ -5920,7 +6110,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;
@@ -6008,6 +6201,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;
     }
@@ -6036,8 +6238,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 {
@@ -6437,9 +6649,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;
       }
@@ -6957,6 +7169,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;
     }
@@ -7198,6 +7411,10 @@ margin: $grid-group-animator-cell-margin;
       content: '\e7d6';
     }
 
+    .e-responsivetoolbaritems-btn::before {
+      content: '\e781';
+    }
+
     &.e-rtl {
       .e-icon-rowdragicon::before {
         content: '\e7d6';
@@ -7220,17 +7437,54 @@ margin: $grid-group-animator-cell-margin;
     content: '\e714';
   }
 
-  & .e-search-icon::before {
+  & .e-search-icon::before,
+  & .e-ccdlg span.e-ccsearch-icon::before {
     content: '\e724';
   }
 
-  & .e-chkcancel-icon::before {
+  & .e-chkcancel-icon::before,
+  & .e-ccdlg span.e-cc-cancel::before {
     content: '\e7a7';
   }
 
   & .e-icon-filter-clear::before {
     content: '\e748';
   }
+
+  & .e-resfilter-icon.e-icons::before {
+    content: '\e714';
+  }
+
+  & .e-resascending-icon.e-icons::before {
+    content: '\e7d1';
+  }
+
+  & .e-resdescending-icon.e-icons::before {
+    content: '\e7b9';
+  }
+
+  & .e-resgroup-icon.e-icons::before {
+    content: '\e7d5';
+  }
+
+  & .e-resungroup-icon.e-icons::before {
+    content: '\e7d5';
+  }
+}
+
+.e-grid-toolbarmenu {
+  .e-responsivetoolbar-menu .e-menu-icon.e-print::before  {
+    content: '\e743';
+  }
+  .e-responsivetoolbar-menu .e-menu-icon.e-pdfexport::before  {
+    content: '\e727';
+  }
+  .e-responsivetoolbar-menu .e-menu-icon.e-excelexport::before  {
+    content: '\e74e';
+  }
+  .e-responsivetoolbar-menu .e-menu-icon.e-csvexport::before  {
+    content: '\e725';
+  }
 }
 
 .e-row-responsive-filter {