@progress/kendo-theme-core 12.0.0-dev.0 → 12.0.0-dev.2

package/scss/components/slider/_layout.scss

@@ -116,7 +116,7 @@
                 }
 
                 .k-draghandle {
-                    top: 50%;
+                    inset-block-start: 50%;
                     transform: translate(-50%, -50%);
                 }
                 .k-draghandle:focus,
@@ -154,14 +154,14 @@
                 }
 
                 .k-slider-selection {
-                    bottom: calc( var(--kendo-slider-start, 0) * 1% );
+                    inset-block-end: calc( var(--kendo-slider-start, 0) * 1% );
                     height: calc( (var(--kendo-slider-end, 0) - var(--kendo-slider-start, 0)) * 1% );
                 }
                 .k-draghandle-start {
-                    bottom: calc( var(--kendo-slider-start, 0) * 1% );
+                    inset-block-end: calc( var(--kendo-slider-start, 0) * 1% );
                 }
                 .k-draghandle-end {
-                    bottom: calc( var(--kendo-slider-end, 0) * 1% );
+                    inset-block-end: calc( var(--kendo-slider-end, 0) * 1% );
                 }
             }
         }
@@ -217,11 +217,11 @@
         .k-label {
             text-align: start;
             inset-inline-start: 120%;
-            top: 50%;
+            inset-block-start: 50%;
             transform: translateY(-50%);
         }
-        .k-first .k-label { top: 100%; }
-        .k-last .k-label { top: 0; }
+        .k-first .k-label { inset-block-start: 100%; }
+        .k-last .k-label { inset-block-start: 0; }
 
         .k-slider-topleft .k-label {
             inset-inline-start: auto;
@@ -262,14 +262,14 @@
 
         .k-label {
             inset-inline-start: 50%;
-            bottom: -1.2em;
+            inset-block-end: -1.2em;
             transform: translateX(-50%);
         }
         .k-first .k-label { inset-inline-start: 0; }
         .k-last .k-label { inset-inline-start: 100%; }
 
         .k-slider-topleft .k-label {
-            top: -1.2em;
+            inset-block-start: -1.2em;
         }
     }
 
@@ -282,15 +282,15 @@
 
     .k-slider-horizontal :is(.k-slider-track, .k-slider-selection) {
         height: $kendo-slider-track-thickness;
-        left: 0;
-        margin-top: calc( #{$kendo-slider-track-thickness} / -2 );
-        top: 50%;
+        inset-inline-start: 0;
+        margin-block-start: calc( #{$kendo-slider-track-thickness} / -2 );
+        inset-block-start: 50%;
     }
 
     .k-slider-vertical :is(.k-slider-track, .k-slider-selection) {
-        bottom: 0;
-        left: 50%;
-        margin-left: calc( #{$kendo-slider-track-thickness} / -2 );
+        inset-block-end: 0;
+        inset-inline-start: 50%;
+        margin-inline-start: calc( #{$kendo-slider-track-thickness} / -2 );
         width: $kendo-slider-track-thickness;
     }
 
@@ -358,7 +358,7 @@
 
         .k-callout-w,
         .k-callout-e {
-            margin-top: - list.slash( $kendo-tooltip-callout-size, 2 );
+            margin-block-start: - list.slash( $kendo-tooltip-callout-size, 2 );
         }
     }
 

package/scss/components/splitter/_layout.scss

@@ -33,8 +33,8 @@
         // Loading
         .k-pane-loading {
             position: static;
-            top: 50%;
-            left: 50%;
+            inset-block-start: 50%;
+            inset-inline-start: 50%;
         }
 
     }
@@ -69,7 +69,7 @@
         border-width: 0;
         background-repeat: repeat-y;
         flex-direction: column;
-        top: 0;
+        inset-block-start: 0;
     }
     .k-ghost-splitbar-vertical,
     .k-splitbar-vertical {
@@ -77,7 +77,7 @@
         border-width: 0;
         background-repeat: repeat-x;
         flex-direction: row;
-        left: 0;
+        inset-inline-start: 0;
     }
 
     .k-splitbar-static-horizontal { width: 1px; }
@@ -104,19 +104,19 @@
     }
 
     .k-splitbar-horizontal .k-collapse-prev {
-        margin-bottom: $kendo-splitter-drag-icon-margin;
+        margin-block-end: $kendo-splitter-drag-icon-margin;
     }
 
     .k-splitbar-horizontal .k-collapse-next {
-        margin-top: $kendo-splitter-drag-icon-margin;
+        margin-block-start: $kendo-splitter-drag-icon-margin;
     }
 
     .k-splitbar-vertical .k-collapse-prev {
-        margin-right: $kendo-splitter-drag-icon-margin;
+        margin-inline-end: $kendo-splitter-drag-icon-margin;
     }
 
     .k-splitbar-vertical .k-collapse-next {
-        margin-left: $kendo-splitter-drag-icon-margin;
+        margin-inline-start: $kendo-splitter-drag-icon-margin;
     }
 
     .k-splitbar-draggable-vertical .k-resize-handle {

package/scss/components/spreadsheet/_layout.scss

@@ -30,19 +30,19 @@
 
         .k-vertical-align-center {
             position: relative;
-            top: 50%;
+            inset-block-start: 50%;
             transform: translateY(-50%);
         }
         .k-vertical-align-bottom {
             position: relative;
-            top: 100%;
+            inset-block-start: 100%;
             transform: translateY( -100% );
         }
     }
 
     // Toolbar
     .k-spreadsheet-toolbar {
-        border-top-width: 0;
+        border-block-start-width: 0;
         border-inline-width: 0;
     }
 
@@ -205,8 +205,8 @@
             }
 
             .k-spreadsheet-sheets-remove {
-                margin-right: k-spacing(2);
-                margin-left: calc( #{k-spacing(2)} * -1 );
+                margin-inline-end: k-spacing(2);
+                margin-inline-start: calc( #{k-spacing(2)} * -1 );
                 padding: 0;
                 line-height: 1;
                 display: inline-flex;
@@ -248,10 +248,10 @@
     // todo check if used - probably not
     .k-spreadsheet-overflow {
         position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        inset-block-start: 0;
+        inset-block-end: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         overflow: hidden;
         border-color: inherit;
     }
@@ -276,8 +276,8 @@
         border-style: solid;
         box-sizing: border-box;
         position: absolute;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         z-index: 10000;
 
         &::after {
@@ -287,11 +287,11 @@
             height: 0;
             overflow: hidden;
             position: absolute;
-            bottom: 0;
-            right: 0;
+            inset-block-end: 0;
+            inset-inline-end: 0;
             border: 6px solid transparent;
-            border-right-color: inherit;
-            border-bottom-color: inherit;
+            border-inline-end-color: inherit;
+            border-block-end-color: inherit;
         }
     }
 
@@ -318,11 +318,11 @@
     }
     .k-spreadsheet-haxis {
         border-width: 1px 0 0;
-        left: 0;
+        inset-inline-start: 0;
     }
     .k-spreadsheet-vaxis {
         border-width: 0 0 0 1px;
-        top: 0;
+        inset-block-start: 0;
     }
 
 
@@ -346,10 +346,10 @@
                 border-color: inherit;
                 display: none;
                 position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
+                inset-block-start: 0;
+                inset-inline-end: 0;
+                inset-block-end: 0;
+                inset-inline-start: 0;
             }
         }
     }
@@ -360,26 +360,26 @@
         position: absolute;
     }
     .k-spreadsheet-row-header > div {
-        border-top-width: 1px;
+        border-block-start-width: 1px;
 
-        &:first-child { border-top-width: 0; }
+        &:first-child { border-block-start-width: 0; }
     }
     .k-spreadsheet-row-header > .k-selection-partial,
     .k-spreadsheet-row-header > .k-selection-full {
         &::after {
-            border-right-width: 2px;
+            border-inline-end-width: 2px;
             display: block;
         }
     }
     .k-spreadsheet-column-header > div {
-        border-left-width: 1px;
+        border-inline-start-width: 1px;
 
-        &:first-child { border-left-width: 0; }
+        &:first-child { border-inline-start-width: 0; }
     }
     .k-spreadsheet-column-header > .k-selection-partial,
     .k-spreadsheet-column-header > .k-selection-full {
         &::after {
-            border-bottom-width: 2px;
+            border-block-end-width: 2px;
             display: block;
         }
     }
@@ -458,8 +458,8 @@
     .k-spreadsheet .k-single-selection {}
     .k-spreadsheet .k-single-selection::after {
         content: "";
-        margin-bottom: -4px;
-        margin-right: -4px;
+        margin-block-end: -4px;
+        margin-inline-end: -4px;
         width: 6px;
         height: 6px;
         border-width: 1px;
@@ -467,8 +467,8 @@
         border-radius: 50%;
         display: block;
         position: absolute;
-        bottom: 0;
-        right: 0;
+        inset-block-end: 0;
+        inset-inline-end: 0;
         z-index: 300;
         cursor: crosshair;
     }
@@ -491,14 +491,14 @@
     // Border rendering
     .k-spreadsheet-vborder {
         position: absolute;
-        border-left-style: solid;
-        border-left-width: 1px;
+        border-inline-start-style: solid;
+        border-inline-start-width: 1px;
     }
 
     .k-spreadsheet-hborder {
         position: absolute;
-        border-top-style: solid;
-        border-top-width: 1px;
+        border-block-start-style: solid;
+        border-block-start-width: 1px;
     }
 
 
@@ -507,7 +507,7 @@
         content: "";
         display: block;
         position: absolute;
-        top: 0;
+        inset-block-start: 0;
         inset-inline-end: 0;
         inset-inline-start: auto;
         border-width: 3px;
@@ -563,7 +563,7 @@
                 color: inherit;
             }
             .k-link {
-                padding-left: $kendo-spreadsheet-filter-menu-link-padding-x;
+                padding-inline-start: $kendo-spreadsheet-filter-menu-link-padding-x;
             }
             .k-icon {
                 margin: $kendo-spreadsheet-filter-menu-icon-margin;
@@ -606,7 +606,7 @@
 
             > .k-icon,
             > .k-expander-indicator {
-                margin-right: $kendo-spreadsheet-filter-padding;
+                margin-inline-end: $kendo-spreadsheet-filter-padding;
             }
         }
         .k-details-content,
@@ -644,8 +644,8 @@
             box-sizing: border-box;
             display: flex;
         }
-        .k-reset-color { border-bottom-width: 1px; }
-        .k-custom-color { border-top-width: 1px; }
+        .k-reset-color { border-block-end-width: 1px; }
+        .k-custom-color { border-block-start-width: 1px; }
         .k-spreadsheet-border-type-palette {
             padding: k-spacing(2);
             display: grid;
@@ -664,8 +664,8 @@
         border: 0;
         opacity: 0;
         position: absolute;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         overflow: hidden;
     }
 
@@ -686,12 +686,12 @@
     .k-spreadsheet-format-cells {
 
         .k-spreadsheet-preview {
-            margin-top: k-spacing(2);
+            margin-block-start: k-spacing(2);
             text-align: center;
         }
 
         .k-list-scroller {
-            margin-top: k-spacing(2);
+            margin-block-start: k-spacing(2);
             height: 210px;
             border-width: 1px;
             border-style: solid;
@@ -713,15 +713,15 @@
 
 
         .k-edit-field {
-            margin-left: 5%;
+            margin-inline-start: 5%;
             width: 45%;
-            float: left;
+            float: inline-start;
         }
 
         .k-page-orientation {
             position: absolute;
-            right: 0;
-            top: k-spacing(2);
+            inset-inline-end: 0;
+            inset-block-start: k-spacing(2);
 
             .k-font-icon {
                 font-size: 6em;
@@ -759,7 +759,7 @@
             div {
                 display: flex;
                 align-self: flex-end;
-                margin-bottom: $kendo-spreadsheet-insert-image-dialog-text-margin-bottom;
+                margin-block-end: $kendo-spreadsheet-insert-image-dialog-text-margin-bottom;
                 pointer-events: none;
             }
 
@@ -800,8 +800,8 @@
 
         .k-spreadsheet-drawing-image {
             position: absolute;
-            top: 0;
-            left: 0;
+            inset-block-start: 0;
+            inset-inline-start: 0;
             width: 100%;
             height: 100%;
             background-position: 50% 50%;
@@ -820,14 +820,14 @@
             transform: translate(-50%, -50%);
 
             // stylelint-disable declaration-block-single-line-max-declarations, selector-class-pattern
-            &.N { left: 50%; top: 0; cursor: ns-resize; }
-            &.NE { left: 100%; top: 0; cursor: nesw-resize; }
-            &.E { left: 100%; top: 50%; cursor: ew-resize; }
-            &.SE { left: 100%; top: 100%; cursor: nwse-resize; }
-            &.S { left: 50%; top: 100%; cursor: ns-resize; }
-            &.SW { left: 0; top: 100%; cursor: nesw-resize; }
-            &.W { left: 0; top: 50%; cursor: ew-resize; }
-            &.NW { left: 0; top: 0; cursor: nwse-resize; }
+            &.N { inset-inline-start: 50%; inset-block-start: 0; cursor: ns-resize; }
+            &.NE { inset-inline-start: 100%; inset-block-start: 0; cursor: nesw-resize; }
+            &.E { inset-inline-start: 100%; inset-block-start: 50%; cursor: ew-resize; }
+            &.SE { inset-inline-start: 100%; inset-block-start: 100%; cursor: nwse-resize; }
+            &.S { inset-inline-start: 50%; inset-block-start: 100%; cursor: ns-resize; }
+            &.SW { inset-inline-start: 0; inset-block-start: 100%; cursor: nesw-resize; }
+            &.W { inset-inline-start: 0; inset-block-start: 50%; cursor: ew-resize; }
+            &.NW { inset-inline-start: 0; inset-block-start: 0; cursor: nwse-resize; }
             // stylelint-enable declaration-block-single-line-max-declarations, selector-class-pattern
         }
 
@@ -882,12 +882,12 @@
         flex-direction: row;
         position: absolute;
         z-index: 2;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
     }
 
     .k-spreadsheet-tabstrip {
-        padding-top: $kendo-toolbar-md-padding-y;
+        padding-block-start: $kendo-toolbar-md-padding-y;
         position: relative;
         z-index: 1;
     }

package/scss/components/stepper/_layout.scss

@@ -85,8 +85,8 @@
                 width: 100%;
                 height: 100%;
                 position: absolute;
-                top: 0;
-                left: 0;
+                inset-block-start: 0;
+                inset-inline-start: 0;
                 z-index: -1;
             }
 
@@ -99,10 +99,10 @@
                 pointer-events: none;
                 display: none;
                 position: absolute;
-                top: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
-                right: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
-                bottom: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
-                left: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
+                inset-block-start: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
+                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;
             }
         }
@@ -138,7 +138,7 @@
             overflow: hidden;
         }
         .k-step-label .k-icon  {
-            margin-left: $kendo-icon-spacing;
+            margin-inline-start: $kendo-icon-spacing;
         }
 
         .k-step-current .k-step-label {
@@ -206,14 +206,14 @@
             text-align: center;
         }
         .k-step-indicator + .k-step-label {
-            margin-top: if($kendo-stepper-indicator-focus-offset > 0, k-spacing(1), 8px);
+            margin-block-start: if($kendo-stepper-indicator-focus-offset > 0, k-spacing(1), 8px);
         }
 
         // Progressbar
         & ~ .k-progressbar {
             width: 100%;
             height: $kendo-stepper-progressbar-size;
-            top: calc(((#{$kendo-stepper-indicator-height} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2) + #{$kendo-stepper-indicator-focus-size} / 2);
+            inset-block-start: calc(((#{$kendo-stepper-indicator-height} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2) + #{$kendo-stepper-indicator-focus-size} / 2);
         }
     }
 
@@ -230,7 +230,7 @@
             justify-content: flex-start;
         }
         .k-step-indicator + .k-step-label {
-            margin-left: $kendo-stepper-label-margin-x;
+            margin-inline-start: $kendo-stepper-label-margin-x;
         }
 
 
@@ -239,7 +239,7 @@
             width: $kendo-stepper-progressbar-size;
             height: 100%;
             min-height: 20px;
-            left: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2);
+            inset-inline-start: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2);
         }
 
         // Inline content
@@ -255,41 +255,11 @@
             display: flex;
             flex-direction: column;
             justify-content: space-between;
-            margin-left: calc( #{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} );
+            margin-inline-start: calc( #{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} );
             padding-block: $kendo-stepper-inline-content-padding-x;
             padding-inline: $kendo-stepper-inline-content-padding-y;
         }
     }
-
-
-    // Stepper rtl
-    .k-rtl .k-stepper,
-    .k-stepper[dir="rtl"] {
-        direction: rtl;
-
-        .k-step-label .k-icon {
-            margin-left: 0;
-            margin-right: $kendo-icon-spacing;
-        }
-
-        // Horizontal
-        .k-step-list-horizontal { }
-
-
-        // Vertical
-        .k-step-list-vertical {
-            .k-step-indicator + .k-step-label {
-                margin-left: 0;
-                margin-right: $kendo-stepper-label-margin-x;
-            }
-
-            & ~ .k-progressbar {
-                left: auto;
-                right: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2);
-            }
-        }
-    }
-
 }
 
 

package/scss/components/switch/_layout.scss

@@ -61,7 +61,7 @@
         overflow: visible;
         position: absolute;
         transition: left 200ms ease-in-out;
-        top: 50%;
+        inset-block-start: 50%;
     }
     .k-switch-thumb {
         border-width: $kendo-switch-thumb-border-width;
@@ -78,7 +78,7 @@
         text-transform: $kendo-switch-label-text-transform;
         display: $kendo-switch-label-display;
         position: absolute;
-        top: 50%;
+        inset-block-start: 50%;
         transform: translateY( -50% );
         overflow: hidden;
     }
@@ -105,8 +105,8 @@
                 height: $_track-height;
             }
 
-            .k-switch-label-on { left: $_label-offset; }
-            .k-switch-label-off { right: $_label-offset; }
+            .k-switch-label-on { inset-inline-start: $_label-offset; }
+            .k-switch-label-off { inset-inline-end: $_label-offset; }
 
             .k-switch-thumb {
                 width: $_thumb-width;
@@ -114,32 +114,10 @@
             }
 
             &.k-switch-on .k-switch-thumb-wrap {
-                left: calc( 100% - #{math.div( $_thumb-width, 2 )} - #{$_thumb-offset} );
+                inset-inline-start: calc( 100% - #{math.div( $_thumb-width, 2 )} - #{$_thumb-offset} );
             }
             &.k-switch-off .k-switch-thumb-wrap {
-                left: calc( #{math.div( $_thumb-width, 2 )} + #{$_thumb-offset} );
-            }
-        }
-
-        .k-switch-#{$size}[dir="rtl"],
-        [dir="rtl"] .k-switch-#{$size},
-        .k-rtl.k-switch-#{$size},
-        .k-rtl .k-switch-#{$size} {
-
-            .k-switch-label-on {
-                left: auto;
-                right: $_label-offset;
-            }
-            .k-switch-label-off {
-                right: auto;
-                left: $_label-offset;
-            }
-
-            &.k-switch-on .k-switch-thumb-wrap {
-                left: calc( #{math.div( $_thumb-width, 2 )} + #{$_thumb-offset} );
-            }
-            &.k-switch-off .k-switch-thumb-wrap {
-                left: calc( 100% - #{math.div( $_thumb-width, 2 )} - #{$_thumb-offset} );
+                inset-inline-start: calc( #{math.div( $_thumb-width, 2 )} + #{$_thumb-offset} );
             }
         }
     }