@progress/kendo-theme-core 14.7.0-dev.1 → 14.7.0-dev.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "14.7.0-dev.1",
+  "version": "14.7.0-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [

package/scss/components/imageeditor/_layout.scss

@@ -264,6 +264,7 @@
         display: flex;
         flex-direction: column;
         position: relative;
+        flex: none;
     }
 
     // Placeholder: replaces the canvas for non-editable states (empty, loading, error)
@@ -382,11 +383,35 @@
     .k-imageeditor-option-list {
         position: relative;
         width: 100%;
+
+        // Overlays live on the non-scrolling wrapper so they stay fixed while the items scroll; the -3px insets match the items' negative margins so they cover the selected chip's shadow ring.
+        &.k-imageeditor-option-list-scrollable {
+            &::before,
+            &::after {
+                content: "";
+                aspect-ratio: 1;
+                position: absolute;
+                inset-block: -3px;
+                z-index: k-z-index("base", 3);
+                pointer-events: none;
+            }
+
+            &::before {
+                inset-inline-start: -3px;
+            }
+
+            &::after {
+                inset-inline-end: -3px;
+            }
+
+            &.k-imageeditor-option-list-scrollable-start::before,
+            &.k-imageeditor-option-list-scrollable-end::after {
+                display: none;
+            }
+        }
     }
 
-    // Actual scrolling element. The scroll-fade overlay lives here (rather than on the
-    // non-scrolling .k-imageeditor-option-list wrapper) so it aligns with the negative
-    // margins below and fully covers the selected chip's shadow ring at the scroll edges.
+    // Actual scrolling element
     .k-imageeditor-option-list-items {
         display: flex;
         flex-flow: row nowrap;
@@ -405,32 +430,6 @@
         &::-webkit-scrollbar {
             display: none;
         }
-
-        .k-imageeditor-option-list-scrollable & {
-            &::before,
-            &::after {
-                content: "";
-                height: 100%;
-                aspect-ratio: 1;
-                position: absolute;
-                inset-block-start: 0;
-                z-index: k-z-index("base", 3);
-                pointer-events: none;
-            }
-
-            &::before {
-                inset-inline-start: 0;
-            }
-
-            &::after {
-                inset-inline-end: 0;
-            }
-        }
-
-        .k-imageeditor-option-list-scrollable-start &::before,
-        .k-imageeditor-option-list-scrollable-end &::after {
-            display: none;
-        }
     }
 
     .k-imageeditor-option-preview {
@@ -604,6 +603,23 @@
         }
     }
 
+    // Rotation handle: anchored below the bottom edge of the selection frame, centered horizontally
+    .k-rotate-handle {
+        padding: $kendo-image-editor-rotate-handle-padding;
+        border-width: $kendo-image-editor-handle-border-width;
+        border-style: solid;
+        border-radius: $kendo-image-editor-handle-border-radius;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: calc(100% + #{$kendo-image-editor-rotate-handle-offset});
+        left: 50%;
+        transform: translateX(-50%);
+        box-sizing: border-box;
+        cursor: grab;
+    }
+
     // Mobile: single scoping class for every part that needs a different layout on small screens
     .k-imageeditor-adaptive {
         display: flex;

package/scss/components/imageeditor/_theme.scss

@@ -42,7 +42,7 @@
     }
 
     // Option list scroll-fade overlay (aspect ratios, shapes, presets, ...)
-    .k-imageeditor-option-list-scrollable .k-imageeditor-option-list-items {
+    .k-imageeditor-option-list-scrollable {
         &::before {
             background: linear-gradient(270deg, $kendo-image-editor-option-list-scroll-gradient);
         }
@@ -119,6 +119,12 @@
         background-color: $kendo-image-editor-handle-bg;
     }
 
+    .k-rotate-handle {
+        color: $kendo-image-editor-handle-border;
+        border-color: $kendo-image-editor-handle-border;
+        background-color: $kendo-image-editor-handle-bg;
+    }
+
     // Crop tool's L-bracket corner handles
     .k-imageeditor-crop {
         .k-resize-sw,

package/scss/components/imageeditor/_variables.scss

@@ -50,6 +50,9 @@ $kendo-image-editor-handle-border-radius: null !default;
 
 $kendo-image-editor-scale-handle-size: null !default;
 
+$kendo-image-editor-rotate-handle-offset: null !default;
+$kendo-image-editor-rotate-handle-padding: null !default;
+
 $kendo-image-editor-bg: null !default;
 $kendo-image-editor-text: null !default;
 $kendo-image-editor-border: null !default;