@syncfusion/ej2-image-editor 24.1.45 → 24.2.3

package/styles/image-editor/_layout.scss

@@ -511,15 +511,21 @@
   }
 
   .e-ie-finetune-slider-wrap {
-    top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+    top: $image-editor-slider-wrap !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .e-transparency-slider-wrap {
-    top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+    top: $image-editor-slider-wrap !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .e-ie-slider-wrap {
     top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+    @if $skin-name == 'Material3' {
+      top: calc(50% - 12px) !important; /* stylelint-disable-line declaration-no-important */
+    }
+    @if $skin-name == 'tailwind' {
+      top: calc(50% - 13px) !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
 
   .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -550,4 +556,28 @@
       }
     }
   }
+
+  .e-device .e-transparency-slider-wrap {
+    top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-device .e-ie-finetune-slider-wrap {
+    top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-device .e-ie-finetune-value-span {
+    @if $skin-name == 'Material3' {
+      top: 29% !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-device .e-ie-finetune-slider-label {
+    @if $skin-name == 'Material3' {
+      top: 28% !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-device .e-ie-slider-wrap {
+    top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+  }
 }

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

@@ -19,3 +19,4 @@ $image-editor-bigger-slider-handler: calc(50% - 7px) !default;
 $image-editor-device-slider-handler: calc(50% - 5px) !default;
 $image-editor-finetune-value-span: 31% !default;
 $image-editor-finetune-span: 31% !default;
+$image-editor-slider-wrap: calc(50% - 15px) !default;

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

@@ -19,3 +19,4 @@ $image-editor-bigger-slider-handler: calc(50% - 7px) !default;
 $image-editor-device-slider-handler: calc(50% - 5px) !default;
 $image-editor-finetune-value-span: 31% !default;
 $image-editor-finetune-span: 31% !default;
+$image-editor-slider-wrap: calc(50% - 15px) !default;

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

@@ -17,5 +17,6 @@ $image-editor-bigger-dropdown-btn-preview-left: -7px !default;
 $image-editor-slider-handler: calc(50% - 8px) !default;
 $image-editor-bigger-slider-handler: calc(50% - 10px) !default;
 $image-editor-device-slider-handler: calc(50% - 8px) !default;
-$image-editor-finetune-value-span: 29% !default;
-$image-editor-finetune-span: 28% !default;
+$image-editor-finetune-value-span: 30% !default;
+$image-editor-finetune-span: 30% !default;
+$image-editor-slider-wrap: calc(50% - 12px) !default;

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

@@ -19,3 +19,4 @@ $image-editor-bigger-slider-handler: calc(50% - 7px) !default;
 $image-editor-device-slider-handler: calc(50% - 9px) !default;
 $image-editor-finetune-value-span: 28% !default;
 $image-editor-finetune-span: 28% !default;
+$image-editor-slider-wrap: calc(50% - 14px) !default;

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

@@ -559,6 +559,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #959595;
 }

package/styles/image-editor/bootstrap.css

@@ -559,6 +559,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #e6e6e6;
 }

package/styles/image-editor/bootstrap4.css

@@ -557,6 +557,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #e9ecef;
 }
@@ -585,7 +597,7 @@
   color: #fff;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
-  background: #6c757d;
+  background: #5b636a;
   box-shadow: none;
   color: #fff;
 }

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

@@ -575,6 +575,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #444c54;
 }

package/styles/image-editor/bootstrap5.css

@@ -575,6 +575,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #dee2e6;
 }

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

@@ -559,6 +559,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #201f1f;
 }

package/styles/image-editor/fabric.css

@@ -559,6 +559,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #fff;
 }

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

@@ -570,6 +570,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #201f1e;
 }

package/styles/image-editor/fluent.css

@@ -570,6 +570,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #faf9f8;
 }

package/styles/image-editor/highcontrast-light.css

@@ -557,6 +557,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #fff;
 }

package/styles/image-editor/highcontrast.css

@@ -561,6 +561,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #000;
 }

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

@@ -566,6 +566,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #292929;
 }

package/styles/image-editor/material.css

@@ -571,6 +571,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #eee;
 }

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

@@ -596,23 +596,24 @@
 }
 
 .e-ie-finetune-value-span {
-  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+  top: 30% !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-ie-finetune-slider-label {
-  top: 28% !important; /* stylelint-disable-line declaration-no-important */
+  top: 30% !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-ie-finetune-slider-wrap {
-  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 12px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-transparency-slider-wrap {
-  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 12px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-ie-slider-wrap {
   top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 12px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -634,6 +635,26 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-value-span {
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-label {
+  top: 28% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   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

@@ -652,23 +652,24 @@
 }
 
 .e-ie-finetune-value-span {
-  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+  top: 30% !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-ie-finetune-slider-label {
-  top: 28% !important; /* stylelint-disable-line declaration-no-important */
+  top: 30% !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-ie-finetune-slider-wrap {
-  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 12px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-transparency-slider-wrap {
-  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 12px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-ie-slider-wrap {
   top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 12px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -690,6 +691,26 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-value-span {
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-label {
+  top: 28% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   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

@@ -535,15 +535,16 @@
 }
 
 .e-ie-finetune-slider-wrap {
-  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-transparency-slider-wrap {
-  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-ie-slider-wrap {
   top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 13px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -563,6 +564,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #4b5563;
 }

package/styles/image-editor/tailwind.css

@@ -535,15 +535,16 @@
 }
 
 .e-ie-finetune-slider-wrap {
-  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-transparency-slider-wrap {
-  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-ie-slider-wrap {
   top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 13px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -563,6 +564,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #e5e7eb;
 }

package/styles/material-dark.css

@@ -566,6 +566,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #292929;
 }

package/styles/material.css

@@ -571,6 +571,18 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #eee;
 }

package/styles/material3-dark.css

@@ -596,23 +596,24 @@
 }
 
 .e-ie-finetune-value-span {
-  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+  top: 30% !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-ie-finetune-slider-label {
-  top: 28% !important; /* stylelint-disable-line declaration-no-important */
+  top: 30% !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-ie-finetune-slider-wrap {
-  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 12px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-transparency-slider-wrap {
-  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 12px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-ie-slider-wrap {
   top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 12px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -634,6 +635,26 @@
   margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device .e-transparency-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-wrap {
+  top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-value-span {
+  top: 29% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-finetune-slider-label {
+  top: 28% !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-device .e-ie-slider-wrap {
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
 }