@syncfusion/blazor-themes 31.1.18 → 31.1.20

package/Compiled-Themes/tailwind-lite.css

@@ -21933,9 +21933,7 @@ body.e-colorpicker-overflow {
   list-style: none;
 }
 .e-treeview .e-list-item .e-ul {
-  margin: 2px 0 -2px;
   padding: 0 0 0 20px;
-  margin: 2px 0 0;
 }
 .e-treeview .e-list-item.e-disable > .e-text-content,
 .e-treeview .e-list-item.e-disable > .e-fullrow {
@@ -21975,7 +21973,6 @@ body.e-colorpicker-overflow {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  border: 1px solid;
   cursor: pointer;
   margin: 0;
   padding: 0 0 0 20px;
@@ -22033,12 +22030,15 @@ body.e-colorpicker-overflow {
 }
 .e-treeview .e-list-text .e-input-group {
   height: 30px;
-  margin-bottom: 3px;
+  margin-top: 4px;
+  margin-bottom: 4px;
   min-width: 150px;
   vertical-align: bottom;
 }
 .e-treeview .e-list-text .e-input-group .e-input {
   height: 28px;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 .e-treeview .e-navigable-text {
   padding: 0 8px;

package/Compiled-Themes/tailwind.css

@@ -29662,9 +29662,7 @@ body.e-colorpicker-overflow {
   list-style: none;
 }
 .e-treeview .e-list-item .e-ul {
-  margin: 2px 0 -2px;
   padding: 0 0 0 20px;
-  margin: 2px 0 0;
 }
 .e-treeview .e-list-item.e-disable > .e-text-content,
 .e-treeview .e-list-item.e-disable > .e-fullrow {
@@ -29704,7 +29702,6 @@ body.e-colorpicker-overflow {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  border: 1px solid;
   cursor: pointer;
   margin: 0;
   padding: 0 0 0 20px;
@@ -29762,12 +29759,15 @@ body.e-colorpicker-overflow {
 }
 .e-treeview .e-list-text .e-input-group {
   height: 30px;
-  margin-bottom: 3px;
+  margin-top: 4px;
+  margin-bottom: 4px;
   min-width: 150px;
   vertical-align: bottom;
 }
 .e-treeview .e-list-text .e-input-group .e-input {
   height: 28px;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 .e-treeview .e-navigable-text {
   padding: 0 8px;

package/Compiled-Themes/tailwind3-dark-lite.css

@@ -11683,6 +11683,14 @@ ejs-calendar {
   outline: none;
 }
 
+.e-calendar .e-btn.e-today.e-flat.e-primary.e-disabled,
+.e-calendar .e-btn.e-today.e-flat.e-primary.e-disabled,
+.e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-disabled,
+.e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-disabled {
+  background-color: var(--color-sf-primary-bg-color-disabled);
+  border-color: var(--color-sf-primary-border-color-disabled);
+}
+
 .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px var(--color-sf-content-text-color-alt3);
   border-radius: 0;
@@ -24713,9 +24721,7 @@ body.e-colorpicker-overflow {
   list-style: none;
 }
 .e-treeview .e-list-item .e-ul {
-  margin: 2px 0 -2px;
   padding: 0 0 0 20px;
-  margin: 0;
 }
 .e-treeview .e-list-item.e-disable > .e-text-content,
 .e-treeview .e-list-item.e-disable > .e-fullrow {
@@ -24738,6 +24744,10 @@ body.e-colorpicker-overflow {
 .e-treeview .e-list-item .e-icons.e-icons-spinner::before {
   content: none;
 }
+.e-treeview .e-list-item .e-text-content .e-list-text:has(> .e-input-group) {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
 .e-treeview .e-icons .e-spinner-pane {
   position: relative;
 }
@@ -24752,7 +24762,6 @@ body.e-colorpicker-overflow {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  border: 1px solid;
   cursor: pointer;
   margin: 0;
   padding: 0 0 0 20px;
@@ -24811,13 +24820,17 @@ body.e-colorpicker-overflow {
   vertical-align: middle;
 }
 .e-treeview .e-list-text .e-input-group {
-  height: 30px;
+  height: 32px;
   margin-bottom: 0;
   min-width: 150px;
   vertical-align: bottom;
 }
 .e-treeview .e-list-text .e-input-group .e-input {
   height: 28px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  line-height: 20px;
+  height: 32px;
 }
 .e-treeview .e-navigable-text {
   padding: 10px 8px;

package/Compiled-Themes/tailwind3-dark.css

@@ -16523,6 +16523,14 @@ ejs-calendar {
   outline: none;
 }
 
+.e-calendar .e-btn.e-today.e-flat.e-primary.e-disabled,
+.e-calendar .e-btn.e-today.e-flat.e-primary.e-disabled,
+.e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-disabled,
+.e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-disabled {
+  background-color: var(--color-sf-primary-bg-color-disabled);
+  border-color: var(--color-sf-primary-border-color-disabled);
+}
+
 .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px var(--color-sf-content-text-color-alt3);
   border-radius: 0;
@@ -34345,9 +34353,7 @@ body.e-colorpicker-overflow {
   list-style: none;
 }
 .e-treeview .e-list-item .e-ul {
-  margin: 2px 0 -2px;
   padding: 0 0 0 20px;
-  margin: 0;
 }
 .e-treeview .e-list-item.e-disable > .e-text-content,
 .e-treeview .e-list-item.e-disable > .e-fullrow {
@@ -34370,6 +34376,10 @@ body.e-colorpicker-overflow {
 .e-treeview .e-list-item .e-icons.e-icons-spinner::before {
   content: none;
 }
+.e-treeview .e-list-item .e-text-content .e-list-text:has(> .e-input-group) {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
 .e-treeview .e-icons .e-spinner-pane {
   position: relative;
 }
@@ -34384,7 +34394,6 @@ body.e-colorpicker-overflow {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  border: 1px solid;
   cursor: pointer;
   margin: 0;
   padding: 0 0 0 20px;
@@ -34443,13 +34452,17 @@ body.e-colorpicker-overflow {
   vertical-align: middle;
 }
 .e-treeview .e-list-text .e-input-group {
-  height: 30px;
+  height: 32px;
   margin-bottom: 0;
   min-width: 150px;
   vertical-align: bottom;
 }
 .e-treeview .e-list-text .e-input-group .e-input {
   height: 28px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  line-height: 20px;
+  height: 32px;
 }
 .e-treeview .e-navigable-text {
   padding: 10px 8px;
@@ -34961,6 +34974,13 @@ body.e-colorpicker-overflow {
 .e-treeview.e-bigger .e-list-text .e-input-group .e-input {
   height: 36px;
 }
+.e-bigger .e-treeview .e-list-text .e-input-group .e-input,
+.e-treeview.e-bigger .e-list-text .e-input-group .e-input {
+  height: 40px;
+  line-height: 24px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
 .e-bigger .e-treeview .e-checkbox-wrapper,
 .e-treeview.e-bigger .e-checkbox-wrapper {
   margin: 0 0 0 12px;

package/Compiled-Themes/tailwind3-lite.css

@@ -12087,6 +12087,14 @@ ejs-calendar {
   outline: none;
 }
 
+.e-calendar .e-btn.e-today.e-flat.e-primary.e-disabled,
+.e-calendar .e-btn.e-today.e-flat.e-primary.e-disabled,
+.e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-disabled,
+.e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-disabled {
+  background-color: var(--color-sf-primary-bg-color-disabled);
+  border-color: var(--color-sf-primary-border-color-disabled);
+}
+
 .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px var(--color-sf-content-text-color-alt3);
   border-radius: 0;
@@ -25117,9 +25125,7 @@ body.e-colorpicker-overflow {
   list-style: none;
 }
 .e-treeview .e-list-item .e-ul {
-  margin: 2px 0 -2px;
   padding: 0 0 0 20px;
-  margin: 0;
 }
 .e-treeview .e-list-item.e-disable > .e-text-content,
 .e-treeview .e-list-item.e-disable > .e-fullrow {
@@ -25142,6 +25148,10 @@ body.e-colorpicker-overflow {
 .e-treeview .e-list-item .e-icons.e-icons-spinner::before {
   content: none;
 }
+.e-treeview .e-list-item .e-text-content .e-list-text:has(> .e-input-group) {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
 .e-treeview .e-icons .e-spinner-pane {
   position: relative;
 }
@@ -25156,7 +25166,6 @@ body.e-colorpicker-overflow {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  border: 1px solid;
   cursor: pointer;
   margin: 0;
   padding: 0 0 0 20px;
@@ -25215,13 +25224,17 @@ body.e-colorpicker-overflow {
   vertical-align: middle;
 }
 .e-treeview .e-list-text .e-input-group {
-  height: 30px;
+  height: 32px;
   margin-bottom: 0;
   min-width: 150px;
   vertical-align: bottom;
 }
 .e-treeview .e-list-text .e-input-group .e-input {
   height: 28px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  line-height: 20px;
+  height: 32px;
 }
 .e-treeview .e-navigable-text {
   padding: 10px 8px;

package/Compiled-Themes/tailwind3.css

@@ -16927,6 +16927,14 @@ ejs-calendar {
   outline: none;
 }
 
+.e-calendar .e-btn.e-today.e-flat.e-primary.e-disabled,
+.e-calendar .e-btn.e-today.e-flat.e-primary.e-disabled,
+.e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-disabled,
+.e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-disabled {
+  background-color: var(--color-sf-primary-bg-color-disabled);
+  border-color: var(--color-sf-primary-border-color-disabled);
+}
+
 .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px var(--color-sf-content-text-color-alt3);
   border-radius: 0;
@@ -34749,9 +34757,7 @@ body.e-colorpicker-overflow {
   list-style: none;
 }
 .e-treeview .e-list-item .e-ul {
-  margin: 2px 0 -2px;
   padding: 0 0 0 20px;
-  margin: 0;
 }
 .e-treeview .e-list-item.e-disable > .e-text-content,
 .e-treeview .e-list-item.e-disable > .e-fullrow {
@@ -34774,6 +34780,10 @@ body.e-colorpicker-overflow {
 .e-treeview .e-list-item .e-icons.e-icons-spinner::before {
   content: none;
 }
+.e-treeview .e-list-item .e-text-content .e-list-text:has(> .e-input-group) {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
 .e-treeview .e-icons .e-spinner-pane {
   position: relative;
 }
@@ -34788,7 +34798,6 @@ body.e-colorpicker-overflow {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  border: 1px solid;
   cursor: pointer;
   margin: 0;
   padding: 0 0 0 20px;
@@ -34847,13 +34856,17 @@ body.e-colorpicker-overflow {
   vertical-align: middle;
 }
 .e-treeview .e-list-text .e-input-group {
-  height: 30px;
+  height: 32px;
   margin-bottom: 0;
   min-width: 150px;
   vertical-align: bottom;
 }
 .e-treeview .e-list-text .e-input-group .e-input {
   height: 28px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  line-height: 20px;
+  height: 32px;
 }
 .e-treeview .e-navigable-text {
   padding: 10px 8px;
@@ -35365,6 +35378,13 @@ body.e-colorpicker-overflow {
 .e-treeview.e-bigger .e-list-text .e-input-group .e-input {
   height: 36px;
 }
+.e-bigger .e-treeview .e-list-text .e-input-group .e-input,
+.e-treeview.e-bigger .e-list-text .e-input-group .e-input {
+  height: 40px;
+  line-height: 24px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
 .e-bigger .e-treeview .e-checkbox-wrapper,
 .e-treeview.e-bigger .e-checkbox-wrapper {
   margin: 0 0 0 12px;

package/SCSS-Themes/bds-dark-lite.scss

@@ -20878,6 +20878,10 @@ $calendar-today-btn-primary-disabled-border-color: $primary-border-color-disable
       border-color: transparent;
       color: $calendar-today-disabled-color;
     }
+    @if $skin-name == 'tailwind3' {
+      background-color: $calendar-today-disabled-background-style;
+      border-color: $calendar-today-disabled-border-style;
+    }
   }
   .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
     box-shadow: $calendar-focused-cell-box-shadow;
@@ -44351,7 +44355,7 @@ $treeview-icon-font-size: $text-xl !default;
 $treeview-image-font-size: $text-xl !default;
 $treeview-big-font-size: $text-base !default;
 $treeview-big-icon-font-size: $text-2xl !default;
-$treeview-item-height: 40px !default;
+$treeview-item-height: 38px !default;
 $treeview-text-height: 38px !default;
 $treeview-input-height: 30px !default;
 $treeview-root-ul-padding: 0 0 0 12px !default;
@@ -44641,7 +44645,7 @@ $treeview-item-active-hover-bg:$content-bg-color-hover !default;
 
     .e-list-item {
       list-style: none;
-      @if $skin-name != 'tailwind3' and $skin-name != 'tailwind' and $skin-name != 'Material3' and $skin-name != 'fluent2' {
+      @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' {
         padding: 2px 0;
       }
       @if $skin-name == 'fluent2' {
@@ -44649,13 +44653,12 @@ $treeview-item-active-hover-bg:$content-bg-color-hover !default;
       }
 
       .e-ul {
-        margin: 2px 0 -2px;
         padding: $treeview-child-ul-padding;
-        @if $skin-name == 'tailwind' {
-          margin: 2px 0 0;
+        @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' {
+          margin: 2px 0 -2px;
         }
-        @else if $skin-name == 'tailwind3' or $skin-name == 'Material3' {
-          margin: 0;
+        @if $skin-name == 'fluent2' {
+          margin-top: 4px;
         }
       }
 
@@ -44692,6 +44695,45 @@ $treeview-item-active-hover-bg:$content-bg-color-hover !default;
       .e-icons.e-icons-spinner::before {
         content: none;
       }
+      
+      .e-text-content {
+        .e-list-text {
+          &:has(> .e-input-group) {
+            @if $skin-name == 'material' or $skin-name == 'material-dark' {
+              padding-top: 1px;
+              padding-bottom: 1px;
+              .e-input-group {
+                height: 34px;
+
+                .e-input {
+                  line-height: 26px;
+                  min-height: 26px;
+                }
+              }
+            }
+            @if $skin-name == 'tailwind3' {
+              padding-top: 4px;
+              padding-bottom: 4px;
+            }
+            @if $skin-name == 'highcontrast' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
+            @if ($skin-name == 'FluentUI') {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
+            @if $skin-name == 'bootstrap5.3' {
+              padding-top: 2px;
+              padding-bottom: 2px;
+            }
+            @if $skin-name == 'bootstrap4' {
+              padding-top: 5px;
+              padding-bottom: 5px;
+            }
+          }
+        }
+      }
     }
 
     .e-icons {
@@ -44709,11 +44751,14 @@ $treeview-item-active-hover-bg:$content-bg-color-hover !default;
 
     .e-text-content {
       @include user-select;
-      border: 1px solid;
       cursor: pointer;
       margin: 0;
       padding: $treeview-text-wrap-padding;
 
+      @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' {
+        border: 1px solid;
+      }
+
       @if $skin-name == 'Material3' or $skin-name == 'tailwind3' {
         border: none;
       }
@@ -44799,14 +44844,13 @@ $treeview-item-active-hover-bg:$content-bg-color-hover !default;
 
       .e-input-group {
         height: $treeview-input-height;
-        @if ($skin-name == 'FluentUI') {
-          margin-top: 3px;
-        }
-        @else if($skin-name == 'tailwind') {
-          margin-bottom: 3px;
+        @if ($skin-name == 'tailwind') {
+          margin-top: 4px;
+          margin-bottom: 4px;
         }
         @else if($skin-name == 'bootstrap5') {
-          margin-bottom: 2px;
+          margin-bottom: 3px;
+          margin-top: 3px;
         }
         @else {
           margin-bottom: 0;
@@ -44816,9 +44860,20 @@ $treeview-item-active-hover-bg:$content-bg-color-hover !default;
         @if ($skin-name == 'fluent2') {
           border-color: $treeview-input-border-color;
         }
-        @if $skin-name != 'material' {
-          .e-input {
+        .e-input {
+          @if $skin-name != 'material' and $skin-name != 'material-dark' {
             height: 28px;
+            padding-top: 6px;
+            padding-bottom: 6px;
+          }
+          @if $skin-name == 'tailwind3' {
+            line-height: 20px;
+            height: 32px;
+          }
+          @if $skin-name == 'bootstrap5.3' {
+            height: 32px;
+            padding-top: 5px;
+            padding-bottom: 5px;
           }
         }
       }
@@ -45410,13 +45465,13 @@ $treeview-item-active-hover-bg:$content-bg-color-hover !default;
               @include bg-border($treeview-item-active-check-bg, $treeview-item-active-check-border-color);
               color: $treeview-item-active-check-color;
             }
-            @else if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+            @else if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5.3' {
               border-color: $content-text-color-selected;
             }
           }
     
           .e-stop {
-            @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+            @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5.3' {
               border-color: $content-text-color-selected;
             }
           }
@@ -45467,6 +45522,11 @@ $treeview-item-active-hover-bg:$content-bg-color-hover !default;
           }
         }
       }
+      @if ($theme-name == 'fluent2-highcontrast') {
+        .e-checkbox-wrapper .e-frame.e-check {
+          border-color: $content-text-color-hover;
+        }
+      }
     }
 
     .e-sibling {
@@ -83119,10 +83179,10 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
           &:first-child {
             padding: 0;
             @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-              padding-bottom: 12px;
+              padding-bottom: 8px;
               padding-left: 12px;
               padding-right: 12px;
-              padding-top: 12px;
+              padding-top: 8px;
             }
           }
 
@@ -83190,7 +83250,7 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
           .e-toast-content {
             &:first-child {
               @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-                padding-left: 48px;
+                padding-left: 44px;
               }
             }
           }
@@ -83237,9 +83297,14 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
         margin-right: $toast-icon-nrml-right-margin;
         width: $toast-icon-nrml-width;
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-          left: 16px;
-          margin-left: 13px;
-          margin-top: 13px;
+          left: 0;
+          margin-left: 12px;
+          margin-top: 10px;
+          padding-bottom: 6px;
+          position: absolute;
+        }
+        @if $skin-name == 'fluent2' {
+          margin-top: 2px;
         }
       }