@syncfusion/ej2-image-editor 27.2.5 → 28.1.39

package/styles/fluent-lite.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;
 }
@@ -536,13 +538,13 @@
 .e-ie-img-save-name {
   display: inline-block;
   margin-right: 10px;
-  width: calc(71% - 13px);
+  width: calc(69% - 13px);
   width: calc(69% - 15px) !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 {
@@ -680,6 +682,10 @@
   margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
+  top: calc(50% + 60px);
+}
+
 .e-image-editor {
   background: #faf9f8;
 }

package/styles/fluent.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;
 }
@@ -536,13 +538,13 @@
 .e-ie-img-save-name {
   display: inline-block;
   margin-right: 10px;
-  width: calc(71% - 13px);
+  width: calc(69% - 13px);
   width: calc(69% - 15px) !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 {
@@ -680,6 +682,10 @@
   margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
+  top: calc(50% + 60px);
+}
+
 .e-image-editor {
   background: #faf9f8;
 }

package/styles/fluent2-lite.css

@@ -284,7 +284,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;
 }
@@ -554,12 +556,12 @@
 .e-ie-img-save-name {
   display: inline-block;
   margin-right: 10px;
-  width: calc(71% - 13px);
+  width: calc(69% - 13px);
 }
 
 .e-ie-img-save-dlg {
   display: inline-block;
-  width: 90px;
+  width: 92px;
 }
 
 .e-ie-img-save-dlg .e-btn {
@@ -703,6 +705,10 @@
   margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
+  top: calc(50% + 60px);
+}
+
 .e-image-editor {
   background: var(--color-sf-content-bg-color-alt1);
 }

package/styles/fluent2.css

@@ -284,7 +284,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;
 }
@@ -554,12 +556,12 @@
 .e-ie-img-save-name {
   display: inline-block;
   margin-right: 10px;
-  width: calc(71% - 13px);
+  width: calc(69% - 13px);
 }
 
 .e-ie-img-save-dlg {
   display: inline-block;
-  width: 90px;
+  width: 92px;
 }
 
 .e-ie-img-save-dlg .e-btn {
@@ -703,6 +705,10 @@
   margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
+  top: calc(50% + 60px);
+}
+
 .e-image-editor {
   background: var(--color-sf-content-bg-color-alt1);
 }

package/styles/highcontrast-light-lite.css

@@ -273,7 +273,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;
 }
@@ -530,12 +532,12 @@
 .e-ie-img-save-name {
   display: inline-block;
   margin-right: 10px;
-  width: calc(71% - 13px);
+  width: calc(69% - 13px);
 }
 
 .e-ie-img-save-dlg {
   display: inline-block;
-  width: 90px;
+  width: 92px;
 }
 
 .e-ie-img-save-dlg .e-btn {
@@ -670,6 +672,10 @@
   margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
+  top: calc(50% + 60px);
+}
+
 .e-image-editor {
   background: #fff;
 }

package/styles/highcontrast-light.css

@@ -273,7 +273,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;
 }
@@ -530,12 +532,12 @@
 .e-ie-img-save-name {
   display: inline-block;
   margin-right: 10px;
-  width: calc(71% - 13px);
+  width: calc(69% - 13px);
 }
 
 .e-ie-img-save-dlg {
   display: inline-block;
-  width: 90px;
+  width: 92px;
 }
 
 .e-ie-img-save-dlg .e-btn {
@@ -670,6 +672,10 @@
   margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
+  top: calc(50% + 60px);
+}
+
 .e-image-editor {
   background: #fff;
 }

package/styles/highcontrast-lite.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 {
@@ -678,6 +680,10 @@
   margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
+  top: calc(50% + 60px);
+}
+
 .e-image-editor {
   background: #000;
 }

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 {
@@ -678,6 +680,10 @@
   margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
+  top: calc(50% + 60px);
+}
+
 .e-image-editor {
   background: #000;
 }

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;
       }
@@ -443,7 +444,7 @@
     @if $skin-name == 'Material3' {
       top: calc(50% - 11px) !important; /* stylelint-disable-line declaration-no-important */
     }
-    @else if $skin-name == 'tailwind' {
+    @else if $skin-name == 'tailwind' or $skin-name == 'tailwind3' {
       top: calc(50% - 12px) !important; /* stylelint-disable-line declaration-no-important */
     }
     @else {
@@ -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 {
@@ -799,4 +809,8 @@
   .e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-finetune-value-span {
     margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
   }
+
+  .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
+    top: calc(50% + 60px);
+  }
 }

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: 48px !default;
+$image-editor-bigger-tbar-height: 56px !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% - 6px) !default;
+$image-editor-bigger-slider-handler: calc(50% - 8px) !default;
+$image-editor-device-slider-handler: calc(50% - 10px) !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;