npm - @syncfusion/blazor-themes - Versions diffs - 24.2.7 → 24.2.9 - Mend

@syncfusion/blazor-themes 24.2.7 → 24.2.9

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 (129) hide show

package/SCSS-Themes/navigations/toolbar/bootstrap4.scss CHANGED Viewed

@@ -5,7 +5,7 @@
 @import '../../navigations/v-scroll/bootstrap4.scss';
 $border-type: solid !default;
 $border-size: 1px !default;
-$tbar-btn-border: none !default;
+$tbar-btn-border: 1px solid transparent !default;
 $tbar-skin: 'bootstrap4' !default;
 $tbar-zero-value: 0 !default;
 $tbar-separator-bgr-minheight: 36px !default;
@@ -130,7 +130,7 @@ $tbar-separator-nrml-mrgn: 5.5px 6px !default;
 $tbar-separator-vertical-bgr-mrgn: 6px !default;
 $tbar-separator-vertical-nrml-mrgn: 6px 5.5px !default;
 $tbar-btn-bgr-padding: 1.5px 5.5px !default;
-$tbar-btn-bgr-focus-padding: 0 4.5px !default;
+$tbar-btn-bgr-focus-padding: 1.5px 5.5px !default;
 $tbar-btn-nrml-padding: 0 3px !default;
 $tbar-icons-bgr-font-size: 16px !default;
 $tbar-multirow-items-mrgn-bigger: 15px !default;
@@ -149,7 +149,7 @@ $tbar-nrml-btn-focus-outline: 0 !default;
 $tbar-btn-icons-focus-color: inherit !default;
 $tbar-btn-text-focus-color: inherit !default;
 $tbar-btn-focus-border-color: $tbar-focus-border-color !default;
-$tbar-btn-hover-border-size: $tbar-zero-value !default;
+$tbar-btn-hover-border-size: $tbar-border-size !default;
 $tbar-btn-hover-active-icons-color: inherit !default;
 $tbar-btn-hover-active-text-color: inherit !default;
 $tbar-btn-overlay-opacity: .65 !default;
@@ -540,6 +540,26 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
     white-space: nowrap;
     overflow: hidden;
+    &.e-spacer-toolbar {
+      .e-toolbar-items {
+        display: flex;
+        flex-wrap: nowrap;
+        width: 100%;
+        &:not(.e-toolbar-multirow) {
+          position: absolute;
+        }
+      }
+      &.e-pop-mode {
+        .e-toolbar-items {
+          width: calc(100% - $tbar-nav-nrml-width);
+        }
+      }
+    }
     .e-blazor-toolbar-items {
       position: absolute;
       top: -9999px;
@@ -677,6 +697,11 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
       min-height: $tbar-nrml-item-size;
       vertical-align: middle;
       width: auto;
+      flex: 0 0 auto;
+      &.e-spacer {
+        flex-grow: 1;
+      }
       .e-tbar-btn {
         display: flex;
@@ -1107,6 +1132,16 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
     &.e-rtl {
+      &:not(.e-spacer-toolbar) {
+        .e-toolbar-items:not(.e-tbar-pos) {
+          .e-toolbar-item:first-child {
+            margin-right: $tbar-item-nrml-mrgn;
+          }
+        }
+      }
       .e-toolbar-item {
         .e-tbar-btn {

package/SCSS-Themes/navigations/toolbar/bootstrap5-dark.scss CHANGED Viewed

@@ -549,6 +549,26 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
     white-space: nowrap;
     overflow: hidden;
+    &.e-spacer-toolbar {
+      .e-toolbar-items {
+        display: flex;
+        flex-wrap: nowrap;
+        width: 100%;
+        &:not(.e-toolbar-multirow) {
+          position: absolute;
+        }
+      }
+      &.e-pop-mode {
+        .e-toolbar-items {
+          width: calc(100% - $tbar-nav-nrml-width);
+        }
+      }
+    }
     .e-blazor-toolbar-items {
       position: absolute;
       top: -9999px;
@@ -686,6 +706,11 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
       min-height: $tbar-nrml-item-size;
       vertical-align: middle;
       width: auto;
+      flex: 0 0 auto;
+      &.e-spacer {
+        flex-grow: 1;
+      }
       .e-tbar-btn {
         display: flex;
@@ -1116,6 +1141,16 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
     &.e-rtl {
+      &:not(.e-spacer-toolbar) {
+        .e-toolbar-items:not(.e-tbar-pos) {
+          .e-toolbar-item:first-child {
+            margin-right: $tbar-item-nrml-mrgn;
+          }
+        }
+      }
       .e-toolbar-item {
         .e-tbar-btn {

package/SCSS-Themes/navigations/toolbar/bootstrap5.scss CHANGED Viewed

@@ -549,6 +549,26 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
     white-space: nowrap;
     overflow: hidden;
+    &.e-spacer-toolbar {
+      .e-toolbar-items {
+        display: flex;
+        flex-wrap: nowrap;
+        width: 100%;
+        &:not(.e-toolbar-multirow) {
+          position: absolute;
+        }
+      }
+      &.e-pop-mode {
+        .e-toolbar-items {
+          width: calc(100% - $tbar-nav-nrml-width);
+        }
+      }
+    }
     .e-blazor-toolbar-items {
       position: absolute;
       top: -9999px;
@@ -686,6 +706,11 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
       min-height: $tbar-nrml-item-size;
       vertical-align: middle;
       width: auto;
+      flex: 0 0 auto;
+      &.e-spacer {
+        flex-grow: 1;
+      }
       .e-tbar-btn {
         display: flex;
@@ -1116,6 +1141,16 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
     &.e-rtl {
+      &:not(.e-spacer-toolbar) {
+        .e-toolbar-items:not(.e-tbar-pos) {
+          .e-toolbar-item:first-child {
+            margin-right: $tbar-item-nrml-mrgn;
+          }
+        }
+      }
       .e-toolbar-item {
         .e-tbar-btn {

package/SCSS-Themes/navigations/toolbar/fabric-dark.scss CHANGED Viewed

@@ -551,6 +551,26 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
     white-space: nowrap;
     overflow: hidden;
+    &.e-spacer-toolbar {
+      .e-toolbar-items {
+        display: flex;
+        flex-wrap: nowrap;
+        width: 100%;
+        &:not(.e-toolbar-multirow) {
+          position: absolute;
+        }
+      }
+      &.e-pop-mode {
+        .e-toolbar-items {
+          width: calc(100% - $tbar-nav-nrml-width);
+        }
+      }
+    }
     .e-blazor-toolbar-items {
       position: absolute;
       top: -9999px;
@@ -688,6 +708,11 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
       min-height: $tbar-nrml-item-size;
       vertical-align: middle;
       width: auto;
+      flex: 0 0 auto;
+      &.e-spacer {
+        flex-grow: 1;
+      }
       .e-tbar-btn {
         display: flex;
@@ -1118,6 +1143,16 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
     &.e-rtl {
+      &:not(.e-spacer-toolbar) {
+        .e-toolbar-items:not(.e-tbar-pos) {
+          .e-toolbar-item:first-child {
+            margin-right: $tbar-item-nrml-mrgn;
+          }
+        }
+      }
       .e-toolbar-item {
         .e-tbar-btn {

package/SCSS-Themes/navigations/toolbar/fabric.scss CHANGED Viewed

@@ -537,6 +537,26 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
     white-space: nowrap;
     overflow: hidden;
+    &.e-spacer-toolbar {
+      .e-toolbar-items {
+        display: flex;
+        flex-wrap: nowrap;
+        width: 100%;
+        &:not(.e-toolbar-multirow) {
+          position: absolute;
+        }
+      }
+      &.e-pop-mode {
+        .e-toolbar-items {
+          width: calc(100% - $tbar-nav-nrml-width);
+        }
+      }
+    }
     .e-blazor-toolbar-items {
       position: absolute;
       top: -9999px;
@@ -674,6 +694,11 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
       min-height: $tbar-nrml-item-size;
       vertical-align: middle;
       width: auto;
+      flex: 0 0 auto;
+      &.e-spacer {
+        flex-grow: 1;
+      }
       .e-tbar-btn {
         display: flex;
@@ -1104,6 +1129,16 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
     &.e-rtl {
+      &:not(.e-spacer-toolbar) {
+        .e-toolbar-items:not(.e-tbar-pos) {
+          .e-toolbar-item:first-child {
+            margin-right: $tbar-item-nrml-mrgn;
+          }
+        }
+      }
       .e-toolbar-item {
         .e-tbar-btn {

package/SCSS-Themes/navigations/toolbar/fluent-dark.scss CHANGED Viewed

@@ -50,7 +50,7 @@ $tbar-default-font-overlay: $content-text-color !default;
 $tbar-active-font-color: $tbar-press-font !default;
 $tbar-border-nav-type: $border-light !default;
 $tbar-border-nav-active-type: $border-light !default;
-$tbar-btn-border: none !default;
+$tbar-btn-border: 1px solid $transparent !default;
 $tbar-box-shadow: $shadow-sm !default;
 $tbar-border-type: $border-type !default;
@@ -147,8 +147,8 @@ $tbar-nrml-btn-focus-outline: none !default;
 $tbar-btn-icons-focus-color: $icon-color !default;
 $tbar-btn-text-focus-color: $content-text-color !default;
-$tbar-btn-focus-border-color: $tbar-focus-border-color !default;
-$tbar-btn-hover-border-size: $tbar-zero-value !default;
+$tbar-btn-focus-border-color: $transparent !default;
+$tbar-btn-hover-border-size: 1px !default;
 $tbar-btn-hover-active-icons-color: $icon-color !default;
 $tbar-btn-hover-active-text-color: $content-text-color !default;
 $tbar-btn-overlay-opacity: .5 !default;
@@ -539,6 +539,26 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
     white-space: nowrap;
     overflow: hidden;
+    &.e-spacer-toolbar {
+      .e-toolbar-items {
+        display: flex;
+        flex-wrap: nowrap;
+        width: 100%;
+        &:not(.e-toolbar-multirow) {
+          position: absolute;
+        }
+      }
+      &.e-pop-mode {
+        .e-toolbar-items {
+          width: calc(100% - $tbar-nav-nrml-width);
+        }
+      }
+    }
     .e-blazor-toolbar-items {
       position: absolute;
       top: -9999px;
@@ -676,6 +696,11 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
       min-height: $tbar-nrml-item-size;
       vertical-align: middle;
       width: auto;
+      flex: 0 0 auto;
+      &.e-spacer {
+        flex-grow: 1;
+      }
       .e-tbar-btn {
         display: flex;
@@ -1106,6 +1131,16 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
     &.e-rtl {
+      &:not(.e-spacer-toolbar) {
+        .e-toolbar-items:not(.e-tbar-pos) {
+          .e-toolbar-item:first-child {
+            margin-right: $tbar-item-nrml-mrgn;
+          }
+        }
+      }
       .e-toolbar-item {
         .e-tbar-btn {

package/SCSS-Themes/navigations/toolbar/fluent.scss CHANGED Viewed

@@ -50,7 +50,7 @@ $tbar-default-font-overlay: $content-text-color !default;
 $tbar-active-font-color: $tbar-press-font !default;
 $tbar-border-nav-type: $border-light !default;
 $tbar-border-nav-active-type: $border-light !default;
-$tbar-btn-border: none !default;
+$tbar-btn-border: 1px solid $transparent !default;
 $tbar-box-shadow: $shadow-sm !default;
 $tbar-border-type: $border-type !default;
@@ -147,8 +147,8 @@ $tbar-nrml-btn-focus-outline: none !default;
 $tbar-btn-icons-focus-color: $icon-color !default;
 $tbar-btn-text-focus-color: $content-text-color !default;
-$tbar-btn-focus-border-color: $tbar-focus-border-color !default;
-$tbar-btn-hover-border-size: $tbar-zero-value !default;
+$tbar-btn-focus-border-color: $transparent !default;
+$tbar-btn-hover-border-size: 1px !default;
 $tbar-btn-hover-active-icons-color: $icon-color !default;
 $tbar-btn-hover-active-text-color: $content-text-color !default;
 $tbar-btn-overlay-opacity: .5 !default;
@@ -539,6 +539,26 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
     white-space: nowrap;
     overflow: hidden;
+    &.e-spacer-toolbar {
+      .e-toolbar-items {
+        display: flex;
+        flex-wrap: nowrap;
+        width: 100%;
+        &:not(.e-toolbar-multirow) {
+          position: absolute;
+        }
+      }
+      &.e-pop-mode {
+        .e-toolbar-items {
+          width: calc(100% - $tbar-nav-nrml-width);
+        }
+      }
+    }
     .e-blazor-toolbar-items {
       position: absolute;
       top: -9999px;
@@ -676,6 +696,11 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
       min-height: $tbar-nrml-item-size;
       vertical-align: middle;
       width: auto;
+      flex: 0 0 auto;
+      &.e-spacer {
+        flex-grow: 1;
+      }
       .e-tbar-btn {
         display: flex;
@@ -1106,6 +1131,16 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
     &.e-rtl {
+      &:not(.e-spacer-toolbar) {
+        .e-toolbar-items:not(.e-tbar-pos) {
+          .e-toolbar-item:first-child {
+            margin-right: $tbar-item-nrml-mrgn;
+          }
+        }
+      }
       .e-toolbar-item {
         .e-tbar-btn {

package/SCSS-Themes/navigations/toolbar/highcontrast.scss CHANGED Viewed

@@ -547,6 +547,26 @@ $tbar-popup-btn-hover-border-size: 2px !default;
     white-space: nowrap;
     overflow: hidden;
+    &.e-spacer-toolbar {
+      .e-toolbar-items {
+        display: flex;
+        flex-wrap: nowrap;
+        width: 100%;
+        &:not(.e-toolbar-multirow) {
+          position: absolute;
+        }
+      }
+      &.e-pop-mode {
+        .e-toolbar-items {
+          width: calc(100% - $tbar-nav-nrml-width);
+        }
+      }
+    }
     .e-blazor-toolbar-items {
       position: absolute;
       top: -9999px;
@@ -684,6 +704,11 @@ $tbar-popup-btn-hover-border-size: 2px !default;
       min-height: $tbar-nrml-item-size;
       vertical-align: middle;
       width: auto;
+      flex: 0 0 auto;
+      &.e-spacer {
+        flex-grow: 1;
+      }
       .e-tbar-btn {
         display: flex;
@@ -1114,6 +1139,16 @@ $tbar-popup-btn-hover-border-size: 2px !default;
     &.e-rtl {
+      &:not(.e-spacer-toolbar) {
+        .e-toolbar-items:not(.e-tbar-pos) {
+          .e-toolbar-item:first-child {
+            margin-right: $tbar-item-nrml-mrgn;
+          }
+        }
+      }
       .e-toolbar-item {
         .e-tbar-btn {

package/SCSS-Themes/navigations/toolbar/material-dark.scss CHANGED Viewed

@@ -576,6 +576,26 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
     white-space: nowrap;
     overflow: hidden;
+    &.e-spacer-toolbar {
+      .e-toolbar-items {
+        display: flex;
+        flex-wrap: nowrap;
+        width: 100%;
+        &:not(.e-toolbar-multirow) {
+          position: absolute;
+        }
+      }
+      &.e-pop-mode {
+        .e-toolbar-items {
+          width: calc(100% - $tbar-nav-nrml-width);
+        }
+      }
+    }
     .e-blazor-toolbar-items {
       position: absolute;
       top: -9999px;
@@ -713,6 +733,11 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
       min-height: $tbar-nrml-item-size;
       vertical-align: middle;
       width: auto;
+      flex: 0 0 auto;
+      &.e-spacer {
+        flex-grow: 1;
+      }
       .e-tbar-btn {
         display: flex;
@@ -1143,6 +1168,16 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
     &.e-rtl {
+      &:not(.e-spacer-toolbar) {
+        .e-toolbar-items:not(.e-tbar-pos) {
+          .e-toolbar-item:first-child {
+            margin-right: $tbar-item-nrml-mrgn;
+          }
+        }
+      }
       .e-toolbar-item {
         .e-tbar-btn {

package/SCSS-Themes/navigations/toolbar/material.scss CHANGED Viewed

@@ -564,6 +564,26 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
     white-space: nowrap;
     overflow: hidden;
+    &.e-spacer-toolbar {
+      .e-toolbar-items {
+        display: flex;
+        flex-wrap: nowrap;
+        width: 100%;
+        &:not(.e-toolbar-multirow) {
+          position: absolute;
+        }
+      }
+      &.e-pop-mode {
+        .e-toolbar-items {
+          width: calc(100% - $tbar-nav-nrml-width);
+        }
+      }
+    }
     .e-blazor-toolbar-items {
       position: absolute;
       top: -9999px;
@@ -701,6 +721,11 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
       min-height: $tbar-nrml-item-size;
       vertical-align: middle;
       width: auto;
+      flex: 0 0 auto;
+      &.e-spacer {
+        flex-grow: 1;
+      }
       .e-tbar-btn {
         display: flex;
@@ -1131,6 +1156,16 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
     &.e-rtl {
+      &:not(.e-spacer-toolbar) {
+        .e-toolbar-items:not(.e-tbar-pos) {
+          .e-toolbar-item:first-child {
+            margin-right: $tbar-item-nrml-mrgn;
+          }
+        }
+      }
       .e-toolbar-item {
         .e-tbar-btn {

package/SCSS-Themes/navigations/toolbar/material3-dark.scss CHANGED Viewed

@@ -549,6 +549,26 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
     white-space: nowrap;
     overflow: hidden;
+    &.e-spacer-toolbar {
+      .e-toolbar-items {
+        display: flex;
+        flex-wrap: nowrap;
+        width: 100%;
+        &:not(.e-toolbar-multirow) {
+          position: absolute;
+        }
+      }
+      &.e-pop-mode {
+        .e-toolbar-items {
+          width: calc(100% - $tbar-nav-nrml-width);
+        }
+      }
+    }
     .e-blazor-toolbar-items {
       position: absolute;
       top: -9999px;
@@ -686,6 +706,11 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
       min-height: $tbar-nrml-item-size;
       vertical-align: middle;
       width: auto;
+      flex: 0 0 auto;
+      &.e-spacer {
+        flex-grow: 1;
+      }
       .e-tbar-btn {
         display: flex;
@@ -1116,6 +1141,16 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
     &.e-rtl {
+      &:not(.e-spacer-toolbar) {
+        .e-toolbar-items:not(.e-tbar-pos) {
+          .e-toolbar-item:first-child {
+            margin-right: $tbar-item-nrml-mrgn;
+          }
+        }
+      }
       .e-toolbar-item {
         .e-tbar-btn {