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

package/scss/components/grid/_layout.scss

@@ -141,11 +141,11 @@
         }
 
         .k-grid-header {
-            border-bottom-width: 1px;
+            border-block-end-width: 1px;
             font-size: $kendo-grid-header-font-size;
 
             .k-table {
-                margin-bottom: -1px;
+                margin-block-end: -1px;
             }
 
             &.k-grid-draggable-header {
@@ -213,7 +213,7 @@
                 vertical-align: top;
                 height: $kendo-icon-size;
                 font-size: $kendo-grid-sorting-index-font-size;
-                margin-top: $kendo-grid-sorting-index-spacing-y;
+                margin-block-start: $kendo-grid-sorting-index-spacing-y;
                 margin-inline-start: $kendo-grid-sorting-index-spacing-x;
             }
         }
@@ -289,12 +289,12 @@
 
         .k-grouping-row + .k-table-row td,
         .k-grouping-row + .k-table-row .k-table-td {
-            border-top-width: $kendo-grid-grouping-row-border-top;
+            border-block-start-width: $kendo-grid-grouping-row-border-top;
         }
 
         .k-grouping-row .k-group-cell,
         .k-grouping-row + .k-table-row .k-group-cell {
-            border-top-width: 0;
+            border-block-start-width: 0;
             text-overflow: clip;
         }
 
@@ -374,7 +374,7 @@
             position: absolute;
             visibility: hidden;
             height: 1px;
-            bottom: 1px; // fix for vertical scrollbar appearing when no records template is displayed
+            inset-block-end: 1px; // fix for vertical scrollbar appearing when no records template is displayed
         }
 
         .k-grid-filter,
@@ -454,7 +454,7 @@
     .k-grouping-dropclue {
         width: calc($kendo-grid-group-drop-hint-size * 2);
         position: absolute;
-        top: $kendo-grid-group-drop-hint-top;
+        inset-block-start: $kendo-grid-group-drop-hint-top;
         box-sizing: content-box;
 
         &::before,
@@ -467,16 +467,16 @@
         &::before {
             border-width: $kendo-grid-group-drop-hint-size;
             border-style: solid;
-            border-left-color: transparent;
-            border-right-color: transparent;
-            border-bottom-color: transparent;
-            top: 0;
+            border-inline-start-color: transparent;
+            border-inline-end-color: transparent;
+            border-block-end-color: transparent;
+            inset-block-start: 0;
         }
 
         &::after {
             width: $kendo-grid-group-drop-hint-line-size;
             height: calc(100% - #{$kendo-grid-group-drop-hint-size});
-            top: $kendo-grid-group-drop-hint-size;
+            inset-block-start: $kendo-grid-group-drop-hint-size;
             inset-inline-start: calc( #{$kendo-grid-group-drop-hint-size} - #{$kendo-grid-group-drop-hint-line-size} / 2 );
         }
     }
@@ -521,7 +521,7 @@
         height: 1000%;
         display: block;
         position: absolute;
-        top: 0;
+        inset-block-start: 0;
         inset-inline-end: 0;
         cursor: col-resize;
     }
@@ -534,7 +534,7 @@
     }
 
     .k-grid-footer {
-        border-top-width: 1px;
+        border-block-start-width: 1px;
 
         td,
         .k-table-td {
@@ -618,7 +618,7 @@
 
         .k-table-row:last-child > td,
         .k-table-row:last-child > .k-table-td {
-            border-bottom-width: 0;
+            border-block-end-width: 0;
         }
     }
 
@@ -714,19 +714,19 @@
 
     .k-grid-virtual .k-grid-content {
         .k-grid-table-wrap {
-            float: left;
+            float: inline-start;
             width: 100%;
         }
 
         .k-grid-table {
             position: relative;
-            float: left;
+            float: inline-start;
             z-index: 1;
         }
 
         > .k-height-container {
             position: relative;
-            float: left;
+            float: inline-start;
         }
 
         &::after {
@@ -747,8 +747,8 @@
 
     .k-grid-add-row td,
     .k-grid-add-row .k-table-td {
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
+        border-block-end-style: solid;
+        border-block-end-width: 1px;
     }
 
     // Locked columns
@@ -797,7 +797,7 @@
 
     .k-grid-header-locked > .k-grid-header-table,
     .k-grid-header-wrap > .k-grid-header-table {
-        margin-bottom: -1px;
+        margin-block-end: -1px;
     }
 
     .k-grid-header .k-table-th.k-grid-header-sticky,
@@ -820,8 +820,8 @@
         width: 100%;
         height: 100%;
         position: absolute;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         z-index: -1;
     }
 
@@ -834,12 +834,12 @@
 
         .k-grid-row-sticky td,
         .k-grid-row-sticky .k-table-td {
-            border-bottom-width: $kendo-grid-border-width;
-            border-top-width: $kendo-grid-border-width;
+            border-block-end-width: $kendo-grid-border-width;
+            border-block-start-width: $kendo-grid-border-width;
 
             position: sticky;
-            top: inherit;
-            bottom: inherit;
+            inset-block-start: inherit;
+            inset-block-end: inherit;
             z-index: 2;
         }
 
@@ -879,8 +879,8 @@
     }
 
     .k-grid .k-grid-row-sticky {
-        border-bottom-width: $kendo-grid-border-width;
-        border-top-width: $kendo-grid-border-width;
+        border-block-end-width: $kendo-grid-border-width;
+        border-block-start-width: $kendo-grid-border-width;
     }
 
     .k-grid-header-sticky.k-table-th.k-grid-no-left-border.k-first {
@@ -993,7 +993,7 @@
                     width: $_button-calc-size;
                     height: $_button-calc-size;
                     line-height: $_button-line-height;
-                    bottom: calc( #{$_header-padding-y} + #{list.slash( $kendo-line-height-em, 2)} - #{list.slash( $kendo-button-inner-calc-size, 2 )} );
+                    inset-block-end: calc( #{$_header-padding-y} + #{list.slash( $kendo-line-height-em, 2)} - #{list.slash( $kendo-button-inner-calc-size, 2 )} );
                 }
             }
 
@@ -1079,6 +1079,11 @@
 
     // Grid stack layout
     .k-grid-stack {
+
+        .k-grid-content .k-table {
+            table-layout: auto;
+        }
+
         .k-table-td,
         .k-grid-edit-row .k-table-td {
             padding-inline: $kendo-grid-stack-cell-padding-x;
@@ -1167,8 +1172,8 @@
             width: 100%;
             height: $kendo-grid-stack-expandable-shadow-height;
             box-shadow: $kendo-grid-stack-expandable-shadow;
-            top: calc( -1 * #{$kendo-grid-stack-expandable-shadow-height} );
-            left: 0;
+            inset-block-start: calc( -1 * #{$kendo-grid-stack-expandable-shadow-height} );
+            inset-inline-start: 0;
         }
     }
 
@@ -1200,24 +1205,24 @@
         position: absolute;
         width: 100%;
         height: 100%;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         z-index: 100;
 
         > .k-i-loading {
             position: absolute;
-            top: 50%;
-            left: 50%;
+            inset-block-start: 50%;
+            inset-inline-start: 50%;
             font-size: 64px;
         }
 
         .k-loading-pdf-progress {
             margin: auto;
             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;
         }
 
     }
@@ -1228,8 +1233,8 @@
 
     .k-grid-pdf-export-element {
         position: absolute;
-        left: -10000px;
-        top: -10000px;
+        inset-inline-start: -10000px;
+        inset-block-start: -10000px;
 
         .k-filter-row {
             display: none;
@@ -1240,7 +1245,7 @@
     // stylelint-disable declaration-no-important
     .k-pdf-export-shadow {
         .k-grid {
-            float: left;
+            float: inline-start;
             width: auto !important;
         }
 
@@ -1484,8 +1489,8 @@
 
     .k-columnmenu-item-wrapper + .k-columnmenu-item-wrapper,
     .k-column-menu-footer {
-        border-top: 1px solid;
-        border-top-color: $kendo-popup-border;
+        border-block-start: 1px solid;
+        border-block-start-color: $kendo-popup-border;
     }
 
     .k-columnmenu-item-content {
@@ -1502,8 +1507,8 @@
     }
 
     .k-column-menu-group-header-text {
-        border-bottom-width: $kendo-grid-column-menu-group-header-border-bottom-width;
-        border-bottom-style: solid;
+        border-block-end-width: $kendo-grid-column-menu-group-header-border-bottom-width;
+        border-block-end-style: solid;
         font-size: $kendo-grid-column-menu-group-header-font-size;
         line-height: $kendo-grid-column-menu-group-header-line-height;
         font-weight: var( --kendo-font-weight-bold, normal );
@@ -1511,18 +1516,6 @@
         flex: 1 1 auto;
     }
 
-    .k-rtl .k-grid-virtual .k-grid-content,
-    [dir="rtl"] .k-grid-virtual .k-grid-content,
-    .k-rtl.k-grid-virtual .k-grid-content,
-    [dir="rtl"].k-grid-virtual .k-grid-content {
-
-        .k-grid-table-wrap,
-        .k-grid-table,
-        > .k-height-container {
-            float: right;
-        }
-    }
-
 }
 
 

package/scss/components/grid/_theme.scss

@@ -153,7 +153,7 @@
 
             .k-grid-content-sticky {
                 border-color: $kendo-grid-sticky-border;
-                border-top-color: $kendo-grid-header-border;
+                border-block-start-color: $kendo-grid-header-border;
             }
         }
 
@@ -178,26 +178,26 @@
 
             .k-grouping-row + .k-table-row td,
             .k-grouping-row + .k-table-row .k-table-td {
-                border-top-color: $kendo-grid-header-border;
+                border-block-start-color: $kendo-grid-header-border;
             }
         }
 
         .k-grid-header-locked .k-table-th {
-            border-bottom-color: $kendo-grid-header-border;
+            border-block-end-color: $kendo-grid-header-border;
         }
 
         // Sticky columns
         .k-master-row {
             .k-grid-content-sticky {
                 @include fill( $bg: $kendo-grid-sticky-bg, $border: $kendo-grid-sticky-border );
-                border-top-color: $kendo-grid-header-border;
+                border-block-start-color: $kendo-grid-header-border;
             }
 
             .k-grid-row-sticky,
             &.k-grid-row-sticky > .k-table-td {
                 @include fill( $bg: $kendo-grid-sticky-bg );
-                border-top-color: $kendo-grid-sticky-border;
-                border-bottom-color: $kendo-grid-sticky-border;
+                border-block-start-color: $kendo-grid-sticky-border;
+                border-block-end-color: $kendo-grid-sticky-border;
             }
 
             &.k-table-alt-row {
@@ -314,8 +314,8 @@
                 $bg: $kendo-grid-sticky-header-bg
             );
 
-            border-right-color: $kendo-grid-sticky-header-border;
-            border-left-color: $kendo-grid-sticky-header-border;
+            border-inline-end-color: $kendo-grid-sticky-header-border;
+            border-inline-start-color: $kendo-grid-sticky-header-border;
         }
     }
 
@@ -327,8 +327,8 @@
             $kendo-grid-footer-border
         );
         .k-grid-footer-sticky {
-            border-left-color: $kendo-grid-sticky-border;
-            border-right-color: $kendo-grid-sticky-border;
+            border-inline-start-color: $kendo-grid-sticky-border;
+            border-inline-end-color: $kendo-grid-sticky-border;
             background-color: $kendo-grid-sticky-footer-bg;
         }
     }

package/scss/components/icons/_layout.scss

@@ -44,8 +44,8 @@
         height: 1em;
         position: absolute;
         font-size: .5em;
-        bottom: 0;
-        right: 0;
+        inset-block-end: 0;
+        inset-inline-end: 0;
         margin: 0 -.5em -.5em 0;
     }
 

package/scss/components/imageeditor/_layout.scss

@@ -32,7 +32,7 @@
     // Image editor toolbar
     .k-imageeditor-toolbar {
         border-width: 0;
-        border-bottom-width: $kendo-toolbar-border-width;
+        border-block-end-width: $kendo-toolbar-border-width;
     }
 
 
@@ -67,7 +67,7 @@
         padding-inline: $kendo-image-editor-action-pane-padding-x;
         width: $kendo-image-editor-action-pane-width;
         border-width: 0;
-        border-left-width: $kendo-image-editor-content-border-width;
+        border-inline-start-width: $kendo-image-editor-content-border-width;
         border-style: solid;
         border-color: inherit;
         box-sizing: border-box;
@@ -86,8 +86,8 @@
         width: 100%;
         height: 100%;
         position: absolute;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
     }
 
     .k-imageeditor-crop {
@@ -115,14 +115,14 @@
 
         .k-resize-n,
         .k-resize-s {
-            left: calc( 50% - ($kendo-image-editor-resize-handle-size / 2) );
+            inset-inline-start: calc( 50% - ($kendo-image-editor-resize-handle-size / 2) );
             width: $kendo-image-editor-resize-handle-size;
             height: 0;
         }
 
         .k-resize-w,
         .k-resize-e {
-            top: calc( 50% - ($kendo-image-editor-resize-handle-size / 2) );
+            inset-block-start: calc( 50% - ($kendo-image-editor-resize-handle-size / 2) );
             width: 0;
             height: $kendo-image-editor-resize-handle-size;
         }
@@ -141,19 +141,19 @@
         }
 
         .k-resize-n {
-            top: 0;
+            inset-block-start: 0;
         }
 
         .k-resize-s {
-            bottom: 0;
+            inset-block-end: 0;
         }
 
         .k-resize-w {
-            left: 0;
+            inset-inline-start: 0;
         }
 
         .k-resize-e {
-            right: 0;
+            inset-inline-end: 0;
         }
     }
 

package/scss/components/input/_layout.scss

@@ -405,10 +405,10 @@
             }
         }
         .k-spinner-increase .k-icon {
-            bottom: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
+            inset-block-end: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
         }
         .k-spinner-decrease .k-icon {
-            top: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
+            inset-block-start: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
         }
     }
 
@@ -444,7 +444,7 @@
     .k-picker-flat {
         @include border-bottom-radius( 0 !important ); // stylelint-disable-line declaration-no-important
         border-width: $kendo-input-border-width 0;
-        border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
+        border-block-start-color: transparent !important; // stylelint-disable-line declaration-no-important
         background-image: none !important; // stylelint-disable-line declaration-no-important
     }
 

package/scss/components/list/_layout.scss

@@ -113,9 +113,9 @@
             border-width: 1px 0 0;
             border-style: solid;
             position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
+            inset-block-start: 0;
+            inset-inline-start: 0;
+            inset-inline-end: 0;
         }
     }
     .k-list-item-text,
@@ -162,7 +162,7 @@
     // List item group label
     .k-list-item-group-label {
         position: absolute;
-        top: 0;
+        inset-block-start: 0;
         inset-inline-end: 0;
     }
 

package/scss/components/listbox/_layout.scss

@@ -70,8 +70,8 @@
         }
 
         .k-drop-hint {
-            border-top-width: $kendo-listbox-drop-hint-width;
-            border-top-style: solid;
+            border-block-start-width: $kendo-listbox-drop-hint-width;
+            border-block-start-style: solid;
         }
 
         .k-ghost {

package/scss/components/listbox/_theme.scss

@@ -14,7 +14,7 @@
             );
         }
         .k-drop-hint {
-            border-top-color: k-color(primary);
+            border-block-start-color: k-color(primary);
         }
     }
 

package/scss/components/listgroup/_layout.scss

@@ -28,13 +28,13 @@
 
         // Borders of items
         .k-listgroup-item + .k-listgroup-item {
-            border-top-width: $kendo-listgroup-item-border-width;
+            border-block-start-width: $kendo-listgroup-item-border-width;
         }
     }
     .k-listgroup-flush {
         @include border-radius( 0 );
-        border-left-width: 0;
-        border-right-width: 0;
+        border-inline-start-width: 0;
+        border-inline-end-width: 0;
     }
 
 
@@ -72,7 +72,7 @@
                 align-items: center;
                 flex: 0 0 auto;
                 position: absolute;
-                top: 50%;
+                inset-block-start: 50%;
                 inset-inline-end: 0;
                 transform: translateY(-50%);
             }
@@ -82,13 +82,15 @@
         align-items: stretch;
 
         > .k-link {
-            margin-right: 0;
+            margin-inline-end: 0;
         }
 
         > .k-select {
-            margin: calc( #{$kendo-listgroup-item-padding-y} * -1 ) calc( #{$kendo-listgroup-item-padding-x} * -1 ) calc( #{$kendo-listgroup-item-padding-y} * -1 ) 0;
+            margin-block: calc( #{$kendo-listgroup-item-padding-y} * -1 );
+            margin-inline: 0 calc( #{$kendo-listgroup-item-padding-x} * -1 );
             padding: $kendo-listgroup-item-padding-y;
-            border-width: 0 0 0 1px;
+            border-width: 0;
+            border-inline-start-width: 1px;
             border-style: solid;
             border-color: inherit;
             cursor: pointer;
@@ -149,35 +151,6 @@
     }
 
 
-    [dir="rtl"] {
-
-        .k-listgroup-item {
-
-            > .k-link {
-
-                > .k-select {
-                    right: auto;
-                    left: 0;
-                }
-            }
-        }
-        .k-listgroup-item-segmented {
-
-            > .k-link {
-                margin-right: calc( #{$kendo-listgroup-item-padding-x} * -1 );
-                margin-left: 0;
-            }
-
-            > .k-select {
-                margin-right: 0;
-                margin-left: calc( #{$kendo-listgroup-item-padding-x} * -1 );
-                border-right-width: 1px;
-                border-left-width: 0;
-            }
-        }
-    }
-
-
     // No flexbox fix
     .k-noflexbox {
         .k-listgroup,

package/scss/components/listview/_layout.scss

@@ -31,7 +31,7 @@
         border-color: inherit;
     }
     .k-listview-bordered > .k-listview-header {
-        border-bottom-width: $kendo-listview-border-width;
+        border-block-end-width: $kendo-listview-border-width;
     }
 
 
@@ -98,7 +98,7 @@
         border-color: inherit;
     }
     .k-listview-bordered > .k-listview-footer {
-        border-top-width: $kendo-listview-border-width;
+        border-block-start-width: $kendo-listview-border-width;
     }
 
 
@@ -123,18 +123,18 @@
     }
     .k-listview-borders-horizontal {
         .k-listview-item {
-            border-top-width: 1px;
+            border-block-start-width: 1px;
         }
         .k-listview-item:first-child {
-            border-top-width: 0;
+            border-block-start-width: 0;
         }
     }
     .k-listview-borders-vertical {
         .k-listview-item {
-            border-left-width: 1px;
+            border-inline-start-width: 1px;
         }
         .k-listview-item:first-child {
-            border-left-width: 0;
+            border-inline-start-width: 0;
         }
     }