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

package/scss/components/timeselector/_layout.scss

@@ -57,7 +57,7 @@
 
     // Fast selection
     .k-actions.k-time-fast-selection {
-        margin-top: 0;
+        margin-block-start: 0;
     }
 
 
@@ -84,9 +84,9 @@
         border-style: solid;
         box-sizing: border-box;
         position: absolute;
-        top: calc( 50% + #{list.slash( $kendo-time-list-title-height, 2 )});
-        left: 0;
-        right: 0;
+        inset-block-start: calc( 50% + #{list.slash( $kendo-time-list-title-height, 2 )});
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         transform: translateY(-50%);
         z-index: 1;
     }
@@ -121,20 +121,20 @@
                 content: "\200b";
                 position: absolute;
                 width: 100%;
-                left: 0;
+                inset-inline-start: 0;
                 pointer-events: none;
-                height: calc( 50% - #{list.slash( $kendo-time-list-highlight-height, 2 )} );
+                height: calc( 50% - #{list.slash( $kendo-time-list-title-height, 2 )} );
                 box-sizing: border-box;
                 border-width: 0;
                 border-style: solid;
             }
 
             &::before {
-                top: $kendo-time-list-title-height;
+                inset-block-start: $kendo-time-list-title-height;
             }
 
             &::after {
-                bottom: 0;
+                inset-block-end: 0;
             }
         }
     }
@@ -160,11 +160,11 @@
             line-height: 0;
             z-index: 1;
             width: 200%;
-            left: -50%;
+            inset-inline-start: -50%;
         }
 
-        &::before { top: 0; }
-        &::after { bottom: 0; }
+        &::before { inset-block-start: 0; }
+        &::after { inset-block-end: 0; }
     }
 
 
@@ -188,8 +188,8 @@
         .k-scrollable-placeholder {
             position: absolute;
             width: 1px;
-            top: 0;
-            right: 0;
+            inset-block-start: 0;
+            inset-inline-end: 0;
         }
     }
 
@@ -212,7 +212,7 @@
         align-items: center;
         position: relative;
         z-index: 11;
-        top: calc( #{list.slash( $kendo-time-list-title-height, 2 )} );
+        inset-block-start: calc( #{list.slash( $kendo-time-list-title-height, 2 )} );
     }
 
 
@@ -246,18 +246,6 @@
         }
     }
 
-
-
-    .k-rtl,
-    [dir="rtl"] {
-
-        // Time list content
-        .k-time-container,
-        .k-time-list-content {
-            @include hide-scrollbar("left");
-        }
-    }
-
 }
 
 

package/scss/components/toolbar/_layout.scss

@@ -188,7 +188,7 @@
 
     // Flat Toolbar
     .k-toolbar-flat {
-        border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
+        border-block-start-color: transparent !important; // stylelint-disable-line declaration-no-important
         border-inline-color: transparent !important; // stylelint-disable-line declaration-no-important
         background: none !important;  // stylelint-disable-line declaration-no-important
     }

package/scss/components/tooltip/_layout.scss

@@ -39,7 +39,7 @@
     }
 
     .k-tooltip-title {
-        margin-bottom: .25em;
+        margin-block-end: .25em;
         font-size: $kendo-tooltip-title-font-size;
         line-height: $kendo-tooltip-title-line-height;
     }
@@ -97,7 +97,7 @@
     }
     .k-callout-s {
         margin-left: calc( #{$kendo-tooltip-callout-size} * -1 );
-        border-top-color: currentColor;
+        border-block-start-color: currentColor;
         // bottom: 0;
         bottom: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2);
         left: 50%;

package/scss/components/treelist/_layout.scss

@@ -17,7 +17,7 @@
             // TODO: see what this does and use a better name
             .k-loading {
                 vertical-align: baseline;
-                margin-right: 5px;
+                margin-inline-end: 5px;
 
                 // TODO
                 display: none;
@@ -48,7 +48,7 @@
 
         .k-table-row.k-footer + .k-table-row.k-footer td,
         .k-table-row.k-footer + .k-table-row.k-footer .k-table-td {
-            border-top-width: 0;
+            border-block-start-width: 0;
         }
     }
 
@@ -64,8 +64,8 @@
         .k-grid-toolbar {
             position: sticky;
             z-index: 3;
-            top: 0;
-            left: 0;
+            inset-block-start: 0;
+            inset-inline-start: 0;
         }
 
         .k-grid-header .k-table-th {
@@ -78,21 +78,17 @@
         }
 
         thead.k-grid-header {
-            padding-right: 0;
+            padding-inline-end: 0;
         }
 
         .k-table-row.k-group-footer + .k-table-row.k-group-footer td {
-            border-top-width: 0;
+            border-block-start-width: 0;
         }
     }
 
-    :is(.k-treelist-scrollable[dir="rtl"], .k-rtl .k-treelist-scrollable) thead.k-grid-header {
-        padding-left: 0;
-    }
-
     .k-drag-separator {
         display: inline-block;
-        border-right: 1px solid;
+        border-inline-end: 1px solid;
         height: 1em;
         vertical-align: top;
         margin-block: 0;

package/scss/components/treeview/_layout.scss

@@ -72,7 +72,8 @@
     .k-treeview-item {
         outline-style: none;
         margin: 0;
-        padding: 0 0 0 $kendo-treeview-indent;
+        padding: 0;
+        padding-inline-start: $kendo-treeview-indent;
         border-width: 0;
         display: block;
     }
@@ -95,7 +96,7 @@
 
     // Loading icon
     .k-treeview-loading {
-        margin-right: $kendo-icon-spacing;
+        margin-inline-end: $kendo-icon-spacing;
     }
 
 
@@ -122,7 +123,7 @@
         .k-icon,
         .k-image,
         .k-sprite {
-            margin-right: $kendo-icon-spacing;
+            margin-inline-end: $kendo-icon-spacing;
         }
 
         &.k-focus {
@@ -143,37 +144,6 @@
         }
     }
 
-
-    // RTL
-    .k-rtl .k-treeview,
-    [dir="rtl"] .k-treeview,
-    .k-treeview.k-rtl,
-    .k-treeview[dir="rtl"] {
-
-        // Treeview item
-        .k-treeview-item {
-            padding-left: 0;
-            padding-right: $kendo-treeview-indent;
-        }
-
-        // Loading
-        .k-treeview-loading {
-            margin-right: 0;
-            margin-left: $kendo-icon-spacing;
-        }
-
-        // Treeview leaf
-        .k-treeview-leaf,
-        .k-in {
-            .k-icon,
-            .k-image,
-            .k-sprite {
-                margin-right: 0;
-                margin-left: $kendo-icon-spacing;
-            }
-        }
-    }
-
     @each $size, $size-props in $kendo-treeview-sizes {
         $_font-size: map.get( $size-props, font-size);
         $_line-height: map.get( $size-props, line-height);

package/scss/components/upload/_layout.scss

@@ -118,7 +118,7 @@
             }
 
             .k-filename {
-                margin-left: k-spacing(4);
+                margin-inline-start: k-spacing(4);
                 flex: 1;
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -135,14 +135,14 @@
 
             ~ .k-clear-selected,
             ~ .k-upload-selected {
-                margin-top: $kendo-upload-files-list-margin;
+                margin-block-start: $kendo-upload-files-list-margin;
                 border-width: 0;
             }
 
             ~ .k-upload-selected {
-                border-left-width: 1px;
-                border-left-style: solid;
-                margin-left: -1px;
+                border-inline-start-width: 1px;
+                border-inline-start-style: solid;
+                margin-inline-start: -1px;
             }
 
             .k-file-name,
@@ -197,27 +197,27 @@
 
         .k-multiple-files-wrapper {
             .k-file-info {
-                margin-bottom: $kendo-upload-multiple-items-spacing;
+                margin-block-end: $kendo-upload-multiple-items-spacing;
                 display: block;
             }
 
             .k-file-summary {
-                margin-top: calc( calc( #{$kendo-upload-multiple-items-spacing} / 3) * -1 );
+                margin-block-start: calc( calc( #{$kendo-upload-multiple-items-spacing} / 3) * -1 );
             }
         }
 
         .k-progressbar {
             --kendo-progressbar-height: #{$kendo-upload-progress-thickness};
             position: absolute;
-            left: $kendo-upload-item-padding-x;
-            right: $kendo-upload-item-padding-x;
-            bottom: calc( #{$kendo-upload-item-padding-y} / 2 );
+            inset-inline-start: $kendo-upload-item-padding-x;
+            inset-inline-end: $kendo-upload-item-padding-x;
+            inset-block-end: calc( #{$kendo-upload-item-padding-y} / 2 );
             width: auto;
         }
 
         // Action buttons
         .k-actions {
-            border-top-width: 1px;
+            border-block-start-width: 1px;
         }
 
     }
@@ -236,8 +236,8 @@
             opacity: 0;
             cursor: pointer;
             position: absolute;
-            bottom: 0;
-            right: 0;
+            inset-block-end: 0;
+            inset-inline-end: 0;
             z-index: 1;
         }
         input[disabled],

package/scss/components/validator/_layout.scss

@@ -8,7 +8,7 @@
 
     // Validator tooltip
     .k-validator-tooltip {
-        margin-top: calc( #{$kendo-tooltip-callout-size} + #{$kendo-tooltip-border-width} );
+        margin-block-start: calc( #{$kendo-tooltip-callout-size} + #{$kendo-tooltip-border-width} );
         width: auto;
         white-space: normal;
         display: flex;

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

@@ -21,7 +21,7 @@
     .k-virtual-scroller-content {
         position: absolute;
         width: 100%;
-        top: 0;
+        inset-block-start: 0;
         inset-inline-start: 0;
     }
 

package/scss/components/window/_layout.scss

@@ -117,13 +117,15 @@
         flex: 1 1 auto;
     }
     .k-window-content + .k-prompt-container {
-        margin-top: - list.slash( $kendo-window-inner-padding-y, 2 );
+        margin-block-start: - list.slash( $kendo-window-inner-padding-y, 2 );
     }
+
+    // TODO: Check if we can remove
     .k-window-content:first-child {
-        padding-top: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} );
+        padding-block-start: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} );
     }
     .k-window-content:last-child {
-        padding-bottom: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} );
+        padding-block-end: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} );
     }
 
     .k-window-iframecontent {
@@ -165,10 +167,10 @@
 
     // Resize Handles
     .k-window { // stylelint-disable-line
-        .k-resize-n { top: 0; }
-        .k-resize-e { right: 0; }
-        .k-resize-s { bottom: 0; }
-        .k-resize-w { left: 0; }
+        .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; }
     }
 
 }

package/scss/components/wizard/_layout.scss

@@ -38,6 +38,7 @@
 
             &:focus,
             &.k-focus {
+                // TODO: add scss variable for outline width
                 outline-width: 1px;
                 outline-style: dotted;
                 outline-offset: -1px;
@@ -50,7 +51,7 @@
         }
 
         .k-wizard-buttons {
-            margin-top: $kendo-wizard-content-padding-y;
+            margin-block-start: $kendo-wizard-content-padding-y;
             box-sizing: border-box;
             display: flex;
             flex-wrap: nowrap;
@@ -59,7 +60,7 @@
             flex-shrink: 0;
 
             .k-button {
-                margin-right: $kendo-wizard-buttons-margin-x;
+                margin-inline-end: $kendo-wizard-buttons-margin-x;
             }
 
             .k-wizard-pager {
@@ -69,7 +70,7 @@
 
         .k-wizard-buttons-right {
             .k-button:last-of-type {
-                margin-right: 0;
+                margin-inline-end: 0;
             }
         }
 
@@ -90,7 +91,7 @@
         flex-direction: column;
 
         .k-wizard-steps {
-            margin-top: $kendo-wizard-content-padding-y;
+            margin-block-start: $kendo-wizard-content-padding-y;
         }
 
         .k-wizard-steps,
@@ -102,7 +103,7 @@
     .k-wizard-vertical {
 
         .k-wizard-steps {
-            margin-left: $kendo-wizard-content-padding-x;
+            margin-inline-start: $kendo-wizard-content-padding-x;
             flex: 1 0 0%;
         }
 
@@ -116,8 +117,8 @@
         flex-direction: row-reverse;
 
         .k-wizard-steps {
-            margin-right: $kendo-wizard-content-padding-x;
-            margin-left: 0;
+            margin-inline-end: $kendo-wizard-content-padding-x;
+            margin-inline-start: 0;
         }
     }
 

package/scss/mixins/_border-radius.scss

@@ -9,52 +9,60 @@
 
 @mixin border-top-radius( $radius: null ) {
     @if $kendo-enable-rounded {
-        border-top-left-radius: $radius;
-        border-top-right-radius: $radius;
+        border-start-start-radius: $radius;
+        border-start-end-radius: $radius;
     }
 }
 
 @mixin border-right-radius( $radius: null ) {
     @if $kendo-enable-rounded {
-        border-top-right-radius: $radius;
-        border-bottom-right-radius: $radius;
+        border-start-end-radius: $radius;
+        border-end-end-radius: $radius;
     }
 }
 
 @mixin border-bottom-radius( $radius: null ) {
     @if $kendo-enable-rounded {
-        border-bottom-right-radius: $radius;
-        border-bottom-left-radius: $radius;
+        border-end-end-radius: $radius;
+        border-end-start-radius: $radius;
     }
 }
 
 @mixin border-left-radius( $radius: null ) {
     @if $kendo-enable-rounded {
-        border-top-left-radius: $radius;
-        border-bottom-left-radius: $radius;
+        border-start-start-radius: $radius;
+        border-end-start-radius: $radius;
     }
 }
 
 @mixin border-top-radius-only( $radius: null ) {
     @if $kendo-enable-rounded {
-        border-radius: $radius $radius 0 0;
+        border-radius: 0;
+        border-start-start-radius: $radius;
+        border-start-end-radius: $radius;
     }
 }
 
 @mixin border-right-radius-only( $radius: null ) {
     @if $kendo-enable-rounded {
-        border-radius: 0 $radius $radius 0;
+        border-radius: 0;
+        border-start-end-radius: $radius;
+        border-end-end-radius: $radius;
     }
 }
 
 @mixin border-bottom-radius-only( $radius: null ) {
     @if $kendo-enable-rounded {
-        border-radius: 0 0 $radius $radius;
+        border-radius: 0;
+        border-end-start-radius: $radius;
+        border-end-end-radius: $radius;
     }
 }
 
 @mixin border-left-radius-only( $radius: null ) {
     @if $kendo-enable-rounded {
-        border-radius: $radius 0 0 $radius;
+        border-radius: 0;
+        border-start-start-radius: $radius;
+        border-end-start-radius: $radius;
     }
 }

package/scss/mixins/_hide-scrollbar.scss

@@ -5,15 +5,15 @@ $kendo-scrollbar-width: 17px !default;
     $scrollbar-size: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
     $margin: calc( -#{$max-scrollbar} - #{$scrollbar-size} );
 
-    padding-right: $max-scrollbar;
-    padding-left: $max-scrollbar;
+    padding-inline-end: $max-scrollbar;
+    padding-inline-start: $max-scrollbar;
 
     @if ( $dir == "right" ) {
-        margin-left: -$max-scrollbar;
-        margin-right: $margin;
+        margin-inline-start: -$max-scrollbar;
+        margin-inline-end: $margin;
     } @else {
-        margin-left: $margin;
-        margin-right: -$max-scrollbar;
+        margin-inline-start: $margin;
+        margin-inline-end: -$max-scrollbar;
     }
 }
 

package/scss/styles/_accessibility.scss

@@ -5,7 +5,7 @@
     /// @group accessibility
     .k-sr-only {
         position: absolute;
-        left: -1px;
+        inset-inline-start: -1px;
         width: 1px;
         height: 1px;
         overflow: hidden;

package/scss/styles/_base.scss

@@ -120,7 +120,7 @@
     .k-pdf-export-shadow {
         position: absolute;
         overflow: hidden;
-        left: -15000px;
+        inset-inline-start: -15000px;
         width: 14400px;
     }
 

package/scss/styles/_resizing.scss

@@ -21,32 +21,32 @@
         width: 100%;
         height: 6px;
         flex-direction: row;
-        left: 0;
-        top: -3px;
+        inset-inline-start: 0;
+        inset-block-start: -3px;
         cursor: n-resize;
     }
     .k-resize-s {
         width: 100%;
         height: 6px;
         flex-direction: row;
-        left: 0;
-        bottom: -3px;
+        inset-inline-start: 0;
+        inset-block-end: -3px;
         cursor: s-resize;
     }
     .k-resize-w {
         width: 6px;
         height: 100%;
         flex-direction: column;
-        top: 0;
-        left: -3px;
+        inset-block-start: 0;
+        inset-inline-start: -3px;
         cursor: w-resize;
     }
     .k-resize-e {
         width: 6px;
         height: 100%;
         flex-direction: column;
-        top: 0;
-        right: -3px;
+        inset-block-start: 0;
+        inset-inline-end: -3px;
         cursor: e-resize;
     }
 
@@ -60,23 +60,23 @@
 
     .k-resize-sw {
         cursor: sw-resize;
-        bottom: 0;
-        left: 0;
+        inset-block-end: 0;
+        inset-inline-start: 0;
     }
     .k-resize-se {
         cursor: se-resize;
-        bottom: 0;
-        right: 0;
+        inset-block-end: 0;
+        inset-inline-end: 0;
     }
     .k-resize-nw {
         cursor: nw-resize;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
     }
     .k-resize-ne {
         cursor: ne-resize;
-        top: 0;
-        right: 0;
+        inset-block-start: 0;
+        inset-inline-end: 0;
     }
 
     .k-vertical-resize {

package/scss/styles/_scrollbar.scss

@@ -7,8 +7,8 @@
     }
 
     .k-scrollbar-vertical {
-        top: 0;
-        right: 0;
+        inset-block-start: 0;
+        inset-inline-end: 0;
         width: 17px; // scrollbar width
         height: 100%;
         overflow-x: hidden;