@syncfusion/ej2-image-editor 31.2.12 → 32.1.19

package/styles/image-editor/_bds-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
 $image-editor-background: $border-light !default;
 $image-editor-border: 1px solid $border-light !default;
 $image-editor-toolbar-icon-color: $icon-color !default;
@@ -27,3 +29,52 @@ $image-editor-icon-button: 3px !default;
 $image-editor-filter-canvas-focus: $gray-25 !default;
 $image-editor-button-label-mobile: 9px !default;
 $image-editor-button-width-mobile: calc(65% - 30px) !default;
+$ie-toolbar-img-font-style-margin-left: 0 !default;
+$ie-scroll-device-padding-right: 0 !default;
+$ie-quality-option-slider-container-margin-left: 0 !default;
+$ie-spin-btn-margin: 0 !default;
+$ie-drop-area-border-radius: 10px !default;
+$ie-drop-area-margin: 10px !default;
+$ie-drop-icon-font-size: 50px !default;
+$ie-drop-content-font-size: 14px !default;
+$ie-drop-info-font-size: 14px !default;
+$ie-min-drop-content-font-size: 14px !default;
+$ie-toolbar-item-margin-left: 20px !default;
+$ie-file-select-padding: 0 !default;
+$ie-font-color-caret-margin-top: -4px !default;
+$ie-caret-font-size: 10px !default;
+$ie-toolbar-left-line-height: 1 !default;
+$ie-toolbar-item-span-font-weight: 500 !default;
+$ie-toolbar-item-span-margin: 4px !default;
+$ie-dropdown-btn-margin: 0 auto !default;
+$ie-toolbar-item-canvas-border: 2px solid transparent !default;
+$ie-straighten-font-size: 14px !default;
+$ie-straighten-padding-x: 10px !default;
+$ie-straighten-slider-padding-right: 2px !default;
+$ie-straighten-slider-margin-left: 8px !default;
+$ie-quality-slider-icon-margin-left: 20px !default;
+$ie-img-size-margin: 10px 10px 0 !default;
+$ie-img-size-font-size: 14px !default;
+$ie-img-save-name-margin-right: 10px !default;
+$ie-img-label-name-margin-bottom: 5px !default;
+$ie-quality-info-margin: 0 !default;
+$ie-quality-span-margin-left: 5px !default;
+$ie-img-size-value-span-margin-top: 4px !default;
+$ie-img-icon-btn-margin-left: 10px !default;
+$ie-quality-option-icon-margin-left: 0 !default;
+$ie-finetune-font-size: 14px !default;
+$ie-finetune-line-height: 20px !default;
+$ie-finetune-letter-spacing: normal !default;
+$ie-finetune-font-weight: 400 !default;
+$ie-finetune-slider-container: 0 16px 1px 16px !default;
+$ie-default-toolbar-font-size: 12px !default;
+$ie-bigger-default-toolbar-font-size: 14px !default;
+$ie-tbtn-txt-padding: 0 !default;
+$ie-head-wrapper-height: 58px !default;
+$ie-dropdownbtn-preview-size: 18px !default;
+$ie-bigger-caret-margin-top: -4px !default;
+$ie-bigger-dropdown-caret-font-size: 10px !default;
+$ie-bigger-toolbar-left-line-height: 1 !default;
+$ie-bigger-device-finetune-font-size: 16px !default;
+$ie-bigger-device-finetune-line-height: 24px !default;
+$ie-bigger-head-wrapper-height: 58px !default;

package/styles/image-editor/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('image-editor-bigger') {
   .e-bigger .e-image-editor,
   .e-image-editor.e-bigger {
@@ -10,6 +12,13 @@
         }
       }
 
+      & .e-ie-head-wrapper {
+        align-content: center;
+        text-align: center;
+        height: auto;
+        min-height: $ie-bigger-head-wrapper-height;
+      }
+
       & .e-toolbar {
         @if $skin-name == 'Material3' {
           height: 140px !important; /* stylelint-disable-line declaration-no-important */
@@ -17,6 +26,9 @@
         @else {
           height: 130px !important; /* stylelint-disable-line declaration-no-important */
         }
+        @if $skin-name == 'tailwind3' {
+          height: auto !important; /* stylelint-disable-line declaration-no-important */
+        }
       }
 
       & .e-frame-wrapper .e-toolbar,
@@ -25,10 +37,19 @@
       }
     }
     
+    & .e-toolbar-area .e-toolbar {
+      @if $skin-name == 'tailwind3' {
+        border-radius: $ie-bigger-toolbar-border-radius;
+      }
+    }
+
     & .e-toolbar {
       height: $image-editor-bigger-tbar-height !important; /* stylelint-disable-line declaration-no-important */
       min-height: $image-editor-bigger-tbar-height !important; /* stylelint-disable-line declaration-no-important */
-
+      @if $skin-name == 'tailwind3' {
+        height: auto !important; /* stylelint-disable-line declaration-no-important */
+      }
+      
       & .e-toolbar-items {
         @if $skin-name == 'material' {
           height: $image-editor-bigger-tbar-height !important; /* stylelint-disable-line declaration-no-important */
@@ -39,8 +60,12 @@
       & .e-toolbar-items {
         & .e-toolbar-item {
           &.e-ie-resize-height span,
-          &.e-ie-resize-width span {
-            font-size: 16px;
+          &.e-ie-resize-width span,
+          & .filter-wrapper,
+          &.e-stroke,
+          &.e-frame-stroke,
+          &.e-size {
+            font-size: $ie-bigger-default-toolbar-font-size;
           }
         }
       }
@@ -82,14 +107,18 @@
         & .e-text-font-color.e-template {
           & .e-dropdown-btn {
             & .e-icons.e-caret {
-              margin-top: -4px;
+              @if $skin-name != 'tailwind3' {
+                margin-top: $ie-bigger-caret-margin-top;
+              }
             }
           }
         }
 
         & .e-btn-icon.e-dropdownbtn-preview {
-          margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
-          margin-left: $image-editor-bigger-dropdown-btn-preview-left;
+          @if $skin-name != 'tailwind3' {
+            margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+            margin-left: $image-editor-bigger-dropdown-btn-preview-left;
+          }
         }
 
         & .e-dropdown-btn.e-icon-btn {
@@ -105,7 +134,7 @@
             font-size: $image-editor-bigger-tbar-btn-fontsize;
 
             & .e-icons.e-caret {
-              font-size: 10px;
+              font-size: $ie-bigger-dropdown-caret-font-size;
             }
           }
         }
@@ -115,14 +144,14 @@
             font-size: $image-editor-bigger-tbar-btn-fontsize;
 
             & .e-icons.e-caret {
-              font-size: 10px;
+              font-size: $ie-bigger-dropdown-caret-font-size;
             }
           }
         }
 
         &.e-tbar-pos {
           .e-toolbar-left {
-            line-height: 1;
+            line-height: $ie-bigger-toolbar-left-line-height;
           }
         }
       }
@@ -134,6 +163,29 @@
       }
     }
 
+    & .e-ie-save-dialog .e-ie-img-size {
+      @if $skin-name == 'tailwind3' {
+        font-size: $ie-bigger-img-size-font-size;
+        line-height: $ie-bigger-img-size-line-height;
+        margin: $ie-bigger-img-size-margin-top;
+      }
+    }
+
+    & .e-quick-access-toolbar-area .e-toolbar {
+      @if $skin-name == 'tailwind3' {
+        border-radius: $ie-bigger-qat-toolbar-border-radius;
+      }
+    }
+
+    & .e-ie-finetune-slider-label,
+    & .e-ie-finetune-value-span,
+    & .e-ie-redact-value-span {
+      font-size: $ie-bigger-device-finetune-font-size;
+      line-height: $ie-bigger-device-finetune-line-height;
+      letter-spacing: $ie-finetune-letter-spacing;
+      font-weight: $ie-finetune-letter-spacing;
+    }
+
     & .e-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-dropdown-btn,
     & .e-blr-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-dropdown-btn {
       @if $skin-name == 'Material3' {

package/styles/image-editor/_bootstrap-dark-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
 $image-editor-background: $grey-e6 !default;
 $image-editor-border: 1px solid $grey-cc !default;
 $image-editor-toolbar-icon-color: $grey-dark-font !default;
@@ -27,3 +29,52 @@ $image-editor-icon-button: 3px !default;
 $image-editor-filter-canvas-focus: $grey-dark-font !default;
 $image-editor-button-label-mobile: 12px !default;
 $image-editor-button-width-mobile: calc(66% - 30px) !default;
+$ie-toolbar-img-font-style-margin-left: 0 !default;
+$ie-scroll-device-padding-right: 0 !default;
+$ie-quality-option-slider-container-margin-left: 0 !default;
+$ie-spin-btn-margin: 0 !default;
+$ie-drop-area-border-radius: 10px !default;
+$ie-drop-area-margin: 10px !default;
+$ie-drop-icon-font-size: 50px !default;
+$ie-drop-content-font-size: 14px !default;
+$ie-drop-info-font-size: 14px !default;
+$ie-min-drop-content-font-size: 14px !default;
+$ie-toolbar-item-margin-left: 20px !default;
+$ie-file-select-padding: 0 !default;
+$ie-font-color-caret-margin-top: -4px !default;
+$ie-caret-font-size: 10px !default;
+$ie-toolbar-left-line-height: 1 !default;
+$ie-toolbar-item-span-font-weight: 500 !default;
+$ie-toolbar-item-span-margin: 4px !default;
+$ie-dropdown-btn-margin: 0 auto !default;
+$ie-toolbar-item-canvas-border: 2px solid transparent !default;
+$ie-straighten-font-size: 14px !default;
+$ie-straighten-padding-x: 10px !default;
+$ie-straighten-slider-padding-right: 2px !default;
+$ie-straighten-slider-margin-left: 8px !default;
+$ie-quality-slider-icon-margin-left: 20px !default;
+$ie-img-size-margin: 10px 10px 0 !default;
+$ie-img-size-font-size: 14px !default;
+$ie-img-save-name-margin-right: 10px !default;
+$ie-img-label-name-margin-bottom: 5px !default;
+$ie-quality-info-margin: 0 !default;
+$ie-quality-span-margin-left: 5px !default;
+$ie-img-size-value-span-margin-top: 4px !default;
+$ie-img-icon-btn-margin-left: 10px !default;
+$ie-quality-option-icon-margin-left: 0 !default;
+$ie-finetune-font-size: 14px !default;
+$ie-finetune-line-height: 20px !default;
+$ie-finetune-letter-spacing: normal !default;
+$ie-finetune-font-weight: 400 !default;
+$ie-finetune-slider-container: 0 16px 1px 16px !default;
+$ie-default-toolbar-font-size: 12px !default;
+$ie-bigger-default-toolbar-font-size: 14px !default;
+$ie-tbtn-txt-padding: 0 !default;
+$ie-head-wrapper-height: 58px !default;
+$ie-dropdownbtn-preview-size: 18px !default;
+$ie-bigger-caret-margin-top: -4px !default;
+$ie-bigger-dropdown-caret-font-size: 10px !default;
+$ie-bigger-toolbar-left-line-height: 1 !default;
+$ie-bigger-device-finetune-font-size: 16px !default;
+$ie-bigger-device-finetune-line-height: 24px !default;
+$ie-bigger-head-wrapper-height: 58px !default;

package/styles/image-editor/_bootstrap-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 $image-editor-background: $grey-e6 !default;
 $image-editor-border: 1px solid $grey-cc !default;
 $image-editor-toolbar-icon-color: $gray-dark !default;
@@ -27,3 +29,52 @@ $image-editor-icon-button: 2px !default;
 $image-editor-filter-canvas-focus: $grey-light-font !default;
 $image-editor-button-label-mobile: 12px !default;
 $image-editor-button-width-mobile: calc(66% - 30px) !default;
+$ie-toolbar-img-font-style-margin-left: 0 !default;
+$ie-scroll-device-padding-right: 0 !default;
+$ie-quality-option-slider-container-margin-left: 0 !default;
+$ie-spin-btn-margin: 0 !default;
+$ie-drop-area-border-radius: 10px !default;
+$ie-drop-area-margin: 10px !default;
+$ie-drop-icon-font-size: 50px !default;
+$ie-drop-content-font-size: 14px !default;
+$ie-drop-info-font-size: 14px !default;
+$ie-min-drop-content-font-size: 14px !default;
+$ie-toolbar-item-margin-left: 20px !default;
+$ie-file-select-padding: 0 !default;
+$ie-font-color-caret-margin-top: -4px !default;
+$ie-caret-font-size: 10px !default;
+$ie-toolbar-left-line-height: 1 !default;
+$ie-toolbar-item-span-font-weight: 500 !default;
+$ie-toolbar-item-span-margin: 4px !default;
+$ie-dropdown-btn-margin: 0 auto !default;
+$ie-toolbar-item-canvas-border: 2px solid transparent !default;
+$ie-straighten-font-size: 14px !default;
+$ie-straighten-padding-x: 10px !default;
+$ie-straighten-slider-padding-right: 2px !default;
+$ie-straighten-slider-margin-left: 8px !default;
+$ie-quality-slider-icon-margin-left: 20px !default;
+$ie-img-size-margin: 10px 10px 0 !default;
+$ie-img-size-font-size: 14px !default;
+$ie-img-save-name-margin-right: 10px !default;
+$ie-img-label-name-margin-bottom: 5px !default;
+$ie-quality-info-margin: 0 !default;
+$ie-quality-span-margin-left: 5px !default;
+$ie-img-size-value-span-margin-top: 4px !default;
+$ie-img-icon-btn-margin-left: 10px !default;
+$ie-quality-option-icon-margin-left: 0 !default;
+$ie-finetune-font-size: 14px !default;
+$ie-finetune-line-height: 20px !default;
+$ie-finetune-letter-spacing: normal !default;
+$ie-finetune-font-weight: 400 !default;
+$ie-finetune-slider-container: 0 16px 1px 16px !default;
+$ie-default-toolbar-font-size: 12px !default;
+$ie-bigger-default-toolbar-font-size: 14px !default;
+$ie-tbtn-txt-padding: 0 !default;
+$ie-head-wrapper-height: 58px !default;
+$ie-dropdownbtn-preview-size: 18px !default;
+$ie-bigger-caret-margin-top: -4px !default;
+$ie-bigger-dropdown-caret-font-size: 10px !default;
+$ie-bigger-toolbar-left-line-height: 1 !default;
+$ie-bigger-device-finetune-font-size: 16px !default;
+$ie-bigger-device-finetune-line-height: 24px !default;
+$ie-bigger-head-wrapper-height: 58px !default;

package/styles/image-editor/_bootstrap4-definition.scss

@@ -1,3 +1,6 @@
+@use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 $image-editor-background: $gray-200 !default;
 $image-editor-border: 1px solid $gray-300 !default;
 $image-editor-toolbar-icon-color: $gray-700 !default;
@@ -27,3 +30,55 @@ $image-editor-icon-button: 2px !default;
 $image-editor-filter-canvas-focus: $black !default;
 $image-editor-button-label-mobile: 12px !default;
 $image-editor-button-width-mobile: calc(66% - 30px) !default;
+$ie-toolbar-img-font-style-margin-left: 0 !default;
+$ie-scroll-device-padding-right: 0 !default;
+$ie-quality-option-slider-container-margin-left: 0 !default;
+$ie-spin-btn-margin: 0 !default;
+$ie-drop-area-border-radius: 10px !default;
+$ie-drop-area-margin: 10px !default;
+$ie-drop-icon-font-size: 50px !default;
+$ie-drop-content-font-size: 14px !default;
+$ie-drop-info-font-size: 14px !default;
+$ie-min-drop-content-font-size: 14px !default;
+$ie-toolbar-item-margin-left: 20px !default;
+$ie-file-select-padding: 0 !default;
+$ie-font-color-caret-margin-top: -4px !default;
+$ie-caret-font-size: 10px !default;
+$ie-toolbar-left-line-height: 1 !default;
+$ie-toolbar-item-span-font-weight: 500 !default;
+$ie-toolbar-item-span-margin: 4px !default;
+$ie-dropdown-btn-margin: 0 auto !default;
+$ie-toolbar-item-canvas-border: 2px solid transparent !default;
+$ie-straighten-font-size: 14px !default;
+$ie-straighten-padding-x: 10px !default;
+$ie-straighten-slider-padding-right: 2px !default;
+$ie-straighten-slider-margin-left: 8px !default;
+$ie-quality-slider-icon-margin-left: 20px !default;
+$ie-img-size-margin: 10px 10px 0 !default;
+$ie-img-size-font-size: 14px !default;
+$ie-img-save-name-margin-right: 10px !default;
+$ie-img-label-name-margin-bottom: 5px !default;
+$ie-quality-info-margin: 0 !default;
+$ie-quality-span-margin-left: 5px !default;
+$ie-img-size-value-span-margin-top: 4px !default;
+$ie-img-icon-btn-margin-left: 10px !default;
+$ie-quality-option-icon-margin-left: 0 !default;
+$ie-finetune-font-size: 14px !default;
+$ie-finetune-line-height: 20px !default;
+$ie-finetune-letter-spacing: normal !default;
+$ie-finetune-font-weight: 400 !default;
+$ie-finetune-slider-container: 0 16px 1px 16px !default;
+$ie-default-toolbar-font-size: 12px !default;
+$ie-bigger-default-toolbar-font-size: 14px !default;
+$ie-tbtn-txt-padding: 0 !default;
+$ie-head-wrapper-height: 58px !default;
+$ie-dropdownbtn-preview-size: 18px !default;
+$ie-bigger-caret-margin-top: -4px !default;
+$ie-bigger-dropdown-caret-font-size: 10px !default;
+$ie-bigger-toolbar-left-line-height: 1 !default;
+$ie-bigger-device-finetune-font-size: 16px !default;
+$ie-bigger-device-finetune-line-height: 24px !default;
+$ie-bigger-head-wrapper-height: 58px !default;
+$btn-focus-bgcolor: color.adjust($gray-600, $lightness: -7%) !default;
+$btn-focus-border-color: color.adjust($gray-600, $lightness: -5%) !default;
+$drop-down-btn-selected-color: $white !default;

package/styles/image-editor/_bootstrap5-dark-definition.scss

@@ -1 +1,81 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+
+$image-editor-background: $border-light !default;
+$image-editor-border: 1px solid $content-bg-color-alt2 !default;
+$image-editor-toolbar-icon-color: $icon-color !default;
+$img-editor-cp-preview-border-bottom-color: $black !default;
+$image-editor-icon-sel-bg-color: $secondary-bg-color-focus !default;
+$image-editor-ddbtn-margin-top: -1px !default;
+$image-editor-tbar-height: 40px !default;
+$image-editor-bigger-tbar-height: 46px !default;
+$image-editor-tbar-btn-fontsize: $text-lg !default;
+$image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
+$image-editor-contextual-toolbar: $content-bg-color-alt1 !default;
+$image-editor-drop-border: 2px dashed $icon-color !default;
+$image-editor-dropdown-btn-preview-top: -4px !default;
+$image-editor-dropdown-btn-preview-left: -4px !default;
+$image-editor-bigger-dropdown-btn-preview-top: -4px !default;
+$image-editor-bigger-dropdown-btn-preview-left: -4px !default;
+$image-editor-slider-handler: calc(50% - 5px) !default;
+$image-editor-bigger-slider-handler: calc(50% - 6px) !default;
+$image-editor-device-slider-handler: calc(50% - 8px) !default;
+$image-editor-finetune-value-span: 29% !default;
+$image-editor-finetune-span: 29% !default;
+$image-editor-save-dlg-big-btn-pad: 4px 15px !default;
+$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: $icon-color !default;
+$image-editor-button-label-mobile: 11px !default;
+$image-editor-button-width-mobile: calc(67% - 30px) !default;
+$ie-toolbar-img-font-style-margin-left: 0 !default;
+$ie-scroll-device-padding-right: 0 !default;
+$ie-quality-option-slider-container-margin-left: 0 !default;
+$ie-spin-btn-margin: 0 !default;
+$ie-drop-area-border-radius: 10px !default;
+$ie-drop-area-margin: 10px !default;
+$ie-drop-icon-font-size: 50px !default;
+$ie-drop-content-font-size: 14px !default;
+$ie-drop-info-font-size: 14px !default;
+$ie-min-drop-content-font-size: 14px !default;
+$ie-toolbar-item-margin-left: 20px !default;
+$ie-file-select-padding: 0 !default;
+$ie-font-color-caret-margin-top: -4px !default;
+$ie-caret-font-size: 10px !default;
+$ie-toolbar-left-line-height: 1 !default;
+$ie-toolbar-item-span-font-weight: 500 !default;
+$ie-toolbar-item-span-margin: 4px !default;
+$ie-dropdown-btn-margin: 0 auto !default;
+$ie-toolbar-item-canvas-border: 2px solid transparent !default;
+$ie-straighten-font-size: 14px !default;
+$ie-straighten-padding-x: 10px !default;
+$ie-straighten-slider-padding-right: 2px !default;
+$ie-straighten-slider-margin-left: 8px !default;
+$ie-quality-slider-icon-margin-left: 20px !default;
+$ie-img-size-margin: 10px 10px 0 !default;
+$ie-img-size-font-size: 14px !default;
+$ie-img-save-name-margin-right: 10px !default;
+$ie-img-label-name-margin-bottom: 5px !default;
+$ie-quality-info-margin: 0 !default;
+$ie-quality-span-margin-left: 5px !default;
+$ie-img-size-value-span-margin-top: 4px !default;
+$ie-img-icon-btn-margin-left: 10px !default;
+$ie-quality-option-icon-margin-left: 0 !default;
+$ie-finetune-font-size: 14px !default;
+$ie-finetune-line-height: 20px !default;
+$ie-finetune-letter-spacing: normal !default;
+$ie-finetune-font-weight: 400 !default;
+$ie-finetune-slider-container: 0 16px 1px 16px !default;
+$ie-default-toolbar-font-size: 12px !default;
+$ie-bigger-default-toolbar-font-size: 14px !default;
+$ie-tbtn-txt-padding: 0 !default;
+$ie-head-wrapper-height: 58px !default;
+$ie-dropdownbtn-preview-size: 18px !default;
+$ie-bigger-caret-margin-top: -4px !default;
+$ie-bigger-dropdown-caret-font-size: 10px !default;
+$ie-bigger-toolbar-left-line-height: 1 !default;
+$ie-bigger-device-finetune-font-size: 16px !default;
+$ie-bigger-device-finetune-line-height: 24px !default;
+$ie-bigger-head-wrapper-height: 58px !default;

package/styles/image-editor/_bootstrap5-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
+
 $image-editor-background: $border-light !default;
 $image-editor-border: 1px solid $content-bg-color-alt2 !default;
 $image-editor-toolbar-icon-color: $icon-color !default;
@@ -27,3 +30,52 @@ $image-editor-icon-button: 4px !default;
 $image-editor-filter-canvas-focus: $icon-color !default;
 $image-editor-button-label-mobile: 11px !default;
 $image-editor-button-width-mobile: calc(67% - 30px) !default;
+$ie-toolbar-img-font-style-margin-left: 0 !default;
+$ie-scroll-device-padding-right: 0 !default;
+$ie-quality-option-slider-container-margin-left: 0 !default;
+$ie-spin-btn-margin: 0 !default;
+$ie-drop-area-border-radius: 10px !default;
+$ie-drop-area-margin: 10px !default;
+$ie-drop-icon-font-size: 50px !default;
+$ie-drop-content-font-size: 14px !default;
+$ie-drop-info-font-size: 14px !default;
+$ie-min-drop-content-font-size: 14px !default;
+$ie-toolbar-item-margin-left: 20px !default;
+$ie-file-select-padding: 0 !default;
+$ie-font-color-caret-margin-top: -4px !default;
+$ie-caret-font-size: 10px !default;
+$ie-toolbar-left-line-height: 1 !default;
+$ie-toolbar-item-span-font-weight: 500 !default;
+$ie-toolbar-item-span-margin: 4px !default;
+$ie-dropdown-btn-margin: 0 auto !default;
+$ie-toolbar-item-canvas-border: 2px solid transparent !default;
+$ie-straighten-font-size: 14px !default;
+$ie-straighten-padding-x: 10px !default;
+$ie-straighten-slider-padding-right: 2px !default;
+$ie-straighten-slider-margin-left: 8px !default;
+$ie-quality-slider-icon-margin-left: 20px !default;
+$ie-img-size-margin: 10px 10px 0 !default;
+$ie-img-size-font-size: 14px !default;
+$ie-img-save-name-margin-right: 10px !default;
+$ie-img-label-name-margin-bottom: 5px !default;
+$ie-quality-info-margin: 0 !default;
+$ie-quality-span-margin-left: 5px !default;
+$ie-img-size-value-span-margin-top: 4px !default;
+$ie-img-icon-btn-margin-left: 10px !default;
+$ie-quality-option-icon-margin-left: 0 !default;
+$ie-finetune-font-size: 14px !default;
+$ie-finetune-line-height: 20px !default;
+$ie-finetune-letter-spacing: normal !default;
+$ie-finetune-font-weight: 400 !default;
+$ie-finetune-slider-container: 0 16px 1px 16px !default;
+$ie-default-toolbar-font-size: 12px !default;
+$ie-bigger-default-toolbar-font-size: 14px !default;
+$ie-tbtn-txt-padding: 0 !default;
+$ie-head-wrapper-height: 58px !default;
+$ie-dropdownbtn-preview-size: 18px !default;
+$ie-bigger-caret-margin-top: -4px !default;
+$ie-bigger-dropdown-caret-font-size: 10px !default;
+$ie-bigger-toolbar-left-line-height: 1 !default;
+$ie-bigger-device-finetune-font-size: 16px !default;
+$ie-bigger-device-finetune-line-height: 24px !default;
+$ie-bigger-head-wrapper-height: 58px !default;

package/styles/image-editor/_bootstrap5.3-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
 $image-editor-background: $border-light !default;
 $image-editor-border: 1px solid $content-bg-color-alt2 !default;
 $image-editor-toolbar-icon-color: $icon-color !default;
@@ -27,3 +29,52 @@ $image-editor-icon-button: 4px !default;
 $image-editor-filter-canvas-focus: $icon-color !default;
 $image-editor-button-label-mobile: 9px !default;
 $image-editor-button-width-mobile: calc(65% - 30px) !default;
+$ie-toolbar-img-font-style-margin-left: 0 !default;
+$ie-scroll-device-padding-right: 0 !default;
+$ie-quality-option-slider-container-margin-left: 0 !default;
+$ie-spin-btn-margin: 0 !default;
+$ie-drop-area-border-radius: 10px !default;
+$ie-drop-area-margin: 10px !default;
+$ie-drop-icon-font-size: 50px !default;
+$ie-drop-content-font-size: 14px !default;
+$ie-drop-info-font-size: 14px !default;
+$ie-min-drop-content-font-size: 14px !default;
+$ie-toolbar-item-margin-left: 20px !default;
+$ie-file-select-padding: 0 !default;
+$ie-font-color-caret-margin-top: -4px !default;
+$ie-caret-font-size: 10px !default;
+$ie-toolbar-left-line-height: 1 !default;
+$ie-toolbar-item-span-font-weight: 500 !default;
+$ie-toolbar-item-span-margin: 4px !default;
+$ie-dropdown-btn-margin: 0 auto !default;
+$ie-toolbar-item-canvas-border: 2px solid transparent !default;
+$ie-straighten-font-size: 14px !default;
+$ie-straighten-padding-x: 10px !default;
+$ie-straighten-slider-padding-right: 2px !default;
+$ie-straighten-slider-margin-left: 8px !default;
+$ie-quality-slider-icon-margin-left: 20px !default;
+$ie-img-size-margin: 10px 10px 0 !default;
+$ie-img-size-font-size: 14px !default;
+$ie-img-save-name-margin-right: 10px !default;
+$ie-img-label-name-margin-bottom: 5px !default;
+$ie-quality-info-margin: 0 !default;
+$ie-quality-span-margin-left: 5px !default;
+$ie-img-size-value-span-margin-top: 4px !default;
+$ie-img-icon-btn-margin-left: 10px !default;
+$ie-quality-option-icon-margin-left: 0 !default;
+$ie-finetune-font-size: 14px !default;
+$ie-finetune-line-height: 20px !default;
+$ie-finetune-letter-spacing: normal !default;
+$ie-finetune-font-weight: 400 !default;
+$ie-finetune-slider-container: 0 16px 1px 16px !default;
+$ie-default-toolbar-font-size: 12px !default;
+$ie-bigger-default-toolbar-font-size: 14px !default;
+$ie-tbtn-txt-padding: 0 !default;
+$ie-head-wrapper-height: 58px !default;
+$ie-dropdownbtn-preview-size: 18px !default;
+$ie-bigger-caret-margin-top: -4px !default;
+$ie-bigger-dropdown-caret-font-size: 10px !default;
+$ie-bigger-toolbar-left-line-height: 1 !default;
+$ie-bigger-device-finetune-font-size: 16px !default;
+$ie-bigger-device-finetune-line-height: 24px !default;
+$ie-bigger-head-wrapper-height: 58px !default;

package/styles/image-editor/_fabric-dark-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@forward 'ej2-base/styles/definition/fabric-dark';
 $image-editor-background: $neutral-white !default;
 $image-editor-border: 1px solid $neutral-light !default;
 $image-editor-toolbar-icon-color: $neutral-light-font !default;
@@ -27,3 +29,52 @@ $image-editor-icon-button: 4px !default;
 $image-editor-filter-canvas-focus: $neutral-light-fontalt !default;
 $image-editor-button-label-mobile: 7px !default;
 $image-editor-button-width-mobile: calc(64% - 30px) !default;
+$ie-toolbar-img-font-style-margin-left: 0 !default;
+$ie-scroll-device-padding-right: 0 !default;
+$ie-quality-option-slider-container-margin-left: 0 !default;
+$ie-spin-btn-margin: 0 !default;
+$ie-drop-area-border-radius: 10px !default;
+$ie-drop-area-margin: 10px !default;
+$ie-drop-icon-font-size: 50px !default;
+$ie-drop-content-font-size: 14px !default;
+$ie-drop-info-font-size: 14px !default;
+$ie-min-drop-content-font-size: 14px !default;
+$ie-toolbar-item-margin-left: 20px !default;
+$ie-file-select-padding: 0 !default;
+$ie-font-color-caret-margin-top: -4px !default;
+$ie-caret-font-size: 10px !default;
+$ie-toolbar-left-line-height: 1 !default;
+$ie-toolbar-item-span-font-weight: 500 !default;
+$ie-toolbar-item-span-margin: 4px !default;
+$ie-dropdown-btn-margin: 0 auto !default;
+$ie-toolbar-item-canvas-border: 2px solid transparent !default;
+$ie-straighten-font-size: 14px !default;
+$ie-straighten-padding-x: 10px !default;
+$ie-straighten-slider-padding-right: 2px !default;
+$ie-straighten-slider-margin-left: 8px !default;
+$ie-quality-slider-icon-margin-left: 20px !default;
+$ie-img-size-margin: 10px 10px 0 !default;
+$ie-img-size-font-size: 14px !default;
+$ie-img-save-name-margin-right: 10px !default;
+$ie-img-label-name-margin-bottom: 5px !default;
+$ie-quality-info-margin: 0 !default;
+$ie-quality-span-margin-left: 5px !default;
+$ie-img-size-value-span-margin-top: 4px !default;
+$ie-img-icon-btn-margin-left: 10px !default;
+$ie-quality-option-icon-margin-left: 0 !default;
+$ie-finetune-font-size: 14px !default;
+$ie-finetune-line-height: 20px !default;
+$ie-finetune-letter-spacing: normal !default;
+$ie-finetune-font-weight: 400 !default;
+$ie-finetune-slider-container: 0 16px 1px 16px !default;
+$ie-default-toolbar-font-size: 12px !default;
+$ie-bigger-default-toolbar-font-size: 14px !default;
+$ie-tbtn-txt-padding: 0 !default;
+$ie-head-wrapper-height: 58px !default;
+$ie-dropdownbtn-preview-size: 18px !default;
+$ie-bigger-caret-margin-top: -4px !default;
+$ie-bigger-dropdown-caret-font-size: 10px !default;
+$ie-bigger-toolbar-left-line-height: 1 !default;
+$ie-bigger-device-finetune-font-size: 16px !default;
+$ie-bigger-device-finetune-line-height: 24px !default;
+$ie-bigger-head-wrapper-height: 58px !default;