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

package/scss/components/popup/_layout.scss

@@ -1,5 +1,6 @@
 @use "../../mixins/index.import.scss" as *;
 @use "../../border-radii/index.import.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-popup--layout-base() {
@@ -8,7 +9,7 @@
     .k-animation-container {
         position: absolute;
         overflow: hidden;
-        z-index: 100;
+        z-index: k-z-index("animation");
         outline: none;
 
         &-fixed {
@@ -19,12 +20,14 @@
             position: relative;
             display: inline-block;
         }
-    }
 
-    .k-animation-container {
         @include border-bottom-radius-only( $kendo-border-radius-md );
     }
 
+    .k-animation-container:has(.k-child-animation-container > .k-popup) {
+        z-index: k-z-index("popup");
+    }
+
     .k-animation-container-shown {
         overflow: visible;
     }
@@ -34,8 +37,6 @@
         @include border-radius( $kendo-popup-border-radius );
         margin: 0;
         padding: 0;
-        // padding-block: $kendo-popup-padding-y;
-        // padding-inline: $kendo-popup-padding-x;
         border-width: $kendo-popup-border-width;
         border-style: solid;
         box-sizing: border-box;

package/scss/components/prompt/_layout.scss

@@ -1,4 +1,5 @@
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-prompt--layout-base() {
 
@@ -74,7 +75,7 @@
 
     // Stop FAB
     .k-prompt-stop-fab {
-        z-index: 1;
+        z-index: k-z-index("base", 2);
     }
 }
 

package/scss/components/radio/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../../mixins/index.import.scss" as *;
 @use "../../spacing/index.import.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./variables.scss" as *;
 
@@ -176,7 +177,7 @@
             left: 50%;
             top: 50%;
             border-radius: 100%;
-            z-index: -1;
+            z-index: k-z-index("bottom");
             transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
             transform: translate(-50%, -50%) scale(0);
             transform-origin: center center;

package/scss/components/ripple/_layout.scss

@@ -1,3 +1,5 @@
+@use "../../z-index/index.import.scss" as *;
+
 @mixin kendo-ripple--layout-base() {
 
     .k-ripple-target {
@@ -10,7 +12,7 @@
         inset-inline-start: 0;
         inset-inline-end: 0;
         inset-block-end: 0;
-        z-index: 1;
+        z-index: k-z-index("base", 1);
         overflow: hidden;
         pointer-events: none;
     }

package/scss/components/scheduler/_layout.scss

@@ -6,6 +6,7 @@
 @use "./variables.scss" as *;
 @use "../toolbar/_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-scheduler--layout-base() {
 
@@ -87,7 +88,7 @@
         .k-scheduler-head {
             position: sticky;
             inset-block-start: 0;
-            z-index: 3;
+            z-index: k-z-index("base", 3);
         }
         .k-scheduler-body {
             position: relative;
@@ -208,7 +209,7 @@
             flex-basis: 0;
             position: sticky;
             inset-inline-start: 0;
-            z-index: 3;
+            z-index: k-z-index("base", 3);
         }
     }
 
@@ -220,7 +221,7 @@
         white-space: nowrap;
         flex-shrink: 0;
         position: relative;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
 
         .k-widget {
             font-size: inherit;
@@ -273,7 +274,7 @@
         border-spacing: 0;
         flex: 1 1 auto;
         position: relative;
-        z-index: 1;
+        z-index: k-z-index("base", 1);
 
         > tbody > tr > td {
             padding: 0;
@@ -401,7 +402,7 @@
 
         > div {
             position: relative;
-            z-index: 2;
+            z-index: k-z-index("base", 2);
         }
 
         // Template
@@ -427,7 +428,7 @@
             inset-block-start: 0;
             inset-block-end: 0;
             inset-inline-end: $kendo-scheduler-event-actions-inset-x;
-            z-index: 2;
+            z-index: k-z-index("base", 2);
 
             .k-event-delete {
                 opacity: .5;
@@ -460,7 +461,7 @@
 
         // Resize handles
         .k-resize-handle {
-            z-index: 4;
+            z-index: k-z-index("handle");
             opacity: .5;
             visibility: hidden;
         }
@@ -552,7 +553,7 @@
     // Draging hint
     .k-event-drag-hint {
         opacity: .5;
-        z-index: 3;
+        z-index: k-z-index("base", 3);
 
         .k-event-actions,
         .k-event-top-actions,

package/scss/components/scroller/_layout.scss

@@ -1,3 +1,5 @@
+@use "../../z-index/index.import.scss" as *;
+
 @mixin kendo-scroller--layout-base() {
 
     // Layout
@@ -11,7 +13,7 @@
     }
     .km-scroll-header {
         position: absolute;
-        z-index: 1001;
+        z-index: k-z-index("floating", 1);
         width: 100%;
         inset-block-start: 0;
         inset-inline-start: 0;
@@ -56,7 +58,7 @@
     .km-touch-scrollbar {
         position: absolute;
         visibility: hidden;
-        z-index: 200000;
+        z-index: k-z-index("scroll");
         height: .4em;
         width: .4em;
         opacity: 0;

package/scss/components/signature/_layout.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-signature--layout-base() {
 
@@ -27,7 +28,7 @@
         width: min-content;
         margin-inline-start: auto;
         gap: $kendo-signature-actions-gap;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
     }
 
     .k-signature-canvas {
@@ -37,14 +38,14 @@
         width: 100%;
         height: 100%;
         display: block;
-        z-index: 1;
+        z-index: k-z-index("base", 1);
         outline: none;
     }
 
     .k-signature-line {
         position: absolute;
         inset-block-end: $kendo-signature-line-bottom-offset;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
         pointer-events: none;
         border-block-end-width: $kendo-signature-line-width;
         border-block-end-style: $kendo-signature-line-style;

package/scss/components/splitter/_layout.scss

@@ -1,5 +1,6 @@
 @use "../../color-system/_constants.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-splitter--layout-base() {
 
@@ -87,7 +88,7 @@
         width: $kendo-splitter-drag-handle-thickness;
         height: $kendo-splitter-drag-handle-length;
         position: static;
-        z-index: 1;
+        z-index: k-z-index("handle");
     }
 
     .k-splitbar .k-resize-handle {
@@ -123,7 +124,7 @@
         width: $kendo-splitter-drag-handle-length;
         height: $kendo-splitter-drag-handle-thickness;
         position: static;
-        z-index: 1;
+        z-index: k-z-index("handle");
     }
 
     .k-pane > {

package/scss/components/spreadsheet/_layout.scss

@@ -7,6 +7,7 @@
 @use "../icons/_variables.scss" as *;
 @use "../menu/_variables.scss" as *;
 @use "../toolbar/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-spreadsheet--layout-base() {
 
@@ -155,7 +156,7 @@
         display: none;
         overflow: hidden;
         position: absolute;
-        z-index: 100;
+        z-index: k-z-index("selection");
     }
 
 
@@ -241,7 +242,7 @@
         box-sizing: border-box;
         user-select: none;
         position: absolute;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
         overflow: hidden;
     }
 
@@ -278,7 +279,7 @@
         position: absolute;
         inset-block-start: 0;
         inset-inline-start: 0;
-        z-index: 10000;
+        z-index: k-z-index("overlay");
 
         &::after {
             content: "";
@@ -300,11 +301,11 @@
         height: 100%;
         overflow: scroll;
         position: absolute;
-        z-index: 1;
+        z-index: k-z-index("base", 1);
 
         @media (hover: none), (pointer: coarse) {
             // on touch devices we want this to stay on top.
-            z-index: 3;
+            z-index: k-z-index("base", 3);
         }
     }
 
@@ -330,7 +331,7 @@
     .k-spreadsheet-row-header,
     .k-spreadsheet-column-header {
         text-align: center;
-        z-index: 100;
+        z-index: k-z-index("selection", -1);
 
         > div {
             position: relative;
@@ -431,13 +432,13 @@
     .k-spreadsheet .k-spreadsheet-editor-button {
         position: absolute;
         padding: 0;
-        z-index: 60;
+        z-index: k-z-index("base", 6);
     }
 
     .k-spreadsheet-active-cell {
         // always show exact active cell border, regardless of inline cell styles
         outline-color: transparent !important; // stylelint-disable-line declaration-no-important
-        z-index: 10;
+        z-index: k-z-index("base", 4);
     }
 
     .k-spreadsheet .k-auto-fill-wrapper {
@@ -469,7 +470,7 @@
         position: absolute;
         inset-block-end: 0;
         inset-inline-end: 0;
-        z-index: 300;
+        z-index: k-z-index("selection", 1);
         cursor: crosshair;
     }
 
@@ -525,7 +526,7 @@
     // Filter button
     .k-spreadsheet .k-filter-wrapper {
         position: relative;
-        z-index: 50;
+        z-index: k-z-index("base", 5);
     }
 
     .k-spreadsheet .k-filter-range {
@@ -791,7 +792,7 @@
     .k-spreadsheet-drawing {
         position: absolute;
         box-sizing: border-box;
-        z-index: 101;
+        z-index: k-z-index("selection", 2);
 
         &.k-spreadsheet-active-drawing {
             outline-style: $kendo-spreadsheet-drawing-outline-style;
@@ -881,7 +882,7 @@
         display: inline-flex;
         flex-direction: row;
         position: absolute;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
         inset-block-start: 0;
         inset-inline-start: 0;
     }
@@ -889,7 +890,7 @@
     .k-spreadsheet-tabstrip {
         padding-block-start: $kendo-toolbar-md-padding-y;
         position: relative;
-        z-index: 1;
+        z-index: k-z-index("base", 1);
     }
     .k-spreadsheet-tabstrip .k-tabstrip-items-wrapper {
         margin: 0;

package/scss/components/stepper/_layout.scss

@@ -1,6 +1,7 @@
 @use "../../color-system/_constants.scss" as *;
 @use "../../spacing/index.import.scss" as *;
 @use "../../mixins/index.import.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../icons/_variables.scss" as *;
 
@@ -41,7 +42,7 @@
             list-style: none;
             display: flex;
             position: relative;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
         }
 
 
@@ -73,7 +74,7 @@
             justify-content: center;
             flex: none;
             position: relative;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
             overflow: visible;
             transition-property: color, background-color, border-color;
             transition-duration: .4s;
@@ -87,7 +88,7 @@
                 position: absolute;
                 inset-block-start: 0;
                 inset-inline-start: 0;
-                z-index: -1;
+                z-index: k-z-index("bottom");
             }
 
             &::after {
@@ -103,7 +104,7 @@
                 inset-inline-end: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
                 inset-block-end: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
                 inset-inline-start: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
-                z-index: 2;
+                z-index: k-z-index("base", 2);
             }
         }
 
@@ -122,7 +123,7 @@
             flex-wrap: wrap;
             align-items: center;
             justify-content: center;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
         }
         .k-step-label:only-child {
             @include border-radius( $kendo-stepper-label-border-radius );
@@ -132,7 +133,7 @@
         }
         .k-step-label .k-step-text {
             max-width: calc(10em - (#{$kendo-icon-size} + #{$kendo-icon-spacing}));
-            flex-grow: 1;
+            flex-grow: k-z-index("base", 1);
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
@@ -171,7 +172,7 @@
         // Progressbar
         .k-progressbar {
             pointer-events: none;
-            z-index: 0;
+            z-index: k-z-index("base");
             overflow: visible;
         }
 

package/scss/components/tabstrip/_layout.scss

@@ -3,6 +3,7 @@
 @use "../../mixins/index.import.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-tabstrip--layout-base() {
 
@@ -208,7 +209,7 @@
             &::after {
                 content: '';
                 position: absolute;
-                z-index: 3;
+                z-index: k-z-index("base", 3);
             }
         }
 
@@ -412,7 +413,7 @@
                 border-style: solid;
                 display: none;
                 position: absolute;
-                z-index: 2;
+                z-index: k-z-index("base", 2);
                 inset-block-start: 0;
                 inset-inline-end: 0;
                 inset-block-end: 0;
@@ -424,7 +425,7 @@
             }
 
             .k-item > .k-link {
-                z-index: 1;
+                z-index: k-z-index("base", 1);
             }
         }
 

package/scss/components/taskboard/_layout.scss

@@ -1,5 +1,6 @@
 @use "../../mixins/index.import.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-task-board--layout-base() {
 
@@ -128,7 +129,7 @@
         inset-inline-end: 0;
         inset-block-end: 0;
         overflow: hidden;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
     }
 
     .k-taskboard-pane-header {

package/scss/components/tilelayout/_layout.scss

@@ -1,6 +1,7 @@
 @use "../../color-system/_constants.scss" as *;
 @use "../../mixins/index.import.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-tile-layout--layout-base() {
 
@@ -23,7 +24,7 @@
 
     .k-tilelayout-item {
         position: relative;
-        z-index: 0;
+        z-index: k-z-index("base");
     }
 
     .k-layout-item-hint {
@@ -33,12 +34,12 @@
         position: relative;
 
         &.k-layout-item-hint-resize {
-            z-index: 3;
+            z-index: k-z-index("handle");
         }
     }
 
     .k-tilelayout-item-header.k-card-header {
-        z-index: 0;
+        z-index: k-z-index("base");
     }
 
     .k-tilelayout-item-body {

package/scss/components/timeline/_layout.scss

@@ -4,6 +4,7 @@
 @use "../icons/_variables.scss" as *;
 @use "./variables.scss" as *;
 @use "../card/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-timeline--layout-base() {
 
@@ -45,7 +46,7 @@
             min-width: $kendo-timeline-flag-min-width;
             max-width: $kendo-timeline-flag-max-width;
             position: relative;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
         }
 
         .k-timeline-circle {
@@ -54,7 +55,7 @@
             border-radius: 50%;
             flex-shrink: 0;
             position: relative;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
         }
 
         &.k-timeline-dates-hidden {
@@ -354,7 +355,7 @@
                 margin-block: 0;
                 margin-inline: $kendo-timeline-track-arrow-width;
                 position: relative;
-                z-index: 2;
+                z-index: k-z-index("base", 2);
 
                 .k-timeline-scrollable-wrap {
                     transition: transform 1s ease-in-out;
@@ -391,7 +392,7 @@
         border-radius: 50%;
         position: absolute;
         inset-block-end: calc(#{$kendo-timeline-track-size} + #{$kendo-timeline-track-wrap-padding-bottom} + 2 * #{$kendo-timeline-track-border-width});
-        z-index: 3;
+        z-index: k-z-index("base", 3);
         display: flex;
         align-items: center;
         justify-content: center;

package/scss/components/timeselector/_layout.scss

@@ -4,6 +4,7 @@
 @use "../../mixins/index.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../button/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-time-selector--layout-base() {
 
@@ -88,7 +89,7 @@
         inset-inline-start: 0;
         inset-inline-end: 0;
         transform: translateY(-50%);
-        z-index: 1;
+        z-index: k-z-index("base", 1);
     }
 
 
@@ -147,7 +148,7 @@
         align-items: stretch;
         flex: 1;
         position: relative;
-        z-index: 1;
+        z-index: k-z-index("base", 1);
         outline: 0;
         overflow: hidden;
 
@@ -158,7 +159,7 @@
             content: "\200b";
             height: 0;
             line-height: 0;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
             width: 200%;
             inset-inline-start: -50%;
         }
@@ -211,7 +212,7 @@
         justify-content: center;
         align-items: center;
         position: relative;
-        z-index: 11;
+        z-index: k-z-index("base", 1);
         inset-block-start: calc( #{list.slash( $kendo-time-list-title-height, 2 )} );
     }
 

package/scss/components/toolbar/_layout.scss

@@ -6,6 +6,7 @@
 @use "./_variables.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-toolbar--layout-base() {
 
@@ -54,7 +55,7 @@
                 height: 100%;
                 aspect-ratio: 1;
                 position: absolute;
-                z-index: 3;
+                z-index: k-z-index("base", 3);
             }
 
             &::before {

package/scss/components/tooltip/_layout.scss

@@ -2,6 +2,7 @@
 @use "../../color-system/_constants.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-tooltip--layout-base() {
 
@@ -22,7 +23,7 @@
         flex-flow: row nowrap;
         align-items: flex-start;
         position: absolute;
-        z-index: 12000;
+        z-index: k-z-index("popup");
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 

package/scss/components/treelist/_layout.scss

@@ -1,5 +1,6 @@
 @use "../icons/_variables.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-treelist--layout-base() {
 
@@ -63,18 +64,18 @@
 
         .k-grid-toolbar {
             position: sticky;
-            z-index: 3;
+            z-index: k-z-index("base", 3);
             inset-block-start: 0;
             inset-inline-start: 0;
         }
 
         .k-grid-header .k-table-th {
             position: sticky;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
         }
 
         .k-grid-header .k-table-th.k-grid-header-sticky {
-            z-index: 3;
+            z-index: k-z-index("base", 3);
         }
 
         thead.k-grid-header {

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);
         }
     }