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

package/scss/components/expansion-panel/_layout.scss

@@ -25,16 +25,6 @@
         }
     }
 
-    .k-rtl .k-expander,
-    .k-expander.k-rtl,
-    .k-expander[dir="rtl"] {
-        // Expand / collapse icon
-        .k-expander-indicator {
-            margin-left: 0;
-            margin-right: $kendo-expander-indicator-margin-x;
-        }
-    }
-
     // Header
     .k-expander-header {
         padding-block: $kendo-expander-header-padding-y;
@@ -58,7 +48,7 @@
 
     // Expand / collapse icon
     .k-expander-indicator {
-        margin-left: $kendo-expander-indicator-margin-x;
+        margin-inline-start: $kendo-expander-indicator-margin-x;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -73,11 +63,11 @@
     // Multiple expanders
     .k-expander + .k-expander.k-expanded,
     .k-expander.k-expanded + .k-expander {
-        margin-top: $kendo-expander-spacing-y;
+        margin-block-start: $kendo-expander-spacing-y;
     }
 
     .k-expander:not(.k-expanded) + .k-expander:not(.k-expanded) {
-        border-top-width: 0;
+        border-block-start-width: 0;
     }
 }
 

package/scss/components/fab/_layout.scss

@@ -99,7 +99,7 @@
 
             .k-fab-item-text {
                 // Needed for fab item positioning in RTL
-                margin-right: k-spacing(2);
+                margin-inline-end: k-spacing(2);
             }
         }
         &.k-text-left {
@@ -107,7 +107,7 @@
 
             .k-fab-item-text {
                 // Needed for fab item positioning in RTL
-                margin-left: k-spacing(2);
+                margin-inline-start: k-spacing(2);
             }
         }
     }

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 {