@syncfusion/blazor-themes 28.2.3 → 28.2.5

package/SCSS-Themes/bds-dark.scss

@@ -10719,6 +10719,29 @@ $input-error-text-color:$danger !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;
+        }
+      }
+    }
+  }
 }
 
 
@@ -53617,6 +53640,12 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
               @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') {
@@ -53640,6 +53669,13 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
               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 {
@@ -62487,6 +62523,13 @@ $menu-caret-color: $cmenu-caret-color !default;
               }
               @if $skin-name == 'fluent2' {
                 border-radius: 4px;
+                &:focus-visible {
+                  color: $content-text-color;
+                  & .e-caret,
+                  & .e-menu-icon {
+                    color: $icon-color;
+                  }
+                }
               }
             }
           }
@@ -62537,9 +62580,11 @@ $menu-caret-color: $cmenu-caret-color !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;
@@ -62630,7 +62675,7 @@ $menu-caret-color: $cmenu-caret-color !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;
             }
@@ -134891,6 +134936,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 */
+  }
 }
 
 

package/SCSS-Themes/bds-lite.scss

@@ -10180,6 +10180,29 @@ $input-error-text-color:$danger !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;
+        }
+      }
+    }
+  }
 }
 
 
@@ -39668,6 +39691,12 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
               @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') {
@@ -39691,6 +39720,13 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
               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 {
@@ -46533,6 +46569,13 @@ $menu-caret-color: $cmenu-caret-color !default;
               }
               @if $skin-name == 'fluent2' {
                 border-radius: 4px;
+                &:focus-visible {
+                  color: $content-text-color;
+                  & .e-caret,
+                  & .e-menu-icon {
+                    color: $icon-color;
+                  }
+                }
               }
             }
           }
@@ -46583,9 +46626,11 @@ $menu-caret-color: $cmenu-caret-color !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;
@@ -46676,7 +46721,7 @@ $menu-caret-color: $cmenu-caret-color !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;
             }
@@ -103998,6 +104043,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 */
+  }
 }
 
 

package/SCSS-Themes/bds.scss

@@ -11014,6 +11014,29 @@ $input-error-text-color:$danger !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;
+        }
+      }
+    }
+  }
 }
 
 
@@ -53912,6 +53935,12 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
               @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') {
@@ -53935,6 +53964,13 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
               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 {
@@ -62782,6 +62818,13 @@ $menu-caret-color: $cmenu-caret-color !default;
               }
               @if $skin-name == 'fluent2' {
                 border-radius: 4px;
+                &:focus-visible {
+                  color: $content-text-color;
+                  & .e-caret,
+                  & .e-menu-icon {
+                    color: $icon-color;
+                  }
+                }
               }
             }
           }
@@ -62832,9 +62875,11 @@ $menu-caret-color: $cmenu-caret-color !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;
@@ -62925,7 +62970,7 @@ $menu-caret-color: $cmenu-caret-color !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;
             }
@@ -135186,6 +135231,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 */
+  }
 }
 
 

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

@@ -9035,6 +9035,29 @@ $float-label-rtl-value: -7px !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;
+        }
+      }
+    }
+  }
 }
 
 
@@ -38085,6 +38108,12 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
               @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') {
@@ -38108,6 +38137,13 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
               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 {
@@ -44855,6 +44891,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;
+                  }
+                }
               }
             }
           }
@@ -44905,9 +44948,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;
@@ -44998,7 +45043,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;
             }
@@ -102215,6 +102260,10 @@ $image-editor-button-width-mobile: calc(66% - 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 */
+  }
 }
 
 

package/SCSS-Themes/bootstrap-dark.scss

@@ -9869,6 +9869,29 @@ $float-label-rtl-value: -7px !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;
+        }
+      }
+    }
+  }
 }
 
 
@@ -52329,6 +52352,12 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
               @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') {
@@ -52352,6 +52381,13 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
               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 {
@@ -61104,6 +61140,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;
+                  }
+                }
               }
             }
           }
@@ -61154,9 +61197,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;
@@ -61247,7 +61292,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;
             }
@@ -133403,6 +133448,10 @@ $image-editor-button-width-mobile: calc(66% - 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 */
+  }
 }
 
 

package/SCSS-Themes/bootstrap-lite.scss

@@ -9020,6 +9020,29 @@ $float-label-rtl-value: -7px !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;
+        }
+      }
+    }
+  }
 }
 
 
@@ -37859,6 +37882,12 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
               @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') {
@@ -37882,6 +37911,13 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
               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 {
@@ -44629,6 +44665,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;
+                  }
+                }
               }
             }
           }
@@ -44679,9 +44722,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;
@@ -44772,7 +44817,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;
             }
@@ -102034,6 +102079,10 @@ $image-editor-button-width-mobile: calc(66% - 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 */
+  }
 }