@syncfusion/ej2-image-editor 23.2.6 → 24.1.41

package/styles/image-editor/_layout.scss

@@ -11,13 +11,62 @@
     }
 
     & .e-slider-container {
-      margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
+      margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
       height: 54px !important; /* stylelint-disable-line declaration-no-important */
     }
+
+    & .e-straighten-slider {
+      margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    & .e-ie-straighten-value-span {
+      margin-left: 15px !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    & .e-hscroll .e-scroll-nav.e-scroll-right-nav {
+      display: none !important; /* stylelint-disable-line declaration-no-important */
+    }
+  
+    & .e-hscroll.e-scroll-device {
+      padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    & .e-scroll-right-overlay {
+      display: none !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    & .e-contextual-toolbar-wrapper {
+      border-top: $image-editor-border;
+      border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    & .e-toolbar {
+      border-bottom: $image-editor-border;
+    }
+
+    & .e-contextual-toolbar-wrapper .e-toolbar {
+      border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    & .e-bottom-toolbar .e-toolbar,
+    & .e-bottom-toolbar-area .e-toolbar {
+      border-bottom: none;
+    }
   }
 
   .e-bigger .e-image-editor,
   .e-image-editor.e-bigger {
+
+    & .e-contextual-toolbar-wrapper {
+      & .e-slider-container {
+        & .e-slider {
+          & .e-handle {
+            top: $image-editor-device-slider-handler !important; /* stylelint-disable-line declaration-no-important */
+          }
+        }
+      }
+    }
+    
     & .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 */
@@ -130,6 +179,13 @@
     position: relative;
     display: block;
 
+    /* stylelint-disable property-no-vendor-prefix */
+    & .no-spin ::-webkit-inner-spin-button,
+    & .no-spin ::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
     & .e-quick-access-toolbar-area .e-toolbar {
       @if $skin-name == 'Material3' {
         border-radius: 4px;
@@ -142,6 +198,9 @@
       border: $image-editor-drop-border;
       border-radius: 10px;
       margin: 10px;
+      @if $skin-name == 'highcontrast' {
+        color: $hover-font;
+      }
 
       & .e-upload {
         display: none;
@@ -162,6 +221,12 @@
         font-size: 14px;
       }
 
+      & .e-ie-drop-content > a {
+        @if $skin-name == 'highcontrast' {
+          color: $hover-font;
+        }
+      }
+
       & .e-ie-drop-info {
         top: calc(50% + 40px);
         left: calc(50% - 100px);
@@ -178,10 +243,14 @@
 
     & .e-toolbar {
       border: none;
+      border-bottom: $image-editor-border;
       @if $skin-name != 'Material3' {
         height: $image-editor-tbar-height !important; /* stylelint-disable-line declaration-no-important */
         min-height: $image-editor-tbar-height !important; /* stylelint-disable-line declaration-no-important */
       }
+      @if $skin-name == 'FluentUI' {
+        box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
+      }
       & .e-toolbar-items {
         & .e-toolbar-item {
           &.e-ie-resize-height {
@@ -295,24 +364,26 @@
         }
       }
     }
+    
 
     & .e-toolbar-area + .e-canvas-wrapper {
-      border-top: $image-editor-border;
-
       & .e-textarea {
         line-height: initial !important; /* stylelint-disable-line declaration-no-important */
       }
     }
 
-    & .e-bottom-toolbar {
+    & .e-bottom-toolbar,
+    & .e-bottom-toolbar-area {
       border-top: $image-editor-border;
     }
 
     & .e-contextual-toolbar-wrapper {
+      border-bottom: $image-editor-border;
       width: 100%;
       z-index: 1;
 
       & .e-toolbar {
+        border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
         @if $skin-name == 'Material3' {
           height: 140px !important; /* stylelint-disable-line declaration-no-important */
         }
@@ -356,6 +427,11 @@
           margin: 4px;
           text-align: center;
         }
+
+        & .e-dropdown-btn {
+          margin: 0 auto;
+          width: max-content;
+        }
       }
 
       &.e-hide {
@@ -382,7 +458,65 @@
       & .e-slider-container {
         margin-left: calc(50% - 137px);
         height: 54px !important; /* stylelint-disable-line declaration-no-important */
+
+        & .e-slider {
+          & .e-handle {
+            @if $skin-name == 'Material3' {
+              height: 16px !important; /* stylelint-disable-line declaration-no-important */
+              top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+              width: 16px !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
       }
     }
   }
+  .e-ie-straighten-value-span,
+  .e-ie-straighten-span {
+    font-size: 14px;
+    padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
+    padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
+    height: auto;
+    @if $skin-name == 'Material3' {
+      margin-left: 8px;
+      padding-right: 2px;
+    }
+  }
+
+  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+    top: calc(50% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider-track,
+  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-range {
+    top: calc(50% - 2px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
+    top: $image-editor-slider-handler !important; /* stylelint-disable-line declaration-no-important */
+    @if $skin-name == 'Material3' {
+      height: 16px !important; /* stylelint-disable-line declaration-no-important */
+      width: 16px !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
+    @if $skin-name == 'Material3' {
+      height: 22px !important; /* stylelint-disable-line declaration-no-important */
+      width: 22px !important; /* stylelint-disable-line declaration-no-important */
+    }
+    top: $image-editor-bigger-slider-handler !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-dropdown-popup.e-ie-crop-ddb-popup ul {
+    height: 250px;
+    overflow-y: scroll;
+  }
+
+  .e-dropdown-popup.e-ie-ddb-popup {
+    background: none !important; /* stylelint-disable-line declaration-no-important */
+  }
 }

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

@@ -14,3 +14,6 @@ $image-editor-dropdown-btn-preview-top: -4px !default;
 $image-editor-dropdown-btn-preview-left: -1px !default;
 $image-editor-bigger-dropdown-btn-preview-top: -3px !default;
 $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
+$image-editor-slider-handler: calc(50% - 6px) !default;
+$image-editor-bigger-slider-handler: calc(50% - 7px) !default;
+$image-editor-device-slider-handler: calc(50% - 5px) !default;

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

@@ -14,3 +14,6 @@ $image-editor-dropdown-btn-preview-top: -4px !default;
 $image-editor-dropdown-btn-preview-left: -1px !default;
 $image-editor-bigger-dropdown-btn-preview-top: -3px !default;
 $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
+$image-editor-slider-handler: calc(50% - 6px) !default;
+$image-editor-bigger-slider-handler: calc(50% - 7px) !default;
+$image-editor-device-slider-handler: calc(50% - 5px) !default;

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

@@ -14,3 +14,6 @@ $image-editor-dropdown-btn-preview-top: -2px !default;
 $image-editor-dropdown-btn-preview-left: -9px !default;
 $image-editor-bigger-dropdown-btn-preview-top: -1px !default;
 $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;

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

@@ -14,3 +14,6 @@ $image-editor-dropdown-btn-preview-top: -2px !default;
 $image-editor-dropdown-btn-preview-left: -6px !default;
 $image-editor-bigger-dropdown-btn-preview-top: -2px !default;
 $image-editor-bigger-dropdown-btn-preview-left: -6px !default;
+$image-editor-slider-handler: calc(50% - 6px) !default;
+$image-editor-bigger-slider-handler: calc(50% - 7px) !default;
+$image-editor-device-slider-handler: calc(50% - 9px) !default;

package/styles/image-editor/_theme.scss

@@ -4,8 +4,6 @@
 
     & .e-contextual-toolbar-wrapper {
       background: $image-editor-contextual-toolbar;
-      border-top: $image-editor-border;
-      border-bottom: $image-editor-border;
 
       & .e-toolbar-item:hover .filterwrapper,
       & .e-toolbar-item.e-selected .filterwrapper,
@@ -51,9 +49,9 @@
           }
 
           &:hover {
-            background: $btn-hover-bgcolor;
+            background: $tbar-hover-bg;
             box-shadow: none;
-            color: $btn-hover-color;
+            color: $tbar-hover-font;
           }
 
           &:focus {

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

@@ -91,6 +91,21 @@
 .e-image-editor .e-custom-e::before {
   content: "\e97b";
 }
+.e-image-editor .e-custom-f::before {
+  content: "\e118";
+}
+.e-image-editor .e-custom-g::before {
+  content: "\e119";
+}
+.e-image-editor .e-custom-h::before {
+  content: "\e11a";
+}
+.e-image-editor .e-custom-i::before {
+  content: "\e11b";
+}
+.e-image-editor .e-custom-j::before {
+  content: "\e11c";
+}
 .e-image-editor .e-horizontal-flip::before {
   content: "\e95b";
 }
@@ -152,6 +167,21 @@
 .e-dropdown-popup.e-image-popup .e-custom-e::before {
   content: "\e97b";
 }
+.e-dropdown-popup.e-image-popup .e-custom-f::before {
+  content: "\e118";
+}
+.e-dropdown-popup.e-image-popup .e-custom-g::before {
+  content: "\e119";
+}
+.e-dropdown-popup.e-image-popup .e-custom-h::before {
+  content: "\e11a";
+}
+.e-dropdown-popup.e-image-popup .e-custom-i::before {
+  content: "\e11b";
+}
+.e-dropdown-popup.e-image-popup .e-custom-j::before {
+  content: "\e11c";
+}
 .e-dropdown-popup.e-image-popup .e-rectangle::before {
   content: "\e670";
 }
@@ -198,10 +228,42 @@
   margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-device.e-image-editor .e-slider-container {
-  margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-device.e-image-editor .e-straighten-slider {
+  margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-ie-straighten-value-span {
+  margin-left: 15px !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-hscroll .e-scroll-nav.e-scroll-right-nav {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-hscroll.e-scroll-device {
+  padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-scroll-right-overlay {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-contextual-toolbar-wrapper {
+  border-top: 1px solid #acacac;
+  border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-toolbar {
+  border-bottom: 1px solid #acacac;
+}
+.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
+  border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-bottom-toolbar .e-toolbar, .e-device.e-image-editor .e-bottom-toolbar-area .e-toolbar {
+  border-bottom: none;
+}
 
+.e-bigger .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle,
+.e-image-editor.e-bigger .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle {
+  top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-bigger .e-image-editor .e-toolbar,
 .e-image-editor.e-bigger .e-toolbar {
   height: 52px !important; /* stylelint-disable-line declaration-no-important */
@@ -271,6 +333,11 @@
   border: 1px solid #acacac;
   position: relative;
   display: block;
+  /* stylelint-disable property-no-vendor-prefix */
+}
+.e-image-editor .no-spin ::-webkit-inner-spin-button, .e-image-editor .no-spin ::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
 .e-image-editor .e-ie-drop-area {
   height: calc(100% - 18px);
@@ -307,6 +374,7 @@
 }
 .e-image-editor .e-toolbar {
   border: none;
+  border-bottom: 1px solid #acacac;
   height: 42px !important; /* stylelint-disable-line declaration-no-important */
   min-height: 42px !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -363,20 +431,19 @@
 .e-image-editor .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
   line-height: 1;
 }
-.e-image-editor .e-toolbar-area + .e-canvas-wrapper {
-  border-top: 1px solid #acacac;
-}
 .e-image-editor .e-toolbar-area + .e-canvas-wrapper .e-textarea {
   line-height: initial !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-image-editor .e-bottom-toolbar {
+.e-image-editor .e-bottom-toolbar, .e-image-editor .e-bottom-toolbar-area {
   border-top: 1px solid #acacac;
 }
 .e-image-editor .e-contextual-toolbar-wrapper {
+  border-bottom: 1px solid #acacac;
   width: 100%;
   z-index: 1;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
+  border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
   height: 130px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
@@ -407,6 +474,10 @@
   margin: 4px;
   text-align: center;
 }
+.e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-dropdown-btn {
+  margin: 0 auto;
+  width: max-content;
+}
 .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
   display: none;
 }
@@ -424,14 +495,48 @@
   margin-left: calc(50% - 137px);
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-ie-straighten-value-span,
+.e-ie-straighten-span {
+  font-size: 14px;
+  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
+  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
+  height: auto;
+}
+
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider-track,
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-range {
+  top: calc(50% - 2px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
+  top: calc(50% - 5px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
+  top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup.e-ie-crop-ddb-popup ul {
+  height: 250px;
+  overflow-y: scroll;
+}
+
+.e-dropdown-popup.e-ie-ddb-popup {
+  background: none !important; /* stylelint-disable-line declaration-no-important */
+}
 
 .e-image-editor {
   background: #959595;
 }
 .e-image-editor .e-contextual-toolbar-wrapper {
   background: #131313;
-  border-top: 1px solid #acacac;
-  border-bottom: 1px solid #acacac;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
   border-color: #2a2a2a;
@@ -455,7 +560,7 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:hover {
   background: #313131;
   box-shadow: none;
-  color: #f0f0f0;
+  color: #fff;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
   background: #2a2a2a;

package/styles/image-editor/bootstrap.css

@@ -91,6 +91,21 @@
 .e-image-editor .e-custom-e::before {
   content: "\e97b";
 }
+.e-image-editor .e-custom-f::before {
+  content: "\e118";
+}
+.e-image-editor .e-custom-g::before {
+  content: "\e119";
+}
+.e-image-editor .e-custom-h::before {
+  content: "\e11a";
+}
+.e-image-editor .e-custom-i::before {
+  content: "\e11b";
+}
+.e-image-editor .e-custom-j::before {
+  content: "\e11c";
+}
 .e-image-editor .e-horizontal-flip::before {
   content: "\e95b";
 }
@@ -152,6 +167,21 @@
 .e-dropdown-popup.e-image-popup .e-custom-e::before {
   content: "\e97b";
 }
+.e-dropdown-popup.e-image-popup .e-custom-f::before {
+  content: "\e118";
+}
+.e-dropdown-popup.e-image-popup .e-custom-g::before {
+  content: "\e119";
+}
+.e-dropdown-popup.e-image-popup .e-custom-h::before {
+  content: "\e11a";
+}
+.e-dropdown-popup.e-image-popup .e-custom-i::before {
+  content: "\e11b";
+}
+.e-dropdown-popup.e-image-popup .e-custom-j::before {
+  content: "\e11c";
+}
 .e-dropdown-popup.e-image-popup .e-rectangle::before {
   content: "\e670";
 }
@@ -198,10 +228,42 @@
   margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-device.e-image-editor .e-slider-container {
-  margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-device.e-image-editor .e-straighten-slider {
+  margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-ie-straighten-value-span {
+  margin-left: 15px !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-hscroll .e-scroll-nav.e-scroll-right-nav {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-hscroll.e-scroll-device {
+  padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-scroll-right-overlay {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-contextual-toolbar-wrapper {
+  border-top: 1px solid #ccc;
+  border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-toolbar {
+  border-bottom: 1px solid #ccc;
+}
+.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
+  border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-bottom-toolbar .e-toolbar, .e-device.e-image-editor .e-bottom-toolbar-area .e-toolbar {
+  border-bottom: none;
+}
 
+.e-bigger .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle,
+.e-image-editor.e-bigger .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle {
+  top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-bigger .e-image-editor .e-toolbar,
 .e-image-editor.e-bigger .e-toolbar {
   height: 52px !important; /* stylelint-disable-line declaration-no-important */
@@ -271,6 +333,11 @@
   border: 1px solid #ccc;
   position: relative;
   display: block;
+  /* stylelint-disable property-no-vendor-prefix */
+}
+.e-image-editor .no-spin ::-webkit-inner-spin-button, .e-image-editor .no-spin ::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
 .e-image-editor .e-ie-drop-area {
   height: calc(100% - 18px);
@@ -307,6 +374,7 @@
 }
 .e-image-editor .e-toolbar {
   border: none;
+  border-bottom: 1px solid #ccc;
   height: 42px !important; /* stylelint-disable-line declaration-no-important */
   min-height: 42px !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -363,20 +431,19 @@
 .e-image-editor .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
   line-height: 1;
 }
-.e-image-editor .e-toolbar-area + .e-canvas-wrapper {
-  border-top: 1px solid #ccc;
-}
 .e-image-editor .e-toolbar-area + .e-canvas-wrapper .e-textarea {
   line-height: initial !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-image-editor .e-bottom-toolbar {
+.e-image-editor .e-bottom-toolbar, .e-image-editor .e-bottom-toolbar-area {
   border-top: 1px solid #ccc;
 }
 .e-image-editor .e-contextual-toolbar-wrapper {
+  border-bottom: 1px solid #ccc;
   width: 100%;
   z-index: 1;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
+  border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
   height: 130px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
@@ -407,6 +474,10 @@
   margin: 4px;
   text-align: center;
 }
+.e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-dropdown-btn {
+  margin: 0 auto;
+  width: max-content;
+}
 .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
   display: none;
 }
@@ -424,14 +495,48 @@
   margin-left: calc(50% - 137px);
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-ie-straighten-value-span,
+.e-ie-straighten-span {
+  font-size: 14px;
+  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
+  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
+  height: auto;
+}
+
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider-track,
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-range {
+  top: calc(50% - 2px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
+  top: calc(50% - 5px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
+  top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup.e-ie-crop-ddb-popup ul {
+  height: 250px;
+  overflow-y: scroll;
+}
+
+.e-dropdown-popup.e-ie-ddb-popup {
+  background: none !important; /* stylelint-disable-line declaration-no-important */
+}
 
 .e-image-editor {
   background: #e6e6e6;
 }
 .e-image-editor .e-contextual-toolbar-wrapper {
   background: #f8f8f8;
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
   border-color: #e6e6e6;