@syncfusion/blazor-themes 31.1.19 → 31.1.20

package/SCSS-Themes/bootstrap4.scss

@@ -58789,8 +58789,8 @@ $treeview-item-active-check-color: $primary !default;
 //enddefault
 //dimensions
 $treeview-skin-name: 'bootstrap4';
-$treeview-item-height: 32px !default;
-$treeview-text-height: 30px !default;
+$treeview-item-height: 40px !default;
+$treeview-text-height: 22px !default;
 $treeview-input-height: 30px !default;
 $treeview-root-ul-padding: 0 0 0 14px !default;
 $treeview-rtl-root-ul-padding: 0 14px 0 0 !default;
@@ -58806,7 +58806,7 @@ $treeview-big-icon-margin: 0 0 0 -24px !default;
 $treeview-rtl-icon-margin: -0.5px -20px 0 0 !default;
 $treeview-rtl-drag-margin: 10px -13px -1px 0;
 $treeview-icon-padding: 6px !default;
-$treeview-text-padding: 0 8px 0 6px !default;
+$treeview-text-padding: 9px 8px 9px 6px !default;
 $treeview-text-margin: 0 !default;
 $treeview-image-size: 18px !default;
 $treeview-icon-size: 16px !default;
@@ -58831,7 +58831,7 @@ $treeview-icon-image-margin: 0 0 0 10px !default;
 $treeview-rtl-icon-image-margin: 0 10px 0 0 !default;
 $treeview-check-margin: 0 0 0 5px !default;
 $treeview-rtl-check-margin: 0 5px 0 0 !default;
-$treeview-check-text-padding: 0 8px !default;
+$treeview-check-text-padding: 9px 8px !default;
 $treeview-check-image-margin: 0 0 0 12px !default;
 $treeview-rtl-check-image-margin: 5px 12px 0 0 !default;
 $treeview-drop-count-border-size: 0px !default;
@@ -58845,8 +58845,8 @@ $treeview-check-icon-img-wrap-width: calc(100% - 83px) !default;
 $treeview-icon-wrap-width: calc(100% - 29px) !default;
 $treeview-icon-img-wrap-width: calc(100% - 57px) !default;
 
-$treeview-big-item-height: 40px !default;
-$treeview-big-text-height: 36px !default;
+$treeview-big-item-height: 50px !default;
+$treeview-big-text-height: 24px !default;
 $treeview-big-input-height: 38px !default;
 $treeview-big-text-padding: 0 12px 0 8px !default;
 $treeview-big-drag-text-padding: 2px 12px 0 4px !default;
@@ -58864,7 +58864,7 @@ $treeview-big-rtl-image-margin: 2px 10px 0 0 !default;
 $treeview-big-icon-image-margin: 0 0 0 10px !default;
 $treeview-big-rtl-icon-image-margin: 0 10px 0 0 !default;
 $treeview-big-check-margin: 0 0 0 10px !default;
-$treeview-big-check-text-padding: 0 12px !default;
+$treeview-big-check-text-padding: 13px 12px !default;
 $treeview-big-rtl-check-margin: 0 10px 0 0 !default;
 $treeview-big-check-image-margin: 0 0 0 16px !default;
 $treeview-big-rtl-check-image-margin: 4px 16px 2px 0 !default;
@@ -59052,7 +59052,7 @@ $ripple-width: 32px !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' {
@@ -59060,13 +59060,12 @@ $ripple-width: 32px !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;
         }
       }
 
@@ -59103,6 +59102,45 @@ $ripple-width: 32px !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 {
@@ -59120,11 +59158,14 @@ $ripple-width: 32px !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;
       }
@@ -59210,14 +59251,13 @@ $ripple-width: 32px !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;
@@ -59227,9 +59267,20 @@ $ripple-width: 32px !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;
           }
         }
       }
@@ -59821,13 +59872,13 @@ $ripple-width: 32px !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;
             }
           }
@@ -59878,6 +59929,11 @@ $ripple-width: 32px !default;
           }
         }
       }
+      @if ($theme-name == 'fluent2-highcontrast') {
+        .e-checkbox-wrapper .e-frame.e-check {
+          border-color: $content-text-color-hover;
+        }
+      }
     }
 
     .e-sibling {
@@ -60243,6 +60299,30 @@ $ripple-width: 32px !default;
         min-height: $treeview-big-item-height;
       }
 
+      @if $skin-name == 'bootstrap5.3' {
+        padding: $treeview-big-text-padding;
+      }
+
+      @if $skin-name == 'highcontrast' {
+        padding-top: 11px;
+        padding-bottom: 11px;
+      }
+
+      @if $skin-name == 'material' or $skin-name == 'material-dark' {
+        padding-top: 12px;
+        padding-bottom: 12px;
+      }
+
+      @if $skin-name == 'FluentUI' {
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+
+      @if $skin-name == 'bootstrap4' {
+        padding-top: 13px;
+        padding-bottom: 13px;
+      }
+
       .e-input-group {
         height: $treeview-big-input-height;
 
@@ -60251,6 +60331,69 @@ $ripple-width: 32px !default;
             height: 36px;
           }
         }
+
+        @if $skin-name =='bootstrap5' {
+          padding-top: 6px;
+          padding-bottom: 6px;
+          margin-top: 2px;
+          margin-bottom: 2px;
+        }
+
+        @if $skin-name == 'highcontrast' or $skin-name == 'material-dark' {
+          line-height: 42px;
+          min-height: 42px;
+        }
+
+        .e-input {
+          @if $skin-name =='tailwind3' {
+            height: 40px;
+            line-height: 24px;
+            padding-top: 8px;
+            padding-bottom: 8px;
+          }
+
+          @if $skin-name =='bootstrap5' {
+            height: 24px;
+          }
+
+          @if $skin-name =='material' or $skin-name == 'material-dark' {
+            line-height: 28px;
+            min-height: 28px;
+            padding-top: 9px;
+            padding-bottom: 5px;
+          }
+
+          @if $skin-name == 'bootstrap5.3' {
+            line-height: 24px;
+            min-height: 24px;
+            padding-top: 7px;
+            padding-bottom: 7px;
+          }
+        }
+      }
+    }
+
+    .e-list-item .e-text-content .e-list-text {
+      &:has(> .e-input-group) {
+        @if $skin-name =='highcontrast' {
+          padding-top: 4px;
+          padding-bottom: 4px;
+        }
+
+        @if $skin-name =='FluentUI' {
+          padding-top: 2px;
+          padding-bottom: 2px;
+        }
+
+        @if $skin-name =='material' or $skin-name == 'material-dark' {
+          padding-top: 3px;
+          padding-bottom: 3px;
+        }
+
+        @if $skin-name == 'bootstrap4' {
+          padding-top: 6px;
+          padding-bottom: 6px;
+        }
       }
     }
 
@@ -60435,6 +60578,10 @@ $ripple-width: 32px !default;
   .e-treeview.e-bigger {
     .e-list-text {
       font-size: $treeview-big-font-size;
+      @if $skin-name == 'Material3' {
+        padding: 12px;
+      }
+      
       @if $skin-name == 'bootstrap4' {
         color: $treeview-big-text-color;
       }
@@ -109088,10 +109235,10 @@ $toast-close-icon-hover-color: $black !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;
             }
           }
 
@@ -109159,7 +109306,7 @@ $toast-close-icon-hover-color: $black !default;
           .e-toast-content {
             &:first-child {
               @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-                padding-left: 48px;
+                padding-left: 44px;
               }
             }
           }
@@ -109206,9 +109353,14 @@ $toast-close-icon-hover-color: $black !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;
         }
       }
 
@@ -109680,8 +109832,9 @@ $toast-close-icon-hover-color: $black !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/bootstrap5-dark-lite.scss

@@ -43188,9 +43188,9 @@ $treeview-icon-img-wrap-width: calc(100% - 60px) !default;
 
 $treeview-big-font-size: $text-base !default;
 $treeview-big-icon-font-size: $text-2xl !default;
-$treeview-big-item-height: 42px !default;
+$treeview-big-item-height: 40px !default;
 $treeview-big-text-height: 40px !default;
-$treeview-big-input-height: 40px !default;
+$treeview-big-input-height: 36px !default;
 $treeview-big-text-padding: 0 12px !default;
 $treeview-big-input-padding: 0 9px !default;
 $treeview-big-icon-padding: 0px !default;
@@ -43427,7 +43427,7 @@ $treeview-item-active-check-color: $primary !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' {
@@ -43435,13 +43435,12 @@ $treeview-item-active-check-color: $primary !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;
         }
       }
 
@@ -43478,6 +43477,45 @@ $treeview-item-active-check-color: $primary !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 {
@@ -43495,11 +43533,14 @@ $treeview-item-active-check-color: $primary !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;
       }
@@ -43585,14 +43626,13 @@ $treeview-item-active-check-color: $primary !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;
@@ -43602,9 +43642,20 @@ $treeview-item-active-check-color: $primary !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;
           }
         }
       }
@@ -44196,13 +44247,13 @@ $treeview-item-active-check-color: $primary !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;
             }
           }
@@ -44253,6 +44304,11 @@ $treeview-item-active-check-color: $primary !default;
           }
         }
       }
+      @if ($theme-name == 'fluent2-highcontrast') {
+        .e-checkbox-wrapper .e-frame.e-check {
+          border-color: $content-text-color-hover;
+        }
+      }
     }
 
     .e-sibling {
@@ -81634,9 +81690,9 @@ $skeleton-card-color: $content-bg-color-alt2;
 
 //Layout Variables Start
 //Mouse Mode Start
-$toast-icon-nrml-height: 20px !default;
-$toast-icon-nrml-width: 20px !default;
-$toast-icon-nrml-size: $text-sm !default;
+$toast-icon-nrml-height: 18px !default;
+$toast-icon-nrml-width: 18px !default;
+$toast-icon-nrml-size: 18px !default;
 $toast-icon-nrml-right-margin: 14px !default;
 $toast-close-icon-nrml-height: 20px !default;
 $toast-close-icon-nrml-width: 20px !default;
@@ -81656,9 +81712,9 @@ $toast-title-font-nrml-size: $text-sm !default;
 //Mouse Mode End
 
 //Touch Mode Start
-$toast-icon-bgr-height: 24px !default;
-$toast-icon-bgr-width: 24px !default;
-$toast-icon-bgr-size: 18px !default;
+$toast-icon-bgr-height: 20px !default;
+$toast-icon-bgr-width: 20px !default;
+$toast-icon-bgr-size: 20px !default;
 $toast-icon-bgr-right-margin: 16px !default;
 $toast-close-icon-bgr-height: 24px !default;
 $toast-close-icon-bgr-width: 24px !default;
@@ -81864,10 +81920,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;
             }
           }
 
@@ -81935,7 +81991,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;
               }
             }
           }
@@ -81982,9 +82038,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;
         }
       }