@syncfusion/blazor-themes 31.1.19 → 31.1.21

package/SCSS-Themes/notifications/toast/material3.scss

@@ -42,7 +42,7 @@ $toast-progressbar-bgr-height: 4px !default;
 $toast-content-bgr-padding: 8px 0 6px 0 !default;
 $toast-bgr-border-radious: 4px !default;
 $toast-font-bgr-size: $text-sm !default;
-$toast-title-font-weight: $font-weight-medium !default;
+$toast-title-font-weight: 500 !default;
 
 //Touch Mode End
 //Layout Variables End
@@ -242,10 +242,10 @@ $toast-warning-icon: '\e88b' !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;
             }
           }
 
@@ -313,7 +313,7 @@ $toast-warning-icon: '\e88b' !default;
           .e-toast-content {
             &:first-child {
               @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-                padding-left: 48px;
+                padding-left: 44px;
               }
             }
           }
@@ -360,9 +360,14 @@ $toast-warning-icon: '\e88b' !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;
         }
       }
 
@@ -834,8 +839,9 @@ $toast-warning-icon: '\e88b' !default;
         margin-right: $toast-icon-bgr-right-margin;
         width: $toast-icon-bgr-width;
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-          left: 18px;
-          margin-top: 13px;
+          left: 0;
+          margin-top: 14px;
+          margin-left: 12px;
         }
       }
 

package/SCSS-Themes/notifications/toast/tailwind-dark-lite.scss

@@ -230,10 +230,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;
             }
           }
 
@@ -301,7 +301,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;
               }
             }
           }
@@ -348,9 +348,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;
         }
       }
 

package/SCSS-Themes/notifications/toast/tailwind-dark.scss

@@ -230,10 +230,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;
             }
           }
 
@@ -301,7 +301,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;
               }
             }
           }
@@ -348,9 +348,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;
         }
       }
 
@@ -822,8 +827,9 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
         margin-right: $toast-icon-bgr-right-margin;
         width: $toast-icon-bgr-width;
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-          left: 18px;
-          margin-top: 13px;
+          left: 0;
+          margin-top: 14px;
+          margin-left: 12px;
         }
       }
 

package/SCSS-Themes/notifications/toast/tailwind-lite.scss

@@ -230,10 +230,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;
             }
           }
 
@@ -301,7 +301,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;
               }
             }
           }
@@ -348,9 +348,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;
         }
       }
 

package/SCSS-Themes/notifications/toast/tailwind.scss

@@ -230,10 +230,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;
             }
           }
 
@@ -301,7 +301,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;
               }
             }
           }
@@ -348,9 +348,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;
         }
       }
 
@@ -822,8 +827,9 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
         margin-right: $toast-icon-bgr-right-margin;
         width: $toast-icon-bgr-width;
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-          left: 18px;
-          margin-top: 13px;
+          left: 0;
+          margin-top: 14px;
+          margin-left: 12px;
         }
       }
 

package/SCSS-Themes/notifications/toast/tailwind3-dark-lite.scss

@@ -234,10 +234,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;
             }
           }
 
@@ -305,7 +305,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;
               }
             }
           }
@@ -352,9 +352,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;
         }
       }
 

package/SCSS-Themes/notifications/toast/tailwind3-dark.scss

@@ -234,10 +234,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;
             }
           }
 
@@ -305,7 +305,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;
               }
             }
           }
@@ -352,9 +352,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;
         }
       }
 
@@ -826,8 +831,9 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
         margin-right: $toast-icon-bgr-right-margin;
         width: $toast-icon-bgr-width;
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-          left: 18px;
-          margin-top: 13px;
+          left: 0;
+          margin-top: 14px;
+          margin-left: 12px;
         }
       }
 

package/SCSS-Themes/notifications/toast/tailwind3-lite.scss

@@ -234,10 +234,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;
             }
           }
 
@@ -305,7 +305,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;
               }
             }
           }
@@ -352,9 +352,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;
         }
       }
 

package/SCSS-Themes/notifications/toast/tailwind3.scss

@@ -234,10 +234,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;
             }
           }
 
@@ -305,7 +305,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;
               }
             }
           }
@@ -352,9 +352,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;
         }
       }
 
@@ -826,8 +831,9 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
         margin-right: $toast-icon-bgr-right-margin;
         width: $toast-icon-bgr-width;
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-          left: 18px;
-          margin-top: 13px;
+          left: 0;
+          margin-top: 14px;
+          margin-left: 12px;
         }
       }
 

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

@@ -15237,11 +15237,12 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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;
 }
@@ -43357,7 +43358,7 @@ $treeview-drag-icon-color: $treeview-icon-color !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' {
@@ -43365,13 +43366,12 @@ $treeview-drag-icon-color: $treeview-icon-color !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;
         }
       }
 
@@ -43408,6 +43408,49 @@ $treeview-drag-icon-color: $treeview-icon-color !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;
+            }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
+          }
+        }
+      }
     }
 
     .e-icons {
@@ -43425,11 +43468,14 @@ $treeview-drag-icon-color: $treeview-icon-color !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;
       }
@@ -43515,14 +43561,9 @@ $treeview-drag-icon-color: $treeview-icon-color !default;
 
       .e-input-group {
         height: $treeview-input-height;
-        @if ($skin-name == 'FluentUI') {
-          margin-top: 3px;
-        }
-        @else if($skin-name == 'tailwind') {
-          margin-bottom: 3px;
-        }
-        @else if($skin-name == 'bootstrap5') {
-          margin-bottom: 2px;
+        @if ($skin-name == 'tailwind') {
+          margin-top: 4px;
+          margin-bottom: 4px;
         }
         @else {
           margin-bottom: 0;
@@ -43532,9 +43573,20 @@ $treeview-drag-icon-color: $treeview-icon-color !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;
           }
         }
       }
@@ -44126,13 +44178,13 @@ $treeview-drag-icon-color: $treeview-icon-color !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;
             }
           }
@@ -44183,6 +44235,11 @@ $treeview-drag-icon-color: $treeview-icon-color !default;
           }
         }
       }
+      @if ($theme-name == 'fluent2-highcontrast') {
+        .e-checkbox-wrapper .e-frame.e-check {
+          border-color: $content-text-color-hover;
+        }
+      }
     }
 
     .e-sibling {
@@ -44784,7 +44841,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 {
@@ -44827,12 +44884,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;
-            }
           }
         }
       }
@@ -81767,10 +81818,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;
             }
           }
 
@@ -81838,7 +81889,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;
               }
             }
           }
@@ -81885,9 +81936,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;
         }
       }