npm - @syncfusion/blazor-themes - Versions diffs - 26.1.35 → 26.1.40 - Mend

@syncfusion/blazor-themes 26.1.35 → 26.1.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (393) hide show

package/SCSS-Themes/image-editor/image-editor/bootstrap5.scss CHANGED Viewed

@@ -37,6 +37,7 @@ $image-editor-save-dlg-grp-btn-padding: 4px 12px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 6px 13px !default;
 $image-editor-button-label: 15px !default;
 $image-editor-icon-button: 4px !default;
+$image-editor-filter-canvas-focus: 2px solid $icon-color !default;
 @include export-module('image-editor-layout') {
   .e-ie-toolbar-upload-div.e-hide,
@@ -523,6 +524,14 @@ $image-editor-icon-button: 4px !default;
         }
       }
     }
+    & .e-ie-save-dialog .e-slider-container .e-slider .e-handle,
+    & .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+      @if $skin-name == 'Material3' {
+        height: 16px !important; /* stylelint-disable-line declaration-no-important */
+        top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+        width: 16px !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
   }
   .e-ie-img-save-dlg .e-btn {
@@ -728,12 +737,18 @@ $image-editor-icon-button: 4px !default;
     @if $skin-name == 'highcontrast' {
       margin-left: calc(100% - 175px);
     }
-    @if $skin-name == 'FluentUI' or $skin-name == 'material' or $skin-name == 'Material3' {
+    @if $skin-name == 'FluentUI' or $skin-name == 'material' {
       margin-left: calc(100% - 185px);
     }
     @if $skin-name == 'fabric' {
       margin-left: calc(100% - 180px);
     }
+    @if $skin-name == 'fluent2' {
+      margin-left: calc(100% - 188px);
+    }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 190px);
+    }
   }
   .e-device.e-ie-save-dialog .e-ie-img-size-value-span {
@@ -756,6 +771,9 @@ $image-editor-icon-button: 4px !default;
     @if $skin-name == 'bootstrap5' {
       margin-left: calc(100% - 156px) !important; /* stylelint-disable-line declaration-no-important */
     }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 140px) !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
   .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
@@ -853,7 +871,12 @@ $image-editor-icon-button: 4px !default;
     & .e-ie-img-size-value-span {
       vertical-align: middle;
-      margin-left: calc(50% - 55px);
+      @if $skin-name == 'Material3' {
+        margin-left: calc(50% - 52px);
+      }
+      @else {
+        margin-left: calc(50% - 55px);
+      }
     }
     & .e-btn-group .e-btn {
@@ -884,10 +907,10 @@ $image-editor-icon-button: 4px !default;
       }
       & .e-ie-img-size-value-span {
-        @if $skin-name == 'Material3' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
           margin-left: calc(75% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
-        @else if $skin-name == 'bootstrap' {
+        @else if $skin-name == 'Material3' or $skin-name == 'bootstrap' {
           margin-left: calc(73% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
         @else if $skin-name == 'tailwind' {
@@ -910,6 +933,12 @@ $image-editor-icon-button: 4px !default;
     }
   }
+  .e-bigger .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+    @if $skin-name == 'Material3' {
+      top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
   .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
     width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'tailwind' or $skin-name == 'material' or $skin-name == 'bootstrap4' {
@@ -1049,6 +1078,13 @@ $image-editor-icon-button: 4px !default;
   }
 }
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: $image-editor-filter-canvas-focus;
+}
 @include export-module('image-editor-bootstrap5-icons') {
   .e-image-editor {

package/SCSS-Themes/image-editor/image-editor/fabric-dark.scss CHANGED Viewed

@@ -37,6 +37,7 @@ $image-editor-save-dlg-big-btn-pad: 2px 11px !default;
 $image-editor-save-dlg-grp-btn-padding: 2px 10px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 2px 8px !default;
 $image-editor-icon-button: 4px !default;
+$image-editor-filter-canvas-focus: 1px solid $neutral-light-fontalt !default;
 @include export-module('image-editor-layout') {
   .e-ie-toolbar-upload-div.e-hide,
@@ -523,6 +524,14 @@ $image-editor-icon-button: 4px !default;
         }
       }
     }
+    & .e-ie-save-dialog .e-slider-container .e-slider .e-handle,
+    & .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+      @if $skin-name == 'Material3' {
+        height: 16px !important; /* stylelint-disable-line declaration-no-important */
+        top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+        width: 16px !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
   }
   .e-ie-img-save-dlg .e-btn {
@@ -728,12 +737,18 @@ $image-editor-icon-button: 4px !default;
     @if $skin-name == 'highcontrast' {
       margin-left: calc(100% - 175px);
     }
-    @if $skin-name == 'FluentUI' or $skin-name == 'material' or $skin-name == 'Material3' {
+    @if $skin-name == 'FluentUI' or $skin-name == 'material' {
       margin-left: calc(100% - 185px);
     }
     @if $skin-name == 'fabric' {
       margin-left: calc(100% - 180px);
     }
+    @if $skin-name == 'fluent2' {
+      margin-left: calc(100% - 188px);
+    }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 190px);
+    }
   }
   .e-device.e-ie-save-dialog .e-ie-img-size-value-span {
@@ -756,6 +771,9 @@ $image-editor-icon-button: 4px !default;
     @if $skin-name == 'bootstrap5' {
       margin-left: calc(100% - 156px) !important; /* stylelint-disable-line declaration-no-important */
     }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 140px) !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
   .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
@@ -853,7 +871,12 @@ $image-editor-icon-button: 4px !default;
     & .e-ie-img-size-value-span {
       vertical-align: middle;
-      margin-left: calc(50% - 55px);
+      @if $skin-name == 'Material3' {
+        margin-left: calc(50% - 52px);
+      }
+      @else {
+        margin-left: calc(50% - 55px);
+      }
     }
     & .e-btn-group .e-btn {
@@ -884,10 +907,10 @@ $image-editor-icon-button: 4px !default;
       }
       & .e-ie-img-size-value-span {
-        @if $skin-name == 'Material3' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
           margin-left: calc(75% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
-        @else if $skin-name == 'bootstrap' {
+        @else if $skin-name == 'Material3' or $skin-name == 'bootstrap' {
           margin-left: calc(73% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
         @else if $skin-name == 'tailwind' {
@@ -910,6 +933,12 @@ $image-editor-icon-button: 4px !default;
     }
   }
+  .e-bigger .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+    @if $skin-name == 'Material3' {
+      top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
   .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
     width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'tailwind' or $skin-name == 'material' or $skin-name == 'bootstrap4' {
@@ -1049,6 +1078,13 @@ $image-editor-icon-button: 4px !default;
   }
 }
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: $image-editor-filter-canvas-focus;
+}
 @include export-module('image-editor-fabric-dark-icons') {
   .e-image-editor {

package/SCSS-Themes/image-editor/image-editor/fabric.scss CHANGED Viewed

@@ -37,6 +37,7 @@ $image-editor-save-dlg-big-btn-pad: 2px 11px !default;
 $image-editor-save-dlg-grp-btn-padding: 2px 10px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 2px 8px !default;
 $image-editor-icon-button: 4px !default;
+$image-editor-filter-canvas-focus: 1px solid $neutral-light-fontalt !default;
 @include export-module('image-editor-layout') {
   .e-ie-toolbar-upload-div.e-hide,
@@ -523,6 +524,14 @@ $image-editor-icon-button: 4px !default;
         }
       }
     }
+    & .e-ie-save-dialog .e-slider-container .e-slider .e-handle,
+    & .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+      @if $skin-name == 'Material3' {
+        height: 16px !important; /* stylelint-disable-line declaration-no-important */
+        top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+        width: 16px !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
   }
   .e-ie-img-save-dlg .e-btn {
@@ -728,12 +737,18 @@ $image-editor-icon-button: 4px !default;
     @if $skin-name == 'highcontrast' {
       margin-left: calc(100% - 175px);
     }
-    @if $skin-name == 'FluentUI' or $skin-name == 'material' or $skin-name == 'Material3' {
+    @if $skin-name == 'FluentUI' or $skin-name == 'material' {
       margin-left: calc(100% - 185px);
     }
     @if $skin-name == 'fabric' {
       margin-left: calc(100% - 180px);
     }
+    @if $skin-name == 'fluent2' {
+      margin-left: calc(100% - 188px);
+    }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 190px);
+    }
   }
   .e-device.e-ie-save-dialog .e-ie-img-size-value-span {
@@ -756,6 +771,9 @@ $image-editor-icon-button: 4px !default;
     @if $skin-name == 'bootstrap5' {
       margin-left: calc(100% - 156px) !important; /* stylelint-disable-line declaration-no-important */
     }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 140px) !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
   .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
@@ -853,7 +871,12 @@ $image-editor-icon-button: 4px !default;
     & .e-ie-img-size-value-span {
       vertical-align: middle;
-      margin-left: calc(50% - 55px);
+      @if $skin-name == 'Material3' {
+        margin-left: calc(50% - 52px);
+      }
+      @else {
+        margin-left: calc(50% - 55px);
+      }
     }
     & .e-btn-group .e-btn {
@@ -884,10 +907,10 @@ $image-editor-icon-button: 4px !default;
       }
       & .e-ie-img-size-value-span {
-        @if $skin-name == 'Material3' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
           margin-left: calc(75% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
-        @else if $skin-name == 'bootstrap' {
+        @else if $skin-name == 'Material3' or $skin-name == 'bootstrap' {
           margin-left: calc(73% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
         @else if $skin-name == 'tailwind' {
@@ -910,6 +933,12 @@ $image-editor-icon-button: 4px !default;
     }
   }
+  .e-bigger .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+    @if $skin-name == 'Material3' {
+      top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
   .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
     width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'tailwind' or $skin-name == 'material' or $skin-name == 'bootstrap4' {
@@ -1049,6 +1078,13 @@ $image-editor-icon-button: 4px !default;
   }
 }
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: $image-editor-filter-canvas-focus;
+}
 @include export-module('image-editor-fabric-icons') {
   .e-image-editor {

package/SCSS-Themes/image-editor/image-editor/fluent-dark.scss CHANGED Viewed

@@ -37,6 +37,7 @@ $image-editor-save-dlg-big-btn-pad: 4px 15px !default;
 $image-editor-save-dlg-grp-btn-padding: 4px 11px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 7px 10px !default;
 $image-editor-icon-button: 5px !default;
+$image-editor-filter-canvas-focus: 1px solid $secondary-text-color !default;
 @include export-module('image-editor-layout') {
   .e-ie-toolbar-upload-div.e-hide,
@@ -523,6 +524,14 @@ $image-editor-icon-button: 5px !default;
         }
       }
     }
+    & .e-ie-save-dialog .e-slider-container .e-slider .e-handle,
+    & .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+      @if $skin-name == 'Material3' {
+        height: 16px !important; /* stylelint-disable-line declaration-no-important */
+        top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+        width: 16px !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
   }
   .e-ie-img-save-dlg .e-btn {
@@ -728,12 +737,18 @@ $image-editor-icon-button: 5px !default;
     @if $skin-name == 'highcontrast' {
       margin-left: calc(100% - 175px);
     }
-    @if $skin-name == 'FluentUI' or $skin-name == 'material' or $skin-name == 'Material3' {
+    @if $skin-name == 'FluentUI' or $skin-name == 'material' {
       margin-left: calc(100% - 185px);
     }
     @if $skin-name == 'fabric' {
       margin-left: calc(100% - 180px);
     }
+    @if $skin-name == 'fluent2' {
+      margin-left: calc(100% - 188px);
+    }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 190px);
+    }
   }
   .e-device.e-ie-save-dialog .e-ie-img-size-value-span {
@@ -756,6 +771,9 @@ $image-editor-icon-button: 5px !default;
     @if $skin-name == 'bootstrap5' {
       margin-left: calc(100% - 156px) !important; /* stylelint-disable-line declaration-no-important */
     }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 140px) !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
   .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
@@ -853,7 +871,12 @@ $image-editor-icon-button: 5px !default;
     & .e-ie-img-size-value-span {
       vertical-align: middle;
-      margin-left: calc(50% - 55px);
+      @if $skin-name == 'Material3' {
+        margin-left: calc(50% - 52px);
+      }
+      @else {
+        margin-left: calc(50% - 55px);
+      }
     }
     & .e-btn-group .e-btn {
@@ -884,10 +907,10 @@ $image-editor-icon-button: 5px !default;
       }
       & .e-ie-img-size-value-span {
-        @if $skin-name == 'Material3' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
           margin-left: calc(75% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
-        @else if $skin-name == 'bootstrap' {
+        @else if $skin-name == 'Material3' or $skin-name == 'bootstrap' {
           margin-left: calc(73% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
         @else if $skin-name == 'tailwind' {
@@ -910,6 +933,12 @@ $image-editor-icon-button: 5px !default;
     }
   }
+  .e-bigger .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+    @if $skin-name == 'Material3' {
+      top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
   .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
     width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'tailwind' or $skin-name == 'material' or $skin-name == 'bootstrap4' {
@@ -1049,6 +1078,13 @@ $image-editor-icon-button: 5px !default;
   }
 }
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: $image-editor-filter-canvas-focus;
+}
 @include export-module('image-editor-fluent-icons') {
   .e-image-editor {

package/SCSS-Themes/image-editor/image-editor/fluent.scss CHANGED Viewed

@@ -37,6 +37,7 @@ $image-editor-save-dlg-big-btn-pad: 4px 15px !default;
 $image-editor-save-dlg-grp-btn-padding: 4px 11px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 7px 10px !default;
 $image-editor-icon-button: 5px !default;
+$image-editor-filter-canvas-focus: 1px solid $secondary-text-color !default;
 @include export-module('image-editor-layout') {
   .e-ie-toolbar-upload-div.e-hide,
@@ -523,6 +524,14 @@ $image-editor-icon-button: 5px !default;
         }
       }
     }
+    & .e-ie-save-dialog .e-slider-container .e-slider .e-handle,
+    & .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+      @if $skin-name == 'Material3' {
+        height: 16px !important; /* stylelint-disable-line declaration-no-important */
+        top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+        width: 16px !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
   }
   .e-ie-img-save-dlg .e-btn {
@@ -728,12 +737,18 @@ $image-editor-icon-button: 5px !default;
     @if $skin-name == 'highcontrast' {
       margin-left: calc(100% - 175px);
     }
-    @if $skin-name == 'FluentUI' or $skin-name == 'material' or $skin-name == 'Material3' {
+    @if $skin-name == 'FluentUI' or $skin-name == 'material' {
       margin-left: calc(100% - 185px);
     }
     @if $skin-name == 'fabric' {
       margin-left: calc(100% - 180px);
     }
+    @if $skin-name == 'fluent2' {
+      margin-left: calc(100% - 188px);
+    }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 190px);
+    }
   }
   .e-device.e-ie-save-dialog .e-ie-img-size-value-span {
@@ -756,6 +771,9 @@ $image-editor-icon-button: 5px !default;
     @if $skin-name == 'bootstrap5' {
       margin-left: calc(100% - 156px) !important; /* stylelint-disable-line declaration-no-important */
     }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 140px) !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
   .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
@@ -853,7 +871,12 @@ $image-editor-icon-button: 5px !default;
     & .e-ie-img-size-value-span {
       vertical-align: middle;
-      margin-left: calc(50% - 55px);
+      @if $skin-name == 'Material3' {
+        margin-left: calc(50% - 52px);
+      }
+      @else {
+        margin-left: calc(50% - 55px);
+      }
     }
     & .e-btn-group .e-btn {
@@ -884,10 +907,10 @@ $image-editor-icon-button: 5px !default;
       }
       & .e-ie-img-size-value-span {
-        @if $skin-name == 'Material3' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
           margin-left: calc(75% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
-        @else if $skin-name == 'bootstrap' {
+        @else if $skin-name == 'Material3' or $skin-name == 'bootstrap' {
           margin-left: calc(73% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
         @else if $skin-name == 'tailwind' {
@@ -910,6 +933,12 @@ $image-editor-icon-button: 5px !default;
     }
   }
+  .e-bigger .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+    @if $skin-name == 'Material3' {
+      top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
   .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
     width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'tailwind' or $skin-name == 'material' or $skin-name == 'bootstrap4' {
@@ -1049,6 +1078,13 @@ $image-editor-icon-button: 5px !default;
   }
 }
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: $image-editor-filter-canvas-focus;
+}
 @include export-module('image-editor-fluent-icons') {
   .e-image-editor {

package/SCSS-Themes/image-editor/image-editor/fluent2-dark.scss CHANGED Viewed

@@ -37,6 +37,7 @@ $image-editor-save-dlg-big-btn-pad: 8px !default;
 $image-editor-save-dlg-grp-btn-padding: 5.2px 10.5px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 5.2px 10.5px !default;
 $image-editor-icon-button: 5px !default;
+$image-editor-filter-canvas-focus: 1px solid $secondary-text-color !default;
 @include export-module('image-editor-layout') {
   .e-ie-toolbar-upload-div.e-hide,
@@ -523,6 +524,14 @@ $image-editor-icon-button: 5px !default;
         }
       }
     }
+    & .e-ie-save-dialog .e-slider-container .e-slider .e-handle,
+    & .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+      @if $skin-name == 'Material3' {
+        height: 16px !important; /* stylelint-disable-line declaration-no-important */
+        top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+        width: 16px !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
   }
   .e-ie-img-save-dlg .e-btn {
@@ -728,12 +737,18 @@ $image-editor-icon-button: 5px !default;
     @if $skin-name == 'highcontrast' {
       margin-left: calc(100% - 175px);
     }
-    @if $skin-name == 'FluentUI' or $skin-name == 'material' or $skin-name == 'Material3' {
+    @if $skin-name == 'FluentUI' or $skin-name == 'material' {
       margin-left: calc(100% - 185px);
     }
     @if $skin-name == 'fabric' {
       margin-left: calc(100% - 180px);
     }
+    @if $skin-name == 'fluent2' {
+      margin-left: calc(100% - 188px);
+    }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 190px);
+    }
   }
   .e-device.e-ie-save-dialog .e-ie-img-size-value-span {
@@ -756,6 +771,9 @@ $image-editor-icon-button: 5px !default;
     @if $skin-name == 'bootstrap5' {
       margin-left: calc(100% - 156px) !important; /* stylelint-disable-line declaration-no-important */
     }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 140px) !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
   .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
@@ -853,7 +871,12 @@ $image-editor-icon-button: 5px !default;
     & .e-ie-img-size-value-span {
       vertical-align: middle;
-      margin-left: calc(50% - 55px);
+      @if $skin-name == 'Material3' {
+        margin-left: calc(50% - 52px);
+      }
+      @else {
+        margin-left: calc(50% - 55px);
+      }
     }
     & .e-btn-group .e-btn {
@@ -884,10 +907,10 @@ $image-editor-icon-button: 5px !default;
       }
       & .e-ie-img-size-value-span {
-        @if $skin-name == 'Material3' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
           margin-left: calc(75% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
-        @else if $skin-name == 'bootstrap' {
+        @else if $skin-name == 'Material3' or $skin-name == 'bootstrap' {
           margin-left: calc(73% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
         @else if $skin-name == 'tailwind' {
@@ -910,6 +933,12 @@ $image-editor-icon-button: 5px !default;
     }
   }
+  .e-bigger .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+    @if $skin-name == 'Material3' {
+      top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
   .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
     width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'tailwind' or $skin-name == 'material' or $skin-name == 'bootstrap4' {
@@ -1049,6 +1078,13 @@ $image-editor-icon-button: 5px !default;
   }
 }
+.e-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: $image-editor-filter-canvas-focus;
+}
 @include export-module('image-editor-fluent2-icons') {
   .e-image-editor {