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/bds-lite.scss CHANGED Viewed

@@ -16691,11 +16691,12 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !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;
 }
@@ -45026,6 +45027,10 @@ $treeview-item-active-hover-bg:$content-bg-color-hover !default;
               padding-top: 5px;
               padding-bottom: 5px;
             }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
           }
         }
       }
@@ -45143,10 +45148,6 @@ $treeview-item-active-hover-bg:$content-bg-color-hover !default;
           margin-top: 4px;
           margin-bottom: 4px;
         }
-        @else if($skin-name == 'bootstrap5') {
-          margin-bottom: 3px;
-          margin-top: 3px;
-        }
         @else {
           margin-bottom: 0;
         }
@@ -46470,7 +46471,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 {
@@ -46513,12 +46514,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;
-            }
           }
         }
       }
@@ -65369,7 +65364,8 @@ $grid-checkmark-color: $primary !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;
       }
     }
@@ -65785,7 +65781,11 @@ $grid-checkmark-color: $primary !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;
       }
     }
@@ -83594,7 +83594,7 @@ $toast-close-icon-hover-color: $icon-color-hover !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;
         }
@@ -98878,6 +98878,10 @@ $pivotview-touch-header-text-padding: 15px !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)
       {
@@ -102134,6 +102138,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-bds-icons') {
   .e-query-builder {

package/SCSS-Themes/bds.scss CHANGED Viewed

@@ -24164,11 +24164,12 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !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;
 }
@@ -60933,6 +60934,10 @@ $treeview-item-active-hover-bg:$content-bg-color-hover !default;
               padding-top: 5px;
               padding-bottom: 5px;
             }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
           }
         }
       }
@@ -61050,10 +61055,6 @@ $treeview-item-active-hover-bg:$content-bg-color-hover !default;
           margin-top: 4px;
           margin-bottom: 4px;
         }
-        @else if($skin-name == 'bootstrap5') {
-          margin-bottom: 3px;
-          margin-top: 3px;
-        }
         @else {
           margin-bottom: 0;
         }
@@ -62103,8 +62104,7 @@ $treeview-item-active-hover-bg:$content-bg-color-hover !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' {
@@ -62113,8 +62113,7 @@ $treeview-item-active-hover-bg:$content-bg-color-hover !default;
       }
       @if $skin-name == 'FluentUI' {
-        padding-top: 10px;
-        padding-bottom: 10px;
+        padding: $treeview-big-text-padding;
       }
       @if $skin-name == 'bootstrap4' {
@@ -62879,7 +62878,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 {
@@ -62922,12 +62921,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;
-            }
           }
         }
       }
@@ -87776,7 +87769,8 @@ $grid-checkmark-color: $primary !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;
       }
     }
@@ -88192,7 +88186,11 @@ $grid-checkmark-color: $primary !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;
       }
     }
@@ -111085,7 +111083,7 @@ $toast-close-icon-hover-color: $icon-color-hover !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;
         }
@@ -128984,6 +128982,10 @@ $pivotview-touch-header-text-padding: 15px !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)
       {
@@ -132875,6 +132877,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-bds-icons') {
   .e-query-builder {

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

@@ -15208,11 +15208,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;
 }
@@ -43425,6 +43426,10 @@ $ripple-width: 32px !default;
               padding-top: 5px;
               padding-bottom: 5px;
             }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
           }
         }
       }
@@ -43542,10 +43547,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;
         }
@@ -44677,7 +44678,6 @@ $menu-blank-icon: 34px !default;
 $menu-ul-header-padding: $menu-ul-padding !default;
 $menu-separator-padding: 0 !default;
 $menu-li-height: 42px !default;
-$menu-icon-li-height: 30px !default;
 $menu-li-padding: 0 15px !default;
 $menu-li-text-indent: 15px !default;
 $menu-icon-font-size: 14px !default;
@@ -44813,7 +44813,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 {
@@ -44856,12 +44856,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;
-            }
           }
         }
       }
@@ -63581,7 +63575,8 @@ $grid-checkmark-color: $grey-light-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;
       }
     }
@@ -63997,7 +63992,11 @@ $grid-checkmark-color: $grey-light-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;
       }
     }
@@ -81849,7 +81848,7 @@ $toast-close-icon-hover-color: $grey-dark-font !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;
         }
@@ -97128,6 +97127,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)
       {
@@ -99307,6 +99310,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-dark-font !default;
+$primary-light: $brand-primary-lighten-40;
+$primary: $brand-primary;
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -100383,6 +100388,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 {

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

@@ -22681,11 +22681,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;
 }
@@ -59332,6 +59333,10 @@ $ripple-width: 32px !default;
               padding-top: 5px;
               padding-bottom: 5px;
             }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
           }
         }
       }
@@ -59449,10 +59454,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;
         }
@@ -60498,8 +60499,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' {
@@ -60508,8 +60508,7 @@ $ripple-width: 32px !default;
       }
       @if $skin-name == 'FluentUI' {
-        padding-top: 10px;
-        padding-bottom: 10px;
+        padding: $treeview-big-text-padding;
       }
       @if $skin-name == 'bootstrap4' {
@@ -61086,7 +61085,6 @@ $menu-blank-icon: 34px !default;
 $menu-ul-header-padding: $menu-ul-padding !default;
 $menu-separator-padding: 0 !default;
 $menu-li-height: 42px !default;
-$menu-icon-li-height: 30px !default;
 $menu-li-padding: 0 15px !default;
 $menu-li-text-indent: 15px !default;
 $menu-icon-font-size: 14px !default;
@@ -61222,7 +61220,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 {
@@ -61265,12 +61263,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;
-            }
           }
         }
       }
@@ -85988,7 +85980,8 @@ $grid-checkmark-color: $grey-light-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;
       }
     }
@@ -86404,7 +86397,11 @@ $grid-checkmark-color: $grey-light-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;
       }
     }
@@ -109340,7 +109337,7 @@ $toast-close-icon-hover-color: $grey-dark-font !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;
         }
@@ -127234,6 +127231,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)
       {
@@ -130048,6 +130049,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-dark-font !default;
+$primary-light: $brand-primary-lighten-40;
+$primary: $brand-primary;
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -131124,6 +131127,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 {