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

package/scss/components/editor/_layout.scss

@@ -7,6 +7,7 @@
 @use "../toolbar/_variables.scss" as *;
 @use "../window/_variables.scss" as *;
 @use "../input/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-editor--layout-base() {
 
@@ -74,7 +75,7 @@
         box-sizing: border-box;
         position: absolute;
         visibility: visible;
-        z-index: 100;
+        z-index: k-z-index("handle");
 
         &.northwest {
             top: 0;
@@ -263,7 +264,7 @@
 
         // Give selected cells a blue overlay
         .selectedCell::after { // stylelint-disable-line
-            z-index: 2;
+            z-index: k-z-index("selection");
             position: absolute;
             content: "";
             inset-inline-start: 0;
@@ -553,7 +554,7 @@
             height: 5px;
             border-width: 1px;
             border-style: solid;
-            z-index: 100;
+            z-index: k-z-index("handle");
 
             .k-element-resize-handle {
                 width: 100%;
@@ -598,7 +599,7 @@
             height: 10px;
             width: 10px;
             cursor: col-resize;
-            z-index: 2;
+            z-index: k-z-index("handle");
 
             .k-column-resize-handle {
                 width: 100%;
@@ -617,7 +618,7 @@
 
         .k-row-resize-handle-wrapper {
             position: absolute;
-            z-index: 2;
+            z-index: k-z-index("handle");
             cursor: row-resize;
             width: 10px;
             height: 10px;

package/scss/components/filemanager/_layout.scss

@@ -1,5 +1,6 @@
 @use "./variables.scss" as *;
 @use "../icons/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-file-manager--layout-base() {
 
@@ -25,7 +26,7 @@
         border-block-end-width: $kendo-file-manager-toolbar-border-width;
         border-color: inherit;
         flex-shrink: 0;
-        z-index: 1;
+        z-index: k-z-index("base", 1);
     }
 
 

package/scss/components/gantt/_layout.scss

@@ -8,6 +8,7 @@
 @use "../toolbar/_variables.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-gantt--layout-base() {
 
@@ -85,10 +86,10 @@
             }
             .k-grid-header th,
             .k-grid-content-sticky {
-                z-index: 4;
+                z-index: k-z-index("base", 4);
             }
             .k-grid-header th.k-grid-header-sticky {
-                z-index: 5;
+                z-index: k-z-index("base", 5);
             }
             .k-grid-header tr:first-child th:last-child,
             tbody td:last-child {
@@ -113,7 +114,7 @@
                 display: inline-flex;
                 flex-flow: row nowrap;
                 white-space: nowrap;
-                z-index: 3;
+                z-index: k-z-index("base", 3);
 
                 &:hover .k-task-start,
                 &:hover .k-task-end {
@@ -190,7 +191,7 @@
             inset-inline-start: 0;
             overflow: visible;
             pointer-events: none;
-            z-index: 2;
+            z-index: k-z-index("base", 1);
 
             polyline {
                 stroke-width: $kendo-gantt-line-size;
@@ -202,7 +203,7 @@
     .k-gantt-header {
         border-width: 0 0 $kendo-toolbar-border-width;
         flex-shrink: 0;
-        z-index: 6;
+        z-index: k-z-index("base", 1);
     }
     .k-gantt-footer {
         border-width: $kendo-toolbar-border-width 0 0;
@@ -347,7 +348,7 @@
     .k-gantt-columns {
         border-color: inherit;
         position: absolute;
-        z-index: 0;
+        z-index: k-z-index("base");
         inset-block-start: 0;
         inset-inline-start: 0;
     }
@@ -387,7 +388,7 @@
         position: absolute;
     }
     .k-gantt-line.k-selected {
-        z-index: 3;
+        z-index: k-z-index("base", 3);
     }
 
     .k-gantt-line-h {
@@ -399,7 +400,7 @@
     }
 
     .k-gantt-dependency-hint {
-        z-index: 4;
+        z-index: k-z-index("base", 4);
     }
 
 
@@ -426,7 +427,7 @@
         flex-direction: row;
         align-items: center;
         position: relative;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
     }
     .k-task-wrap.k-drag-hint {
         position: absolute;
@@ -535,7 +536,7 @@
     .k-task-summary-complete {
         height: 10px;
         position: relative;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
     }
     .k-task-summary-progress {
         height: 15px;
@@ -554,7 +555,7 @@
 
         .k-resize-handle {
             opacity: .5;
-            z-index: 2;
+            z-index: k-z-index("handle");
             visibility: hidden;
             cursor: ew-resize;
         }
@@ -592,14 +593,14 @@
         @include border-radius( k-border-radius(md) );
         width: 20%;
         position: absolute;
-        z-index: 1;
+        z-index: k-z-index("base", 1);
         inset-block-start: 0;
         inset-block-end: 0;
         inset-inline-start: 0;
     }
     .k-task-content {
         position: relative;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -620,7 +621,7 @@
         flex-direction: row;
         align-items: center;
         visibility: hidden;
-        z-index: 1;
+        z-index: k-z-index("base", 1);
     }
     .k-task-actions > .k-link {
         display: inline-flex;
@@ -629,7 +630,7 @@
     .k-resources-wrap {
         position: absolute;
         display: inline-block;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
         margin-inline-start: 20px;
         margin-block-start: -2px;
         overflow: hidden;
@@ -742,7 +743,7 @@
 
         .k-resize-handle {
             inset-inline-end: 0;
-            z-index: 2;
+            z-index: k-z-index("handle");
             visibility: hidden;
             margin-inline-end: $kendo-gantt-planned-offset-resize-handler-margin-x;
         }

package/scss/components/grid/_layout.scss

@@ -5,6 +5,7 @@
 @use "../../mixins/index.import.scss" as *;
 @use "../../typography/index.import.scss" as *;
 @use "../../spacing/index.import.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "../chip/_variables.scss" as *;
@@ -190,7 +191,7 @@
                 justify-content: center;
                 position: absolute;
                 inset-inline-end: $kendo-grid-header-menu-icon-spacing;
-                z-index: 1;
+                z-index: k-z-index("base", 1);
 
                 &:hover {
                     cursor: pointer;
@@ -682,7 +683,7 @@
         height: 25px;
         cursor: col-resize;
         position: absolute;
-        z-index: 2;
+        z-index: k-z-index("handle");
     }
 
 
@@ -721,7 +722,7 @@
         .k-grid-table {
             position: relative;
             float: inline-start;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
         }
 
         > .k-height-container {
@@ -806,11 +807,11 @@
     .k-grid .k-grid-row-sticky,
     .k-grid .k-grid-footer-sticky {
         position: sticky;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
 
         &.k-edit-cell {
             overflow: visible;
-            z-index: 3;
+            z-index: k-z-index("base", 3);
         }
     }
 
@@ -822,14 +823,13 @@
         position: absolute;
         inset-block-start: 0;
         inset-inline-start: 0;
-        z-index: -1;
+        z-index: k-z-index("bottom");
     }
 
     kendo-grid {
         .k-table-row.k-grid-row-sticky {
             border: 0;
             position: static;
-            z-index: auto;
         }
 
         .k-grid-row-sticky td,
@@ -840,14 +840,14 @@
             position: sticky;
             inset-block-start: inherit;
             inset-block-end: inherit;
-            z-index: 2;
+            z-index: k-z-index("base", 2);
         }
 
         .k-grid-row-sticky td.k-grid-content-sticky,
         .k-grid-row-sticky.k-table-alt-row td.k-grid-content-sticky,
         .k-grid-row-sticky .k-table-td.k-grid-content-sticky,
         .k-grid-row-sticky.k-table-alt-row .k-table-td.k-grid-content-sticky {
-            z-index: 3;
+            z-index: k-z-index("base", 3);
         }
 
         // Locked and sticky
@@ -858,12 +858,12 @@
 
         .k-grid-header .k-grid-column-menu,
         .k-grid-header .k-grid-header-menu {
-            z-index: 1;
+            z-index: k-z-index("base", 1);
         }
     }
 
     .k-grid-content-sticky.k-grid-row-sticky {
-        z-index: 3;
+        z-index: k-z-index("base", 3);
     }
 
     .k-grid .k-table .k-grid-header-sticky,
@@ -1071,7 +1071,7 @@
                 position: absolute;
                 background: none;
                 cursor: row-resize;
-                z-index: 2;
+                z-index: k-z-index("base", 2);
             }
         }
 
@@ -1142,7 +1142,7 @@
         }
     }
 
-    // Command cell
+     // Command cell
     .k-grid-stack-cell.k-command-cell {
         padding: 0;
         grid-column: 1 / -1;
@@ -1207,7 +1207,7 @@
         height: 100%;
         inset-block-start: 0;
         inset-inline-start: 0;
-        z-index: 100;
+        z-index: k-z-index("overlay");
 
         > .k-i-loading {
             position: absolute;

package/scss/components/input/_layout.scss

@@ -4,6 +4,7 @@
 @use "../../_variables.scss" as *;
 @use "./_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-input--layout-base() {
 
@@ -99,7 +100,7 @@
         font: inherit;
         flex: 1;
         position: relative;
-        z-index: 1;
+        z-index: k-z-index("base", 1);
         overflow: hidden;
         text-overflow: ellipsis;
         -webkit-appearance: none;
@@ -246,7 +247,7 @@
         > .k-input:active,
         > .k-input.k-active,
         > .k-input.k-selected {
-            z-index: 2;
+            z-index: k-z-index("base", 2);
         }
 
         .k-input:not(:first-child):not(:last-child) {

package/scss/components/loader/_layout.scss

@@ -1,5 +1,6 @@
 @use "./_variables.scss" as *;
 @use "../overlay/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-loader--layout-base() {
 
@@ -366,7 +367,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        z-index: 20001;
+        z-index: k-z-index("loading");
 
         .k-loader {
             padding: 0;
@@ -393,7 +394,7 @@
         display: flex;
         align-items: center;
         position: relative;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
     }
 
     .k-loader-container-panel {
@@ -489,7 +490,7 @@
         color: $kendo-loading-text;
     }
     .k-loading-image {
-        z-index: 2;
+        z-index: k-z-index("base", 2);
         color: $kendo-loading-text;
     }
     .k-loading-color {

package/scss/components/map/_layout.scss

@@ -1,5 +1,6 @@
 @use "../../spacing/index.import.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-map--layout-base() {
 
@@ -52,7 +53,7 @@
             padding-inline: $kendo-map-attribution-padding-x;
             border-width: 0;
             font-size: $kendo-map-attribution-font-size;
-            z-index: 1000;
+            z-index: k-z-index("floating");
         }
 
 

package/scss/components/marquee/_layout.scss

@@ -1,8 +1,10 @@
+@use "../../z-index/index.import.scss" as *;
+
 @mixin kendo-marquee--layout-base() {
     // Marquee
     .k-marquee {
         position: absolute;
-        z-index: 100000;
+        z-index: k-z-index("top");
     }
 
     .k-marquee-color,

package/scss/components/mediaplayer/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:math";
 @use "../../color-system/_constants.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-media-player--layout-base() {
 
@@ -38,7 +39,7 @@
         padding-block: $kendo-media-player-titlebar-padding-y;
         padding-inline: $kendo-media-player-titlebar-padding-x;
         position: absolute;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
         inset-block-start: 0;
         inset-inline-start: 0;
         inset-inline-end: 0;
@@ -48,7 +49,7 @@
     // Toolbar
     .k-mediaplayer-toolbar-wrap {
         position: absolute;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
         inset-block-end: 0;
         inset-inline-start: 0;
         inset-inline-end: 0;
@@ -80,7 +81,7 @@
     .k-slider.k-mediaplayer-seekbar {
         width: 100%;
         position: absolute;
-        z-index: 3;
+        z-index: k-z-index("base", 1);
         inset-block-start: 0;
         inset-inline-start: 0;
         transform: translateY( -50% );
@@ -94,7 +95,7 @@
     }
 
     .k-mediaplayer-fullscreen {
-        z-index: 10000;
+        z-index: k-z-index("overlay");
         position: fixed;
         inset-block-start: 0;
         inset-inline-start: 0;

package/scss/components/menu/_layout.scss

@@ -1,6 +1,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-menu--layout-base() {
 
@@ -284,7 +285,7 @@
         flex-wrap: nowrap;
     }
     .k-context-menu-popup {
-        z-index: 12000;
+        z-index: k-z-index("popup");
 
         .k-context-menu {
             border-width: 0;

package/scss/components/notification/_layout.scss

@@ -1,6 +1,7 @@
 @use "../../mixins/index.import.scss" as *;
 @use "../../color-system/_constants.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-notification--layout-base() {
 
@@ -10,7 +11,7 @@
         display: inline-flex;
         flex-flow: column-reverse wrap;
         position: fixed;
-        z-index: 1000;
+        z-index: k-z-index("popup");
         gap: $kendo-notification-group-gap 0;
     }
 

package/scss/components/orgchart/_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-orgchart--layout-base() {
 
@@ -107,7 +108,7 @@
 
     // Buttons
     .k-orgchart-button {
-        z-index: 1;
+        z-index: k-z-index("base", 2);
     }
 }
 

package/scss/components/overlay/_layout.scss

@@ -1,4 +1,5 @@
 @use "./_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-overlay--layout-base() {
 
@@ -10,7 +11,7 @@
         position: fixed;
         inset-block-start: 0;
         inset-inline-start: 0;
-        z-index: 10001;
+        z-index: k-z-index("overlay");
     }
 
 }

package/scss/components/pager/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../../color-system/_constants.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-pager--layout-base() {
 
@@ -53,7 +54,7 @@
         position: relative;
 
         &:hover {
-            z-index: 2;
+            z-index: k-z-index("base", 2);
         }
     }
 
@@ -81,7 +82,7 @@
         // Selected state
         .k-selected {
             cursor: inherit;
-            z-index: 2;
+            z-index: k-z-index("base", 2);
         }
     }
 

package/scss/components/pdf-viewer/_layout.scss

@@ -1,6 +1,7 @@
 @use "../../color-system/_constants.scss" as *;
 @use "./variables.scss" as *;
 @use "../button/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-pdf-viewer--layout-base() {
 
@@ -27,7 +28,7 @@
             border-inline-start-width: 0;
             border-color: inherit;
             flex: 0 0 auto;
-            z-index: 2;
+            z-index: k-z-index("base", 1);
         }
         .k-toolbar .k-pager-wrap,
         .k-toolbar .k-pager {
@@ -69,7 +70,7 @@
             position: relative;
             margin-block: $kendo-pdf-viewer-page-spacing;
             margin-inline: auto;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
 
             // Canvas
             .k-canvas-wrapper {
@@ -126,7 +127,7 @@
                     display: block;
                     position: absolute;
                     inset: 100% 0 0;
-                    z-index: 0;
+                    z-index: k-z-index("base");
                     cursor: default;
                     user-select: none;
                 }
@@ -186,13 +187,13 @@
                 cursor: auto;
 
                 .k-selected {
-                    z-index: 100000 !important; // stylelint-disable-line declaration-no-important
+                    z-index: k-z-index("top") !important; // stylelint-disable-line declaration-no-important
                 }
 
                 .k-highlight-editor {
                     position: absolute;
                     background: transparent;
-                    z-index: 1;
+                    z-index: k-z-index("base", 1);
                     cursor: auto;
                     max-width: 100%;
                     max-height: 100%;
@@ -220,7 +221,7 @@
                 .k-free-text-editor {
                     position: absolute;
                     background: transparent;
-                    z-index: 1;
+                    z-index: k-z-index("base", 1);
                     transform-origin: 0 0;
                     cursor: text;
                     caret-color: $kendo-pdf-viewer-free-text-annotation-text;
@@ -229,7 +230,7 @@
                     border: solid 2px transparent;
 
                     &.k-selected.k-draggable {
-                        cursor: move;;
+                        cursor: move;
                     }
 
                     &.k-selected .k-internal {
@@ -291,7 +292,7 @@
         flex: 0 0 auto;
         justify-content: flex-start;
         align-items: center;
-        z-index: 10;
+        z-index: k-z-index("modal");
         cursor: default;
 
         .k-search-dialog-draghandle {

package/scss/components/pivotgrid/_layout.scss

@@ -2,6 +2,7 @@
 @use "../../mixins/index.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../icons/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-pivotgrid--layout-base() {
 
@@ -180,7 +181,7 @@
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
     }
 
     // Configurator Button
@@ -203,7 +204,7 @@
     .k-pivotgrid-configurator-overlay {
         position: absolute;
         overflow: hidden;
-        z-index: 2;
+        z-index: k-z-index("base", 2);
     }
 
     // Panel Content

package/scss/components/popover/_layout.scss

@@ -1,6 +1,7 @@
 @use "../../mixins/index.import.scss" as *;
 @use "../../color-system/_constants.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-popover--layout-base() {
 
@@ -17,7 +18,7 @@
         line-height: $kendo-popover-line-height;
         display: flex;
         flex-flow: column nowrap;
-        z-index: 12000;
+        z-index: k-z-index("popup");
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;