npm - @syncfusion/blazor-themes - Versions diffs - 31.1.20 → 31.1.22 - Mend

@syncfusion/blazor-themes 31.1.20 → 31.1.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (451) hide show

package/SCSS-Themes/bootstrap-lite.scss CHANGED Viewed

@@ -15117,11 +15117,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;
 }
@@ -43187,6 +43188,10 @@ $ripple-width: 32px !default;
               padding-top: 5px;
               padding-bottom: 5px;
             }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
           }
         }
       }
@@ -43304,10 +43309,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;
         }
@@ -44457,7 +44458,6 @@ $menu-li-hover-outline-offset: 0 !default;
 $menu-li-border-style: solid !default;
 $menu-li-border-width: 1px !default;
 $menu-li-height: 40px !default;
-$menu-icon-li-height: 30px !default;
 $menu-li-padding: 0 12px !default;
 $menu-li-text-indent: 12px !default;
 $menu-li-right-padding: 12px !default;
@@ -44579,7 +44579,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 {
@@ -44622,12 +44622,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;
-            }
           }
         }
       }
@@ -63328,7 +63322,8 @@ $grid-checkmark-color: $grey !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;
       }
     }
@@ -63744,7 +63739,11 @@ $grid-checkmark-color: $grey !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;
       }
     }
@@ -81643,7 +81642,7 @@ $toast-close-icon-hover-color: rgba($base-font, .8) !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;
         }
@@ -96909,6 +96908,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)
       {
@@ -99088,6 +99091,8 @@ $qrybldr-drag-grp-list-heg: 29px !default;
 $qrybldr-drag-grp-big-list-heg: 35px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $grey-light-font !default;
+$primary: $brand-primary;
+$primary-light: $brand-info;
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -100164,6 +100169,29 @@ $qryblr-drag-icon-color: $grey-light-font !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/bootstrap.scss CHANGED Viewed

@@ -22590,11 +22590,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;
 }
@@ -59094,6 +59095,10 @@ $ripple-width: 32px !default;
               padding-top: 5px;
               padding-bottom: 5px;
             }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
           }
         }
       }
@@ -59211,10 +59216,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;
         }
@@ -60260,8 +60261,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' {
@@ -60270,8 +60270,7 @@ $ripple-width: 32px !default;
       }
       @if $skin-name == 'FluentUI' {
-        padding-top: 10px;
-        padding-bottom: 10px;
+        padding: $treeview-big-text-padding;
       }
       @if $skin-name == 'bootstrap4' {
@@ -60866,7 +60865,6 @@ $menu-li-hover-outline-offset: 0 !default;
 $menu-li-border-style: solid !default;
 $menu-li-border-width: 1px !default;
 $menu-li-height: 40px !default;
-$menu-icon-li-height: 30px !default;
 $menu-li-padding: 0 12px !default;
 $menu-li-text-indent: 12px !default;
 $menu-li-right-padding: 12px !default;
@@ -60988,7 +60986,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 {
@@ -61031,12 +61029,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;
-            }
           }
         }
       }
@@ -85735,7 +85727,8 @@ $grid-checkmark-color: $grey !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;
       }
     }
@@ -86151,7 +86144,11 @@ $grid-checkmark-color: $grey !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;
       }
     }
@@ -109134,7 +109131,7 @@ $toast-close-icon-hover-color: rgba($base-font, .8) !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;
         }
@@ -127015,6 +127012,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)
       {
@@ -129829,6 +129830,8 @@ $qrybldr-drag-grp-list-heg: 29px !default;
 $qrybldr-drag-grp-big-list-heg: 35px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $grey-light-font !default;
+$primary: $brand-primary;
+$primary-light: $brand-info;
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -130905,6 +130908,29 @@ $qryblr-drag-icon-color: $grey-light-font !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/bootstrap4-lite.scss CHANGED Viewed

@@ -15034,11 +15034,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;
 }
@@ -42919,7 +42920,7 @@ $treeview-navigable-icon-image-anchor-margin-reverse: 0 4px 0 8px !default;
 $treeview-navigable-rtl-margin-reverse: 0 12px 0 0 !default;
 $treeview-rtl-image-margin: 2px 4px 0 0 !default;
 $treeview-input-padding: 0 7px !default;
-$treeview-image-text-padding: 0 8px !default;
+$treeview-image-text-padding: 9px 8px !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;
@@ -42950,7 +42951,7 @@ $treeview-big-drag-item-text-padding-left: 12px !default;
 $treeview-drag-text-padding: 0px 8px 0px 4px !default;
 $treeview-big-input-padding: 0 9px !default;
 $treeview-big-icon-padding: 7px !default;
-$treeview-big-image-text-padding: 0 12px !default;
+$treeview-big-image-text-padding: 13px 12px !default;
 $treeview-big-image-margin: 4px 0 0 10px !default;
 $treeview-big-rtl-icon-margin: 0 -24px 1px 0;
 $treeview-big-rtl-image-margin: 2px 10px 0 0 !default;
@@ -43231,6 +43232,10 @@ $ripple-width: 32px !default;
               padding-top: 5px;
               padding-bottom: 5px;
             }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
           }
         }
       }
@@ -43348,10 +43353,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;
         }
@@ -44623,7 +44624,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 {
@@ -44666,12 +44667,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;
-            }
           }
         }
       }
@@ -63462,7 +63457,8 @@ $grid-checkmark-color: $white !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;
       }
     }
@@ -63878,7 +63874,11 @@ $grid-checkmark-color: $white !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;
       }
     }
@@ -81864,7 +81864,7 @@ $toast-close-icon-hover-color: $black !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;
         }
@@ -97196,6 +97196,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)
       {
@@ -99377,6 +99381,7 @@ $qrybldr-drag-grp-list-heg: 27px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 7px !default;
 $qryblr-drag-icon-color: $gray-700 !default;
+$primary-light: $gray-100;
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -100453,6 +100458,29 @@ $qryblr-drag-icon-color: $gray-700 !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-bootstrap4-icons') {
   .e-query-builder {

package/SCSS-Themes/bootstrap4.scss CHANGED Viewed

@@ -22507,11 +22507,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;
 }
@@ -58826,7 +58827,7 @@ $treeview-navigable-icon-image-anchor-margin-reverse: 0 4px 0 8px !default;
 $treeview-navigable-rtl-margin-reverse: 0 12px 0 0 !default;
 $treeview-rtl-image-margin: 2px 4px 0 0 !default;
 $treeview-input-padding: 0 7px !default;
-$treeview-image-text-padding: 0 8px !default;
+$treeview-image-text-padding: 9px 8px !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;
@@ -58857,7 +58858,7 @@ $treeview-big-drag-item-text-padding-left: 12px !default;
 $treeview-drag-text-padding: 0px 8px 0px 4px !default;
 $treeview-big-input-padding: 0 9px !default;
 $treeview-big-icon-padding: 7px !default;
-$treeview-big-image-text-padding: 0 12px !default;
+$treeview-big-image-text-padding: 13px 12px !default;
 $treeview-big-image-margin: 4px 0 0 10px !default;
 $treeview-big-rtl-icon-margin: 0 -24px 1px 0;
 $treeview-big-rtl-image-margin: 2px 10px 0 0 !default;
@@ -59138,6 +59139,10 @@ $ripple-width: 32px !default;
               padding-top: 5px;
               padding-bottom: 5px;
             }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
           }
         }
       }
@@ -59255,10 +59260,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;
         }
@@ -60304,8 +60305,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' {
@@ -60314,8 +60314,7 @@ $ripple-width: 32px !default;
       }
       @if $skin-name == 'FluentUI' {
-        padding-top: 10px;
-        padding-bottom: 10px;
+        padding: $treeview-big-text-padding;
       }
       @if $skin-name == 'bootstrap4' {
@@ -61032,7 +61031,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 {
@@ -61075,12 +61074,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;
-            }
           }
         }
       }
@@ -85869,7 +85862,8 @@ $grid-checkmark-color: $white !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;
       }
     }
@@ -86285,7 +86279,11 @@ $grid-checkmark-color: $white !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;
       }
     }
@@ -109355,7 +109353,7 @@ $toast-close-icon-hover-color: $black !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;
         }
@@ -127302,6 +127300,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)
       {
@@ -130118,6 +130120,7 @@ $qrybldr-drag-grp-list-heg: 27px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 7px !default;
 $qryblr-drag-icon-color: $gray-700 !default;
+$primary-light: $gray-100;
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -131194,6 +131197,29 @@ $qryblr-drag-icon-color: $gray-700 !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-bootstrap4-icons') {
   .e-query-builder {