@progress/kendo-theme-default 6.1.1-dev.5 → 6.1.1-dev.66

package/scss/breadcrumb/_layout.scss

@@ -2,8 +2,10 @@
 
     // Breadcrumb
     .k-breadcrumb {
-        margin: $kendo-breadcrumb-margin-y $kendo-breadcrumb-margin-x;
-        padding: $kendo-breadcrumb-padding-y $kendo-breadcrumb-padding-x;
+        margin-block: $kendo-breadcrumb-margin-y;
+        margin-inline: $kendo-breadcrumb-margin-x;
+        padding-block: $kendo-breadcrumb-padding-y;
+        padding-inline: $kendo-breadcrumb-padding-x;
         border-width: $kendo-breadcrumb-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -67,7 +69,8 @@
     .k-breadcrumb-link,
     .k-breadcrumb-root-link {
         @include border-radius( $kendo-breadcrumb-link-border-radius );
-        padding: $kendo-breadcrumb-link-padding-y $kendo-breadcrumb-link-padding-x;
+        padding-block: $kendo-breadcrumb-link-padding-y;
+        padding-inline: $kendo-breadcrumb-link-padding-x;
         color: $kendo-breadcrumb-link-initial-text;
         text-decoration: none;
         white-space: nowrap;
@@ -82,16 +85,18 @@
     }
 
     .k-breadcrumb-root-link {
-        margin-right: $kendo-breadcrumb-root-link-spacing;
+        margin-inline-end: $kendo-breadcrumb-root-link-spacing;
     }
 
     .k-breadcrumb-link > .k-image,
-    .k-breadcrumb-icontext-link .k-icon {
-        margin-right: $kendo-breadcrumb-link-icon-spacing;
+    .k-breadcrumb-icontext-link .k-icon,
+    .k-breadcrumb-icontext-link .k-svg-icon {
+        margin-inline-end: $kendo-breadcrumb-link-icon-spacing;
     }
 
     .k-breadcrumb-icon-link {
-        padding: $kendo-breadcrumb-icon-link-padding-y $kendo-breadcrumb-icon-link-padding-x;
+        padding-block: $kendo-breadcrumb-icon-link-padding-y;
+        padding-inline: $kendo-breadcrumb-icon-link-padding-x;
     }
 
 
@@ -113,24 +118,4 @@
         }
     }
 
-    @include exports("breadcrumb/layout/rtl") {
-
-        .k-breadcrumb {
-            &[dir="rtl"],
-            .k-rtl & {
-                .k-breadcrumb-root-link {
-                    margin-right: 0;
-                    margin-left: $kendo-breadcrumb-root-link-spacing;
-                }
-
-                .k-breadcrumb-link > .k-image,
-                .k-breadcrumb-icontext-link .k-icon {
-                    margin-right: 0;
-                    margin-left: $kendo-breadcrumb-link-icon-spacing;
-                }
-            }
-        }
-
-    }
-
 }

package/scss/button/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/button/_layout.scss

@@ -77,7 +77,8 @@
         $_line-height: k-map-get( $size-props, line-height );
 
         .k-button-#{$size} {
-            padding: $_padding-y $_padding-x;
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
             font-size: $_font-size;
             line-height: $_line-height;
         }
@@ -283,7 +284,7 @@
     .k-button {
 
         &::before {
-            @extend .k-button-overlay;
+            @extend .k-button-overlay !optional;
         }
 
         // Hovered state

package/scss/button/_variables.scss

@@ -19,7 +19,7 @@ $kendo-button-sm-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-button-md-padding-x: $kendo-button-padding-x !default;
 /// Horizontal padding of the large button.
 /// @group button
-$kendo-button-lg-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-button-lg-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 
 /// Vertical padding of the button.
 /// @group button

package/scss/calendar/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/calendar/_layout.scss

@@ -29,7 +29,8 @@
 
     // Calendar table
     .k-calendar-table {
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         border-width: 0;
         border-color: inherit;
         border-spacing: 0;
@@ -45,13 +46,14 @@
     .k-calendar-caption.k-calendar-th,
     .k-calendar .k-meta-header,
     .k-calendar .k-month-header {
-        padding: $kendo-calendar-caption-padding-y $kendo-calendar-caption-padding-x;
+        padding-block: $kendo-calendar-caption-padding-y;
+        padding-inline: $kendo-calendar-caption-padding-x;
         height: $kendo-calendar-caption-height;
         box-sizing: border-box;
         font-size: $kendo-calendar-caption-font-size;
         line-height: $kendo-calendar-caption-line-height;
         text-transform: none;
-        text-align: left;
+        text-align: start;
         font-weight: $kendo-calendar-caption-font-weight;
         cursor: default;
     }
@@ -69,7 +71,8 @@
         cursor: default;
     }
     .k-calendar-th {
-        padding: $kendo-calendar-header-cell-padding-y $kendo-calendar-header-cell-padding-x;
+        padding-block: $kendo-calendar-header-cell-padding-y;
+        padding-inline: $kendo-calendar-header-cell-padding-x;
         width: $kendo-calendar-header-cell-width;
         height: $kendo-calendar-header-cell-height;
         font-size: $kendo-calendar-header-cell-font-size;
@@ -89,7 +92,6 @@
     // Remove .k-calendar once we remove k-link
     .k-calendar .k-calendar-cell-inner {
         @include border-radius( $kendo-calendar-cell-border-radius );
-        padding: $kendo-calendar-cell-padding-y $kendo-calendar-cell-padding-x;
         padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, #{$kendo-calendar-cell-padding-x} );
         padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, #{$kendo-calendar-cell-padding-y} );
         width: 100%;
@@ -107,7 +109,8 @@
 
     // Calendar header
     .k-calendar .k-header {
-        padding: $kendo-calendar-header-padding-y $kendo-calendar-header-padding-x;
+        padding-block: $kendo-calendar-header-padding-y;
+        padding-inline: $kendo-calendar-header-padding-x;
         border-bottom-width: $kendo-calendar-header-border-width;
         border-bottom-style: solid;
         display: flex;
@@ -121,7 +124,8 @@
 
     // Calendar header
     .k-calendar-header {
-        padding: $kendo-calendar-header-padding-y $kendo-calendar-header-padding-x;
+        padding-block: $kendo-calendar-header-padding-y;
+        padding-inline: $kendo-calendar-header-padding-x;
         min-width: ($kendo-calendar-cell-size * 8);
         box-sizing: border-box;
         display: flex;
@@ -146,7 +150,8 @@
     // Calendar footer
     .k-calendar-footer,
     .k-calendar .k-footer {
-        padding: $kendo-calendar-footer-padding-y $kendo-calendar-footer-padding-x;
+        padding-block: $kendo-calendar-footer-padding-y;
+        padding-inline: $kendo-calendar-footer-padding-x;
         text-align: center;
         clear: both;
     }
@@ -155,7 +160,8 @@
     // Calendar view wrapper
     .k-calendar-view {
         margin: auto;
-        padding: 0 $kendo-calendar-header-padding-x;
+        padding-block: 0;
+        padding-inline: $kendo-calendar-header-padding-x;
         // setting width / height prevents layout changes in meta views
         width: $kendo-calendar-view-width;
         inline-size: var( --INTERNAL--kendo-calendar-view-width, #{$kendo-calendar-view-width});
@@ -222,7 +228,7 @@
             block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
         }
         .k-calendar-cell-inner {
-            text-align: left;
+            text-align: start;
         }
     }
 
@@ -309,7 +315,7 @@
 
     // Alias
     .k-link {
-        @extend .k-calendar-cell-inner;
+        @extend .k-calendar-cell-inner !optional;
     }
 }
 
@@ -326,7 +332,8 @@
         flex-flow: row nowrap;
 
         .k-calendar-view {
-            padding: $kendo-infinite-calendar-view-padding-y $kendo-infinite-calendar-view-padding-x;
+            padding-block: $kendo-infinite-calendar-view-padding-y;
+            padding-inline: $kendo-infinite-calendar-view-padding-x;
             height: $kendo-infinite-calendar-view-height;
             flex: 0 0 auto;
             display: flex;
@@ -355,7 +362,8 @@
         .k-calendar-header {
             margin-left: -$kendo-infinite-calendar-view-padding-x;
             margin-right: -$kendo-infinite-calendar-view-padding-x;
-            padding: $kendo-infinite-calendar-header-padding-y $kendo-infinite-calendar-header-padding-x;
+            padding-block: $kendo-infinite-calendar-header-padding-y;
+            padding-inline: $kendo-infinite-calendar-header-padding-x;
             width: auto;
             min-width: 0;
         }
@@ -411,7 +419,8 @@
                 height: $kendo-calendar-navigation-item-height;
                 line-height: $kendo-calendar-navigation-item-height;
                 cursor: pointer;
-                padding: 0 1em;
+                padding-block: 0;
+                padding-inline: 1em;
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: clip;
@@ -501,11 +510,6 @@
             @include hide-scrollbar("left");
         }
 
-        tbody th,
-        .k-calendar-tbody .k-calendar-th {
-            text-align: right;
-        }
-
     }
 
 }

package/scss/captcha/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/card/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/card/_layout.scss

@@ -50,7 +50,8 @@
 
     // Header
     .k-card-header {
-        padding: $kendo-card-header-padding-y $kendo-card-header-padding-x;
+        padding-block: $kendo-card-header-padding-y;
+        padding-inline: $kendo-card-header-padding-x;
         border-width: 0 0 $kendo-card-header-border-width;
         border-style: solid;
         outline: 0;
@@ -72,7 +73,8 @@
 
     // Footer
     .k-card-footer {
-        padding: $kendo-card-footer-padding-y $kendo-card-footer-padding-x;
+        padding-block: $kendo-card-footer-padding-y;
+        padding-inline: $kendo-card-footer-padding-x;
         border-width: $kendo-card-footer-border-width 0 0;
         border-style: solid;
         outline: 0;
@@ -82,7 +84,8 @@
 
     // Body
     .k-card-body {
-        padding: $kendo-card-body-padding-y $kendo-card-body-padding-x;
+        padding-block: $kendo-card-body-padding-y;
+        padding-inline: $kendo-card-body-padding-x;
         outline: 0;
         flex: 1 1 auto;
 
@@ -185,7 +188,8 @@
 
     // Card actions
     .k-card-actions {
-        padding: $kendo-card-actions-padding-y $kendo-card-actions-padding-x;
+        padding-block: $kendo-card-actions-padding-y;
+        padding-inline: $kendo-card-actions-padding-x;
         border-width: 0;
         border-style: solid;
         border-color: inherit;

package/scss/chat/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/chat/_layout.scss

@@ -30,7 +30,8 @@
             scroll-behavior: smooth;
         }
         .k-message-list-content {
-            padding: $kendo-chat-message-list-padding-y $kendo-chat-message-list-padding-x;
+            padding-block: $kendo-chat-message-list-padding-y;
+            padding-inline: $kendo-chat-message-list-padding-x;
             width: 100%;
             box-sizing: border-box;
             position: relative;
@@ -57,7 +58,7 @@
         }
         .k-message-group:not(.k-alt) {
             align-items: flex-start;
-            text-align: left;
+            text-align: start;
 
             .k-message-time {
                 margin-left: $kendo-chat-item-spacing-x;
@@ -79,7 +80,7 @@
         .k-message-group.k-alt {
             align-self: flex-end;
             align-items: flex-end;
-            text-align: right;
+            text-align: end;
 
             .k-message-time {
                 margin-right: $kendo-chat-item-spacing-x;
@@ -137,7 +138,8 @@
         // Bubble
         .k-bubble {
             @include border-radius( $kendo-chat-bubble-border-radius );
-            padding: $kendo-chat-bubble-padding-y $kendo-chat-bubble-padding-x;
+            padding-block: $kendo-chat-bubble-padding-y;
+            padding-inline: $kendo-chat-bubble-padding-x;
             border-width: 1px;
             border-style: solid;
             line-height: $kendo-chat-bubble-line-height;
@@ -225,7 +227,8 @@
         @include border-radius( 100px );
         margin-right: $kendo-chat-quick-reply-spacing;
         margin-bottom: k-math-div( $kendo-chat-quick-reply-spacing, 2 );
-        padding: $kendo-chat-quick-reply-padding-y $kendo-chat-quick-reply-padding-x;
+        padding-block: $kendo-chat-quick-reply-padding-y;
+        padding-inline: $kendo-chat-quick-reply-padding-x;
         border-width: 1px;
         border-style: solid;
         line-height: $kendo-chat-quick-reply-line-height;
@@ -416,7 +419,8 @@
 
     .k-chat-toolbar,
     .k-chat .k-toolbar-box {
-        padding: $kendo-chat-toolbar-padding-y $kendo-chat-toolbar-padding-x;
+        padding-block: $kendo-chat-toolbar-padding-y;
+        padding-inline: $kendo-chat-toolbar-padding-x;
         width: 100%;
         border-width: 1px 0 0;
         box-sizing: border-box;
@@ -483,8 +487,6 @@
 
         // Text align
         .k-message-group:not(.k-alt) {
-            text-align: right;
-
             .k-message-time {
                 margin-left: 0;
                 margin-right: $kendo-chat-item-spacing-x;
@@ -497,8 +499,6 @@
             }
         }
         .k-message-group.k-alt {
-            text-align: left;
-
             .k-message-time {
                 margin-right: 0;
                 margin-left: $kendo-chat-item-spacing-x;

package/scss/checkbox/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/checkbox/_layout.scss

@@ -142,7 +142,8 @@
     }
     .k-checkbox-item,
     .k-checkbox-list-item {
-        padding: $kendo-checkbox-list-item-padding-y $kendo-checkbox-list-item-padding-x;
+        padding-block: $kendo-checkbox-list-item-padding-y;
+        padding-inline: $kendo-checkbox-list-item-padding-x;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;

package/scss/chip/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/chip/_layout.scss

@@ -2,7 +2,8 @@
 
     // Chip
     .k-chip {
-        padding: $kendo-chip-padding-y $kendo-chip-padding-x;
+        padding-block: $kendo-chip-padding-y;
+        padding-inline: $kendo-chip-padding-x;
         border-width: $kendo-chip-border-width;
         border-style: solid;
         outline: 0;
@@ -28,13 +29,20 @@
         .k-selected-icon-wrapper {
             display: none !important; // sass-lint:disable-line no-important
         }
+
+        // Adjustment for kendo-icon-wrapper
+        .k-icon-wrapper-host {
+            display: initial;
+        }
     }
 
 
     // Chip content
     .k-chip-content {
-        padding: .5em 0;
-        margin: -.5em 0;
+        padding-block: .5em;
+        padding-inline: 0;
+        margin-block: -.5em;
+        margin-inline: 0;
         min-width: 0;
         display: flex;
         flex-flow: row nowrap;
@@ -81,7 +89,8 @@
 
     // Actions
     .k-chip-actions {
-        margin: -5em 0;
+        margin-block: -5em;
+        margin-inline: 0;
         flex: none;
         display: flex;
         flex-flow: row nowrap;
@@ -125,7 +134,8 @@
         $_avatar-size: 1em;
 
         .k-chip-#{$size} {
-            padding: $_padding-y $_padding-x;
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
             font-size: $_font-size;
             line-height: $_line-height;
         }

package/scss/color-preview/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/coloreditor/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/coloreditor/_layout.scss

@@ -48,7 +48,8 @@
     // Views
     .k-coloreditor-views {
         min-width: calc( var(--kendo-color-preview-width, #{$kendo-color-palette-tile-width}) * var(--kendo-color-preview-columns, 10) );
-        padding: $kendo-color-editor-views-padding-y $kendo-color-editor-views-padding-x;
+        padding-block: $kendo-color-editor-views-padding-y;
+        padding-inline: $kendo-color-editor-views-padding-x;
         gap: $kendo-color-editor-views-gap;
 
         .k-colorgradient {

package/scss/colorgradient/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies
@@ -11,6 +12,7 @@
 @import "../textbox/_index.scss";
 @import "../numerictextbox/_index.scss";
 
+
 // Component
 @import "./images/alpha-slider-bgr.scss";
 @import "./_variables.scss";

package/scss/colorgradient/_layout.scss

@@ -4,7 +4,8 @@
     .k-colorgradient {
         @include border-radius( $kendo-color-gradient-border-radius );
         width: $kendo-color-gradient-width;
-        padding: $kendo-color-gradient-padding-y $kendo-color-gradient-padding-x;
+        padding-block: $kendo-color-gradient-padding-y;
+        padding-inline: $kendo-color-gradient-padding-x;
         border-style: solid;
         border-width: $kendo-color-gradient-border-width;
         box-sizing: border-box;
@@ -164,12 +165,14 @@
             align-items: center;
             gap: k-math-div( $kendo-color-gradient-contrast-spacer, 2 );
 
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 vertical-align: middle;
             }
 
             // Needed for the double check icons
             .k-icon + .k-icon,
+            .k-svg-icon + .k-svg-icon,
             .k-icon-wrapper-host + .k-icon-wrapper-host .k-icon {
                 margin-inline-start: -13px;
             }
@@ -184,4 +187,3 @@
     }
 
 }
-

package/scss/colorpalette/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/colorpicker/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/colorpicker/_layout.scss

@@ -7,7 +7,7 @@
 
     // Alias
     .k-colorpicker {
-        @extend .k-color-picker;
+        @extend .k-color-picker !optional;
     }
 
 }

package/scss/combobox/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/common/_base.scss

@@ -118,8 +118,7 @@
 
     // Disabled state
     .k-disabled,
-    .k-widget[disabled],
-    .k-disabled {
+    .k-widget[disabled] {
         @include disabled( $kendo-disabled-styling );
 
 

package/scss/common/_dragdrop.scss

@@ -3,7 +3,8 @@
     // Layout
     .k-drag-clue {
         @include border-radius( $kendo-drag-hint-border-radius );
-        padding: $kendo-drag-hint-padding-y $kendo-drag-hint-padding-x;
+        padding-block: $kendo-drag-hint-padding-y;
+        padding-inline: $kendo-drag-hint-padding-x;
         border-width: $kendo-drag-hint-border-width;
         border-style: if( $kendo-drag-hint-border-width == null, null, solid );
         box-sizing: border-box;

package/scss/dataviz/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/dataviz/_layout.scss

@@ -85,7 +85,8 @@
         @include border-radius( $kendo-border-radius-md );
         font-size: $kendo-chart-tooltip-font-size;
         line-height: $kendo-line-height-md;
-        padding: $kendo-tooltip-padding-y $kendo-tooltip-padding-x;
+        padding-block: $kendo-tooltip-padding-y;
+        padding-inline: $kendo-tooltip-padding-x;
     }
 
     .k-chart-tooltip th {
@@ -96,8 +97,9 @@
 
     .k-chart-tooltip td {
         width: auto;
-        text-align: left;
-        padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+        text-align: start;
+        padding-block: $kendo-padding-sm-y;
+        padding-inline: $kendo-padding-sm-x;
         line-height: $kendo-line-height-md;
         vertical-align: middle;
     }
@@ -303,7 +305,8 @@
 
         // Title
         .k-treemap-title {
-            padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+            padding-block: $kendo-padding-sm-y;
+            padding-inline: $kendo-padding-sm-x;
             border-width: 0 0 1px;
             border-style: solid;
             border-color: inherit;
@@ -312,7 +315,8 @@
             background-repeat: repeat-x;
         }
         .k-treemap-title-vertical {
-            padding: $kendo-padding-sm-x $kendo-padding-sm-y;
+            padding-block: $kendo-padding-sm-x;
+            padding-inline: $kendo-padding-sm-y;
             width: $kendo-line-height-em;
             white-space: nowrap;
             overflow: hidden;
@@ -361,7 +365,7 @@
 @include exports("dataviz/gauge/layout") {
 
     .k-gauge {
-        text-align: left;
+        text-align: start;
         position: relative;
     }
 

package/scss/dateinput/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/datepicker/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/daterangepicker/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies