@syncfusion/blazor-themes 31.1.20 → 31.1.22

package/SCSS-Themes/material.scss

@@ -22873,11 +22873,12 @@ $btn-focus-box-shadow: none !default;
 @mixin outline-primary-disabled {
   @if $skin-name == 'bootstrap5'  or $skin-name == 'bootstrap5.3' {
     background: $btn-outline-primary-disabled-border-color;
+    border-color: $btn-outline-primary-disabled-color;
   }
   @else {
     background: $btn-outline-bgcolor;
+    border-color: $btn-outline-primary-disabled-border-color;
   }
-  border-color: $btn-outline-primary-disabled-border-color;
   box-shadow: $btn-flat-box-shadow;
   color: $btn-outline-primary-disabled-color;
 }
@@ -59218,7 +59219,7 @@ $treeview-navigable-icon-image-anchor-margin-reverse: 0 2px 0 10px !default;
 $treeview-navigable-rtl-margin-reverse: 0 12px 0 0 !default;
 $treeview-rtl-image-margin: 0 5px 0 0 !default;
 $treeview-input-padding: 0 7px !default;
-$treeview-image-text-padding: 0 10px !default;
+$treeview-image-text-padding: 7px 10px !default;
 $treeview-icon-image-margin: 0 0 0 10px !default;
 $treeview-rtl-icon-image-margin: 0 10px 0 0 !default;
 $treeview-check-margin: 0 0 0 5px !default;
@@ -59514,6 +59515,10 @@ $ripple-width: 32px !default;
               padding-top: 5px;
               padding-bottom: 5px;
             }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
           }
         }
       }
@@ -59631,10 +59636,6 @@ $ripple-width: 32px !default;
           margin-top: 4px;
           margin-bottom: 4px;
         }
-        @else if($skin-name == 'bootstrap5') {
-          margin-bottom: 3px;
-          margin-top: 3px;
-        }
         @else {
           margin-bottom: 0;
         }
@@ -60684,8 +60685,7 @@ $ripple-width: 32px !default;
       }
 
       @if $skin-name == 'highcontrast' {
-        padding-top: 11px;
-        padding-bottom: 11px;
+        padding: $treeview-big-text-padding;
       }
 
       @if $skin-name == 'material' or $skin-name == 'material-dark' {
@@ -60694,8 +60694,7 @@ $ripple-width: 32px !default;
       }
 
       @if $skin-name == 'FluentUI' {
-        padding-top: 10px;
-        padding-bottom: 10px;
+        padding: $treeview-big-text-padding;
       }
 
       @if $skin-name == 'bootstrap4' {
@@ -61412,7 +61411,7 @@ $menu-header-icon-padding: 0 16px !default;
           & .e-caret {
             font-size: $menu-caret-font-size;
             height: auto;
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
+            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
               line-height: $menu-icon-li-height;
             }
             @else {
@@ -61455,12 +61454,6 @@ $menu-header-icon-padding: 0 16px !default;
             @if $skin-name == 'fluent2' {
               padding: 9px 0;
             }
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
-              line-height: $menu-icon-li-height;
-            }
-            @else {
-              line-height: $menu-li-height;
-            }
           }
         }
       }
@@ -86547,7 +86540,8 @@ $grid-checkmark-color: $accent-font !default;
       .e-detailheadercell {
         border-width: $grid-headercell-both-border-width;
       }
-      .e-headercell.e-grid-group-first-cell {
+      .e-headercell.e-grid-group-first-cell,
+      .e-headercell.e-first-visible-cell {
         border-left-width: 0;
       }
     }
@@ -86963,7 +86957,11 @@ $grid-checkmark-color: $accent-font !default;
     &.e-verticallines,
     &.e-bothlines {
       .e-rowcell.e-grid-group-first-cell,
-      .e-headercell.e-grid-group-first-cell {
+      .e-rowcell.e-first-visible-cell,
+      .e-headercell.e-grid-group-first-cell,
+      .e-headercell.e-first-visible-cell,
+      .e-filterbarcell.e-grid-group-first-cell,
+      .e-filterbarcell.e-first-visible-cell {
         border-left-width: 0;
       }
     }
@@ -109897,7 +109895,7 @@ $toast-icon-hover-border-radius: 50% !default;
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           left: 0;
           margin-left: 12px;
-          margin-top: 10px;
+          margin-top: 15px;
           padding-bottom: 6px;
           position: absolute;
         }
@@ -127797,6 +127795,10 @@ $pivotview-touch-header-text-padding: 8px !default;
         margin-left: 18px !important;
       }
 
+      .e-toolbar-item.e-template .e-toolbar-template-container {
+        display: flex;
+      }
+
       .e-toolbar-item.e-template,
       .e-toolbar-item:not(.e-separator):not(.e-spacer)
       {
@@ -130611,6 +130613,7 @@ $qrybldr-drag-grp-list-heg: 25px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: rgba($grey-black, .87) !default;
+$primary-light: $primary-300 !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -131687,6 +131690,29 @@ $qryblr-drag-icon-color: rgba($grey-black, .87) !default;
   }
 }
 
+.e-querybuilder-spinner::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid $primary-light;
+  border-top: 2px solid $primary;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: translateX(-50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translateX(-50%) rotate(360deg);
+  }
+}
+
 
 @include export-module('query-builder-material-icons') {
   .e-query-builder {

package/SCSS-Themes/material3-dark-lite.scss

@@ -15598,11 +15598,12 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
 @mixin outline-primary-disabled {
   @if $skin-name == 'bootstrap5'  or $skin-name == 'bootstrap5.3' {
     background: $btn-outline-primary-disabled-border-color;
+    border-color: $btn-outline-primary-disabled-color;
   }
   @else {
     background: $btn-outline-bgcolor;
+    border-color: $btn-outline-primary-disabled-border-color;
   }
-  border-color: $btn-outline-primary-disabled-border-color;
   box-shadow: $btn-flat-box-shadow;
   color: $btn-outline-primary-disabled-color;
 }
@@ -43589,6 +43590,10 @@ $treeview-drag-icon-color: rgba($content-text-color-alt1) !default;
               padding-top: 5px;
               padding-bottom: 5px;
             }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
           }
         }
       }
@@ -43706,10 +43711,6 @@ $treeview-drag-icon-color: rgba($content-text-color-alt1) !default;
           margin-top: 4px;
           margin-bottom: 4px;
         }
-        @else if($skin-name == 'bootstrap5') {
-          margin-bottom: 3px;
-          margin-top: 3px;
-        }
         @else {
           margin-bottom: 0;
         }
@@ -44985,7 +44986,7 @@ $menu-caret-color: $cmenu-caret-color !default;
           & .e-caret {
             font-size: $menu-caret-font-size;
             height: auto;
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
+            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
               line-height: $menu-icon-li-height;
             }
             @else {
@@ -45028,12 +45029,6 @@ $menu-caret-color: $cmenu-caret-color !default;
             @if $skin-name == 'fluent2' {
               padding: 9px 0;
             }
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
-              line-height: $menu-icon-li-height;
-            }
-            @else {
-              line-height: $menu-li-height;
-            }
           }
         }
       }
@@ -64210,7 +64205,8 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
       .e-detailheadercell {
         border-width: $grid-headercell-both-border-width;
       }
-      .e-headercell.e-grid-group-first-cell {
+      .e-headercell.e-grid-group-first-cell,
+      .e-headercell.e-first-visible-cell {
         border-left-width: 0;
       }
     }
@@ -64626,7 +64622,11 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
     &.e-verticallines,
     &.e-bothlines {
       .e-rowcell.e-grid-group-first-cell,
-      .e-headercell.e-grid-group-first-cell {
+      .e-rowcell.e-first-visible-cell,
+      .e-headercell.e-grid-group-first-cell,
+      .e-headercell.e-first-visible-cell,
+      .e-filterbarcell.e-grid-group-first-cell,
+      .e-filterbarcell.e-first-visible-cell {
         border-left-width: 0;
       }
     }
@@ -82432,7 +82432,7 @@ $toast-warning-icon: '\e88b' !default;
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           left: 0;
           margin-left: 12px;
-          margin-top: 10px;
+          margin-top: 15px;
           padding-bottom: 6px;
           position: absolute;
         }
@@ -97727,6 +97727,10 @@ $pivotview-touch-header-text-padding: 8px !default;
         margin-left: 18px !important;
       }
 
+      .e-toolbar-item.e-template .e-toolbar-template-container {
+        display: flex;
+      }
+
       .e-toolbar-item.e-template,
       .e-toolbar-item:not(.e-separator):not(.e-spacer)
       {
@@ -100986,6 +100990,29 @@ $qryblr-drag-icon-color: rgba($secondary-text-color) !default;
   }
 }
 
+.e-querybuilder-spinner::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid $primary-light;
+  border-top: 2px solid $primary;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: translateX(-50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translateX(-50%) rotate(360deg);
+  }
+}
+
 
 @include export-module('query-builder-material3-icons') {
   .e-query-builder {

package/SCSS-Themes/material3-dark.scss

@@ -23071,11 +23071,12 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
 @mixin outline-primary-disabled {
   @if $skin-name == 'bootstrap5'  or $skin-name == 'bootstrap5.3' {
     background: $btn-outline-primary-disabled-border-color;
+    border-color: $btn-outline-primary-disabled-color;
   }
   @else {
     background: $btn-outline-bgcolor;
+    border-color: $btn-outline-primary-disabled-border-color;
   }
-  border-color: $btn-outline-primary-disabled-border-color;
   box-shadow: $btn-flat-box-shadow;
   color: $btn-outline-primary-disabled-color;
 }
@@ -59496,6 +59497,10 @@ $treeview-drag-icon-color: rgba($content-text-color-alt1) !default;
               padding-top: 5px;
               padding-bottom: 5px;
             }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
           }
         }
       }
@@ -59613,10 +59618,6 @@ $treeview-drag-icon-color: rgba($content-text-color-alt1) !default;
           margin-top: 4px;
           margin-bottom: 4px;
         }
-        @else if($skin-name == 'bootstrap5') {
-          margin-bottom: 3px;
-          margin-top: 3px;
-        }
         @else {
           margin-bottom: 0;
         }
@@ -60666,8 +60667,7 @@ $treeview-drag-icon-color: rgba($content-text-color-alt1) !default;
       }
 
       @if $skin-name == 'highcontrast' {
-        padding-top: 11px;
-        padding-bottom: 11px;
+        padding: $treeview-big-text-padding;
       }
 
       @if $skin-name == 'material' or $skin-name == 'material-dark' {
@@ -60676,8 +60676,7 @@ $treeview-drag-icon-color: rgba($content-text-color-alt1) !default;
       }
 
       @if $skin-name == 'FluentUI' {
-        padding-top: 10px;
-        padding-bottom: 10px;
+        padding: $treeview-big-text-padding;
       }
 
       @if $skin-name == 'bootstrap4' {
@@ -61394,7 +61393,7 @@ $menu-caret-color: $cmenu-caret-color !default;
           & .e-caret {
             font-size: $menu-caret-font-size;
             height: auto;
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
+            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
               line-height: $menu-icon-li-height;
             }
             @else {
@@ -61437,12 +61436,6 @@ $menu-caret-color: $cmenu-caret-color !default;
             @if $skin-name == 'fluent2' {
               padding: 9px 0;
             }
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
-              line-height: $menu-icon-li-height;
-            }
-            @else {
-              line-height: $menu-li-height;
-            }
           }
         }
       }
@@ -86617,7 +86610,8 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
       .e-detailheadercell {
         border-width: $grid-headercell-both-border-width;
       }
-      .e-headercell.e-grid-group-first-cell {
+      .e-headercell.e-grid-group-first-cell,
+      .e-headercell.e-first-visible-cell {
         border-left-width: 0;
       }
     }
@@ -87033,7 +87027,11 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
     &.e-verticallines,
     &.e-bothlines {
       .e-rowcell.e-grid-group-first-cell,
-      .e-headercell.e-grid-group-first-cell {
+      .e-rowcell.e-first-visible-cell,
+      .e-headercell.e-grid-group-first-cell,
+      .e-headercell.e-first-visible-cell,
+      .e-filterbarcell.e-grid-group-first-cell,
+      .e-filterbarcell.e-first-visible-cell {
         border-left-width: 0;
       }
     }
@@ -109923,7 +109921,7 @@ $toast-warning-icon: '\e88b' !default;
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           left: 0;
           margin-left: 12px;
-          margin-top: 10px;
+          margin-top: 15px;
           padding-bottom: 6px;
           position: absolute;
         }
@@ -127833,6 +127831,10 @@ $pivotview-touch-header-text-padding: 8px !default;
         margin-left: 18px !important;
       }
 
+      .e-toolbar-item.e-template .e-toolbar-template-container {
+        display: flex;
+      }
+
       .e-toolbar-item.e-template,
       .e-toolbar-item:not(.e-separator):not(.e-spacer)
       {
@@ -131727,6 +131729,29 @@ $qryblr-drag-icon-color: rgba($secondary-text-color) !default;
   }
 }
 
+.e-querybuilder-spinner::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid $primary-light;
+  border-top: 2px solid $primary;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: translateX(-50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translateX(-50%) rotate(360deg);
+  }
+}
+
 
 @include export-module('query-builder-material3-icons') {
   .e-query-builder {

package/SCSS-Themes/material3-lite.scss

@@ -15668,11 +15668,12 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
 @mixin outline-primary-disabled {
   @if $skin-name == 'bootstrap5'  or $skin-name == 'bootstrap5.3' {
     background: $btn-outline-primary-disabled-border-color;
+    border-color: $btn-outline-primary-disabled-color;
   }
   @else {
     background: $btn-outline-bgcolor;
+    border-color: $btn-outline-primary-disabled-border-color;
   }
-  border-color: $btn-outline-primary-disabled-border-color;
   box-shadow: $btn-flat-box-shadow;
   color: $btn-outline-primary-disabled-color;
 }
@@ -43659,6 +43660,10 @@ $treeview-drag-icon-color: rgba($content-text-color-alt1) !default;
               padding-top: 5px;
               padding-bottom: 5px;
             }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
           }
         }
       }
@@ -43776,10 +43781,6 @@ $treeview-drag-icon-color: rgba($content-text-color-alt1) !default;
           margin-top: 4px;
           margin-bottom: 4px;
         }
-        @else if($skin-name == 'bootstrap5') {
-          margin-bottom: 3px;
-          margin-top: 3px;
-        }
         @else {
           margin-bottom: 0;
         }
@@ -45055,7 +45056,7 @@ $menu-caret-color: $cmenu-caret-color !default;
           & .e-caret {
             font-size: $menu-caret-font-size;
             height: auto;
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
+            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
               line-height: $menu-icon-li-height;
             }
             @else {
@@ -45098,12 +45099,6 @@ $menu-caret-color: $cmenu-caret-color !default;
             @if $skin-name == 'fluent2' {
               padding: 9px 0;
             }
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
-              line-height: $menu-icon-li-height;
-            }
-            @else {
-              line-height: $menu-li-height;
-            }
           }
         }
       }
@@ -64280,7 +64275,8 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
       .e-detailheadercell {
         border-width: $grid-headercell-both-border-width;
       }
-      .e-headercell.e-grid-group-first-cell {
+      .e-headercell.e-grid-group-first-cell,
+      .e-headercell.e-first-visible-cell {
         border-left-width: 0;
       }
     }
@@ -64696,7 +64692,11 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
     &.e-verticallines,
     &.e-bothlines {
       .e-rowcell.e-grid-group-first-cell,
-      .e-headercell.e-grid-group-first-cell {
+      .e-rowcell.e-first-visible-cell,
+      .e-headercell.e-grid-group-first-cell,
+      .e-headercell.e-first-visible-cell,
+      .e-filterbarcell.e-grid-group-first-cell,
+      .e-filterbarcell.e-first-visible-cell {
         border-left-width: 0;
       }
     }
@@ -82502,7 +82502,7 @@ $toast-warning-icon: '\e88b' !default;
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           left: 0;
           margin-left: 12px;
-          margin-top: 10px;
+          margin-top: 15px;
           padding-bottom: 6px;
           position: absolute;
         }
@@ -97797,6 +97797,10 @@ $pivotview-touch-header-text-padding: 8px !default;
         margin-left: 18px !important;
       }
 
+      .e-toolbar-item.e-template .e-toolbar-template-container {
+        display: flex;
+      }
+
       .e-toolbar-item.e-template,
       .e-toolbar-item:not(.e-separator):not(.e-spacer)
       {
@@ -101056,6 +101060,29 @@ $qryblr-drag-icon-color: rgba($secondary-text-color) !default;
   }
 }
 
+.e-querybuilder-spinner::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid $primary-light;
+  border-top: 2px solid $primary;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: translateX(-50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translateX(-50%) rotate(360deg);
+  }
+}
+
 
 @include export-module('query-builder-material3-icons') {
   .e-query-builder {