@progress/kendo-theme-default 6.1.1-dev.3 → 6.1.1-dev.38

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/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/_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/_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/_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;
@@ -33,8 +34,10 @@
 
     // 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 +84,8 @@
 
     // Actions
     .k-chip-actions {
-        margin: -5em 0;
+        margin-block: -5em;
+        margin-inline: 0;
         flex: none;
         display: flex;
         flex-flow: row nowrap;
@@ -125,7 +129,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/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/_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;
@@ -184,4 +185,3 @@
     }
 
 }
-

package/scss/colorpicker/_layout.scss

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

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/_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/daterangepicker/_layout.scss

@@ -22,7 +22,7 @@
 
     // Angular specific
     kendo-daterange {
-        // @extend .k-daterangepicker;
+        // @extend .k-daterangepicker !optional;
     }
 
 
@@ -37,7 +37,7 @@
 
     // Alias
     .k-daterangepicker {
-        @extend .k-daterange-picker;
+        @extend .k-daterange-picker !optional;
     }
 
 }

package/scss/datetimepicker/_layout.scss

@@ -15,7 +15,8 @@
         overflow: hidden;
 
         .k-datetime-buttongroup {
-            padding: $kendo-actions-padding-y $kendo-actions-padding-x;
+            padding-block: $kendo-actions-padding-y;
+            padding-inline: $kendo-actions-padding-x;
         }
 
         .k-calendar,

package/scss/dialog/_layout.scss

@@ -53,7 +53,8 @@
     // Buttons
     .k-dialog-actions {
         @include border-bottom-radius( $kendo-window-border-radius );
-        padding: $kendo-dialog-buttongroup-padding-y $kendo-dialog-buttongroup-padding-x;
+        padding-block: $kendo-dialog-buttongroup-padding-y;
+        padding-inline: $kendo-dialog-buttongroup-padding-x;
         border-width: $kendo-dialog-buttongroup-border-width 0 0;
         border-style: solid;
         border-color: inherit;

package/scss/draggable/_layout.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/drawer/_layout.scss

@@ -130,7 +130,8 @@
         align-items: stretch;
     }
     .k-drawer-item {
-        padding: $kendo-drawer-item-padding-y $kendo-drawer-item-padding-x;
+        padding-block: $kendo-drawer-item-padding-y;
+        padding-inline: $kendo-drawer-item-padding-x;
         outline: 0;
         color: inherit;
         font-size: $kendo-drawer-item-font-size;
@@ -141,8 +142,10 @@
         cursor: pointer;
 
         > .k-drawer-link {
-            margin: (-$kendo-drawer-item-padding-y) (-$kendo-drawer-item-padding-x);
-            padding: $kendo-drawer-item-padding-y $kendo-drawer-item-padding-x;
+            margin-block: (-$kendo-drawer-item-padding-y);
+            margin-inline: (-$kendo-drawer-item-padding-x);
+            padding-block: $kendo-drawer-item-padding-y;
+            padding-inline: $kendo-drawer-item-padding-x;
             color: inherit;
             display: flex;
             flex-flow: row nowrap;

package/scss/dropdowntree/_layout.scss

@@ -12,7 +12,8 @@
         }
 
         .k-treeview {
-            padding: $kendo-dropdowntree-popup-padding-y $kendo-dropdowntree-popup-padding-x;
+            padding-block: $kendo-dropdowntree-popup-padding-y;
+            padding-inline: $kendo-dropdowntree-popup-padding-x;
         }
     }
 

package/scss/dropzone/_layout.scss

@@ -9,7 +9,8 @@
 
     // Dropzpne inner
     .k-dropzone-inner {
-        padding: $kendo-dropzone-padding-y $kendo-dropzone-padding-x;
+        padding-block: $kendo-dropzone-padding-y;
+        padding-inline: $kendo-dropzone-padding-x;
         border-width: $kendo-dropzone-border-width;
         border-style: solid;
         box-sizing: border-box;

package/scss/editor/_layout.scss

@@ -31,7 +31,8 @@
     // Inline editor
     .k-editor-inline {
         @include border-radius( $kendo-border-radius-md );
-        padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+        padding-block: $kendo-padding-sm-y;
+        padding-inline: $kendo-padding-sm-x;
         border: 1px solid transparent;
         word-wrap: break-word;
         overflow: auto;
@@ -229,7 +230,8 @@
         th {
             min-width: 1em;
             border: 1px solid;
-            padding: 3px 5px;
+            padding-block: 3px;
+            padding-inline: 5px;
             vertical-align: top;
             box-sizing: border-box;
             position: relative;
@@ -237,7 +239,10 @@
 
         th {
             font-weight: bold;
-            text-align: left;
+            text-align: start;
+        }
+        td {
+            text-align: start;
         }
 
         // Give selected cells a blue overlay
@@ -257,8 +262,10 @@
     .k-edit-form-content {
         flex: 1 1 auto;
         overflow: auto;
-        margin: (-$kendo-window-inner-padding-y) (-$kendo-window-inner-padding-x);
-        padding: $kendo-window-inner-padding-y $kendo-window-inner-padding-x;
+        margin-block: (-$kendo-window-inner-padding-y);
+        margin-inline: (-$kendo-window-inner-padding-x);
+        padding-block: $kendo-window-inner-padding-y;
+        padding-inline: $kendo-window-inner-padding-x;
     }
 
 
@@ -413,7 +420,8 @@
             height: 390px;
             max-height: 50vh;
             margin: 0 0 k-map-get( $kendo-spacing, 4 ) 0;
-            padding: $kendo-padding-md-y $kendo-padding-md-x;
+            padding-block: $kendo-padding-md-y;
+            padding-inline: $kendo-padding-md-x;
             border-top-width: 0;
             overflow: auto;
         }
@@ -421,7 +429,8 @@
         .k-tile {
             width: 33%;
             height: 90px;
-            padding: $kendo-padding-md-y $kendo-padding-md-x;
+            padding-block: $kendo-padding-md-y;
+            padding-inline: $kendo-padding-md-x;
             box-sizing: border-box;
             white-space: nowrap;
             overflow: hidden;
@@ -540,7 +549,8 @@
 
             td {
                 min-width: 1px;
-                padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+                padding-block: $kendo-padding-sm-y;
+                padding-inline: $kendo-padding-sm-x;
             }
         }
 
@@ -604,7 +614,8 @@
                 .k-column-resize-marker {
                     width: 2px;
                     height: 100%;
-                    margin: 0 auto;
+                    margin-block: 0;
+                    margin-inline: auto;
                     display: none;
                     opacity: .8;
                 }

package/scss/expansion-panel/_layout.scss

@@ -34,7 +34,8 @@
 
     // Header
     .k-expander-header {
-        padding: $kendo-expander-header-padding-y $kendo-expander-header-padding-x;
+        padding-block: $kendo-expander-header-padding-y;
+        padding-inline: $kendo-expander-header-padding-x;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -59,7 +60,8 @@
 
     // Expander content
     .k-expander-content {
-        padding: $kendo-expander-content-padding-y $kendo-expander-content-padding-x;
+        padding-block: $kendo-expander-content-padding-y;
+        padding-inline: $kendo-expander-content-padding-x;
     }
 
     // Multiple expanders

package/scss/fab/_layout.scss

@@ -48,19 +48,23 @@
 
     // Sizes
     .k-fab-sm {
-        padding: $kendo-fab-sm-padding-y $kendo-fab-sm-padding-x;
+        padding-block: $kendo-fab-sm-padding-y;
+        padding-inline: $kendo-fab-sm-padding-x;
     }
     .k-fab-md {
-        padding: $kendo-fab-padding-y $kendo-fab-padding-x;
+        padding-block: $kendo-fab-padding-y;
+        padding-inline: $kendo-fab-padding-x;
     }
     .k-fab-lg {
-        padding: $kendo-fab-lg-padding-y $kendo-fab-lg-padding-x;
+        padding-block: $kendo-fab-lg-padding-y;
+        padding-inline: $kendo-fab-lg-padding-x;
     }
 
     // Items
     .k-fab-items {
         margin: 0;
-        padding: $kendo-fab-items-padding-y $kendo-fab-items-padding-x;
+        padding-block: $kendo-fab-items-padding-y;
+        padding-inline: $kendo-fab-items-padding-x;
         display: flex;
     }
 
@@ -105,7 +109,8 @@
     }
 
     .k-fab-item-text {
-        padding: $kendo-fab-item-text-padding-y $kendo-fab-item-text-padding-x;
+        padding-block: $kendo-fab-item-text-padding-y;
+        padding-inline: $kendo-fab-item-text-padding-x;
         border-width: $kendo-fab-item-text-border-width;
         border-radius: $kendo-fab-item-text-border-radius;
         font-size: $kendo-fab-item-text-font-size;
@@ -115,7 +120,8 @@
     .k-fab-item-icon {
         width: $kendo-fab-item-icon-width;
         height: $kendo-fab-item-icon-height;
-        padding: $kendo-fab-item-icon-padding-y $kendo-fab-item-icon-padding-x;
+        padding-block: $kendo-fab-item-icon-padding-y;
+        padding-inline: $kendo-fab-item-icon-padding-x;
         border-width: $kendo-fab-item-icon-border-width;
         border-radius: $kendo-fab-item-icon-border-radius;
         box-sizing: content-box;