@syncfusion/blazor-themes 23.2.7 → 24.1.41

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

@@ -27,6 +27,9 @@ $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;
+$image-editor-slider-handler: calc(50% - 8px) !default;
+$image-editor-bigger-slider-handler: calc(50% - 8px) !default;
+$image-editor-device-slider-handler: calc(50% - 8px) !default;
 
 @include export-module('image-editor-layout') {
 
@@ -41,13 +44,62 @@ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
     }
 
     & .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 */
@@ -160,6 +212,13 @@ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
     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;
@@ -172,6 +231,9 @@ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
       border: $image-editor-drop-border;
       border-radius: 10px;
       margin: 10px;
+      @if $skin-name == 'highcontrast' {
+        color: $hover-font;
+      }
 
       & .e-upload {
         display: none;
@@ -192,6 +254,12 @@ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
         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);
@@ -208,10 +276,14 @@ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
 
     & .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 {
@@ -325,24 +397,26 @@ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
         }
       }
     }
+    
 
     & .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 */
         }
@@ -386,6 +460,11 @@ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
           margin: 4px;
           text-align: center;
         }
+
+        & .e-dropdown-btn {
+          margin: 0 auto;
+          width: max-content;
+        }
       }
 
       &.e-hide {
@@ -412,9 +491,67 @@ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
       & .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 */
+  }
 }
 
 
@@ -424,8 +561,6 @@ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
 
     & .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,
@@ -471,9 +606,9 @@ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
           }
 
           &:hover {
-            background: $btn-hover-bgcolor;
+            background: $tbar-hover-bg;
             box-shadow: none;
-            color: $btn-hover-color;
+            color: $tbar-hover-font;
           }
 
           &:focus {
@@ -690,6 +825,36 @@ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
         content: '\e8af';
       }
     }
+
+    & .e-custom-f {
+      &::before {
+        content: '\e8dd';
+      }
+    }
+    
+    & .e-custom-g {
+      &::before {
+        content: '\e8de';
+      }
+    }
+    
+    & .e-custom-h {
+      &::before {
+        content: '\e8df';
+      }
+    }
+    
+    & .e-custom-i {
+      &::before {
+        content: '\e8e0';
+      }
+    }
+    
+    & .e-custom-j {
+      &::before {
+        content: '\e8e1';
+      }
+    }
   
     & .e-horizontal-flip {
       &::before {
@@ -813,6 +978,42 @@ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
       content: '\e8af';
     }
   }
+
+  & .e-custom-e {
+    &::before {
+      content: '\e8af';
+    }
+  }
+
+  & .e-custom-f {
+    &::before {
+      content: '\e8dd';
+    }
+  }
+  
+  & .e-custom-g {
+    &::before {
+      content: '\e8de';
+    }
+  }
+  
+  & .e-custom-h {
+    &::before {
+      content: '\e8df';
+    }
+  }
+  
+  & .e-custom-i {
+    &::before {
+      content: '\e8e0';
+    }
+  }
+  
+  & .e-custom-j {
+    &::before {
+      content: '\e8e1';
+    }
+  }
   
   & .e-rectangle {
     &::before {

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

@@ -27,6 +27,9 @@ $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;
+$image-editor-slider-handler: calc(50% - 6px) !default;
+$image-editor-bigger-slider-handler: calc(50% - 8px) !default;
+$image-editor-device-slider-handler: calc(50% - 8px) !default;
 
 @include export-module('image-editor-layout') {
 
@@ -41,13 +44,62 @@ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
     }
 
     & .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 */
@@ -160,6 +212,13 @@ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
     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;
@@ -172,6 +231,9 @@ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
       border: $image-editor-drop-border;
       border-radius: 10px;
       margin: 10px;
+      @if $skin-name == 'highcontrast' {
+        color: $hover-font;
+      }
 
       & .e-upload {
         display: none;
@@ -192,6 +254,12 @@ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
         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);
@@ -208,10 +276,14 @@ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
 
     & .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 {
@@ -325,24 +397,26 @@ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
         }
       }
     }
+    
 
     & .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 */
         }
@@ -386,6 +460,11 @@ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
           margin: 4px;
           text-align: center;
         }
+
+        & .e-dropdown-btn {
+          margin: 0 auto;
+          width: max-content;
+        }
       }
 
       &.e-hide {
@@ -412,9 +491,67 @@ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
       & .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 */
+  }
 }
 
 
@@ -424,8 +561,6 @@ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
 
     & .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,
@@ -471,9 +606,9 @@ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
           }
 
           &:hover {
-            background: $btn-hover-bgcolor;
+            background: $tbar-hover-bg;
             box-shadow: none;
-            color: $btn-hover-color;
+            color: $tbar-hover-font;
           }
 
           &:focus {
@@ -690,6 +825,36 @@ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
         content: '\e960';
       }
     }
+
+    & .e-custom-f {
+      &::before {
+        content: '\e9a3';
+      }
+    }
+    
+    & .e-custom-g {
+      &::before {
+        content: '\e9a4';
+      }
+    }
+    
+    & .e-custom-h {
+      &::before {
+        content: '\e9a5';
+      }
+    }
+    
+    & .e-custom-i {
+      &::before {
+        content: '\e9a6';
+      }
+    }
+    
+    & .e-custom-j {
+      &::before {
+        content: '\e9a7';
+      }
+    }
   
     & .e-horizontal-flip {
       &::before {
@@ -813,6 +978,36 @@ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
       content: '\e960';
     }
   }
+
+  & .e-custom-f {
+    &::before {
+      content: '\e9a3';
+    }
+  }
+  
+  & .e-custom-g {
+    &::before {
+      content: '\e9a4';
+    }
+  }
+  
+  & .e-custom-h {
+    &::before {
+      content: '\e9a5';
+    }
+  }
+  
+  & .e-custom-i {
+    &::before {
+      content: '\e9a6';
+    }
+  }
+  
+  & .e-custom-j {
+    &::before {
+      content: '\e9a7';
+    }
+  }
   
   & .e-rectangle {
     &::before {