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

package/scss/components/filemanager/_layout.scss

@@ -22,7 +22,7 @@
     }
     .k-filemanager-toolbar {
         border-width: 0;
-        border-bottom-width: $kendo-file-manager-toolbar-border-width;
+        border-block-end-width: $kendo-file-manager-toolbar-border-width;
         border-color: inherit;
         flex-shrink: 0;
         z-index: 1;
@@ -51,7 +51,7 @@
         padding-inline: $kendo-file-manager-navigation-padding-x;
         width: $kendo-file-manager-navigation-width;
         border-width: 0;
-        border-right-width: $kendo-file-manager-navigation-border-width;
+        border-inline-end-width: $kendo-file-manager-navigation-border-width;
         border-style: solid;
         border-color: inherit;
         box-sizing: border-box;
@@ -81,7 +81,7 @@
     // Breadcrumb
     .k-filemanager-breadcrumb {
         border-width: 0;
-        border-bottom-width: $kendo-file-manager-breadcrumb-border-width;
+        border-block-end-width: $kendo-file-manager-breadcrumb-border-width;
         padding-block: $kendo-file-manager-breadcrumb-padding-y;
         padding-inline: $kendo-file-manager-breadcrumb-padding-x;
         flex-shrink: 0;
@@ -111,7 +111,7 @@
 
         // File name
         .k-file-name {
-            margin-top: calc( #{$kendo-file-manager-spacer} / 2 );
+            margin-block-start: calc( #{$kendo-file-manager-spacer} / 2 );
             display: block;
             text-align: center;
             overflow: hidden;
@@ -133,7 +133,7 @@
 
         // File preview
         .k-file-preview {
-            margin-right: $kendo-icon-spacing;
+            margin-inline-end: $kendo-icon-spacing;
             display: inline-flex;
             flex-direction: row;
             vertical-align: middle;
@@ -157,7 +157,7 @@
         width: $kendo-file-manager-preview-width;
         min-height: calc( calc( #{$kendo-file-manager-preview-padding-y} * 4 ) + calc( #{$kendo-icon-size-xxxl} * 2 ) + calc( #{$kendo-file-manager-preview-spacing} * 3 ) );
         border-width: 0;
-        border-left-width: $kendo-file-manager-preview-border-width;
+        border-inline-start-width: $kendo-file-manager-preview-border-width;
         border-style: solid;
         border-color: inherit;
         box-sizing: border-box;
@@ -174,7 +174,7 @@
 
         // File name
         .k-file-name {
-            margin-top: $kendo-file-manager-preview-spacing;
+            margin-block-start: $kendo-file-manager-preview-spacing;
             display: block;
         }
         .k-no-file-selected {}

package/scss/components/floating-label/_layout.scss

@@ -5,7 +5,7 @@
 
     // Floating label
     .k-floating-label-container {
-        padding-top: $kendo-floating-label-height;
+        padding-block-start: $kendo-floating-label-height;
         box-sizing: border-box;
         display: inline-flex;
         vertical-align: middle;
@@ -26,8 +26,8 @@
             white-space: nowrap;
             text-overflow: ellipsis;
             position: absolute;
-            top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
-            left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
+            inset-block-start: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
+            inset-inline-start: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
             overflow: hidden;
             cursor: text;
             transform-origin: left center;
@@ -37,8 +37,8 @@
 
         &.k-empty {
             > .k-floating-label {
-                top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
-                left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
+                inset-block-start: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
+                inset-inline-start: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
                 transform: scale( $kendo-floating-label-scale );
                 pointer-events: none;
             }
@@ -46,13 +46,13 @@
 
         > .k-floating-label,
         &.k-focus > .k-floating-label {
-            top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
-            left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
+            inset-block-start: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
+            inset-inline-start: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             transform: scale( $kendo-floating-label-focus-scale );
         }
         &:focus-within > .k-floating-label {
-            top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
-            left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
+            inset-block-start: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
+            inset-inline-start: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             transform: scale( $kendo-floating-label-focus-scale );
         }
 
@@ -63,28 +63,12 @@
 
     [dir="rtl"] .k-floating-label-container,
     .k-rtl .k-floating-label-container,
+    .k-floating-label-container.k-rtl,
     .k-floating-label-container[dir="rtl"] {
         > .k-floating-label {
             transform-origin: right center;
             transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, right $kendo-floating-label-transition;
         }
-
-        &.k-empty {
-            > .k-floating-label {
-                left: auto;
-                right: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
-            }
-        }
-
-        > .k-floating-label,
-        &.k-focus > .k-floating-label {
-            left: auto;
-            right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
-        }
-        &:focus-within > .k-floating-label {
-            left: auto;
-            right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
-        }
     }
 
 }

package/scss/components/forms/_layout.scss

@@ -23,7 +23,7 @@
         padding: 25px 0 0;
 
         > legend {
-            margin-left: 0;
+            margin-inline-start: 0;
             padding: $kendo-fieldset-legend-padding;
             text-transform: uppercase;
         }
@@ -58,13 +58,13 @@
         .k-form-field > .k-label,
         .k-form-field > kendo-label,
         .k-form-label {
-            margin-bottom: $kendo-form-label-margin-bottom;
+            margin-block-end: $kendo-form-label-margin-bottom;
             display: flex;
             flex-flow: row nowrap;
         }
 
         .k-label + .k-radio {
-            margin-left: 0;
+            margin-inline-start: 0;
         }
 
         .k-form-fieldset {
@@ -75,7 +75,7 @@
             > * {
                 &:not(.k-hidden):first-child,
                 &.k-hidden + :not(.k-hidden) {
-                    margin-top: 0;
+                    margin-block-start: 0;
                 }
             }
         }
@@ -99,7 +99,7 @@
         > * {
             &:not(.k-hidden):first-child,
             &.k-hidden + :not(.k-hidden) {
-                margin-top: 0;
+                margin-block-start: 0;
             }
         }
 
@@ -125,7 +125,7 @@
 
         .k-alert-error {
             font-size: var( --kendo-font-size-sm, inherit );
-            margin-top: $kendo-form-alert-error-margin;
+            margin-block-start: $kendo-form-alert-error-margin;
         }
 
         .k-field-info {
@@ -156,7 +156,7 @@
     // Form Hint/Error Messages
     .k-form-hint,
     .k-form-error {
-        margin-top: $kendo-form-hint-margin-top;
+        margin-block-start: $kendo-form-hint-margin-top;
         display: flex;
         font-size: $kendo-form-hint-font-size;
         font-style: $kendo-form-hint-font-style;
@@ -189,8 +189,8 @@
             > .k-label,
             > kendo-label,
             > .k-form-label {
-                margin-right: $kendo-horizontal-form-label-margin-x;
-                padding-top: $kendo-horizontal-form-label-padding-top;
+                margin-inline-end: $kendo-horizontal-form-label-margin-x;
+                padding-block-start: $kendo-horizontal-form-label-padding-top;
                 width: $kendo-horizontal-form-label-width;
                 text-align: end;
                 flex-direction: column;
@@ -209,28 +209,6 @@
         }
     }
 
-    // RTL Adjustments
-    .k-form [dir="rtl"],
-    .k-rtl .k-form {
-        .k-label-optional {
-            margin-left: 0;
-            margin-right: $kendo-label-optional-margin-x;
-        }
-    }
-
-    .k-form-horizontal [dir="rtl"],
-    .k-rtl .k-form-horizontal {
-        &.k-form-field,
-        .k-form-field {
-            > .k-label,
-            > kendo-label,
-            > .k-form-label {
-                margin-right: 0;
-                margin-left: $kendo-horizontal-form-label-margin-x;
-            }
-        }
-    }
-
     // Sizes
     @each $size, $size-props in $kendo-form-sizes {
         $_form-rows-spacing: map.get($size-props, form-rows-spacing);
@@ -238,7 +216,7 @@
         .k-form-#{$size} {
             .k-form-field,
             .k-form-buttons {
-                margin-top: $_form-rows-spacing;
+                margin-block-start: $_form-rows-spacing;
             }
         }
     }
@@ -255,11 +233,11 @@
             padding: 0;
 
             &:first-child:first-of-type {
-                margin-top: 0;
+                margin-block-start: 0;
             }
 
             &:last-child:last-of-type {
-                margin-bottom: 0;
+                margin-block-end: 0;
             }
         }
 
@@ -268,7 +246,7 @@
             text-align: start;
             font-weight: 600;
             line-height: 1;
-            margin-bottom: $kendo-fieldset-legend-margin;
+            margin-block-end: $kendo-fieldset-legend-margin;
             text-transform: uppercase;
             padding: $kendo-fieldset-legend-padding;
             width: auto;
@@ -278,7 +256,7 @@
             display: flex;
             align-items: flex-start;
             text-align: start;
-            margin-bottom: $kendo-fieldset-legend-margin;
+            margin-block-end: $kendo-fieldset-legend-margin;
 
             > span:not(.k-widget) {
                 width: $kendo-inline-form-element-width;
@@ -299,7 +277,7 @@
 
             .k-alert-error {
                 font-size: var( --kendo-font-size-sm, inherit );
-                margin-top: $kendo-form-alert-error-margin;
+                margin-block-start: $kendo-form-alert-error-margin;
             }
 
             .k-field-info {
@@ -310,7 +288,7 @@
             }
 
             &:last-child {
-                margin-bottom: 0;
+                margin-block-end: 0;
             }
         }
     }
@@ -342,14 +320,14 @@
         width: 30%;
         line-height: $kendo-form-line-height;
         text-align: end;
-        float: left;
+        float: inline-start;
         clear: both;
     }
     .k-edit-field {
         margin: 0 0 k-spacing(4);
         width: 65%;
-        float: right;
-        clear: right;
+        float: inline-end;
+        clear: inline-end;
         position: relative;
 
         &.k-no-editor {
@@ -367,16 +345,16 @@
 
         input[type="radio"]:not(.k-radio),
         input[type="checkbox"]:not(.k-checkbox) {
-            margin-right: .4ex;
+            margin-inline-end: .4ex;
         }
 
         .k-radio-label,
         .k-checkbox-label {
-            margin-right: k-spacing(4);
+            margin-inline-end: k-spacing(4);
         }
 
         > .k-reset > li + li {
-            margin-top: k-spacing(2);
+            margin-block-start: k-spacing(2);
         }
 
         .k-reset .k-widget {

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,
@@ -464,17 +466,17 @@
     .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;