@syncfusion/ej2-image-editor 27.2.3 → 28.1.33

package/styles/highcontrast.css

@@ -277,7 +277,9 @@
 }
 .e-image-editor .e-ie-drop-area .e-ie-drop-info {
   top: calc(50% + 40px);
-  left: calc(50% - 100px);
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
   position: absolute;
   font-size: 14px;
 }
@@ -534,13 +536,13 @@
 .e-ie-img-save-name {
   display: inline-block;
   margin-right: 10px;
-  width: calc(71% - 13px);
+  width: calc(69% - 13px);
   margin-right: 8px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-ie-img-save-dlg {
   display: inline-block;
-  width: 90px;
+  width: 92px;
 }
 
 .e-ie-img-save-dlg .e-btn {

package/styles/image-editor/_layout.scss

@@ -120,7 +120,8 @@
 
       & .e-ie-drop-info {
         top: calc(50% + 40px);
-        left: calc(50% - 100px);
+        left: 50%;
+        transform: translate(-50%, -50%);
         position: absolute;
         font-size: 14px;
       }
@@ -542,7 +543,7 @@
   .e-ie-img-save-name {
     display: inline-block;
     margin-right: 10px;
-    width: calc(71% - 13px);
+    width: calc(69% - 13px);
 
     @if $skin-name == 'FluentUI' {
       width: calc(69% - 15px) !important; /* stylelint-disable-line declaration-no-important */
@@ -554,16 +555,22 @@
 
   .e-ie-img-save-dlg {
     display: inline-block;
-    width: 90px;
+    width: 92px;
   }
 
   .e-ie-img-save-dlg .e-btn {
     width: 100%;
+    @if $skin-name == 'tailwind3' {
+      font-weight: $font-weight-normal;
+    }
   }
 
   .e-ie-img-label-name {
     margin-bottom: 5px;
     display: block;
+    @if $skin-name == 'tailwind3' {
+      font-weight: $font-weight-medium;
+    }
   }
 
   .e-ie-img-quality-name {
@@ -585,6 +592,9 @@
     margin-bottom: 3%;
     margin-top: 5%;
     display: inline-flex;
+    @if $skin-name == 'tailwind3' {
+      font-weight: $font-weight-medium;
+    }
   }
 
   .e-ie-img-quality-size {

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

@@ -0,0 +1,29 @@
+$image-editor-background: $content-bg-color !default;
+$image-editor-border: 1px solid $border !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-base !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-button-label: 13px !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-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;