@syncfusion/blazor-themes 24.2.6 → 24.2.8

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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/material3.scss

@@ -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/tailwind-dark.scss

@@ -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/tailwind.scss

@@ -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/pdfviewer/pdfviewer/bootstrap-dark.scss

@@ -4188,8 +4188,9 @@ $pv-eye-icon-margin-top: 3px !default;
       padding-bottom: 30px;
       height: 18px;
     }
-    max-width: 237px;
     position: absolute;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .e-pv-reply-title {
@@ -4208,10 +4209,11 @@ $pv-eye-icon-margin-top: 3px !default;
     @if $skin-name == 'Material3' {
       font-size: $text-xs;
     }
-    max-width: 212px;
     padding-left: 8px;
     padding-top: $pv-comment-title-padding-top;
     position: absolute;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .e-pv-comments-hover {

package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap.scss

@@ -4188,8 +4188,9 @@ $pv-eye-icon-margin-top: 3px !default;
       padding-bottom: 30px;
       height: 18px;
     }
-    max-width: 237px;
     position: absolute;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .e-pv-reply-title {
@@ -4208,10 +4209,11 @@ $pv-eye-icon-margin-top: 3px !default;
     @if $skin-name == 'Material3' {
       font-size: $text-xs;
     }
-    max-width: 212px;
     padding-left: 8px;
     padding-top: $pv-comment-title-padding-top;
     position: absolute;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .e-pv-comments-hover {