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

package/scss/components/loader/_layout.scss

@@ -111,23 +111,23 @@
     // Loader spinner 3
     @keyframes spinner-3-segment {
         0% {
-            top: 0;
-            left: 50%;
+            inset-block-start: 0;
+            inset-inline-start: 50%;
         }
 
         33.3333% {
-            top: 100%;
-            left: 0;
+            inset-block-start: 100%;
+            inset-inline-start: 0;
         }
 
         66.6666% {
-            top: 100%;
-            left: 100%;
+            inset-block-start: 100%;
+            inset-inline-start: 100%;
         }
 
         100% {
-            top: 0;
-            left: 50%;
+            inset-block-start: 0;
+            inset-inline-start: 50%;
         }
     }
 
@@ -378,10 +378,10 @@
         width: 100%;
         height: 100%;
         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;
     }
 
     // TODO: use k-overlay as a base class in rendering
@@ -461,8 +461,8 @@
         height: 100%;
         box-sizing: border-box;
         position: absolute;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
 
         *,
         *::before,
@@ -523,8 +523,8 @@
     .k-loading-image::before,
     .k-loading-image::after {
         position: absolute;
-        top: 50%;
-        left: 50%;
+        inset-block-start: 50%;
+        inset-inline-start: 50%;
         display: inline-block;
         content: "";
         box-sizing: inherit;
@@ -532,8 +532,8 @@
         border-width: .05em;
         border-style: solid;
         border-color: currentColor;
-        border-top-color: transparent;
-        border-bottom-color: transparent;
+        border-block-start-color: transparent;
+        border-block-end-color: transparent;
         background-color: transparent;
     }
 
@@ -544,8 +544,8 @@
 
     .k-i-loading::before,
     .k-loading-image::before {
-        margin-top: -.5em;
-        margin-left: -.5em;
+        margin-block-start: -.5em;
+        margin-inline-start: -.5em;
         width: 1em;
         height: 1em;
         animation: k-loading-animation .7s linear infinite;
@@ -553,8 +553,8 @@
 
     .k-i-loading::after,
     .k-loading-image::after {
-        margin-top: -.25em;
-        margin-left: -.25em;
+        margin-block-start: -.25em;
+        margin-inline-start: -.25em;
         width: .5em;
         height: .5em;
         animation: k-loading-animation reverse 1.4s linear infinite;

package/scss/components/map/_layout.scss

@@ -33,8 +33,8 @@
         // Layers
         .k-layer {
             position: absolute;
-            left: 0;
-            top: 0;
+            inset-inline-start: 0;
+            inset-block-start: 0;
         }
 
         // Marker

package/scss/components/marquee/_layout.scss

@@ -8,8 +8,8 @@
     .k-marquee-color,
     .k-marquee-text {
         position: absolute;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         width: 100%;
         height: 100%;
     }

package/scss/components/mediaplayer/_layout.scss

@@ -39,9 +39,9 @@
         padding-inline: $kendo-media-player-titlebar-padding-x;
         position: absolute;
         z-index: 2;
-        top: 0;
-        left: 0;
-        right: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
     }
 
 
@@ -49,9 +49,9 @@
     .k-mediaplayer-toolbar-wrap {
         position: absolute;
         z-index: 2;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        inset-block-end: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
     }
     .k-mediaplayer-toolbar {
         border-width: 0;
@@ -81,8 +81,8 @@
         width: 100%;
         position: absolute;
         z-index: 3;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         transform: translateY( -50% );
     }
     .k-mediaplayer-seekbar .k-slider-track {
@@ -96,8 +96,8 @@
     .k-mediaplayer-fullscreen {
         z-index: 10000;
         position: fixed;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         width: 100% !important; // stylelint-disable-line declaration-no-important
         height: 100% !important; // stylelint-disable-line declaration-no-important
     }

package/scss/components/menu/_layout.scss

@@ -49,7 +49,7 @@
         overflow: visible;
 
         .k-actions {
-            margin-top: 0;
+            margin-block-start: 0;
         }
     }
 
@@ -119,7 +119,7 @@
         width: 100%;
 
         > .k-menu-item + .k-menu-item {
-            margin-top: $kendo-menu-item-spacing;
+            margin-block-start: $kendo-menu-item-spacing;
         }
 
         > .k-menu-item > .k-menu-link {
@@ -176,7 +176,7 @@
         position: absolute;
 
         .k-menu-item + .k-menu-item {
-            margin-top: $kendo-menu-popup-item-spacing;
+            margin-block-start: $kendo-menu-popup-item-spacing;
         }
 
         .k-separator {

package/scss/components/menu-button/_layout.scss

@@ -15,8 +15,8 @@
         > .k-button-arrow {
             margin-inline-start: calc( #{$kendo-menu-button-arrow-padding-x} * -1 );
             margin-inline-end: calc( #{$kendo-button-md-padding-x} * -1 );
-            padding-left: $kendo-menu-button-arrow-padding-x;
-            padding-right: $kendo-menu-button-arrow-padding-x;
+            padding-inline-start: $kendo-menu-button-arrow-padding-x;
+            padding-inline-end: $kendo-menu-button-arrow-padding-x;
             flex: none;
             display: inline-flex;
             align-items: center;

package/scss/components/messagebox/_theme.scss

@@ -8,7 +8,7 @@
 @mixin kendo-messagebox--theme-base() {
 
     @each $color-name, $color in $kendo-message-box-theme-colors {
-        .k-messagebox-#{$color-name} {
+        .k-messagebox.k-messagebox-#{$color-name} {
             @if $color-name == "inverse" {
                 @include fill(
                     k-color(dark-on-subtle),

package/scss/components/overlay/_layout.scss

@@ -8,8 +8,8 @@
         height: 100%;
         opacity: $kendo-overlay-opacity;
         position: fixed;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         z-index: 10001;
     }
 

package/scss/components/pager/_layout.scss

@@ -91,23 +91,10 @@
     .k-pager-nav + .k-pager-numbers-wrap,
     .k-pager-numbers-wrap + .k-pager-nav {
         @if ($kendo-pager-item-spacing) {
-            margin-left: $kendo-pager-item-spacing;
+            margin-inline-start: $kendo-pager-item-spacing;
         }
     }
 
-    .k-rtl,
-    [dir="rtl"] {
-        .k-pager-nav + .k-pager-nav,
-        .k-pager-nav + .k-pager-numbers-wrap,
-        .k-pager-numbers-wrap + .k-pager-nav {
-            @if ($kendo-pager-item-spacing) {
-                margin-left: 0;
-                margin-right: $kendo-pager-item-spacing;
-            }
-        }
-    }
-
-
     // Pager input
     .k-pager-input {
         @extend %base-pager-section !optional;

package/scss/components/panelbar/_layout.scss

@@ -57,7 +57,7 @@
             }
         }
         > .k-panelbar-header + .k-panelbar-header {
-            border-top-width: $kendo-panelbar-item-border-width;
+            border-block-start-width: $kendo-panelbar-item-border-width;
         }
 
 
@@ -96,7 +96,7 @@
                 @for $i from 1 through $kendo-panelbar-item-level-count {
                     &.k-level-#{$i} {
                         .k-link {
-                            padding-left: calc( #{$kendo-panelbar-item-padding-x} * #{$i} );
+                            padding-inline-start: calc( #{$kendo-panelbar-item-padding-x} * #{$i} );
                         }
                     }
                 }
@@ -130,25 +130,6 @@
         }
     }
 
-    .k-rtl .k-panelbar,
-    .k-panelbar.k-rtl,
-    .k-panelbar [dir = "rtl"] {
-        .k-panelbar-group > .k-panelbar-item {
-            // Hierarchy items
-            // Without this check, invalid CSS is generated TODO: need to rethink this
-            @if $kendo-panelbar-item-padding-x {
-                @for $i from 1 through $kendo-panelbar-item-level-count {
-                    &.k-level-#{$i} {
-                        .k-link {
-                            padding-left: $kendo-panelbar-item-padding-x;
-                            padding-right: calc( #{$kendo-panelbar-item-padding-x} * #{$i} );
-                        }
-                    }
-                }
-            }
-        }
-    }
-
 }
 
 

package/scss/components/pdf-viewer/_layout.scss

@@ -22,9 +22,9 @@
 
         // Toolbar
         .k-toolbar {
-            border-top-width: 0;
-            border-right-width: 0;
-            border-left-width: 0;
+            border-block-start-width: 0;
+            border-inline-end-width: 0;
+            border-inline-start-width: 0;
             border-color: inherit;
             flex: 0 0 auto;
             z-index: 2;
@@ -102,8 +102,8 @@
 
             .k-text-layer {
                 position: absolute;
-                top: 0;
-                left: 0;
+                inset-block-start: 0;
+                inset-inline-start: 0;
                 opacity: .2;
                 overflow: hidden;
 
@@ -118,7 +118,7 @@
                 }
 
                 .k-marked-content {
-                    top: 0;
+                    inset-block-start: 0;
                     height: 0;
                 }
 
@@ -142,8 +142,8 @@
 
             .k-annotation-layer {
                 position: absolute;
-                top: 0;
-                left: 0;
+                inset-block-start: 0;
+                inset-inline-start: 0;
                 transform-origin: 0 0;
                 pointer-events: none;
 
@@ -164,8 +164,8 @@
 
                 .k-link-annotation > a {
                     position: absolute;
-                    top: 0;
-                    left: 0;
+                    inset-block-start: 0;
+                    inset-inline-start: 0;
                     width: 100%;
                     height: 100%;
                 }
@@ -203,8 +203,8 @@
 
                     .k-internal {
                         position: absolute;
-                        top: 0;
-                        left: 0;
+                        inset-block-start: 0;
+                        inset-inline-start: 0;
                         width: 100%;
                         height: 100%;
                         pointer-events: auto;
@@ -279,7 +279,7 @@
     // Search
     .k-pdf-viewer-canvas > .k-search-panel {
         width: max-content;
-        margin-top: calc( (#{$kendo-button-md-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} )) * -1 );
+        margin-block-start: calc( (#{$kendo-button-md-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} )) * -1 );
         padding-block: $kendo-pdf-viewer-search-panel-padding-y;
         padding-inline: $kendo-pdf-viewer-search-panel-padding-x;
         border-width: $kendo-pdf-viewer-search-panel-border-width;
@@ -296,7 +296,7 @@
 
         .k-search-dialog-draghandle {
             cursor: move;
-            margin-left: 0;
+            margin-inline-start: 0;
         }
 
         .k-textbox {
@@ -317,7 +317,7 @@
     // Annotation Toolbar
     .k-pdf-viewer-annotation-editor-toolbar > .k-toolbar {
         width: min-content;
-        border-bottom-width: 0;
+        border-block-end-width: 0;
     }
 
 
@@ -331,7 +331,7 @@
         }
 
         .k-form-field {
-            margin-top: 0;
+            margin-block-start: 0;
         }
 
     }

package/scss/components/pivotgrid/_layout.scss

@@ -64,10 +64,10 @@
 
     // Header empty cell
     .k-pivotgrid-empty-cell {
-        border-right-style: solid;
-        border-right-width: $kendo-pivotgrid-cell-border-width;
-        border-bottom-style: solid;
-        border-bottom-width: $kendo-pivotgrid-cell-border-width;
+        border-inline-end-style: solid;
+        border-inline-end-width: $kendo-pivotgrid-cell-border-width;
+        border-block-end-style: solid;
+        border-block-end-width: $kendo-pivotgrid-cell-border-width;
 
         &:focus {
             outline: none;
@@ -86,17 +86,17 @@
     }
 
     .k-pivotgrid-column-headers .k-pivotgrid-cell {
-        border-bottom-style: solid;
-        border-bottom-width: $kendo-pivotgrid-cell-border-width;
-        border-left-style: solid;
-        border-left-width: $kendo-pivotgrid-cell-border-width;
+        border-block-end-style: solid;
+        border-block-end-width: $kendo-pivotgrid-cell-border-width;
+        border-inline-start-style: solid;
+        border-inline-start-width: $kendo-pivotgrid-cell-border-width;
 
         &:first-child {
-            border-left-width: 0;
+            border-inline-start-width: 0;
         }
 
         &.k-first {
-            border-left-width: $kendo-pivotgrid-cell-border-width;
+            border-inline-start-width: $kendo-pivotgrid-cell-border-width;
         }
     }
 
@@ -107,14 +107,14 @@
     }
 
     .k-pivotgrid-row-headers .k-pivotgrid-table {
-        padding-bottom: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width});
+        padding-block-end: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width});
     }
 
     .k-pivotgrid-row-headers .k-pivotgrid-cell {
-        border-right-style: solid;
-        border-right-width: $kendo-pivotgrid-cell-border-width;
-        border-bottom-style: solid;
-        border-bottom-width: $kendo-pivotgrid-cell-border-width;
+        border-inline-end-style: solid;
+        border-inline-end-width: $kendo-pivotgrid-cell-border-width;
+        border-block-end-style: solid;
+        border-block-end-width: $kendo-pivotgrid-cell-border-width;
         white-space: nowrap;
     }
 
@@ -126,13 +126,13 @@
     }
 
     .k-pivotgrid-values .k-pivotgrid-cell {
-        border-bottom-style: solid;
-        border-bottom-width: $kendo-pivotgrid-cell-border-width;
-        border-left-style: solid;
-        border-left-width: $kendo-pivotgrid-cell-border-width;
+        border-block-end-style: solid;
+        border-block-end-width: $kendo-pivotgrid-cell-border-width;
+        border-inline-start-style: solid;
+        border-inline-start-width: $kendo-pivotgrid-cell-border-width;
 
         &:first-child {
-            border-left-width: 0;
+            border-inline-start-width: 0;
         }
     }
 
@@ -246,7 +246,7 @@
         .k-row-fields,
         .k-column-fields,
         .k-filter-fields {
-            margin-top: $kendo-pivotgrid-configurator-fields-margin-y;
+            margin-block-start: $kendo-pivotgrid-configurator-fields-margin-y;
             flex-wrap: wrap;
         }
 
@@ -273,7 +273,7 @@
         }
 
         .k-settings-description {
-            margin-top: k-spacing(4);
+            margin-block-start: k-spacing(4);
             text-align: center;
         }
 
@@ -308,7 +308,7 @@
     }
 
     .k-calculated-field-header-text {
-        margin-right: 5px;
+        margin-inline-end: 5px;
         word-break: normal;
         overflow-wrap: anywhere;
     }
@@ -328,7 +328,7 @@
         align-items: center;
 
         .k-icon {
-            margin-right: k-spacing(2);
+            margin-inline-end: k-spacing(2);
         }
         .k-dropdown-list {
             max-width: 100px;
@@ -336,8 +336,8 @@
     }
 
     .k-filter-menu .k-calculated-item {
-        border-bottom-width: 1px;
-        border-bottom-style: solid;
+        border-block-end-width: 1px;
+        border-block-end-style: solid;
     }
 
 
@@ -348,11 +348,11 @@
 
     .k-flex-row {
         .k-pivotgrid-configurator-overlay {
-            right: $kendo-pivotgrid-configurator-button-size;
+            inset-inline-end: $kendo-pivotgrid-configurator-button-size;
         }
 
         &-reverse .k-pivotgrid-configurator-overlay {
-            left: $kendo-pivotgrid-configurator-button-size;
+            inset-inline-start: $kendo-pivotgrid-configurator-button-size;
         }
     }
 
@@ -370,8 +370,8 @@
         }
 
         .k-pivotgrid-configurator-vertical.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel {
-            border-right-width: 0;
-            border-left-width: 0;
+            border-inline-end-width: 0;
+            border-inline-start-width: 0;
         }
     }
 
@@ -387,13 +387,13 @@
             }
 
             .k-form-field-wrapper {
-                padding-left: $kendo-pivotgrid-spacer;
+                padding-inline-start: $kendo-pivotgrid-spacer;
 
                 & > *:first-child {
-                    margin-top: 0;
+                    margin-block-start: 0;
                 }
                 &:first-child {
-                    padding-left: 0;
+                    padding-inline-start: 0;
                     flex: 1 1 30%;
                 }
                 &:nth-child(2) {
@@ -401,8 +401,8 @@
                 }
 
                 &:last-child {
-                    border-left-width: 1px;
-                    border-left-style: solid;
+                    border-inline-start-width: 1px;
+                    border-inline-start-style: solid;
                     flex: 1 1 40%;
                 }
             }
@@ -425,11 +425,11 @@
 
     .k-flex-col {
         .k-pivotgrid-configurator-overlay {
-            bottom: $kendo-pivotgrid-configurator-button-size;
+            inset-block-end: $kendo-pivotgrid-configurator-button-size;
         }
 
         &-reverse .k-pivotgrid-configurator-overlay {
-            top: $kendo-pivotgrid-configurator-button-size;
+            inset-block-start: $kendo-pivotgrid-configurator-button-size;
         }
     }
 
@@ -441,8 +441,8 @@
         }
 
         .k-pivotgrid-configurator-horizontal.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel {
-            border-top-width: 0;
-            border-bottom-width: 0;
+            border-block-start-width: 0;
+            border-block-end-width: 0;
         }
     }
 
@@ -527,11 +527,11 @@
 
     .k-pivot-rowheaders > .k-grid td:first-child,
     .k-pivot-table .k-grid-header .k-header.k-first {
-        border-left-width: 1px;
+        border-inline-start-width: 1px;
     }
 
     .k-pivot-rowheaders > .k-grid td.k-first {
-        border-left-width: 0;
+        border-inline-start-width: 0;
     }
 
     .k-pivot-rowheaders > .k-grid {
@@ -539,12 +539,12 @@
     }
 
     .k-pivot-table {
-        border-left-width: 1px;
-        border-left-style: solid;
+        border-inline-start-width: 1px;
+        border-inline-start-style: solid;
     }
 
     .k-pivot-table .k-grid-header-wrap {
-        margin-right: -1px;
+        margin-inline-end: -1px;
     }
 
     .k-pivot-table .k-grid-header-wrap > table {
@@ -557,21 +557,21 @@
 
     .k-pivot .k-grid tr {
         .k-grid-footer {
-            border-bottom-width: 0;
+            border-block-end-width: 0;
         }
         &:last-child:not(.k-grid-footer) {
             td:not(.k-grid-footer) {
-                border-bottom-width: 1px;
+                border-block-end-width: 1px;
             }
         }
     }
 
     .k-pivot-layout .k-grid td {
-        border-bottom-width: 1px;
+        border-block-end-width: 1px;
     }
 
     .k-pivot-layout .k-grid-footer > td {
-        border-top-width: 0;
+        border-block-start-width: 0;
     }
 
     .k-pivot-filter-window .k-treeview {

package/scss/components/pivotgrid/_theme.scss

@@ -31,12 +31,12 @@
     }
 
     .k-pivotgrid-row-headers .k-pivotgrid-row .k-pivotgrid-cell:last-child {
-        border-right-color: $kendo-pivotgrid-alt-border;
+        border-inline-end-color: $kendo-pivotgrid-alt-border;
     }
 
     .k-pivotgrid-column-headers .k-pivotgrid-column-total:nth-last-of-type(2) .k-pivotgrid-cell:not(.k-pivotgrid-expanded),
     .k-pivotgrid-column-headers .k-pivotgrid-row:last-child {
-        border-bottom-color: $kendo-pivotgrid-alt-border;
+        border-block-end-color: $kendo-pivotgrid-alt-border;
     }
 
 

package/scss/components/progressbar/_layout.scss

@@ -196,14 +196,6 @@
         }
     }
 
-
-    // RTL
-    .k-rtl .k-progressbar,
-    .k-progressbar[dir="rtl"] {
-        direction: rtl;
-    }
-
-
     // Circular progressbar
     .k-circular-progressbar {
         display: inline-block;