@syncfusion/blazor-themes 23.2.7 → 24.1.41

package/SCSS-Themes/calendars/daterangepicker/material3.scss

@@ -263,7 +263,8 @@ $modal-range-landscape-conetent-overflow: auto !default;
 $modal-range-table-display: table !default;
 $modal-range-start-end-size: 28px !default;
 $modal-month-name-line-height: 44px !default;
-$modal-header-month-name-left-width: -25vw !default;
+$modal-header-month-name-left-width: -29vw !default;
+$modal-header-month-name-left-landscape-width: -27vw !default;
 $modal-header-month-name-width: 50vw !default;
 
 // header styles for presets
@@ -1016,13 +1017,11 @@ $range-header-font-size: 16px !default;
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
                   @if ($skin-name == 'Material3') {
-                    margin-right: 60vw;
                     vertical-align: inherit;
                     font-size: $modal-range-tablet-font-size
                   }
                   @media screen and (orientation: landscape) {
                     @if ($skin-name == 'Material3') {
-                      margin-right: 78vw;
                       vertical-align: inherit;
                     }
                   }
@@ -1037,9 +1036,6 @@ $range-header-font-size: 16px !default;
                 #{if(&, '&', '*')} .e-next {
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
-                  @if ($skin-name == 'Material3') {
-                    margin-right: 42px;
-                  }
 
                   #{if(&, '&', '*')} span {
                     padding: $modal-range-prev-next-icon-padding;
@@ -1052,16 +1048,17 @@ $range-header-font-size: 16px !default;
 
                 #{if(&, '&', '*')} .e-title {
                   @media (max-height: 600px) {
-                    @if ($skin-name == 'Material3') {
-                      margin-left: $modal-header-month-name-left-width;
-                      position: absolute;
-                      text-align: center;
-                      vertical-align: middle;
-                      width: $modal-header-month-name-width;
-                      line-height: $modal-month-name-line-height;
-                  }
-                    line-height: $modal-range-month-landscape-title-line-height;
-                  }
+                      @if ($skin-name =='Material3') {
+                        margin-left: $modal-header-month-name-left-landscape-width;
+                        position: absolute;
+                        text-align: center;
+                        vertical-align: middle;
+                        width: $modal-header-month-name-width;
+                        line-height: $modal-month-name-line-height;
+                      }
+                  
+                      line-height: $modal-range-month-landscape-title-line-height;
+                    }
           
                   @media (min-height: 600px) {
                     @if ($skin-name == 'Material3') {

package/SCSS-Themes/calendars/daterangepicker/tailwind-dark.scss

@@ -1022,13 +1022,11 @@ $range-header-font-size: 16px !default;
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
                   @if ($skin-name == 'Material3') {
-                    margin-right: 60vw;
                     vertical-align: inherit;
                     font-size: $modal-range-tablet-font-size
                   }
                   @media screen and (orientation: landscape) {
                     @if ($skin-name == 'Material3') {
-                      margin-right: 78vw;
                       vertical-align: inherit;
                     }
                   }
@@ -1043,9 +1041,6 @@ $range-header-font-size: 16px !default;
                 #{if(&, '&', '*')} .e-next {
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
-                  @if ($skin-name == 'Material3') {
-                    margin-right: 42px;
-                  }
 
                   #{if(&, '&', '*')} span {
                     padding: $modal-range-prev-next-icon-padding;
@@ -1058,16 +1053,17 @@ $range-header-font-size: 16px !default;
 
                 #{if(&, '&', '*')} .e-title {
                   @media (max-height: 600px) {
-                    @if ($skin-name == 'Material3') {
-                      margin-left: $modal-header-month-name-left-width;
-                      position: absolute;
-                      text-align: center;
-                      vertical-align: middle;
-                      width: $modal-header-month-name-width;
-                      line-height: $modal-month-name-line-height;
-                  }
-                    line-height: $modal-range-month-landscape-title-line-height;
-                  }
+                      @if ($skin-name =='Material3') {
+                        margin-left: $modal-header-month-name-left-landscape-width;
+                        position: absolute;
+                        text-align: center;
+                        vertical-align: middle;
+                        width: $modal-header-month-name-width;
+                        line-height: $modal-month-name-line-height;
+                      }
+                  
+                      line-height: $modal-range-month-landscape-title-line-height;
+                    }
           
                   @media (min-height: 600px) {
                     @if ($skin-name == 'Material3') {

package/SCSS-Themes/calendars/daterangepicker/tailwind.scss

@@ -1022,13 +1022,11 @@ $range-header-font-size: 16px !default;
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
                   @if ($skin-name == 'Material3') {
-                    margin-right: 60vw;
                     vertical-align: inherit;
                     font-size: $modal-range-tablet-font-size
                   }
                   @media screen and (orientation: landscape) {
                     @if ($skin-name == 'Material3') {
-                      margin-right: 78vw;
                       vertical-align: inherit;
                     }
                   }
@@ -1043,9 +1041,6 @@ $range-header-font-size: 16px !default;
                 #{if(&, '&', '*')} .e-next {
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
-                  @if ($skin-name == 'Material3') {
-                    margin-right: 42px;
-                  }
 
                   #{if(&, '&', '*')} span {
                     padding: $modal-range-prev-next-icon-padding;
@@ -1058,16 +1053,17 @@ $range-header-font-size: 16px !default;
 
                 #{if(&, '&', '*')} .e-title {
                   @media (max-height: 600px) {
-                    @if ($skin-name == 'Material3') {
-                      margin-left: $modal-header-month-name-left-width;
-                      position: absolute;
-                      text-align: center;
-                      vertical-align: middle;
-                      width: $modal-header-month-name-width;
-                      line-height: $modal-month-name-line-height;
-                  }
-                    line-height: $modal-range-month-landscape-title-line-height;
-                  }
+                      @if ($skin-name =='Material3') {
+                        margin-left: $modal-header-month-name-left-landscape-width;
+                        position: absolute;
+                        text-align: center;
+                        vertical-align: middle;
+                        width: $modal-header-month-name-width;
+                        line-height: $modal-month-name-line-height;
+                      }
+                  
+                      line-height: $modal-range-month-landscape-title-line-height;
+                    }
           
                   @media (min-height: 600px) {
                     @if ($skin-name == 'Material3') {

package/SCSS-Themes/documenteditor/document-editor/bootstrap-dark.scss

@@ -4374,6 +4374,34 @@ $de-column-presets-font-size: 60px !default;
                 }
             }
         }
+        .e-de-user-info.e-de-user-name-collapse span {
+            transition-property: height, min-width, max-width, width, border-radius, padding;
+            transition-duration: 200ms;
+            transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 6px;
+            width: 6px;
+            min-width: 0px;
+            max-width: 6px;
+            border-radius: 6px;
+            padding: 0px;
+        }
+        .e-de-user-info.e-de-user-name-expended span {
+            transition-property: height, width, min-width, max-width, border-radius, padding;
+            transition-duration: 300ms;
+            transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 20px;
+            line-height: 20px;
+            min-width: 44px;
+            max-width: 150px;
+            padding: 0px 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: white;
+        }
 }
 
 @include export-module('documenteditor-bootstrap-icons') {

package/SCSS-Themes/documenteditor/document-editor/bootstrap.scss

@@ -4373,6 +4373,34 @@ $de-column-presets-font-size: 60px !default;
                 }
             }
         }
+        .e-de-user-info.e-de-user-name-collapse span {
+            transition-property: height, min-width, max-width, width, border-radius, padding;
+            transition-duration: 200ms;
+            transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 6px;
+            width: 6px;
+            min-width: 0px;
+            max-width: 6px;
+            border-radius: 6px;
+            padding: 0px;
+        }
+        .e-de-user-info.e-de-user-name-expended span {
+            transition-property: height, width, min-width, max-width, border-radius, padding;
+            transition-duration: 300ms;
+            transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 20px;
+            line-height: 20px;
+            min-width: 44px;
+            max-width: 150px;
+            padding: 0px 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: white;
+        }
 }
 
 @include export-module('documenteditor-bootstrap-icons') {

package/SCSS-Themes/documenteditor/document-editor/bootstrap4.scss

@@ -4386,6 +4386,34 @@ $de-column-presets-font-size: 60px !default;
                 }
             }
         }
+        .e-de-user-info.e-de-user-name-collapse span {
+            transition-property: height, min-width, max-width, width, border-radius, padding;
+            transition-duration: 200ms;
+            transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 6px;
+            width: 6px;
+            min-width: 0px;
+            max-width: 6px;
+            border-radius: 6px;
+            padding: 0px;
+        }
+        .e-de-user-info.e-de-user-name-expended span {
+            transition-property: height, width, min-width, max-width, border-radius, padding;
+            transition-duration: 300ms;
+            transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 20px;
+            line-height: 20px;
+            min-width: 44px;
+            max-width: 150px;
+            padding: 0px 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: white;
+        }
 }
 
 @include export-module('documenteditor-bootstrap4-icons') {

package/SCSS-Themes/documenteditor/document-editor/bootstrap5-dark.scss

@@ -4387,6 +4387,34 @@ $de-column-presets-font-size: $text-6xl !default;
                 }
             }
         }
+        .e-de-user-info.e-de-user-name-collapse span {
+            transition-property: height, min-width, max-width, width, border-radius, padding;
+            transition-duration: 200ms;
+            transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 6px;
+            width: 6px;
+            min-width: 0px;
+            max-width: 6px;
+            border-radius: 6px;
+            padding: 0px;
+        }
+        .e-de-user-info.e-de-user-name-expended span {
+            transition-property: height, width, min-width, max-width, border-radius, padding;
+            transition-duration: 300ms;
+            transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 20px;
+            line-height: 20px;
+            min-width: 44px;
+            max-width: 150px;
+            padding: 0px 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: white;
+        }
 }
 
 @include export-module('documenteditor-bootstrap5-icons') {

package/SCSS-Themes/documenteditor/document-editor/bootstrap5.scss

@@ -4387,6 +4387,34 @@ $de-column-presets-font-size: $text-6xl !default;
                 }
             }
         }
+        .e-de-user-info.e-de-user-name-collapse span {
+            transition-property: height, min-width, max-width, width, border-radius, padding;
+            transition-duration: 200ms;
+            transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 6px;
+            width: 6px;
+            min-width: 0px;
+            max-width: 6px;
+            border-radius: 6px;
+            padding: 0px;
+        }
+        .e-de-user-info.e-de-user-name-expended span {
+            transition-property: height, width, min-width, max-width, border-radius, padding;
+            transition-duration: 300ms;
+            transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 20px;
+            line-height: 20px;
+            min-width: 44px;
+            max-width: 150px;
+            padding: 0px 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: white;
+        }
 }
 
 @include export-module('documenteditor-bootstrap5-icons') {

package/SCSS-Themes/documenteditor/document-editor/fabric-dark.scss

@@ -4376,6 +4376,34 @@ $de-column-presets-font-size: 60px !default;
                 }
             }
         }
+        .e-de-user-info.e-de-user-name-collapse span {
+            transition-property: height, min-width, max-width, width, border-radius, padding;
+            transition-duration: 200ms;
+            transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 6px;
+            width: 6px;
+            min-width: 0px;
+            max-width: 6px;
+            border-radius: 6px;
+            padding: 0px;
+        }
+        .e-de-user-info.e-de-user-name-expended span {
+            transition-property: height, width, min-width, max-width, border-radius, padding;
+            transition-duration: 300ms;
+            transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 20px;
+            line-height: 20px;
+            min-width: 44px;
+            max-width: 150px;
+            padding: 0px 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: white;
+        }
 }
 
 @include export-module('documenteditor-fabric-icons') {

package/SCSS-Themes/documenteditor/document-editor/fabric.scss

@@ -4375,6 +4375,34 @@ $de-column-presets-font-size: 60px !default;
                 }
             }
         }
+        .e-de-user-info.e-de-user-name-collapse span {
+            transition-property: height, min-width, max-width, width, border-radius, padding;
+            transition-duration: 200ms;
+            transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 6px;
+            width: 6px;
+            min-width: 0px;
+            max-width: 6px;
+            border-radius: 6px;
+            padding: 0px;
+        }
+        .e-de-user-info.e-de-user-name-expended span {
+            transition-property: height, width, min-width, max-width, border-radius, padding;
+            transition-duration: 300ms;
+            transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 20px;
+            line-height: 20px;
+            min-width: 44px;
+            max-width: 150px;
+            padding: 0px 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: white;
+        }
 }
 
 @include export-module('documenteditor-fabric-icons') {

package/SCSS-Themes/documenteditor/document-editor/fluent-dark.scss

@@ -4396,6 +4396,34 @@ $de-column-presets-font-size: $text-6xl !default;
                 }
             }
         }
+        .e-de-user-info.e-de-user-name-collapse span {
+            transition-property: height, min-width, max-width, width, border-radius, padding;
+            transition-duration: 200ms;
+            transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 6px;
+            width: 6px;
+            min-width: 0px;
+            max-width: 6px;
+            border-radius: 6px;
+            padding: 0px;
+        }
+        .e-de-user-info.e-de-user-name-expended span {
+            transition-property: height, width, min-width, max-width, border-radius, padding;
+            transition-duration: 300ms;
+            transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 20px;
+            line-height: 20px;
+            min-width: 44px;
+            max-width: 150px;
+            padding: 0px 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: white;
+        }
 }
 
 @include export-module('documenteditor-fluent-icons') {

package/SCSS-Themes/documenteditor/document-editor/fluent.scss

@@ -4396,6 +4396,34 @@ $de-column-presets-font-size: $text-6xl !default;
                 }
             }
         }
+        .e-de-user-info.e-de-user-name-collapse span {
+            transition-property: height, min-width, max-width, width, border-radius, padding;
+            transition-duration: 200ms;
+            transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 6px;
+            width: 6px;
+            min-width: 0px;
+            max-width: 6px;
+            border-radius: 6px;
+            padding: 0px;
+        }
+        .e-de-user-info.e-de-user-name-expended span {
+            transition-property: height, width, min-width, max-width, border-radius, padding;
+            transition-duration: 300ms;
+            transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 20px;
+            line-height: 20px;
+            min-width: 44px;
+            max-width: 150px;
+            padding: 0px 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: white;
+        }
 }
 
 @include export-module('documenteditor-fluent-icons') {

package/SCSS-Themes/documenteditor/document-editor/highcontrast.scss

@@ -4375,6 +4375,34 @@ $de-column-presets-font-size: 60px !default;
                 }
             }
         }
+        .e-de-user-info.e-de-user-name-collapse span {
+            transition-property: height, min-width, max-width, width, border-radius, padding;
+            transition-duration: 200ms;
+            transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 6px;
+            width: 6px;
+            min-width: 0px;
+            max-width: 6px;
+            border-radius: 6px;
+            padding: 0px;
+        }
+        .e-de-user-info.e-de-user-name-expended span {
+            transition-property: height, width, min-width, max-width, border-radius, padding;
+            transition-duration: 300ms;
+            transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 20px;
+            line-height: 20px;
+            min-width: 44px;
+            max-width: 150px;
+            padding: 0px 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: white;
+        }
 }
 
 @include export-module('documenteditor-highcontrast-icons') {

package/SCSS-Themes/documenteditor/document-editor/material-dark.scss

@@ -4392,6 +4392,34 @@ $de-column-presets-font-size: 60px !default;
                 }
             }
         }
+        .e-de-user-info.e-de-user-name-collapse span {
+            transition-property: height, min-width, max-width, width, border-radius, padding;
+            transition-duration: 200ms;
+            transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 6px;
+            width: 6px;
+            min-width: 0px;
+            max-width: 6px;
+            border-radius: 6px;
+            padding: 0px;
+        }
+        .e-de-user-info.e-de-user-name-expended span {
+            transition-property: height, width, min-width, max-width, border-radius, padding;
+            transition-duration: 300ms;
+            transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 20px;
+            line-height: 20px;
+            min-width: 44px;
+            max-width: 150px;
+            padding: 0px 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: white;
+        }
 }
 
 @include export-module('documenteditor-material-icons') {

package/SCSS-Themes/documenteditor/document-editor/material.scss

@@ -4392,6 +4392,34 @@ $de-column-presets-font-size: 60px !default;
                 }
             }
         }
+        .e-de-user-info.e-de-user-name-collapse span {
+            transition-property: height, min-width, max-width, width, border-radius, padding;
+            transition-duration: 200ms;
+            transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 6px;
+            width: 6px;
+            min-width: 0px;
+            max-width: 6px;
+            border-radius: 6px;
+            padding: 0px;
+        }
+        .e-de-user-info.e-de-user-name-expended span {
+            transition-property: height, width, min-width, max-width, border-radius, padding;
+            transition-duration: 300ms;
+            transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 20px;
+            line-height: 20px;
+            min-width: 44px;
+            max-width: 150px;
+            padding: 0px 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: white;
+        }
 }
 
 @include export-module('documenteditor-material-icons') {

package/SCSS-Themes/documenteditor/document-editor/material3-dark.scss

@@ -4387,6 +4387,34 @@ $de-column-presets-font-size: 60px !default;
                 }
             }
         }
+        .e-de-user-info.e-de-user-name-collapse span {
+            transition-property: height, min-width, max-width, width, border-radius, padding;
+            transition-duration: 200ms;
+            transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 6px;
+            width: 6px;
+            min-width: 0px;
+            max-width: 6px;
+            border-radius: 6px;
+            padding: 0px;
+        }
+        .e-de-user-info.e-de-user-name-expended span {
+            transition-property: height, width, min-width, max-width, border-radius, padding;
+            transition-duration: 300ms;
+            transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 20px;
+            line-height: 20px;
+            min-width: 44px;
+            max-width: 150px;
+            padding: 0px 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: white;
+        }
 }
 
 @include export-module('documenteditor-material3-icons') {

package/SCSS-Themes/documenteditor/document-editor/material3.scss

@@ -4387,6 +4387,34 @@ $de-column-presets-font-size: 60px !default;
                 }
             }
         }
+        .e-de-user-info.e-de-user-name-collapse span {
+            transition-property: height, min-width, max-width, width, border-radius, padding;
+            transition-duration: 200ms;
+            transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 6px;
+            width: 6px;
+            min-width: 0px;
+            max-width: 6px;
+            border-radius: 6px;
+            padding: 0px;
+        }
+        .e-de-user-info.e-de-user-name-expended span {
+            transition-property: height, width, min-width, max-width, border-radius, padding;
+            transition-duration: 300ms;
+            transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: 20px;
+            line-height: 20px;
+            min-width: 44px;
+            max-width: 150px;
+            padding: 0px 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: white;
+        }
 }
 
 @include export-module('documenteditor-material3-icons') {