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

package/scss/components/table/_layout.scss

@@ -41,7 +41,9 @@
     }
     .k-table-th,
     .k-table-td {
-        border-width: 0 0 $kendo-table-cell-horizontal-border-width $kendo-table-cell-vertical-border-width;
+        border-width: 0;
+        border-block-end-width: $kendo-table-cell-horizontal-border-width;
+        border-inline-start-width: $kendo-table-cell-vertical-border-width;
         border-style: solid;
         border-color: inherit;
         box-sizing: border-box;
@@ -54,11 +56,11 @@
         position: relative;
 
         &:first-child {
-            border-left-width: 0;
+            border-inline-start-width: 0;
         }
     }
     .k-table-th {
-        border-bottom-width: 1px;
+        border-block-end-width: 1px;
     }
 
 
@@ -74,9 +76,10 @@
         }
     }
     .k-table-header-wrap {
-        margin-right: -1px;
+        margin-inline-end: -1px;
         width: 100%;
-        border-width: 0 $kendo-table-cell-vertical-border-width 0 0;
+        border-width: 0;
+        border-inline-end-width: $kendo-table-cell-vertical-border-width;
         border-style: solid;
         border-color: inherit;
         overflow: hidden;
@@ -84,7 +87,7 @@
     .k-table-header,
     .k-table-header-wrap {
         > .k-table {
-            margin-bottom: -1px;
+            margin-block-end: -1px;
         }
     }
     .k-table-group-sticky-header {
@@ -125,7 +128,7 @@
             display: table-row;
         }
         .k-table-row.k-first {
-            border-top: 1px solid currentColor;
+            border-block-start: 1px solid currentColor;
         }
 
         .k-table-th,
@@ -151,7 +154,7 @@
                 color: inherit;
                 background-color: inherit;
                 position: absolute;
-                top: 0;
+                inset-block-start: 0;
             }
         }
 
@@ -159,21 +162,21 @@
         .k-table-spacer-td {
             padding: 0 !important;
             width: 0 !important;
-            border-left-width: 0 !important;
-            border-right-width: 0 !important;
+            border-inline-start-width: 0 !important;
+            border-inline-end-width: 0 !important;
         }
         .k-table-group-td {
             padding: 0 !important;
             width: 0 !important;
-            border-left-width: 0 !important;
-            border-right-width: 0 !important;
+            border-inline-start-width: 0 !important;
+            border-inline-end-width: 0 !important;
             overflow: visible;
 
             > span {
                 font-size: .75em;
                 position: absolute;
-                top: 0;
-                right: 0;
+                inset-block-start: 0;
+                inset-inline-end: 0;
             }
         }
         // stylelint-enable declaration-no-important
@@ -211,7 +214,7 @@
         }
     }
     .k-table-footer-wrap {
-        margin-right: -1px;
+        margin-inline-end: -1px;
         width: 100%;
         border-width: 0 $kendo-table-cell-vertical-border-width 0 0;
         border-style: solid;
@@ -249,40 +252,6 @@
         }
     }
 
-
-    // RTL
-    .k-rtl,
-    [dir="rtl"] {
-        &.k-table,
-        .k-table {
-
-            .k-table-th,
-            .k-table-td {
-                border-left-width: 0;
-                border-right-width: $kendo-table-cell-vertical-border-width;
-
-                &:first-child {
-                    border-right-width: 0;
-                }
-            }
-
-            .k-table-header-wrap,
-            .k-table-footer-wrap {
-                margin-right: 0;
-                margin-left: -1px;
-                border-left-width: $kendo-table-cell-vertical-border-width;
-                border-right-width: 0;
-            }
-        }
-
-        .k-table-list {
-            .k-table-group-td > span {
-                left: 0;
-                right: auto;
-            }
-        }
-    }
-
 }
 
 

package/scss/components/tabstrip/_layout.scss

@@ -151,12 +151,12 @@
         width: 20%;
         height: 0;
         border: 0;
-        border-top: 1px solid transparent;
+        border-block-start: 1px solid transparent;
         border-color: inherit;
         background: none;
         position: absolute;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         transition: width .2s linear;
 
         // TODO: a better name
@@ -164,7 +164,7 @@
 
         &.k-complete {
             width: 100%;
-            border-top-width: 0;
+            border-block-start-width: 0;
         }
     }
 
@@ -278,11 +278,11 @@
     .k-tabstrip-top {
         > .k-tabstrip-items-wrapper {
             @extend .k-tabstrip-horizontal !optional;
-            border-bottom-width: $kendo-tabstrip-border-width;
+            border-block-end-width: $kendo-tabstrip-border-width;
 
             .k-item {
                 @include border-top-radius( $kendo-tabstrip-item-border-radius );
-                border-bottom-width: 0;
+                border-block-end-width: 0;
 
                 .k-link {
                     justify-content: center;
@@ -290,26 +290,26 @@
             }
             .k-item:active,
             .k-item.k-active {
-                margin-bottom: if( $kendo-tabstrip-border-width, calc( -1 * $kendo-tabstrip-border-width ), null );
-                border-bottom-width: $kendo-tabstrip-border-width;
-                border-bottom-color: transparent !important; // stylelint-disable-line declaration-no-important
+                margin-block-end: if( $kendo-tabstrip-border-width, calc( -1 * $kendo-tabstrip-border-width ), null );
+                border-block-end-width: $kendo-tabstrip-border-width;
+                border-block-end-color: transparent !important; // stylelint-disable-line declaration-no-important
             }
         }
 
         > .k-content,
         > .k-tabstrip-content {
             @include border-bottom-radius( $kendo-tabstrip-item-border-radius );
-            border-top-width: 0 !important; // stylelint-disable-line declaration-no-important
+            border-block-start-width: 0 !important; // stylelint-disable-line declaration-no-important
         }
     }
     .k-tabstrip-bottom {
         > .k-tabstrip-items-wrapper {
             @extend .k-tabstrip-horizontal !optional;
-            border-top-width: $kendo-tabstrip-border-width;
+            border-block-start-width: $kendo-tabstrip-border-width;
 
             .k-item {
                 @include border-bottom-radius( $kendo-tabstrip-item-border-radius );
-                border-top-width: 0;
+                border-block-start-width: 0;
 
                 .k-link {
                     justify-content: center;
@@ -317,16 +317,16 @@
             }
             .k-item:active,
             .k-item.k-active {
-                margin-top: if( $kendo-tabstrip-border-width, calc( -1 * $kendo-tabstrip-border-width ), null );
-                border-top-width: $kendo-tabstrip-border-width;
-                border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
+                margin-block-start: if( $kendo-tabstrip-border-width, calc( -1 * $kendo-tabstrip-border-width ), null );
+                border-block-start-width: $kendo-tabstrip-border-width;
+                border-block-start-color: transparent !important; // stylelint-disable-line declaration-no-important
             }
         }
 
         > .k-content,
         > .k-tabstrip-content {
             @include border-top-radius( $kendo-tabstrip-item-border-radius );
-            border-bottom-width: 0 !important; // stylelint-disable-line declaration-no-important
+            border-block-end-width: 0 !important; // stylelint-disable-line declaration-no-important
         }
     }
     .k-tabstrip-left {
@@ -337,7 +337,7 @@
             border-right-width: $kendo-tabstrip-border-width;
 
             .k-item {
-                @include border-left-radius( $kendo-tabstrip-item-border-radius );
+                border-radius: $kendo-tabstrip-item-border-radius 0 0 $kendo-tabstrip-item-border-radius;
                 border-right-width: 0;
             }
             .k-item:active,
@@ -350,7 +350,7 @@
 
         > .k-content,
         > .k-tabstrip-content {
-            @include border-right-radius( $kendo-tabstrip-item-border-radius );
+            border-radius: 0 $kendo-tabstrip-item-border-radius $kendo-tabstrip-item-border-radius 0;
             border-left-width: 0 !important; // stylelint-disable-line declaration-no-important
         }
 
@@ -363,9 +363,10 @@
             border-left-width: $kendo-tabstrip-border-width;
 
             .k-item {
-                @include border-right-radius( $kendo-tabstrip-item-border-radius );
+                border-radius: 0 $kendo-tabstrip-item-border-radius $kendo-tabstrip-item-border-radius 0;
                 border-left-width: 0;
             }
+
             .k-item:active,
             .k-item.k-active {
                 margin-left: if( $kendo-tabstrip-border-width, calc( -1 * $kendo-tabstrip-border-width ), null );
@@ -376,7 +377,7 @@
 
         > .k-content,
         > .k-tabstrip-content {
-            @include border-left-radius( $kendo-tabstrip-item-border-radius );
+            border-radius: $kendo-tabstrip-item-border-radius 0 0 $kendo-tabstrip-item-border-radius;
             border-right-width: 0;
         }
     }
@@ -412,10 +413,10 @@
                 display: none;
                 position: absolute;
                 z-index: 2;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
+                inset-block-start: 0;
+                inset-inline-end: 0;
+                inset-block-end: 0;
+                inset-inline-start: 0;
                 pointer-events: none;
             }
             .k-item.k-active::after {
@@ -454,6 +455,8 @@
 
     // RTL
     .k-rtl .k-tabstrip,
+    [dir="rtl"] .k-tabstrip,
+    .k-tabstrip.k-rtl,
     .k-tabstrip[dir="rtl"] {
 
         &.k-tabstrip-left,

package/scss/components/taskboard/_layout.scss

@@ -80,7 +80,7 @@
     }
 
     .k-taskboard-column-cards-container {
-        margin-bottom: $kendo-taskboard-column-container-spacing-y;
+        margin-block-end: $kendo-taskboard-column-container-spacing-y;
         padding-block: $kendo-taskboard-column-container-padding-y;
         padding-inline: $kendo-taskboard-column-container-padding-x;
         outline: none;
@@ -124,9 +124,9 @@
         display: flex;
         flex-direction: column;
         position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
+        inset-block-start: 0;
+        inset-inline-end: 0;
+        inset-block-end: 0;
         overflow: hidden;
         z-index: 2;
     }
@@ -163,8 +163,8 @@
     }
 
     .k-taskboard-pane-start {
-        right: auto;
-        left: 0;
+        inset-inline-end: auto;
+        inset-inline-start: 0;
     }
 
     // Cards

package/scss/components/time-marker/_theme.scss

@@ -6,15 +6,15 @@
         background: $kendo-current-time-color;
 
         &.k-current-time-arrow-left {
-            border-right-color: $kendo-current-time-color;
+            border-inline-end-color: $kendo-current-time-color;
         }
 
         &.k-current-time-arrow-right {
-            border-left-color: $kendo-current-time-color;
+            border-inline-start-color: $kendo-current-time-color;
         }
 
         &.k-current-time-arrow-down {
-            border-top-color: $kendo-current-time-color;
+            border-block-start-color: $kendo-current-time-color;
         }
     }
 

package/scss/components/timeline/_layout.scss

@@ -81,11 +81,11 @@
 
             .k-card-header {
                 overflow: visible;
-                border-bottom: 0;
+                border-block-end: 0;
             }
 
             .k-card-header + .k-card-body {
-                padding-top: 0;
+                padding-block-start: 0;
             }
 
             .k-card-body {
@@ -108,7 +108,7 @@
         .k-timeline-card-callout {
             &.k-callout-w,
             &.k-callout-e {
-                top: $kendo-timeline-track-event-offset;
+                inset-block-start: $kendo-timeline-track-event-offset;
             }
         }
     }
@@ -129,17 +129,17 @@
         &::after {
             content: "";
             position: absolute;
-            top: 0;
+            inset-block-start: 0;
             border-width: $kendo-timeline-track-border-width;
             border-style: solid;
         }
     }
 
     .k-timeline-vertical {
-        padding-left: $kendo-timeline-vertical-padding-with-dates-calc;
+        padding-inline-start: $kendo-timeline-vertical-padding-with-dates-calc;
 
         &.k-timeline-dates-hidden {
-            padding-left: $kendo-timeline-vertical-padding-calc;
+            padding-inline-start: $kendo-timeline-vertical-padding-calc;
         }
 
         &::after {
@@ -154,7 +154,7 @@
             align-items: center;
 
             &:first-child {
-                padding-top: $kendo-timeline-spacing-y;
+                padding-block-start: $kendo-timeline-spacing-y;
             }
         }
 
@@ -164,8 +164,8 @@
 
         .k-timeline-date-wrap {
             position: absolute;
-            padding-right: $kendo-timeline-items-padding;
-            margin-top: $kendo-timeline-track-event-offset;
+            padding-inline-end: $kendo-timeline-items-padding;
+            margin-block-start: $kendo-timeline-track-event-offset;
             transform: translate(-100%, -50%);
             text-align: end;
         }
@@ -178,10 +178,10 @@
         }
 
         .k-timeline-card {
-            padding-left: $kendo-timeline-items-padding;
+            padding-inline-start: $kendo-timeline-items-padding;
 
             .k-card {
-                margin-left: $kendo-timeline-items-padding;
+                margin-inline-start: $kendo-timeline-items-padding;
                 min-height: $kendo-timeline-event-min-height-calc;
                 width: $kendo-timeline-event-width;
                 max-width: 100%;
@@ -224,16 +224,16 @@
         }
 
         .k-timeline-circle {
-            margin-top: $kendo-timeline-track-event-offset;
+            margin-block-start: $kendo-timeline-track-event-offset;
             transform: translate(-50%, -50%);
-            margin-right: calc( -1 * ( $kendo-timeline-circle-width / 2 ) );
+            margin-inline-end: calc( -1 * ( $kendo-timeline-circle-width / 2 ) );
         }
 
         &.k-timeline-alternating {
-            padding-left: $kendo-timeline-spacing-x;
+            padding-inline-start: $kendo-timeline-spacing-x;
 
             &::after {
-                left: 50%;
+                inset-inline-start: 50%;
             }
 
             .k-timeline-flag-wrap {
@@ -252,17 +252,17 @@
 
                     .k-timeline-date-wrap {
                         text-align: start;
-                        padding-right: 0;
-                        padding-left: $kendo-timeline-items-padding;
+                        padding-inline-end: 0;
+                        padding-inline-start: $kendo-timeline-items-padding;
                     }
 
                     .k-timeline-card {
-                        padding-left: 0;
-                        padding-right: $kendo-timeline-items-padding;
+                        padding-inline-start: 0;
+                        padding-inline-end: $kendo-timeline-items-padding;
 
                         .k-card {
-                            margin-right: $kendo-timeline-items-padding;
-                            margin-left: auto;
+                            margin-inline-end: $kendo-timeline-items-padding;
+                            margin-inline-start: auto;
                         }
                     }
                 }
@@ -281,7 +281,7 @@
 
             .k-timeline-circle {
                 transform: translateY(-50%);
-                margin-right: 0;
+                margin-inline-end: 0;
             }
         }
     }
@@ -306,8 +306,8 @@
         }
 
         .k-timeline-date-wrap {
-            margin-top: auto;
-            margin-bottom: $kendo-timeline-date-margin-bottom;
+            margin-block-start: auto;
+            margin-block-end: $kendo-timeline-date-margin-bottom;
         }
 
         .k-timeline-card {
@@ -320,7 +320,7 @@
 
         .k-timeline-events-list {
             overflow-x: hidden;
-            padding-top: $kendo-timeline-track-margin-bottom;
+            padding-block-start: $kendo-timeline-track-margin-bottom;
 
             .k-timeline-scrollable-wrap {
                 position: relative;
@@ -328,8 +328,8 @@
 
                 .k-timeline-event {
                     position: absolute;
-                    top: 0;
-                    left: 0;
+                    inset-block-start: 0;
+                    inset-inline-start: 0;
                     width: 100%;
                     height: 100%;
                 }
@@ -341,10 +341,10 @@
             padding: calc( #{$kendo-timeline-track-arrow-height} / 2 ) 0;
 
             &::after {
-                top: auto;
-                bottom: $kendo-timeline-track-bottom-calc;
-                left: $kendo-timeline-track-start-calc;
-                right: $kendo-timeline-track-end-calc;
+                inset-block-start: auto;
+                inset-block-end: $kendo-timeline-track-bottom-calc;
+                inset-inline-start: $kendo-timeline-track-start-calc;
+                inset-inline-end: $kendo-timeline-track-end-calc;
                 transform: translateY(-50%);
                 height: $kendo-timeline-track-size;
             }
@@ -362,7 +362,7 @@
             }
 
             .k-timeline-flag {
-                margin-bottom: $kendo-timeline-flag-margin-bottom-calc;
+                margin-block-end: $kendo-timeline-flag-margin-bottom-calc;
                 position: relative;
                 min-width: $kendo-timeline-horizontal-flag-min-width;
 
@@ -371,15 +371,15 @@
                     width: $kendo-timeline-flag-callout-width;
                     height: $kendo-timeline-flag-callout-height;
                     position: absolute;
-                    left: 50%;
-                    bottom: 0;
+                    inset-inline-start: 50%;
+                    inset-block-end: 0;
                     transform: translate(-50%, 50%) rotate(45deg);
                 }
             }
         }
 
         .k-timeline-scrollable-wrap {
-            padding-bottom: $kendo-timeline-track-wrap-padding-bottom;
+            padding-block-end: $kendo-timeline-track-wrap-padding-bottom;
             display: flex;
             outline: 0;
         }
@@ -390,7 +390,7 @@
         height: $kendo-timeline-track-arrow-height;
         border-radius: 50%;
         position: absolute;
-        bottom: calc(#{$kendo-timeline-track-size} + #{$kendo-timeline-track-wrap-padding-bottom} + 2 * #{$kendo-timeline-track-border-width});
+        inset-block-end: calc(#{$kendo-timeline-track-size} + #{$kendo-timeline-track-wrap-padding-bottom} + 2 * #{$kendo-timeline-track-border-width});
         z-index: 3;
         display: flex;
         align-items: center;
@@ -398,11 +398,11 @@
     }
 
     .k-timeline-arrow-left {
-        left: 0;
+        inset-inline-start: 0;
     }
 
     .k-timeline-arrow-right {
-        right: 0;
+        inset-inline-end: 0;
     }
 
     .k-timeline-mobile {
@@ -422,14 +422,14 @@
         }
 
         &.k-timeline-vertical {
-            padding-left: $kendo-timeline-mobile-vertical-padding-with-dates-calc;
+            padding-inline-start: $kendo-timeline-mobile-vertical-padding-with-dates-calc;
 
             &.k-timeline-dates-hidden {
-                padding-left: $kendo-timeline-mobile-vertical-padding-calc;
+                padding-inline-start: $kendo-timeline-mobile-vertical-padding-calc;
             }
 
             &.k-timeline-alternating {
-                padding-left: $kendo-timeline-mobile-spacing-x;
+                padding-inline-start: $kendo-timeline-mobile-spacing-x;
             }
 
             .k-timeline-card {

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