@syncfusion/blazor-themes 23.1.44 → 23.2.5

package/SCSS-Themes/image-editor/image-editor/bootstrap5.scss

@@ -23,6 +23,10 @@ $image-editor-tbar-btn-fontsize: $text-lg !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;
 
 @include export-module('image-editor-layout') {
 
@@ -90,6 +94,7 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -108,6 +113,17 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
           }
         }
 
+        & .e-btn-icon.e-dropdownbtn-preview {
+          margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-bigger-dropdown-btn-preview-left;
+        }
+
+        & .e-dropdown-btn.e-icon-btn {
+          @if $skin-name == 'Material3' {
+            padding: 7px 15px;
+          }
+        }
+
         & .e-dropdown-btn.e-image-popup {
           & .e-select,
           & .e-annotation,
@@ -254,6 +270,7 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -275,7 +292,8 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
         & .e-btn-icon.e-dropdownbtn-preview {
           height: 18px;
           width: 18px;
-          margin-top: -4px;
+          margin-top: $image-editor-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-dropdown-btn-preview-left;
         }
 
         & .e-dropdown-btn.e-image-popup {
@@ -347,6 +365,11 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
           margin: 4px;
           text-align: center;
         }
+
+        & .e-dropdown-btn {
+          margin: 0 auto;
+          width: max-content;
+        }
       }
 
       &.e-frame-wrapper {
@@ -388,12 +411,7 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
 
       & .e-slider-container {
         margin-left: calc(50% - 137px);
-        @if $skin-name == 'Material3' {
-          height: 70px !important; /* stylelint-disable-line declaration-no-important */
-        }
-        @else {
-          height: 54px !important; /* stylelint-disable-line declaration-no-important */
-        }
+        height: 54px !important; /* stylelint-disable-line declaration-no-important */
       }
     }
   }

package/SCSS-Themes/image-editor/image-editor/fabric-dark.scss

@@ -23,6 +23,10 @@ $image-editor-tbar-btn-fontsize: 16px !default;
 $image-editor-bigger-tbar-btn-fontsize: 18px !default;
 $image-editor-contextual-toolbar: $neutral-lighter !default;
 $image-editor-drop-border: 2px dashed $neutral-light-font !default;
+$image-editor-dropdown-btn-preview-top: -4px !default;
+$image-editor-dropdown-btn-preview-left: -1px !default;
+$image-editor-bigger-dropdown-btn-preview-top: -4px !default;
+$image-editor-bigger-dropdown-btn-preview-left: -1px !default;
 
 @include export-module('image-editor-layout') {
 
@@ -90,6 +94,7 @@ $image-editor-drop-border: 2px dashed $neutral-light-font !default;
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -108,6 +113,17 @@ $image-editor-drop-border: 2px dashed $neutral-light-font !default;
           }
         }
 
+        & .e-btn-icon.e-dropdownbtn-preview {
+          margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-bigger-dropdown-btn-preview-left;
+        }
+
+        & .e-dropdown-btn.e-icon-btn {
+          @if $skin-name == 'Material3' {
+            padding: 7px 15px;
+          }
+        }
+
         & .e-dropdown-btn.e-image-popup {
           & .e-select,
           & .e-annotation,
@@ -254,6 +270,7 @@ $image-editor-drop-border: 2px dashed $neutral-light-font !default;
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -275,7 +292,8 @@ $image-editor-drop-border: 2px dashed $neutral-light-font !default;
         & .e-btn-icon.e-dropdownbtn-preview {
           height: 18px;
           width: 18px;
-          margin-top: -4px;
+          margin-top: $image-editor-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-dropdown-btn-preview-left;
         }
 
         & .e-dropdown-btn.e-image-popup {
@@ -347,6 +365,11 @@ $image-editor-drop-border: 2px dashed $neutral-light-font !default;
           margin: 4px;
           text-align: center;
         }
+
+        & .e-dropdown-btn {
+          margin: 0 auto;
+          width: max-content;
+        }
       }
 
       &.e-frame-wrapper {
@@ -388,12 +411,7 @@ $image-editor-drop-border: 2px dashed $neutral-light-font !default;
 
       & .e-slider-container {
         margin-left: calc(50% - 137px);
-        @if $skin-name == 'Material3' {
-          height: 70px !important; /* stylelint-disable-line declaration-no-important */
-        }
-        @else {
-          height: 54px !important; /* stylelint-disable-line declaration-no-important */
-        }
+        height: 54px !important; /* stylelint-disable-line declaration-no-important */
       }
     }
   }

package/SCSS-Themes/image-editor/image-editor/fabric.scss

@@ -23,6 +23,10 @@ $image-editor-tbar-btn-fontsize: 16px !default;
 $image-editor-bigger-tbar-btn-fontsize: 18px !default;
 $image-editor-contextual-toolbar: $neutral-white !default;
 $image-editor-drop-border: 2px dashed $neutral-light-font !default;
+$image-editor-dropdown-btn-preview-top: -4px !default;
+$image-editor-dropdown-btn-preview-left: -1px !default;
+$image-editor-bigger-dropdown-btn-preview-top: -4px !default;
+$image-editor-bigger-dropdown-btn-preview-left: -1px !default;
 
 @include export-module('image-editor-layout') {
 
@@ -90,6 +94,7 @@ $image-editor-drop-border: 2px dashed $neutral-light-font !default;
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -108,6 +113,17 @@ $image-editor-drop-border: 2px dashed $neutral-light-font !default;
           }
         }
 
+        & .e-btn-icon.e-dropdownbtn-preview {
+          margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-bigger-dropdown-btn-preview-left;
+        }
+
+        & .e-dropdown-btn.e-icon-btn {
+          @if $skin-name == 'Material3' {
+            padding: 7px 15px;
+          }
+        }
+
         & .e-dropdown-btn.e-image-popup {
           & .e-select,
           & .e-annotation,
@@ -254,6 +270,7 @@ $image-editor-drop-border: 2px dashed $neutral-light-font !default;
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -275,7 +292,8 @@ $image-editor-drop-border: 2px dashed $neutral-light-font !default;
         & .e-btn-icon.e-dropdownbtn-preview {
           height: 18px;
           width: 18px;
-          margin-top: -4px;
+          margin-top: $image-editor-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-dropdown-btn-preview-left;
         }
 
         & .e-dropdown-btn.e-image-popup {
@@ -347,6 +365,11 @@ $image-editor-drop-border: 2px dashed $neutral-light-font !default;
           margin: 4px;
           text-align: center;
         }
+
+        & .e-dropdown-btn {
+          margin: 0 auto;
+          width: max-content;
+        }
       }
 
       &.e-frame-wrapper {
@@ -388,12 +411,7 @@ $image-editor-drop-border: 2px dashed $neutral-light-font !default;
 
       & .e-slider-container {
         margin-left: calc(50% - 137px);
-        @if $skin-name == 'Material3' {
-          height: 70px !important; /* stylelint-disable-line declaration-no-important */
-        }
-        @else {
-          height: 54px !important; /* stylelint-disable-line declaration-no-important */
-        }
+        height: 54px !important; /* stylelint-disable-line declaration-no-important */
       }
     }
   }

package/SCSS-Themes/image-editor/image-editor/fluent-dark.scss

@@ -23,6 +23,10 @@ $image-editor-tbar-btn-fontsize: $text-lg !default;
 $image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
 $image-editor-contextual-toolbar: $content-bg-color-alt2 !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;
 
 @include export-module('image-editor-layout') {
 
@@ -90,6 +94,7 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -108,6 +113,17 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
           }
         }
 
+        & .e-btn-icon.e-dropdownbtn-preview {
+          margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-bigger-dropdown-btn-preview-left;
+        }
+
+        & .e-dropdown-btn.e-icon-btn {
+          @if $skin-name == 'Material3' {
+            padding: 7px 15px;
+          }
+        }
+
         & .e-dropdown-btn.e-image-popup {
           & .e-select,
           & .e-annotation,
@@ -254,6 +270,7 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -275,7 +292,8 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
         & .e-btn-icon.e-dropdownbtn-preview {
           height: 18px;
           width: 18px;
-          margin-top: -4px;
+          margin-top: $image-editor-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-dropdown-btn-preview-left;
         }
 
         & .e-dropdown-btn.e-image-popup {
@@ -347,6 +365,11 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
           margin: 4px;
           text-align: center;
         }
+
+        & .e-dropdown-btn {
+          margin: 0 auto;
+          width: max-content;
+        }
       }
 
       &.e-frame-wrapper {
@@ -388,12 +411,7 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
 
       & .e-slider-container {
         margin-left: calc(50% - 137px);
-        @if $skin-name == 'Material3' {
-          height: 70px !important; /* stylelint-disable-line declaration-no-important */
-        }
-        @else {
-          height: 54px !important; /* stylelint-disable-line declaration-no-important */
-        }
+        height: 54px !important; /* stylelint-disable-line declaration-no-important */
       }
     }
   }

package/SCSS-Themes/image-editor/image-editor/fluent.scss

@@ -23,6 +23,10 @@ $image-editor-tbar-btn-fontsize: $text-lg !default;
 $image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
 $image-editor-contextual-toolbar: $content-bg-color-alt2 !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;
 
 @include export-module('image-editor-layout') {
 
@@ -90,6 +94,7 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -108,6 +113,17 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
           }
         }
 
+        & .e-btn-icon.e-dropdownbtn-preview {
+          margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-bigger-dropdown-btn-preview-left;
+        }
+
+        & .e-dropdown-btn.e-icon-btn {
+          @if $skin-name == 'Material3' {
+            padding: 7px 15px;
+          }
+        }
+
         & .e-dropdown-btn.e-image-popup {
           & .e-select,
           & .e-annotation,
@@ -254,6 +270,7 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -275,7 +292,8 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
         & .e-btn-icon.e-dropdownbtn-preview {
           height: 18px;
           width: 18px;
-          margin-top: -4px;
+          margin-top: $image-editor-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-dropdown-btn-preview-left;
         }
 
         & .e-dropdown-btn.e-image-popup {
@@ -347,6 +365,11 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
           margin: 4px;
           text-align: center;
         }
+
+        & .e-dropdown-btn {
+          margin: 0 auto;
+          width: max-content;
+        }
       }
 
       &.e-frame-wrapper {
@@ -388,12 +411,7 @@ $image-editor-drop-border: 2px dashed $icon-color !default;
 
       & .e-slider-container {
         margin-left: calc(50% - 137px);
-        @if $skin-name == 'Material3' {
-          height: 70px !important; /* stylelint-disable-line declaration-no-important */
-        }
-        @else {
-          height: 54px !important; /* stylelint-disable-line declaration-no-important */
-        }
+        height: 54px !important; /* stylelint-disable-line declaration-no-important */
       }
     }
   }

package/SCSS-Themes/image-editor/image-editor/highcontrast.scss

@@ -23,6 +23,10 @@ $image-editor-tbar-btn-fontsize: 16px !default;
 $image-editor-bigger-tbar-btn-fontsize: 18px !default;
 $image-editor-contextual-toolbar: $bg-base-0 !default;
 $image-editor-drop-border: 2px dashed $content-font !default;
+$image-editor-dropdown-btn-preview-top: -4px !default;
+$image-editor-dropdown-btn-preview-left: -1px !default;
+$image-editor-bigger-dropdown-btn-preview-top: -4px !default;
+$image-editor-bigger-dropdown-btn-preview-left: -1px !default;
 
 @include export-module('image-editor-layout') {
 
@@ -90,6 +94,7 @@ $image-editor-drop-border: 2px dashed $content-font !default;
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -108,6 +113,17 @@ $image-editor-drop-border: 2px dashed $content-font !default;
           }
         }
 
+        & .e-btn-icon.e-dropdownbtn-preview {
+          margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-bigger-dropdown-btn-preview-left;
+        }
+
+        & .e-dropdown-btn.e-icon-btn {
+          @if $skin-name == 'Material3' {
+            padding: 7px 15px;
+          }
+        }
+
         & .e-dropdown-btn.e-image-popup {
           & .e-select,
           & .e-annotation,
@@ -254,6 +270,7 @@ $image-editor-drop-border: 2px dashed $content-font !default;
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -275,7 +292,8 @@ $image-editor-drop-border: 2px dashed $content-font !default;
         & .e-btn-icon.e-dropdownbtn-preview {
           height: 18px;
           width: 18px;
-          margin-top: -4px;
+          margin-top: $image-editor-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-dropdown-btn-preview-left;
         }
 
         & .e-dropdown-btn.e-image-popup {
@@ -347,6 +365,11 @@ $image-editor-drop-border: 2px dashed $content-font !default;
           margin: 4px;
           text-align: center;
         }
+
+        & .e-dropdown-btn {
+          margin: 0 auto;
+          width: max-content;
+        }
       }
 
       &.e-frame-wrapper {
@@ -388,12 +411,7 @@ $image-editor-drop-border: 2px dashed $content-font !default;
 
       & .e-slider-container {
         margin-left: calc(50% - 137px);
-        @if $skin-name == 'Material3' {
-          height: 70px !important; /* stylelint-disable-line declaration-no-important */
-        }
-        @else {
-          height: 54px !important; /* stylelint-disable-line declaration-no-important */
-        }
+        height: 54px !important; /* stylelint-disable-line declaration-no-important */
       }
     }
   }

package/SCSS-Themes/image-editor/image-editor/material-dark.scss

@@ -23,6 +23,10 @@ $image-editor-tbar-btn-fontsize: 16px !default;
 $image-editor-bigger-tbar-btn-fontsize: 18px !default;
 $image-editor-contextual-toolbar: $grey-900 !default;
 $image-editor-drop-border: 2px dashed $grey-dark-font !default;
+$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;
 
 @include export-module('image-editor-layout') {
 
@@ -90,6 +94,7 @@ $image-editor-drop-border: 2px dashed $grey-dark-font !default;
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -108,6 +113,17 @@ $image-editor-drop-border: 2px dashed $grey-dark-font !default;
           }
         }
 
+        & .e-btn-icon.e-dropdownbtn-preview {
+          margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-bigger-dropdown-btn-preview-left;
+        }
+
+        & .e-dropdown-btn.e-icon-btn {
+          @if $skin-name == 'Material3' {
+            padding: 7px 15px;
+          }
+        }
+
         & .e-dropdown-btn.e-image-popup {
           & .e-select,
           & .e-annotation,
@@ -254,6 +270,7 @@ $image-editor-drop-border: 2px dashed $grey-dark-font !default;
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -275,7 +292,8 @@ $image-editor-drop-border: 2px dashed $grey-dark-font !default;
         & .e-btn-icon.e-dropdownbtn-preview {
           height: 18px;
           width: 18px;
-          margin-top: -4px;
+          margin-top: $image-editor-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-dropdown-btn-preview-left;
         }
 
         & .e-dropdown-btn.e-image-popup {
@@ -347,6 +365,11 @@ $image-editor-drop-border: 2px dashed $grey-dark-font !default;
           margin: 4px;
           text-align: center;
         }
+
+        & .e-dropdown-btn {
+          margin: 0 auto;
+          width: max-content;
+        }
       }
 
       &.e-frame-wrapper {
@@ -388,12 +411,7 @@ $image-editor-drop-border: 2px dashed $grey-dark-font !default;
 
       & .e-slider-container {
         margin-left: calc(50% - 137px);
-        @if $skin-name == 'Material3' {
-          height: 70px !important; /* stylelint-disable-line declaration-no-important */
-        }
-        @else {
-          height: 54px !important; /* stylelint-disable-line declaration-no-important */
-        }
+        height: 54px !important; /* stylelint-disable-line declaration-no-important */
       }
     }
   }

package/SCSS-Themes/image-editor/image-editor/material.scss

@@ -23,6 +23,10 @@ $image-editor-tbar-btn-fontsize: 16px !default;
 $image-editor-bigger-tbar-btn-fontsize: 18px !default;
 $image-editor-contextual-toolbar: $grey-50 !default;
 $image-editor-drop-border: 2px dashed $grey-600 !default;
+$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;
 
 @include export-module('image-editor-layout') {
 
@@ -90,6 +94,7 @@ $image-editor-drop-border: 2px dashed $grey-600 !default;
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -108,6 +113,17 @@ $image-editor-drop-border: 2px dashed $grey-600 !default;
           }
         }
 
+        & .e-btn-icon.e-dropdownbtn-preview {
+          margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-bigger-dropdown-btn-preview-left;
+        }
+
+        & .e-dropdown-btn.e-icon-btn {
+          @if $skin-name == 'Material3' {
+            padding: 7px 15px;
+          }
+        }
+
         & .e-dropdown-btn.e-image-popup {
           & .e-select,
           & .e-annotation,
@@ -254,6 +270,7 @@ $image-editor-drop-border: 2px dashed $grey-600 !default;
 
         & .e-fill.e-template,
         & .e-stroke.e-template,
+        & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
         & .e-save.e-template {
@@ -275,7 +292,8 @@ $image-editor-drop-border: 2px dashed $grey-600 !default;
         & .e-btn-icon.e-dropdownbtn-preview {
           height: 18px;
           width: 18px;
-          margin-top: -4px;
+          margin-top: $image-editor-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $image-editor-dropdown-btn-preview-left;
         }
 
         & .e-dropdown-btn.e-image-popup {
@@ -347,6 +365,11 @@ $image-editor-drop-border: 2px dashed $grey-600 !default;
           margin: 4px;
           text-align: center;
         }
+
+        & .e-dropdown-btn {
+          margin: 0 auto;
+          width: max-content;
+        }
       }
 
       &.e-frame-wrapper {
@@ -388,12 +411,7 @@ $image-editor-drop-border: 2px dashed $grey-600 !default;
 
       & .e-slider-container {
         margin-left: calc(50% - 137px);
-        @if $skin-name == 'Material3' {
-          height: 70px !important; /* stylelint-disable-line declaration-no-important */
-        }
-        @else {
-          height: 54px !important; /* stylelint-disable-line declaration-no-important */
-        }
+        height: 54px !important; /* stylelint-disable-line declaration-no-important */
       }
     }
   }