@syncfusion/blazor-themes 28.2.3 → 28.2.5

package/SCSS-Themes/inputs/input/material-lite.scss

@@ -6286,6 +6286,29 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
       border-bottom: transparent;
     }
   }
+
+  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
+      padding: 0;
+  
+      input {
+        padding: 14px 2px 5px 12px;
+      }
+  
+      label.e-float-text {
+        padding-left: 12px;
+      }
+  
+      .e-input-in-wrap .e-input-group-icon {
+        @if $input-skin-name == 'material' {
+          padding-right: 17px;
+        }
+        @else {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 }
 
 

package/SCSS-Themes/inputs/input/material.scss

@@ -6286,6 +6286,29 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
       border-bottom: transparent;
     }
   }
+
+  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
+      padding: 0;
+  
+      input {
+        padding: 14px 2px 5px 12px;
+      }
+  
+      label.e-float-text {
+        padding-left: 12px;
+      }
+  
+      .e-input-in-wrap .e-input-group-icon {
+        @if $input-skin-name == 'material' {
+          padding-right: 17px;
+        }
+        @else {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 }
 
 

package/SCSS-Themes/inputs/input/material3-dark-lite.scss

@@ -6255,6 +6255,29 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
       border-bottom: transparent;
     }
   }
+
+  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
+      padding: 0;
+  
+      input {
+        padding: 14px 2px 5px 12px;
+      }
+  
+      label.e-float-text {
+        padding-left: 12px;
+      }
+  
+      .e-input-in-wrap .e-input-group-icon {
+        @if $input-skin-name == 'material' {
+          padding-right: 17px;
+        }
+        @else {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 }
 
 

package/SCSS-Themes/inputs/input/material3-dark.scss

@@ -6255,6 +6255,29 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
       border-bottom: transparent;
     }
   }
+
+  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
+      padding: 0;
+  
+      input {
+        padding: 14px 2px 5px 12px;
+      }
+  
+      label.e-float-text {
+        padding-left: 12px;
+      }
+  
+      .e-input-in-wrap .e-input-group-icon {
+        @if $input-skin-name == 'material' {
+          padding-right: 17px;
+        }
+        @else {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 }
 
 

package/SCSS-Themes/inputs/input/material3-lite.scss

@@ -6255,6 +6255,29 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
       border-bottom: transparent;
     }
   }
+
+  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
+      padding: 0;
+  
+      input {
+        padding: 14px 2px 5px 12px;
+      }
+  
+      label.e-float-text {
+        padding-left: 12px;
+      }
+  
+      .e-input-in-wrap .e-input-group-icon {
+        @if $input-skin-name == 'material' {
+          padding-right: 17px;
+        }
+        @else {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 }
 
 

package/SCSS-Themes/inputs/input/material3.scss

@@ -6255,6 +6255,29 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
       border-bottom: transparent;
     }
   }
+
+  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
+      padding: 0;
+  
+      input {
+        padding: 14px 2px 5px 12px;
+      }
+  
+      label.e-float-text {
+        padding-left: 12px;
+      }
+  
+      .e-input-in-wrap .e-input-group-icon {
+        @if $input-skin-name == 'material' {
+          padding-right: 17px;
+        }
+        @else {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 }
 
 

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

@@ -6048,6 +6048,29 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
       border-bottom: transparent;
     }
   }
+
+  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
+      padding: 0;
+  
+      input {
+        padding: 14px 2px 5px 12px;
+      }
+  
+      label.e-float-text {
+        padding-left: 12px;
+      }
+  
+      .e-input-in-wrap .e-input-group-icon {
+        @if $input-skin-name == 'material' {
+          padding-right: 17px;
+        }
+        @else {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 }
 
 

package/SCSS-Themes/inputs/input/tailwind-dark.scss

@@ -6048,6 +6048,29 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
       border-bottom: transparent;
     }
   }
+
+  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
+      padding: 0;
+  
+      input {
+        padding: 14px 2px 5px 12px;
+      }
+  
+      label.e-float-text {
+        padding-left: 12px;
+      }
+  
+      .e-input-in-wrap .e-input-group-icon {
+        @if $input-skin-name == 'material' {
+          padding-right: 17px;
+        }
+        @else {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 }
 
 

package/SCSS-Themes/inputs/input/tailwind-lite.scss

@@ -6048,6 +6048,29 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
       border-bottom: transparent;
     }
   }
+
+  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
+      padding: 0;
+  
+      input {
+        padding: 14px 2px 5px 12px;
+      }
+  
+      label.e-float-text {
+        padding-left: 12px;
+      }
+  
+      .e-input-in-wrap .e-input-group-icon {
+        @if $input-skin-name == 'material' {
+          padding-right: 17px;
+        }
+        @else {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 }
 
 

package/SCSS-Themes/inputs/input/tailwind.scss

@@ -6048,6 +6048,29 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
       border-bottom: transparent;
     }
   }
+
+  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
+      padding: 0;
+  
+      input {
+        padding: 14px 2px 5px 12px;
+      }
+  
+      label.e-float-text {
+        padding-left: 12px;
+      }
+  
+      .e-input-in-wrap .e-input-group-icon {
+        @if $input-skin-name == 'material' {
+          padding-right: 17px;
+        }
+        @else {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 }
 
 

package/SCSS-Themes/inputs/input/tailwind3-dark-lite.scss

@@ -6224,6 +6224,29 @@ $textarea-float-top: -24px !default;
       border-bottom: transparent;
     }
   }
+
+  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
+      padding: 0;
+  
+      input {
+        padding: 14px 2px 5px 12px;
+      }
+  
+      label.e-float-text {
+        padding-left: 12px;
+      }
+  
+      .e-input-in-wrap .e-input-group-icon {
+        @if $input-skin-name == 'material' {
+          padding-right: 17px;
+        }
+        @else {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 }
 
 

package/SCSS-Themes/inputs/input/tailwind3-dark.scss

@@ -6224,6 +6224,29 @@ $textarea-float-top: -24px !default;
       border-bottom: transparent;
     }
   }
+
+  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
+      padding: 0;
+  
+      input {
+        padding: 14px 2px 5px 12px;
+      }
+  
+      label.e-float-text {
+        padding-left: 12px;
+      }
+  
+      .e-input-in-wrap .e-input-group-icon {
+        @if $input-skin-name == 'material' {
+          padding-right: 17px;
+        }
+        @else {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 }
 
 

package/SCSS-Themes/inputs/input/tailwind3-lite.scss

@@ -6224,6 +6224,29 @@ $textarea-float-top: -24px !default;
       border-bottom: transparent;
     }
   }
+
+  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
+      padding: 0;
+  
+      input {
+        padding: 14px 2px 5px 12px;
+      }
+  
+      label.e-float-text {
+        padding-left: 12px;
+      }
+  
+      .e-input-in-wrap .e-input-group-icon {
+        @if $input-skin-name == 'material' {
+          padding-right: 17px;
+        }
+        @else {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 }
 
 

package/SCSS-Themes/inputs/input/tailwind3.scss

@@ -6224,6 +6224,29 @@ $textarea-float-top: -24px !default;
       border-bottom: transparent;
     }
   }
+
+  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
+      padding: 0;
+  
+      input {
+        padding: 14px 2px 5px 12px;
+      }
+  
+      label.e-float-text {
+        padding-left: 12px;
+      }
+  
+      .e-input-in-wrap .e-input-group-icon {
+        @if $input-skin-name == 'material' {
+          padding-right: 17px;
+        }
+        @else {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 }
 
 

package/SCSS-Themes/kanban/kanban/fluent2-dark-lite.scss

@@ -154,7 +154,7 @@ $kanban-color-card-border-left: 2px solid !default;
 $kanban-color-card-hover-border: $kanban-card-border !default;
 $kanban-color-card-hover-border-left: 2px solid !default;
 $kanban-color-card-hover-box-shadow: $shadow-lg !default;
-$kanban-color-card-focus-border: $kanban-card-border !default;
+$kanban-color-card-focus-border: 1px solid $primary !default;
 $kanban-color-card-focus-border-left: 2px solid !default;
 $kanban-color-card-tags-padding: 0 18px 0 18px !default;
 $kanban-card-tags-padding: 12px 18px 0 !default;

package/SCSS-Themes/kanban/kanban/fluent2-dark.scss

@@ -154,7 +154,7 @@ $kanban-color-card-border-left: 2px solid !default;
 $kanban-color-card-hover-border: $kanban-card-border !default;
 $kanban-color-card-hover-border-left: 2px solid !default;
 $kanban-color-card-hover-box-shadow: $shadow-lg !default;
-$kanban-color-card-focus-border: $kanban-card-border !default;
+$kanban-color-card-focus-border: 1px solid $primary !default;
 $kanban-color-card-focus-border-left: 2px solid !default;
 $kanban-color-card-tags-padding: 0 18px 0 18px !default;
 $kanban-card-tags-padding: 12px 18px 0 !default;

package/SCSS-Themes/kanban/kanban/fluent2-highcontrast-lite.scss

@@ -154,7 +154,7 @@ $kanban-color-card-border-left: 2px solid !default;
 $kanban-color-card-hover-border: $kanban-card-border !default;
 $kanban-color-card-hover-border-left: 2px solid !default;
 $kanban-color-card-hover-box-shadow: $shadow-lg !default;
-$kanban-color-card-focus-border: $kanban-card-border !default;
+$kanban-color-card-focus-border: 1px solid $primary !default;
 $kanban-color-card-focus-border-left: 2px solid !default;
 $kanban-color-card-tags-padding: 0 18px 0 18px !default;
 $kanban-card-tags-padding: 12px 18px 0 !default;

package/SCSS-Themes/kanban/kanban/fluent2-highcontrast.scss

@@ -154,7 +154,7 @@ $kanban-color-card-border-left: 2px solid !default;
 $kanban-color-card-hover-border: $kanban-card-border !default;
 $kanban-color-card-hover-border-left: 2px solid !default;
 $kanban-color-card-hover-box-shadow: $shadow-lg !default;
-$kanban-color-card-focus-border: $kanban-card-border !default;
+$kanban-color-card-focus-border: 1px solid $primary !default;
 $kanban-color-card-focus-border-left: 2px solid !default;
 $kanban-color-card-tags-padding: 0 18px 0 18px !default;
 $kanban-card-tags-padding: 12px 18px 0 !default;

package/SCSS-Themes/kanban/kanban/fluent2-lite.scss

@@ -154,7 +154,7 @@ $kanban-color-card-border-left: 2px solid !default;
 $kanban-color-card-hover-border: $kanban-card-border !default;
 $kanban-color-card-hover-border-left: 2px solid !default;
 $kanban-color-card-hover-box-shadow: $shadow-lg !default;
-$kanban-color-card-focus-border: $kanban-card-border !default;
+$kanban-color-card-focus-border: 1px solid $primary !default;
 $kanban-color-card-focus-border-left: 2px solid !default;
 $kanban-color-card-tags-padding: 0 18px 0 18px !default;
 $kanban-card-tags-padding: 12px 18px 0 !default;

package/SCSS-Themes/kanban/kanban/fluent2.scss

@@ -154,7 +154,7 @@ $kanban-color-card-border-left: 2px solid !default;
 $kanban-color-card-hover-border: $kanban-card-border !default;
 $kanban-color-card-hover-border-left: 2px solid !default;
 $kanban-color-card-hover-box-shadow: $shadow-lg !default;
-$kanban-color-card-focus-border: $kanban-card-border !default;
+$kanban-color-card-focus-border: 1px solid $primary !default;
 $kanban-color-card-focus-border-left: 2px solid !default;
 $kanban-color-card-tags-padding: 0 18px 0 18px !default;
 $kanban-card-tags-padding: 12px 18px 0 !default;

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

@@ -9270,6 +9270,29 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
       border-bottom: transparent;
     }
   }
+
+  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
+      padding: 0;
+  
+      input {
+        padding: 14px 2px 5px 12px;
+      }
+  
+      label.e-float-text {
+        padding-left: 12px;
+      }
+  
+      .e-input-in-wrap .e-input-group-icon {
+        @if $input-skin-name == 'material' {
+          padding-right: 17px;
+        }
+        @else {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 }
 
 
@@ -38529,6 +38552,12 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
               @else {
                 box-shadow: $tbar-ext-btn-focus-box-shadow;
               }
+              @if $skin-name == 'bootstrap5.3' {
+                .e-tbar-btn-text,
+                .e-icons.e-btn-icon {
+                  color: $tbar-default-icon-color;
+                }
+              }
             }
 
             @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
@@ -38552,6 +38581,13 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
               border-color: $tbar-ext-btn-hover-border-color;
               border-style: $tbar-border-nav-type;
               border-width: $tbar-btn-hover-border-size;
+
+              @if $skin-name == 'bootstrap5.3' {
+                .e-tbar-btn-text,
+                .e-icons.e-btn-icon {
+                  color: $tbar-btn-text-focus-color;
+                }
+              }
             }
   
             &:active {
@@ -45309,6 +45345,13 @@ $menu-header-icon-padding: 0 16px !default;
               }
               @if $skin-name == 'fluent2' {
                 border-radius: 4px;
+                &:focus-visible {
+                  color: $content-text-color;
+                  & .e-caret,
+                  & .e-menu-icon {
+                    color: $icon-color;
+                  }
+                }
               }
             }
           }
@@ -45359,9 +45402,11 @@ $menu-header-icon-padding: 0 16px !default;
 
           &:focus-visible {
             @if $skin-name == 'fluent2' {
-              border-radius: 4px;
-              background-color: $content-bg-color;
-              box-shadow: $shadow-focus-ring1;
+              &:not(.e-selected) {
+                border-radius: 4px;
+                background-color: $content-bg-color;
+                box-shadow: $shadow-focus-ring1;
+              }
             }
             @if $skin-name == 'tailwind3' {
               box-shadow: $shadow-focus-ring2;
@@ -45452,7 +45497,7 @@ $menu-header-icon-padding: 0 16px !default;
 
           &:focus-visible {
             @if $skin-name == 'fluent2' {
-              background-color: $content-bg-color;
+              background-color: $flyout-bg-color-focus;
               box-shadow: $shadow-focus-ring1;
               border-radius: 4px;
             }
@@ -103043,6 +103088,10 @@ $image-editor-button-width-mobile: calc(65% - 30px) !default;
   .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
     top: calc(50% + 60px);
   }
+
+  .e-image-editor.e-control.e-readonly {
+    opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+  }
 }