@syncfusion/ej2-image-editor 27.2.5 → 28.1.39

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

@@ -0,0 +1,259 @@
+@include export-module('image-editor-tailwind3-icons') {
+  .e-image-editor {
+    & .e-upload-icon {
+      &::before {
+        content: '\e760';
+      }
+    }
+
+    & .e-zoom-in {
+      &::before {
+        content: '\e768';
+      }
+    }
+
+    & .e-zoom-out {
+      &::before {
+        content: '\e81b';
+      }
+    }
+
+    & .e-pan {
+      &::before {
+        content: '\e7b1';
+      }
+    }
+
+    & .e-select {
+      &::before {
+        content: '\e896';
+      }
+    }
+
+    & .e-transform {
+      &::before {
+        content: '\e8b0';
+      }
+    }
+
+    & .e-annotation {
+      &::before {
+        content: '\e730';
+      }
+    }
+
+    & .e-shapes {
+      &::before {
+        content: '\e728';
+      }
+    }
+
+    & .e-mouse {
+      &::before {
+        content: '\e74e';
+      }
+    }
+
+    & .e-btn-reset {
+      &::before {
+        content: '\e89b';
+      }
+    }
+
+    & .e-btn-save {
+      &::before {
+        content: '\e7c8';
+      }
+    }
+
+    & .e-close {
+      &::before {
+        content: '\e7e7';
+      }
+    }
+
+    & .e-check {
+      &::before {
+        content: '\e8b1';
+      }
+    }
+
+    & .e-text-font-color.e-template {
+      & .e-caret::before {
+        content: '\e76f';
+      }
+    }
+
+    & .e-stroke.e-template,
+    & .e-frame-stroke.e-template,
+    & .e-pen-stroke-color.e-template {
+      & .e-caret::before {
+        content: '\e739';
+      }
+    }
+
+    & .e-fill.e-template,
+    & .e-text-background-color.e-template {
+      & .e-caret {
+        &::before {
+          content: '\e783';
+        }
+      }
+    }
+
+    & .e-stroke-text-font-color.e-template {
+      & .e-caret {
+        &::before {
+          content: '\e908';
+        }
+      }
+    }
+  }
+}
+
+.e-image-editor,
+.e-dropdown-popup.e-image-popup {
+  & .e-custom {
+    &::before {
+      content: '\e8a9';
+    }
+  }
+  
+  & .e-circle {
+    &::before {
+      content: '\e7ca';
+    }
+  }
+  
+  & .e-square{
+    &::before {
+      content: '\e8aa';
+    }
+  }
+  
+  & .e-custom-a {
+    &::before {
+      content: '\e8ab';
+    }
+  }
+  
+  & .e-custom-b {
+    &::before {
+      content: '\e8ac';
+    }
+  }
+  
+  & .e-custom-c {
+    &::before {
+      content: '\e8ad';
+    }
+  }
+  
+  & .e-custom-d {
+    &::before {
+      content: '\e8ae';
+    }
+  }
+  
+  & .e-custom-e {
+    &::before {
+      content: '\e8af';
+    }
+  }
+
+  & .e-custom-f {
+    &::before {
+      content: '\e8dd';
+    }
+  }
+  
+  & .e-custom-g {
+    &::before {
+      content: '\e8de';
+    }
+  }
+  
+  & .e-custom-h {
+    &::before {
+      content: '\e8df';
+    }
+  }
+  
+  & .e-custom-i {
+    &::before {
+      content: '\e8e0';
+    }
+  }
+  
+  & .e-custom-j {
+    &::before {
+      content: '\e8e1';
+    }
+  }
+  
+  & .e-rectangle {
+    &::before {
+      content: '\e723';
+    }
+  }
+  
+  & .e-triangle {
+    &::before {
+      content: '\e89c';
+    }
+  }
+  
+  & .e-line {
+    &::before {
+      content: '\e819';
+    }
+  }
+  
+  & .e-free-pen {
+    &::before {
+      content: '\e7db';
+    }
+  }
+  
+  & .e-horizontal-flip {
+    &::before {
+      content: '\e8a3';
+    }
+  }
+  
+  & .e-vertical-flip {
+    &::before {
+      content: '\e8a4';
+    }
+  }
+
+  & .e-clock-wise {
+    &::before {
+      content: '\e8a6';
+    }
+  }
+
+  & .e-anti-clock-wise {
+    &::before {
+      content: '\e8a5';
+    }
+  }
+
+  & .e-add-text {
+    &::before {
+      content: '\e82e';
+    }
+  }
+
+  & .e-arrow {
+    &::before {
+      content: '\e669';
+    }
+  }
+  
+  & .e-path {
+    &::before {
+      content: '\e931';
+    }
+  }
+}

package/styles/image-editor/material-dark.css

@@ -295,7 +295,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;
 }
@@ -552,12 +554,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 {
@@ -692,6 +694,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: #292929;
 }

package/styles/image-editor/material.css

@@ -295,7 +295,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;
 }
@@ -552,12 +554,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 {
@@ -694,6 +696,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: #eee;
 }

package/styles/image-editor/material3-dark.css

@@ -282,7 +282,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;
 }
@@ -564,12 +566,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 {
@@ -714,6 +716,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: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.14)), to(rgba(var(--color-sf-primary), 0.14))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));

package/styles/image-editor/material3.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;
 }
@@ -566,12 +568,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 {
@@ -716,6 +718,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: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.14)), to(rgba(var(--color-sf-primary), 0.14))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));

package/styles/image-editor/tailwind-dark.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 {
@@ -674,6 +676,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: #4b5563;
 }

package/styles/image-editor/tailwind.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 {
@@ -674,6 +676,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: #e5e7eb;
 }