@syncfusion/blazor-themes 31.1.21 → 31.1.22

package/SCSS-Themes/querybuilder/query-builder/bootstrap5.3-dark.scss

@@ -1208,6 +1208,29 @@ $qryblr-drag-icon-color: $icon-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-bootstrap5-icons') {
   .e-query-builder {

package/SCSS-Themes/querybuilder/query-builder/bootstrap5.3-lite.scss

@@ -1208,6 +1208,29 @@ $qryblr-drag-icon-color: $icon-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-bootstrap5-icons') {
   .e-query-builder {

package/SCSS-Themes/querybuilder/query-builder/bootstrap5.3.scss

@@ -1208,6 +1208,29 @@ $qryblr-drag-icon-color: $icon-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-bootstrap5-icons') {
   .e-query-builder {

package/SCSS-Themes/querybuilder/query-builder/bootstrap5.scss

@@ -1208,6 +1208,29 @@ $qryblr-drag-icon-color: $icon-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-bootstrap5-icons') {
   .e-query-builder {

package/SCSS-Themes/querybuilder/query-builder/fabric-dark-lite.scss

@@ -129,6 +129,8 @@ $qrybldr-drag-grp-list-heg: 30px !default;
 $qrybldr-drag-grp-big-list-heg: 36px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $neutral-light-fontalt !default;
+$primary: $theme-primary !default;
+$primary-light: $theme-lighter !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -1205,6 +1207,29 @@ $qryblr-drag-icon-color: $neutral-light-fontalt !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/querybuilder/query-builder/fabric-dark.scss

@@ -129,6 +129,8 @@ $qrybldr-drag-grp-list-heg: 30px !default;
 $qrybldr-drag-grp-big-list-heg: 36px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $neutral-light-fontalt !default;
+$primary: $theme-primary !default;
+$primary-light: $theme-lighter !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -1205,6 +1207,29 @@ $qryblr-drag-icon-color: $neutral-light-fontalt !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/querybuilder/query-builder/fabric-lite.scss

@@ -129,6 +129,8 @@ $qrybldr-drag-grp-list-heg: 30px !default;
 $qrybldr-drag-grp-big-list-heg: 36px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $neutral-light-font !default;
+$primary: $theme-primary !default;
+$primary-light: $theme-lighter !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -1205,6 +1207,29 @@ $qryblr-drag-icon-color: $neutral-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/querybuilder/query-builder/fabric.scss

@@ -129,6 +129,8 @@ $qrybldr-drag-grp-list-heg: 30px !default;
 $qrybldr-drag-grp-big-list-heg: 36px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $neutral-light-font !default;
+$primary: $theme-primary !default;
+$primary-light: $theme-lighter !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -1205,6 +1207,29 @@ $qryblr-drag-icon-color: $neutral-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/querybuilder/query-builder/fluent-dark-lite.scss

@@ -1207,6 +1207,29 @@ $qryblr-drag-icon-color: $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-fluent-icons') {
   .e-query-builder {

package/SCSS-Themes/querybuilder/query-builder/fluent-dark.scss

@@ -1207,6 +1207,29 @@ $qryblr-drag-icon-color: $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-fluent-icons') {
   .e-query-builder {

package/SCSS-Themes/querybuilder/query-builder/fluent-lite.scss

@@ -1207,6 +1207,29 @@ $qryblr-drag-icon-color: $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-fluent-icons') {
   .e-query-builder {

package/SCSS-Themes/querybuilder/query-builder/fluent.scss

@@ -1207,6 +1207,29 @@ $qryblr-drag-icon-color: $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-fluent-icons') {
   .e-query-builder {

package/SCSS-Themes/querybuilder/query-builder/fluent2-dark-lite.scss

@@ -1207,6 +1207,29 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !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-fluent2-icons') {
   .e-query-builder {

package/SCSS-Themes/querybuilder/query-builder/fluent2-dark.scss

@@ -1207,6 +1207,29 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !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-fluent2-icons') {
   .e-query-builder {

package/SCSS-Themes/querybuilder/query-builder/fluent2-highcontrast-lite.scss

@@ -1207,6 +1207,29 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !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-fluent2-icons') {
   .e-query-builder {

package/SCSS-Themes/querybuilder/query-builder/fluent2-highcontrast.scss

@@ -1207,6 +1207,29 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !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-fluent2-icons') {
   .e-query-builder {

package/SCSS-Themes/querybuilder/query-builder/fluent2-lite.scss

@@ -1207,6 +1207,29 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !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-fluent2-icons') {
   .e-query-builder {

package/SCSS-Themes/querybuilder/query-builder/fluent2.scss

@@ -1207,6 +1207,29 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !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-fluent2-icons') {
   .e-query-builder {

package/SCSS-Themes/querybuilder/query-builder/highcontrast-lite.scss

@@ -129,6 +129,8 @@ $qrybldr-drag-grp-list-heg: 32px !default;
 $qrybldr-drag-grp-big-list-heg: 37px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
 $qryblr-drag-icon-color: $content-font !default;
+$primary: #ffd939 !default;
+$primary-light: #ffd739 !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -1205,6 +1207,29 @@ $qryblr-drag-icon-color: $content-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/querybuilder/query-builder/highcontrast.scss

@@ -129,6 +129,8 @@ $qrybldr-drag-grp-list-heg: 32px !default;
 $qrybldr-drag-grp-big-list-heg: 37px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
 $qryblr-drag-icon-color: $content-font !default;
+$primary: #ffd939 !default;
+$primary-light: #ffd739 !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -1205,6 +1207,29 @@ $qryblr-drag-icon-color: $content-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/querybuilder/query-builder/material-dark-lite.scss

@@ -130,6 +130,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: $grey-dark-font !default;
+$primary-light: $primary-300 !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -1206,6 +1207,29 @@ $qryblr-drag-icon-color: $grey-dark-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 {