@progress/kendo-theme-core 12.0.2-dev.1 → 12.1.0-dev.1

package/scss/components/treeview/_layout.scss

@@ -4,6 +4,7 @@
 @use "../../spacing/index.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../icons/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-treeview--layout-base() {
 
@@ -127,7 +128,7 @@
         }
 
         &.k-focus {
-            z-index: 1;
+            z-index: k-z-index("base", 1);
         }
     }
 

package/scss/components/upload/_layout.scss

@@ -2,6 +2,7 @@
 @use "../../spacing/index.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../icons/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-upload--layout-base() {
 
@@ -238,7 +239,7 @@
             position: absolute;
             inset-block-end: 0;
             inset-inline-end: 0;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
         }
         input[disabled],
         input.k-disabled {

package/scss/components/validator/_layout.scss

@@ -1,4 +1,5 @@
 @use "../tooltip/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-validator--layout-base() {
 
@@ -14,7 +15,7 @@
         display: flex;
         align-items: center;
         // NOTE: This works around popup / tooltip stacking issue
-        z-index: 9999;
+        z-index: k-z-index("popup");
 
         // .k-callout-n { inset-inline-start: 16px; }
     }

package/scss/components/virtual-scroller/_layout.scss

@@ -1,3 +1,5 @@
+@use "../../z-index/index.import.scss" as *;
+
 @mixin kendo-virtual-scroller--layout-base() {
 
     // Virtual scroller
@@ -13,7 +15,7 @@
     // Virtual scroller wrap
     .k-virtual-scroller-wrap {
         position: relative;
-        z-index: 1;
+        z-index: k-z-index("base", 1);
     }
 
 
@@ -29,7 +31,7 @@
     // Virtual scroller size
     .k-virtual-scroller-size {
         position: relative;
-        z-index: 0;
+        z-index: k-z-index("base");
     }
 
 }

package/scss/components/window/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:list";
 @use "../../mixins/index.import.scss" as *;
 @use "../../color-system/_constants.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-window--layout-base() {
@@ -18,7 +19,7 @@
         display: inline-flex;
         flex-direction: column;
         position: absolute;
-        z-index: 10002;
+        z-index: k-z-index("modal");
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
@@ -167,10 +168,10 @@
 
     // Resize Handles
     .k-window { // stylelint-disable-line
-        .k-resize-n { inset-block-start: 0; }
-        .k-resize-e { inset-inline-end: 0; }
-        .k-resize-s { inset-block-end: 0; }
-        .k-resize-w { inset-inline-start: 0; }
+        .k-resize-n { top: 0; }
+        .k-resize-e { right: 0; }
+        .k-resize-s { bottom: 0; }
+        .k-resize-w { left: 0; }
     }
 
 }

package/scss/index.scss

@@ -7,6 +7,7 @@
 @forward "./typography/index.import.scss";
 @forward "./border-radii/index.import.scss";
 @forward "./motion/index.import.scss";
+@forward "./z-index/index.import.scss";
 
 @use "./color-system/index.import.scss" as *;
 @use "./mixins/index.import.scss" as *;

package/scss/z-index/index.import.scss

@@ -0,0 +1,36 @@
+@use "sass:map";
+
+$kendo-z-step: 1;
+
+$kendo-z-layers: (
+    bottom:           -1,
+    base:              0,
+    handle:           10,
+    selection:       100,
+    badge:           300,
+    animation:       600,
+    banner:         1000,
+    floating:       5000,
+    overlay:       10000,
+    drawer:        11000,
+    modal:         11500,
+    popup:         12000,
+    loading:       20000,
+    top:          100000,
+    scroll:       200000
+);
+
+/// Return a z-index value based on layer and number of steps.
+/// @param {String} $layer - The layer key from the $kendo-z-layers map.
+/// @param {Number} $n [0] - {Optional} Number of steps above the base layer.
+/// @param {Number} $delta [0] - {Deprecated, Optional} Balancing value.
+/// @return {Number} - Calculated z-index value.
+@function k-z-index($layer, $n: 0, $delta: 0) {
+    $layer-value: map.get($kendo-z-layers, $layer);
+
+    @if not $layer-value {
+        @error "Layer '#{$layer}' not found in $kendo-z-layers map.";
+    }
+
+    @return $layer-value + ($n * $kendo-z-step) + $delta;
+}