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

package/scss/components/gantt/_layout.scss

@@ -186,8 +186,8 @@
         // Dependency lines SVG
         .k-gantt-dependencies-svg {
             position: absolute;
-            top: 0;
-            left: 0;
+            inset-block-start: 0;
+            inset-inline-start: 0;
             overflow: visible;
             pointer-events: none;
             z-index: 2;
@@ -223,7 +223,7 @@
 
     // Gantt views
     .k-gantt-views-wrapper {
-        margin-left: auto;
+        margin-inline-start: auto;
 
         .k-views-dropdown {
             width: auto;
@@ -329,7 +329,9 @@
         .k-header {
             padding-block: $kendo-grid-header-padding-y;
             padding-inline: $kendo-grid-header-padding-x;
-            border-width: 0 0 1px $kendo-grid-cell-vertical-border-width;
+            border-width: 0;
+            border-block-end-width: 1px;
+            border-inline-start-width: $kendo-grid-cell-vertical-border-width;
             white-space: nowrap;
         }
 
@@ -346,8 +348,8 @@
         border-color: inherit;
         position: absolute;
         z-index: 0;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
     }
     .k-gantt-rows {}
 
@@ -356,8 +358,8 @@
     .k-gantt-dependencies {
         opacity: .7;
         position: absolute;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
 
         // Arrows
         .k-arrow-e,
@@ -366,7 +368,7 @@
             height: 0;
             border: 5px solid transparent;
             position: absolute;
-            top: -4px;
+            inset-block-start: -4px;
         }
         .k-arrow-e {
             border-left-color: currentColor;
@@ -440,7 +442,7 @@
         cursor: pointer;
         display: none;
         position: absolute;
-        top: 50%;
+        inset-block-start: 50%;
         transform: translateY(-50%);
     }
     .k-task-wrap:hover .k-task-dot,
@@ -456,25 +458,25 @@
         border-radius: 100%;
         display: inline-block;
         position: absolute;
-        top: 50%;
-        left: 50%;
+        inset-block-start: 50%;
+        inset-inline-start: 50%;
         transform: translate(-50%, -50%);
     }
     .k-task-dot:hover::before,
     .k-task-dot.k-hover::before {
         border-width: 1px;
     }
-    .k-task-start { left: 0; }
-    .k-task-end { right: 0; }
+    .k-task-start { inset-inline-start: 0; }
+    .k-task-end { inset-inline-end: 0; }
     .k-task-draghandle {
-        margin-left: 16px;
+        margin-inline-start: 16px;
         width: 0;
         height: 0;
         border: 5px solid transparent;
-        border-top-width: 0;
-        border-bottom-color: inherit;
+        border-block-start-width: 0;
+        border-block-end-color: inherit;
         position: absolute;
-        bottom: 0;
+        inset-block-end: 0;
         // display: none;
         cursor: ew-resize;
         visibility: hidden;
@@ -517,17 +519,17 @@
             height: 0;
             border: 8px solid transparent;
             position: absolute;
-            top: 0;
+            inset-block-start: 0;
             display: none;
         }
 
         &::before {
-            border-left-color: currentColor;
-            left: 0;
+            border-inline-start-color: currentColor;
+            inset-inline-start: 0;
         }
         &::after {
-            border-right-color: currentColor;
-            right: 0;
+            border-inline-end-color: currentColor;
+            inset-inline-end: 0;
         }
     }
     .k-task-summary-complete {
@@ -559,26 +561,26 @@
 
         .k-resize-handle::before {
             position: absolute;
-            top: 2px;
-            bottom: 2px;
+            inset-block-start: 2px;
+            inset-block-end: 2px;
         }
 
         .k-resize-w {
-            left: 0;
+            inset-inline-start: 0;
         }
 
         .k-resize-w::before {
-            left: 2px;
-            border-left-width: 1px;
+            inset-inline-start: 2px;
+            border-inline-start-width: 1px;
         }
 
         .k-resize-e {
-            right: 0;
+            inset-inline-end: 0;
         }
 
         .k-resize-e::before {
-            right: 2px;
-            border-left-width: 1px;
+            inset-inline-end: 2px;
+            border-inline-start-width: 1px;
         }
 
         &:hover .k-resize-handle,
@@ -591,9 +593,9 @@
         width: 20%;
         position: absolute;
         z-index: 1;
-        top: 0;
-        bottom: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-block-end: 0;
+        inset-inline-start: 0;
     }
     .k-task-content {
         position: relative;
@@ -628,8 +630,8 @@
         position: absolute;
         display: inline-block;
         z-index: 2;
-        margin-left: 20px;
-        margin-top: -2px;
+        margin-inline-start: 20px;
+        margin-block-start: -2px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -665,7 +667,7 @@
         .k-gantt-dependencies,
         .k-task-dot,
         .k-resources-wrap {
-            margin-top: $kendo-gantt-planned-dependency-margin-y;
+            margin-block-start: $kendo-gantt-planned-dependency-margin-y;
         }
 
         .k-task-wrap {
@@ -678,15 +680,15 @@
         }
 
         .k-task-wrap.k-drag-hint {
-            top: $kendo-gantt-planned-single-drag-hint-top;
+            inset-block-start: $kendo-gantt-planned-single-drag-hint-top;
         }
 
         .k-summary-wrap.k-drag-hint {
-            top: $kendo-gantt-planned-summary-drag-hint-top;
+            inset-block-start: $kendo-gantt-planned-summary-drag-hint-top;
         }
 
         .k-milestone-wrap.k-drag-hint {
-            top: $kendo-gantt-planned-milestone-drag-hint-top;
+            inset-block-start: $kendo-gantt-planned-milestone-drag-hint-top;
         }
     }
 
@@ -710,7 +712,7 @@
         }
 
         .k-task-moment.k-moment-left {
-            margin-left: $kendo-gantt-planned-moment-left-margin-x;
+            margin-inline-start: $kendo-gantt-planned-moment-left-margin-x;
         }
 
         &:hover .k-task-duration {
@@ -719,7 +721,7 @@
     }
 
     .k-milestone-wrap .k-task-moment {
-        margin-left: $kendo-gantt-planned-milestone-moment-margin-x;
+        margin-inline-start: $kendo-gantt-planned-milestone-moment-margin-x;
     }
 
     // Planned Tooltip
@@ -739,18 +741,18 @@
         display: flex;
 
         .k-resize-handle {
-            right: 0;
+            inset-inline-end: 0;
             z-index: 2;
             visibility: hidden;
-            margin-right: $kendo-gantt-planned-offset-resize-handler-margin-x;
+            margin-inline-end: $kendo-gantt-planned-offset-resize-handler-margin-x;
         }
 
         .k-resize-handle::before {
-            border-left-width: 1px;
+            border-inline-start-width: 1px;
             position: absolute;
-            top: $kendo-gantt-offset-resize-handler-top;
-            bottom: .5em;
-            margin-right: 2px;
+            inset-block-start: $kendo-gantt-offset-resize-handler-top;
+            inset-block-end: .5em;
+            margin-inline-end: 2px;
         }
     }
 
@@ -772,8 +774,8 @@
             width: 4px;
             height: 100%;
             position: absolute;
-            top: 0;
-            left: 0;
+            inset-block-start: 0;
+            inset-inline-start: 0;
         }
     }
     .k-gantt-tooltip-validation-row {
@@ -802,7 +804,7 @@
     // Gantt export
     .k-pdf-export-shadow {
         .k-gantt {
-            float: left;
+            float: inline-start;
         }
 
         .k-gantt,
@@ -830,7 +832,7 @@
     .k-gantt-edit-form .k-gantt-update {}
     .k-gantt-edit-form .k-gantt-cancel {}
     .k-gantt-edit-form .k-gantt-delete {
-        float: left;
+        float: inline-start;
     }
 
 
@@ -840,59 +842,6 @@
     .k-rtl,
     [dir="rtl"] {
 
-        .k-gantt-rows,
-        .k-gantt-columns {
-            left: auto;
-            right: 0;
-        }
-
-        .k-task-wrap:not(.k-milestone-wrap) {
-            margin-block: 0;
-            margin-inline: -26px;
-        }
-
-        .k-gantt-timeline-pane {
-            .k-header {
-                border-width: 0 $kendo-grid-cell-vertical-border-width 1px 0;
-            }
-            .k-header:first-child {
-                border-right-width: 0;
-            }
-
-            .k-task-start {
-                left: auto;
-                right: 0;
-            }
-
-            .k-task-end {
-                right: auto;
-                left: 0;
-            }
-        }
-
-        .k-task-content {
-            text-align: end;
-        }
-
-        .k-task-complete {
-            left: auto;
-            right: 0;
-        }
-
-        .k-task-draghandle {
-            margin-left: 0;
-            margin-right: 16px;
-        }
-
-        .k-gantt-dependencies {
-            left: auto;
-            right: 0;
-        }
-
-        .k-gantt-delete {
-            float: right;
-        }
-
         .k-task-offset-wrap .k-task-content {
             .k-resize-e {
                 display: block;
@@ -902,23 +851,6 @@
                 display: none;
             }
         }
-
-        .k-milestone-wrap {
-            margin-left: $kendo-gantt-rtl-milestone-wrap-margin-x;
-        }
-
-        .k-milestone-wrap .k-task-moment {
-            margin-right: $kendo-gantt-rtl-milestone-planned-moment-margin-x;
-        }
-
-        .k-gantt-timeline-pane .k-milestone-wrap .k-task-start {
-            right: $kendo-gantt-rtl-milestone-dot-start-margin-x;
-        }
-
-        .k-gantt-tooltip-validation::before {
-            left: auto;
-            right: 0;
-        }
     }
 
 }

package/scss/components/gantt/_variables.scss

@@ -71,10 +71,6 @@ $kendo-gantt-planned-single-drag-hint-top: null !default;
 $kendo-gantt-planned-summary-drag-hint-top: null !default;
 $kendo-gantt-planned-milestone-drag-hint-top: null !default;
 
-$kendo-gantt-rtl-milestone-wrap-margin-x: null !default;
-$kendo-gantt-rtl-milestone-planned-moment-margin-x: null !default;
-$kendo-gantt-rtl-milestone-dot-start-margin-x: null !default;
-
 $kendo-gantt-planned-offset-resize-handler-margin-x: null !default;
 
 $kendo-gantt-planned-bg: null !default;

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