@syncfusion/ej2-image-editor 31.2.16 → 32.1.19

package/styles/bootstrap5.css

@@ -200,16 +200,6 @@
 .e-device.e-image-editor .e-img-font-style.e-template {
   margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-device.e-image-editor .e-slider-container {
-  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, .e-device.e-image-editor .e-scroll-right-overlay {
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -254,8 +244,8 @@
   height: calc(100% - 18px);
   width: calc(100% - 20px);
   border: 2px dashed #6c757d;
-  border-radius: 10px;
   margin: 10px;
+  border-radius: 10px;
 }
 .e-image-editor .e-ie-drop-area .e-upload {
   display: none;
@@ -266,24 +256,30 @@
 .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
   top: calc(50% - 60px);
   left: calc(50% - 25px);
+  position: absolute;
 }
 .e-image-editor .e-ie-drop-area .e-ie-drop-content {
   top: 50%;
   left: calc(50% - 160px);
   font-size: 14px;
+  position: absolute;
+}
+.e-image-editor .e-ie-drop-area .e-ie-drop-browse {
+  text-decoration: none;
 }
 .e-image-editor .e-ie-drop-area .e-ie-drop-info {
   top: calc(50% + 40px);
   left: 50%;
+  font-size: 14px;
+  position: absolute;
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
-  position: absolute;
-  font-size: 14px;
 }
 .e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
   left: calc(50% - 120px);
   top: 50%;
   font-size: 14px;
+  position: absolute;
 }
 .e-image-editor .e-toolbar {
   border: none;
@@ -294,9 +290,14 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
   margin-left: 20px;
   min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
+  font-size: 12px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
   min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
+  font-size: 12px;
+}
+.e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-stroke, .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-frame-stroke, .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-size {
+  font-size: 12px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
   font-size: 18px;
@@ -359,6 +360,13 @@
   width: 100%;
   z-index: 1;
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-ie-head-wrapper {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  text-align: center;
+  height: auto;
+  min-height: 58px;
+}
 .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 */
@@ -406,6 +414,7 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
+  font-size: 12px;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
   text-align: center;
@@ -415,9 +424,19 @@
   height: 100px;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
-  margin-left: calc(50% - 137px);
-  height: 54px !important; /* stylelint-disable-line declaration-no-important */
+  margin: 0 16px 1px 16px;
+  height: auto;
+}
+.e-image-editor .e-ie-finetune-slider-wrap {
+  height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-ie-finetune-slider-label, .e-image-editor .e-ie-finetune-value-span, .e-image-editor .e-ie-redact-value-span {
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: normal;
+  font-weight: 400;
+}
+
 .e-ie-straighten-value-span,
 .e-ie-straighten-span,
 .e-ie-toolbar-straighten {
@@ -426,10 +445,18 @@
   padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-straighten-value-span,
+.e-device.e-image-editor .e-ie-straighten-span,
+.e-device.e-image-editor .e-ie-toolbar-straighten {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
+  padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
+  padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
   height: auto;
-  margin-left: 8px;
   padding-right: 2px;
+  margin-left: 8px;
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -445,14 +472,6 @@
   top: calc(50% - 5px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-ie-finetune-value-span {
-  top: 29% !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.e-ie-finetune-slider-label {
-  top: 29% !important; /* stylelint-disable-line declaration-no-important */
-}
-
 .e-ie-finetune-slider-wrap {
   top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -462,7 +481,8 @@
 }
 
 .e-ie-slider-wrap {
-  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+  height: auto !important; /* stylelint-disable-line declaration-no-important */
+  top: auto !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-dropdown-popup.e-ie-crop-ddb-popup ul {
@@ -474,10 +494,6 @@
   background: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-device.e-image-editor .e-ie-device-transparency-slider {
-  margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
-}
-
 .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal,
 .e-ie-quality-option-container .e-slider-container.e-horizontal {
   height: 28px;
@@ -536,6 +552,7 @@
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
+  text-align: center;
 }
 
 .e-ie-dlg-right-content {
@@ -544,13 +561,14 @@
 
 .e-ie-img-save-name {
   display: inline-block;
-  margin-right: 10px;
   width: calc(69% - 13px);
+  margin-right: 10px;
 }
 
 .e-ie-img-save-dlg {
   display: inline-block;
-  width: 92px;
+  width: auto;
+  min-width: 92px;
 }
 
 .e-ie-img-save-dlg .e-btn {
@@ -558,8 +576,8 @@
 }
 
 .e-ie-img-label-name {
-  margin-bottom: 5px;
   display: block;
+  margin-bottom: 5px;
 }
 
 .e-ie-img-quality-name {
@@ -609,11 +627,11 @@
 }
 
 .e-ie-img-icon-button {
-  margin-left: 10px;
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
   margin-bottom: 4px;
+  margin-left: 10px;
 }
 
 .e-ie-quality-option-container .e-btn-group .e-btn {
@@ -646,24 +664,12 @@
 .e-blr-ie-save-dialog.e-device .e-ie-quality-option-container .e-ie-img-icon-button {
   margin-left: 0;
 }
-.e-blr-ie-save-dialog.e-device .e-slider-container {
-  margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
-  height: 28px !important; /* stylelint-disable-line declaration-no-important */
-}
 .e-blr-ie-save-dialog.e-device .e-ie-img-size-value-span {
   margin-left: calc(70% - 100px) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-blr-ie-save-dialog.e-device .e-btn-group .e-btn {
   padding: 6px 13px;
 }
-.e-ie-straighten-value-span {
-  margin-left: 7px !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 */
-}
-
 @media only screen and (max-width: 390px) {
   .e-device.e-image-editor .e-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-ie-img-quality-name .e-btn-group .e-btn {
     padding-left: 11px;
@@ -673,17 +679,13 @@
     width: calc(67% - 30px) !important; /* stylelint-disable-line declaration-no-important */
   }
 }
-.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-finetune-slider-label {
-  left: calc(50% - 145px) !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
-  width: 170px !important; /* stylelint-disable-line declaration-no-important */
-  margin-left: calc(50% - 62px) !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.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-contextual-toolbar-wrapper .e-ie-finetune-slider-label,
+.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-finetune-value-span,
+.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-redact-value-span {
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: normal;
+  font-weight: normal;
 }
 
 .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
@@ -765,7 +767,6 @@
   -webkit-box-shadow: none !important;
           box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
 }
-
 .e-dropdown-popup .e-selected-btn {
   background: rgb(91.8, 99.45, 106.25) !important; /* stylelint-disable-line declaration-no-important */
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
@@ -781,6 +782,14 @@
 .e-image-editor.e-bigger .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle {
   top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-bigger .e-image-editor .e-contextual-toolbar-wrapper .e-ie-head-wrapper,
+.e-image-editor.e-bigger .e-contextual-toolbar-wrapper .e-ie-head-wrapper {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  text-align: center;
+  height: auto;
+  min-height: 58px;
+}
 .e-bigger .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar,
 .e-image-editor.e-bigger .e-contextual-toolbar-wrapper .e-toolbar {
   height: 130px !important; /* stylelint-disable-line declaration-no-important */
@@ -795,10 +804,14 @@
   height: 46px !important; /* stylelint-disable-line declaration-no-important */
   min-height: 46px !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span,
+.e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .filter-wrapper, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-stroke, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-frame-stroke, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-size,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span,
-.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span {
-  font-size: 16px;
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .filter-wrapper,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-stroke,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-frame-stroke,
+.e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-size {
+  font-size: 14px;
 }
 .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
@@ -852,6 +865,15 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
   line-height: 1;
 }
+.e-bigger .e-image-editor .e-ie-finetune-slider-label, .e-bigger .e-image-editor .e-ie-finetune-value-span, .e-bigger .e-image-editor .e-ie-redact-value-span,
+.e-image-editor.e-bigger .e-ie-finetune-slider-label,
+.e-image-editor.e-bigger .e-ie-finetune-value-span,
+.e-image-editor.e-bigger .e-ie-redact-value-span {
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: normal;
+  font-weight: normal;
+}
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
   top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/bootstrap5.scss

@@ -1,14 +1,14 @@
-@import 'ej2-base/styles/definition/bootstrap5.scss';
-@import 'ej2-buttons/styles/button/bootstrap5-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap5-definition.scss';
-@import 'ej2-inputs/styles/numerictextbox/bootstrap5-definition.scss';
-@import 'ej2-inputs/styles/textbox/bootstrap5-definition.scss';
-@import 'ej2-inputs/styles/uploader/bootstrap5-definition.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap5-definition.scss';
-@import 'ej2-inputs/styles/color-picker/bootstrap5-definition.scss';
-@import 'ej2-navigations/styles/toolbar/bootstrap5-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap5-definition.scss';
-@import 'image-editor/bootstrap5-definition.scss';
-@import 'image-editor/icons/bootstrap5.scss';
-@import 'image-editor/all.scss';
-@import 'image-editor/bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'ej2-buttons/styles/button/bootstrap5-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap5-definition' as *;
+@use 'ej2-inputs/styles/numerictextbox/bootstrap5-definition' as *;
+@use 'ej2-inputs/styles/textbox/bootstrap5-definition' as *;
+@use 'ej2-inputs/styles/uploader/bootstrap5-definition' as *;
+@use 'ej2-popups/styles/tooltip/bootstrap5-definition' as *;
+@use 'ej2-inputs/styles/color-picker/bootstrap5-definition' as *;
+@use 'ej2-navigations/styles/toolbar/bootstrap5-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap5-definition' as *;
+@use 'image-editor/bootstrap5-definition' as *;
+@use 'image-editor/icons/bootstrap5' as *;
+@use 'image-editor/all' as *;
+@use 'image-editor/bigger' as *;

package/styles/fabric-dark-lite.css

@@ -199,16 +199,6 @@
 .e-device.e-image-editor .e-img-font-style.e-template {
   margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-device.e-image-editor .e-slider-container {
-  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, .e-device.e-image-editor .e-scroll-right-overlay {
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -253,8 +243,8 @@
   height: calc(100% - 18px);
   width: calc(100% - 20px);
   border: 2px dashed #dadada;
-  border-radius: 10px;
   margin: 10px;
+  border-radius: 10px;
 }
 .e-image-editor .e-ie-drop-area .e-upload {
   display: none;
@@ -265,24 +255,30 @@
 .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
   top: calc(50% - 60px);
   left: calc(50% - 25px);
+  position: absolute;
 }
 .e-image-editor .e-ie-drop-area .e-ie-drop-content {
   top: 50%;
   left: calc(50% - 160px);
   font-size: 14px;
+  position: absolute;
+}
+.e-image-editor .e-ie-drop-area .e-ie-drop-browse {
+  text-decoration: none;
 }
 .e-image-editor .e-ie-drop-area .e-ie-drop-info {
   top: calc(50% + 40px);
   left: 50%;
+  font-size: 14px;
+  position: absolute;
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
-  position: absolute;
-  font-size: 14px;
 }
 .e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
   left: calc(50% - 120px);
   top: 50%;
   font-size: 14px;
+  position: absolute;
 }
 .e-image-editor .e-toolbar {
   border: none;
@@ -293,9 +289,14 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
   margin-left: 20px;
   min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
+  font-size: 12px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
   min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
+  font-size: 12px;
+}
+.e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-stroke, .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-frame-stroke, .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-size {
+  font-size: 12px;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 0;
@@ -354,6 +355,13 @@
   width: 100%;
   z-index: 1;
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-ie-head-wrapper {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  text-align: center;
+  height: auto;
+  min-height: 58px;
+}
 .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 */
@@ -401,6 +409,7 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
+  font-size: 12px;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
   text-align: center;
@@ -410,9 +419,19 @@
   height: 100px;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
-  margin-left: calc(50% - 137px);
-  height: 54px !important; /* stylelint-disable-line declaration-no-important */
+  margin: 0 16px 1px 16px;
+  height: auto;
+}
+.e-image-editor .e-ie-finetune-slider-wrap {
+  height: auto !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-image-editor .e-ie-finetune-slider-label, .e-image-editor .e-ie-finetune-value-span, .e-image-editor .e-ie-redact-value-span {
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: normal;
+  font-weight: 400;
 }
+
 .e-ie-straighten-value-span,
 .e-ie-straighten-span,
 .e-ie-toolbar-straighten {
@@ -421,10 +440,18 @@
   padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-device.e-image-editor .e-ie-straighten-value-span,
+.e-device.e-image-editor .e-ie-straighten-span,
+.e-device.e-image-editor .e-ie-toolbar-straighten {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
+  padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
+  padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
   height: auto;
-  margin-left: 8px;
   padding-right: 2px;
+  margin-left: 8px;
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -440,14 +467,6 @@
   top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-ie-finetune-value-span {
-  top: 29% !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.e-ie-finetune-slider-label {
-  top: 29% !important; /* stylelint-disable-line declaration-no-important */
-}
-
 .e-ie-finetune-slider-wrap {
   top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -457,7 +476,8 @@
 }
 
 .e-ie-slider-wrap {
-  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+  height: auto !important; /* stylelint-disable-line declaration-no-important */
+  top: auto !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-dropdown-popup.e-ie-crop-ddb-popup ul {
@@ -469,10 +489,6 @@
   background: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-device.e-image-editor .e-ie-device-transparency-slider {
-  margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
-}
-
 .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal,
 .e-ie-quality-option-container .e-slider-container.e-horizontal {
   height: 28px;
@@ -531,6 +547,7 @@
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
+  text-align: center;
 }
 
 .e-ie-dlg-right-content {
@@ -539,14 +556,15 @@
 
 .e-ie-img-save-name {
   display: inline-block;
-  margin-right: 10px;
   width: calc(69% - 13px);
+  margin-right: 10px;
   margin-right: 8px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-ie-img-save-dlg {
   display: inline-block;
-  width: 92px;
+  width: auto;
+  min-width: 92px;
 }
 
 .e-ie-img-save-dlg .e-btn {
@@ -554,8 +572,8 @@
 }
 
 .e-ie-img-label-name {
-  margin-bottom: 5px;
   display: block;
+  margin-bottom: 5px;
 }
 
 .e-ie-img-quality-name {
@@ -605,11 +623,11 @@
 }
 
 .e-ie-img-icon-button {
-  margin-left: 10px;
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
   margin-bottom: 4px;
+  margin-left: 10px;
 }
 
 .e-ie-quality-option-container .e-btn-group .e-btn {
@@ -642,24 +660,12 @@
 .e-blr-ie-save-dialog.e-device .e-ie-quality-option-container .e-ie-img-icon-button {
   margin-left: 0;
 }
-.e-blr-ie-save-dialog.e-device .e-slider-container {
-  margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
-  height: 28px !important; /* stylelint-disable-line declaration-no-important */
-}
 .e-blr-ie-save-dialog.e-device .e-ie-img-size-value-span {
   margin-left: calc(75% - 100px) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-blr-ie-save-dialog.e-device .e-btn-group .e-btn {
   padding: 2px 8px;
 }
-.e-ie-straighten-value-span {
-  margin-left: 7px !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 */
-}
-
 @media only screen and (max-width: 390px) {
   .e-device.e-image-editor .e-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-ie-img-quality-name .e-btn-group .e-btn {
     padding-left: 7px;
@@ -669,17 +675,13 @@
     width: calc(64% - 30px) !important; /* stylelint-disable-line declaration-no-important */
   }
 }
-.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-finetune-slider-label {
-  left: calc(50% - 145px) !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
-  width: 170px !important; /* stylelint-disable-line declaration-no-important */
-  margin-left: calc(50% - 62px) !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.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-contextual-toolbar-wrapper .e-ie-finetune-slider-label,
+.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-finetune-value-span,
+.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-redact-value-span {
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: normal;
+  font-weight: normal;
 }
 
 .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
@@ -758,7 +760,6 @@
   -webkit-box-shadow: none !important;
           box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
 }
-
 .e-dropdown-popup .e-selected-btn {
   background: #4a4848 !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/fabric-dark-lite.scss

@@ -1,13 +1,13 @@
-@import 'ej2-base/styles/definition/fabric-dark.scss';
-@import 'ej2-buttons/styles/button/fabric-dark-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/fabric-dark-definition.scss';
-@import 'ej2-inputs/styles/numerictextbox/fabric-dark-definition.scss';
-@import 'ej2-inputs/styles/textbox/fabric-dark-definition.scss';
-@import 'ej2-inputs/styles/uploader/fabric-dark-definition.scss';
-@import 'ej2-popups/styles/tooltip/fabric-dark-definition.scss';
-@import 'ej2-inputs/styles/color-picker/fabric-dark-definition.scss';
-@import 'ej2-navigations/styles/toolbar/fabric-dark-definition.scss';
-@import 'ej2-popups/styles/spinner/fabric-dark-definition.scss';
-@import 'image-editor/fabric-dark-definition.scss';
-@import 'image-editor/icons/fabric-dark.scss';
-@import 'image-editor/all.scss';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'ej2-buttons/styles/button/fabric-dark-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/fabric-dark-definition' as *;
+@use 'ej2-inputs/styles/numerictextbox/fabric-dark-definition' as *;
+@use 'ej2-inputs/styles/textbox/fabric-dark-definition' as *;
+@use 'ej2-inputs/styles/uploader/fabric-dark-definition' as *;
+@use 'ej2-popups/styles/tooltip/fabric-dark-definition' as *;
+@use 'ej2-inputs/styles/color-picker/fabric-dark-definition' as *;
+@use 'ej2-navigations/styles/toolbar/fabric-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/fabric-dark-definition' as *;
+@use 'image-editor/fabric-dark-definition' as *;
+@use 'image-editor/icons/fabric-dark' as *;
+@use 'image-editor/all' as *;