@progress/kendo-theme-default 6.1.1-dev.4 → 6.1.1-dev.53

package/scss/tabstrip/_layout.scss

@@ -1,7 +1,9 @@
 @include exports("tabstrip/layout") {
 
+    // Tabstrip wrapper
     .k-tabstrip-wrapper {
-        padding: $kendo-tabstrip-wrapper-padding-y $kendo-tabstrip-wrapper-padding-x;
+        padding-block: $kendo-tabstrip-wrapper-padding-y;
+        padding-inline: $kendo-tabstrip-wrapper-padding-x;
         box-sizing: border-box;
         border-width: $kendo-tabstrip-wrapper-border-width;
         border-style: solid;
@@ -9,6 +11,8 @@
         flex-direction: column;
     }
 
+
+    // Tabstrip
     .k-tabstrip {
         border-width: 0;
         border-color: transparent;
@@ -23,12 +27,13 @@
         flex-flow: column nowrap;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        .k-tabstrip-wrapper > & {
-            flex: 1 1 auto;
-        }
+    }
+    .k-tabstrip-wrapper > .k-tabstrip {
+        flex: 1 1 auto;
     }
 
+
+    // Tabstrip items wrapper
     .k-tabstrip-items-wrapper {
         box-sizing: border-box;
         border-width: 0;
@@ -37,11 +42,14 @@
         position: relative;
     }
 
+
+    // Tabstrip items
     .k-tabstrip-items {
         box-sizing: border-box;
         outline: 0;
         display: flex;
-        flex-flow: row wrap;
+        flex-direction: inherit;
+        flex-wrap: wrap;
         flex: 1 1 auto;
         gap: $kendo-tabstrip-item-gap;
 
@@ -69,7 +77,8 @@
         }
 
         .k-link {
-            padding: $kendo-tabstrip-item-padding-y $kendo-tabstrip-item-padding-x;
+            padding-block: $kendo-tabstrip-item-padding-y;
+            padding-inline: $kendo-tabstrip-item-padding-x;
             color: inherit;
             cursor: pointer;
             display: inline-flex;
@@ -79,12 +88,23 @@
             align-content: center;
             align-items: center;
         }
+
+
+        // Disabled state
+        .k-item.k-disabled,
+        .k-item[disabled] {
+            opacity: $kendo-tabstrip-item-disabled-opacity;
+            filter: $kendo-tabstrip-item-disabled-filter;
+        }
     }
 
+
+    // Tabstrip content
     .k-tabstrip-content,
     .k-tabstrip > .k-content {
         margin: 0 !important; // sass-lint:disable-line no-important
-        padding: $kendo-tabstrip-content-padding-y $kendo-tabstrip-content-padding-x;
+        padding-block: $kendo-tabstrip-content-padding-y;
+        padding-inline: $kendo-tabstrip-content-padding-x;
         box-sizing: border-box;
         border-width: $kendo-tabstrip-content-border-width;
         border-style: solid;
@@ -106,7 +126,8 @@
         }
     }
 
-    // Loading
+
+    // Loading indicator
     .k-tabstrip-items .k-loading {
         width: 20%;
         height: 0;
@@ -140,6 +161,8 @@
             }
 
             > .k-button {
+                padding-block: k-map-get( $kendo-spacing, 1 );
+                padding-inline: k-map-get( $kendo-spacing, 1 );
                 width: auto;
                 height: auto;
                 flex: none;
@@ -151,34 +174,34 @@
                     min-height: auto;
                 }
             }
+        }
+    }
 
-            &.k-hstack {
-                > .k-button {
-                    padding: 0 k-map-get( $kendo-spacing, 1 );
-                }
-            }
 
-            &.k-vstack {
-                > .k-button {
-                    padding: k-map-get( $kendo-spacing, 1 ) 0;
-                }
-            }
-        }
+    // Tabstrip orientation
+    .k-tabstrip-horizontal {
+        flex-direction: row;
+    }
+    .k-tabstrip-vertical {
+        flex-direction: column;
     }
 
 
     // Tabstrip position
     .k-tabstrip-top {
         > .k-tabstrip-items-wrapper {
+            @extend .k-tabstrip-horizontal !optional;
             border-bottom-width: $kendo-tabstrip-border-width;
 
             .k-item {
                 @include border-top-radius( $kendo-tabstrip-item-border-radius );
-                margin-bottom: -$kendo-tabstrip-border-width;
+                border-bottom-width: 0;
             }
-
+            .k-item:active,
             .k-item.k-active {
-                border-bottom-color: transparent;
+                margin-bottom: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null );
+                border-bottom-width: $kendo-tabstrip-border-width;
+                border-bottom-color: transparent !important; // sass-lint:disable-line no-important
             }
         }
 
@@ -190,15 +213,18 @@
     }
     .k-tabstrip-bottom {
         > .k-tabstrip-items-wrapper {
+            @extend .k-tabstrip-horizontal !optional;
             border-top-width: $kendo-tabstrip-border-width;
 
             .k-item {
                 @include border-bottom-radius( $kendo-tabstrip-item-border-radius );
-                margin-top: -$kendo-tabstrip-border-width;
+                border-top-width: 0;
             }
-
+            .k-item:active,
             .k-item.k-active {
-                border-top-color: transparent;
+                margin-top: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null );
+                border-top-width: $kendo-tabstrip-border-width;
+                border-top-color: transparent !important; // sass-lint:disable-line no-important
             }
         }
 
@@ -212,19 +238,18 @@
         flex-direction: row;
 
         > .k-tabstrip-items-wrapper {
+            @extend .k-tabstrip-vertical !optional;
             border-right-width: $kendo-tabstrip-border-width;
 
-            > .k-tabstrip-items {
-                flex-direction: column;
-            }
-
             .k-item {
                 @include border-left-radius( $kendo-tabstrip-item-border-radius );
-                margin-right: -$kendo-tabstrip-border-width;
+                border-right-width: 0;
             }
-
+            .k-item:active,
             .k-item.k-active {
-                border-right-color: transparent;
+                margin-right: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null );
+                border-right-width: $kendo-tabstrip-border-width;
+                border-right-color: transparent !important; // sass-lint:disable-line no-important
             }
         }
 
@@ -239,19 +264,18 @@
         flex-direction: row-reverse;
 
         > .k-tabstrip-items-wrapper {
+            @extend .k-tabstrip-vertical !optional;
             border-left-width: $kendo-tabstrip-border-width;
 
-            > .k-tabstrip-items {
-                flex-direction: column;
-            }
-
             .k-item {
                 @include border-right-radius( $kendo-tabstrip-item-border-radius );
-                margin-left: -$kendo-tabstrip-border-width;
+                border-left-width: 0;
             }
-
+            .k-item:active,
             .k-item.k-active {
-                border-left-color: transparent;
+                margin-left: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null );
+                border-left-width: $kendo-tabstrip-border-width;
+                border-left-color: transparent !important; // sass-lint:disable-line no-important
             }
         }
 
@@ -298,20 +322,6 @@
                 bottom: 0;
                 left: 0;
                 pointer-events: none;
-
-                // Variants
-                .k-tabstrip-top > & {
-                    border-bottom-width: $kendo-tabstrip-indicator-size;
-                }
-                .k-tabstrip-bottom > & {
-                    border-top-width: $kendo-tabstrip-indicator-size;
-                }
-                .k-tabstrip-left > & {
-                    border-right-width: $kendo-tabstrip-indicator-size;
-                }
-                .k-tabstrip-right > & {
-                    border-left-width: $kendo-tabstrip-indicator-size;
-                }
             }
             .k-item.k-active::after {
                 display: block;
@@ -322,14 +332,33 @@
             }
         }
 
-    }
 
-}
+        // Variants
+        .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item::after {
+            border-bottom-width: $kendo-tabstrip-indicator-size;
+        }
+        .k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item::after {
+            border-top-width: $kendo-tabstrip-indicator-size;
+        }
+        .k-tabstrip-left > .k-tabstrip-items-wrapper .k-item::after {
+            border-right-width: $kendo-tabstrip-indicator-size;
+        }
+        .k-tabstrip-right > .k-tabstrip-items-wrapper .k-item::after {
+            border-left-width: $kendo-tabstrip-indicator-size;
+        }
+
 
+        // Hide tabstrip indicator when dragging
+        .k-tabstrip-items-wrapper .k-item.k-tabstrip-dragging {
+            &::after {
+                display: none !important; // sass-lint:disable-line no-important
+            }
+        }
 
+    }
 
 
-@include exports("tabstrip/layout/rtl") {
+    // RTL
     .k-rtl .k-tabstrip,
     .k-tabstrip[dir="rtl"] {
 

package/scss/tabstrip/_theme.scss

@@ -55,6 +55,18 @@
             &.k-tabstrip-dragging {
                 @include focus-indicator( $kendo-tabstrip-item-dragging-shadow );
             }
+
+
+            // Disabled
+            &.k-disabled,
+            &[disabled] {
+                @include fill(
+                    $kendo-tabstrip-item-disabled-text,
+                    $kendo-tabstrip-item-disabled-bg,
+                    $kendo-tabstrip-item-disabled-border,
+                    $kendo-tabstrip-item-disabled-gradient
+                );
+            }
         }
 
     }

package/scss/tabstrip/_variables.scss

@@ -82,6 +82,13 @@ $kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 $kendo-tabstrip-item-dragging-shadow: 0px 3px 4px rgba(0, 0, 0, .15) !default;
 
+$kendo-tabstrip-item-disabled-bg: null !default;
+$kendo-tabstrip-item-disabled-text: null !default;
+$kendo-tabstrip-item-disabled-border: null !default;
+$kendo-tabstrip-item-disabled-gradient: null !default;
+$kendo-tabstrip-item-disabled-opacity: null !default;
+$kendo-tabstrip-item-disabled-filter: null !default;
+
 $kendo-tabstrip-indicator-size: null !default;
 $kendo-tabstrip-indicator-color: null !default;
 

package/scss/taskboard/_layout.scss

@@ -2,7 +2,8 @@
 
     // TaskBoard
     .k-taskboard {
-        padding: $kendo-taskboard-padding-y $kendo-taskboard-padding-x;
+        padding-block: $kendo-taskboard-padding-y;
+        padding-inline: $kendo-taskboard-padding-x;
         box-sizing: border-box;
         font-size: $kendo-taskboard-font-size;
         font-family: $kendo-taskboard-font-family;
@@ -20,7 +21,8 @@
 
     // Toolbar
     .k-taskboard-toolbar {
-        padding: $kendo-taskboard-toolbar-padding-y $kendo-taskboard-toolbar-padding-x;
+        padding-block: $kendo-taskboard-toolbar-padding-y;
+        padding-inline: $kendo-taskboard-toolbar-padding-x;
         border-width: 0;
         box-shadow: none;
         background: none;
@@ -58,7 +60,8 @@
     }
 
     .k-taskboard-column-header {
-        padding: $kendo-taskboard-column-header-padding-y $kendo-taskboard-column-header-padding-x;
+        padding-block: $kendo-taskboard-column-header-padding-y;
+        padding-inline: $kendo-taskboard-column-header-padding-x;
         font-weight: $kendo-taskboard-column-header-font-weight;
         display: flex;
         flex-direction: row;
@@ -75,14 +78,16 @@
 
     .k-taskboard-column-cards-container {
         margin-bottom: $kendo-taskboard-column-container-spacing-y;
-        padding: $kendo-taskboard-column-container-padding-y $kendo-taskboard-column-container-padding-x;
+        padding-block: $kendo-taskboard-column-container-padding-y;
+        padding-inline: $kendo-taskboard-column-container-padding-x;
         outline: none;
         overflow: auto;
         flex: 1 1 auto;
     }
 
     .k-taskboard-column-cards {
-        padding: $kendo-taskboard-column-cards-padding-y $kendo-taskboard-column-cards-padding-x;
+        padding-block: $kendo-taskboard-column-cards-padding-y;
+        padding-inline: $kendo-taskboard-column-cards-padding-x;
         min-height: 100%;
         display: flex;
         flex-direction: column;
@@ -108,7 +113,8 @@
 
     // Preview/Edit Pane
     .k-taskboard-pane {
-        padding: $kendo-taskboard-pane-padding-y $kendo-taskboard-pane-padding-x;
+        padding-block: $kendo-taskboard-pane-padding-y;
+        padding-inline: $kendo-taskboard-pane-padding-x;
         width: $kendo-taskboard-pane-width;
         border-width: $kendo-taskboard-pane-border-width;
         border-style: solid;
@@ -123,7 +129,8 @@
     }
 
     .k-taskboard-pane-header {
-        padding: $kendo-taskboard-pane-header-padding-y $kendo-taskboard-pane-header-padding-x;
+        padding-block: $kendo-taskboard-pane-header-padding-y;
+        padding-inline: $kendo-taskboard-pane-header-padding-x;
         font-weight: $kendo-taskboard-pane-header-font-weight;
         display: flex;
         flex-direction: row;
@@ -141,13 +148,15 @@
     }
 
     .k-taskboard-pane-content {
-        padding: $kendo-taskboard-pane-content-padding-y $kendo-taskboard-pane-content-padding-x;
+        padding-block: $kendo-taskboard-pane-content-padding-y;
+        padding-inline: $kendo-taskboard-pane-content-padding-x;
         overflow: auto;
         flex: 1 1 auto;
     }
 
     .k-taskboard-pane-actions {
-        padding: $kendo-taskboard-pane-actions-padding-y $kendo-taskboard-pane-actions-padding-x;
+        padding-block: $kendo-taskboard-pane-actions-padding-y;
+        padding-inline: $kendo-taskboard-pane-actions-padding-x;
     }
 
     .k-taskboard-pane-start {
@@ -167,7 +176,8 @@
         .k-card-header
         .k-card-body,
         .k-card-footer {
-            padding: $kendo-taskboard-card-padding-y $kendo-taskboard-card-padding-x;
+            padding-block: $kendo-taskboard-card-padding-y;
+            padding-inline: $kendo-taskboard-card-padding-x;
         }
 
         .k-card-header {

package/scss/timeline/_layout.scss

@@ -31,7 +31,8 @@
         .k-timeline-flag {
             display: inline-block;
             text-align: center;
-            padding: $kendo-timeline-flag-padding-y $kendo-timeline-flag-padding-x;
+            padding-block: $kendo-timeline-flag-padding-y;
+            padding-inline: $kendo-timeline-flag-padding-x;
             border-radius: $kendo-border-radius;
             line-height: $kendo-timeline-flag-line-height;
             min-width: $kendo-timeline-flag-min-width;
@@ -111,8 +112,10 @@
 
     .k-timeline-vertical,
     .k-timeline-horizontal {
-        padding: 0 $kendo-timeline-spacing-x;
-        margin: $kendo-timeline-spacing-y 0;
+        padding-block: 0;
+        padding-inline: $kendo-timeline-spacing-x;
+        margin-block: $kendo-timeline-spacing-y;
+        margin-inline: 0;
         width: 100%;
         position: relative;
         border: 0;
@@ -161,13 +164,14 @@
             padding-right: $kendo-timeline-items-padding;
             margin-top: $kendo-timeline-track-event-offset;
             transform: translate(-100%, -50%);
-            text-align: right;
+            text-align: end;
         }
 
         .k-timeline-event {
             display: flex;
             align-items: flex-start;
-            padding: $kendo-timeline-spacing-y 0;
+            padding-block: $kendo-timeline-spacing-y;
+            padding-inline: 0;
         }
 
         .k-timeline-card {
@@ -197,7 +201,8 @@
             }
 
             .k-event-collapse {
-                margin: -$kendo-icon-spacing 0;
+                margin-block: -$kendo-icon-spacing;
+                margin-inline: 0;
                 transform: rotate(90deg);
                 transition: transform .2s ease-in-out;
             }
@@ -243,7 +248,7 @@
                     flex-direction: row-reverse;
 
                     .k-timeline-date-wrap {
-                        text-align: left;
+                        text-align: start;
                         padding-right: 0;
                         padding-left: $kendo-timeline-items-padding;
                     }
@@ -343,7 +348,8 @@
 
             .k-timeline-track {
                 overflow: hidden;
-                margin: 0 $kendo-timeline-track-arrow-width;
+                margin-block: 0;
+                margin-inline: $kendo-timeline-track-arrow-width;
                 position: relative;
                 z-index: 2;
 
@@ -397,8 +403,10 @@
     }
 
     .k-timeline-mobile {
-        padding: 0 $kendo-timeline-mobile-spacing-x;
-        margin: $kendo-timeline-mobile-spacing-y 0;
+        padding-block: 0;
+        padding-inline: $kendo-timeline-mobile-spacing-x;
+        margin-block: $kendo-timeline-mobile-spacing-y;
+        margin-inline: 0;
 
         .k-timeline-flag {
             max-width: $kendo-timeline-mobile-flag-max-width;

package/scss/timeselector/_layout.scss

@@ -26,7 +26,8 @@
     // Time selector header
     .k-time-header,
     .k-time-selector-header {
-        padding: $kendo-time-selector-header-padding-y $kendo-time-selector-header-padding-x;
+        padding-block: $kendo-time-selector-header-padding-y;
+        padding-inline: $kendo-time-selector-header-padding-x;
         box-sizing: border-box;
         display: flex;
         align-items: center;
@@ -35,7 +36,8 @@
 
         .k-title,
         .k-time-selector-header-title {
-            padding: $kendo-button-padding-y $kendo-button-padding-x;
+            padding-block: $kendo-button-padding-y;
+            padding-inline: $kendo-button-padding-x;
             font-weight: bold;
             display: inline-block;
         }
@@ -189,7 +191,8 @@
     // Time list item
     .k-time-list-item,
     .k-time-list .k-item {
-        padding: $kendo-time-list-item-padding-y $kendo-time-list-item-padding-x;
+        padding-block: $kendo-time-list-item-padding-y;
+        padding-inline: $kendo-time-list-item-padding-x;
     }
 
 
@@ -231,7 +234,8 @@
 
             .k-time-list-item,
             .k-time-list .k-item {
-                padding: $_list-item-padding-y $_list-item-padding-x;
+                padding-block: $_list-item-padding-y;
+                padding-inline: $_list-item-padding-x;
             }
         }
     }

package/scss/toolbar/_layout.scss

@@ -3,7 +3,8 @@
     // Base
     .k-toolbar {
         margin: 0;
-        padding: $kendo-toolbar-padding-y $kendo-toolbar-padding-x;
+        padding-block: $kendo-toolbar-padding-y;
+        padding-inline: $kendo-toolbar-padding-x;
         border-width: $kendo-toolbar-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -126,7 +127,8 @@
         $_spacing: k-map-get( $size-props, spacing );
 
         .k-toolbar-#{$size} {
-            padding: $_padding-y $_padding-x;
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
             gap: $_spacing;
 
             // Remove once we decide to not size empty containers
@@ -160,7 +162,8 @@
     // sass-lint:disable class-name-format
     .k-floating-toolbar,
     .editorToolbarWindow.k-window-content {
-        padding: $kendo-toolbar-md-padding-y $kendo-toolbar-md-padding-x !important; // sass-lint:disable-line no-important
+        padding-block: $kendo-toolbar-md-padding-y !important; // sass-lint:disable-line no-important
+        padding-inline: $kendo-toolbar-md-padding-x !important; // sass-lint:disable-line no-important
         border-width: $kendo-toolbar-border-width;
         border-style: solid;
         display: flex;
@@ -214,7 +217,8 @@
 
         // Button
         .k-overflow-button {
-            padding: $kendo-menu-popup-md-item-padding-y $kendo-menu-popup-md-item-padding-x;
+            padding-block: $kendo-menu-popup-md-item-padding-y;
+            padding-inline: $kendo-menu-popup-md-item-padding-x;
             width: 100%;
             height: auto;
             border-width: 0;

package/scss/tooltip/_layout.scss

@@ -3,7 +3,8 @@
     .k-tooltip {
         @include border-radius( $kendo-tooltip-border-radius );
         margin: 0;
-        padding: $kendo-tooltip-padding-y $kendo-tooltip-padding-x;
+        padding-block: $kendo-tooltip-padding-y;
+        padding-inline: $kendo-tooltip-padding-x;
         // max-width: $kendo-tooltip-max-width;
         border-width: $kendo-tooltip-border-width;
         border-style: solid;

package/scss/treelist/_layout.scss

@@ -7,7 +7,8 @@
         }
 
         .k-status {
-            padding: .4em .6em;
+            padding-block: .4em;
+            padding-inline: .6em;
             line-height: 1.6em;
 
             // TODO: see what this does and use a better name
@@ -95,7 +96,8 @@
         border-right: 1px solid;
         height: 1em;
         vertical-align: top;
-        margin: 0 .5em;
+        margin-block: 0;
+        margin-inline: .5em;
     }
 
 }

package/scss/treeview/_layout.scss

@@ -100,7 +100,8 @@
     // Treeview leaf
     .k-treeview-leaf {
         @include border-radius( $kendo-treeview-item-border-radius );
-        padding: $kendo-treeview-item-padding-y $kendo-treeview-item-padding-x;
+        padding-block: $kendo-treeview-item-padding-y;
+        padding-inline: $kendo-treeview-item-padding-x;
         border: $kendo-treeview-item-border-width solid transparent;
         text-decoration: none;
         display: inline-flex;
@@ -179,7 +180,8 @@
             line-height: $_line-height;
 
             .k-treeview-leaf {
-                padding: $_item-padding-y $_item-padding-x;
+                padding-block: $_item-padding-y;
+                padding-inline: $_item-padding-x;
             }
         }
     }

package/scss/treeview/_variables.scss

@@ -24,7 +24,7 @@ $kendo-treeview-indent: 16px !default;
 $kendo-treeview-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-treeview-sm-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-treeview-md-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-treeview-lg-item-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-treeview-lg-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
 $kendo-treeview-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;

package/scss/typography/_layout.scss

@@ -1,16 +1,16 @@
 @include exports( "typography/layout" ) {
 
     @if $kendo-enable-typography {
-        body { @extend .k-body; }
-        h1 { @extend .k-h1; }
-        h2 { @extend .k-h2; }
-        h3 { @extend .k-h3; }
-        h4 { @extend .k-h4; }
-        h5 { @extend .k-h5; }
-        h6 { @extend .k-h6; }
-        p { @extend .k-paragraph; }
-        pre { @extend .k-pre; }
-        code { @extend .k-code; }
+        body { @extend .k-body !optional; }
+        h1 { @extend .k-h1 !optional; }
+        h2 { @extend .k-h2 !optional; }
+        h3 { @extend .k-h3 !optional; }
+        h4 { @extend .k-h4 !optional; }
+        h5 { @extend .k-h5 !optional; }
+        h6 { @extend .k-h6 !optional; }
+        p { @extend .k-paragraph !optional; }
+        pre { @extend .k-pre !optional; }
+        code { @extend .k-code !optional; }
     }
 
     // TODO delete k-typography class for R1 2022
@@ -119,7 +119,8 @@
     }
 
     .k-pre {
-        padding: $kendo-pre-padding-y $kendo-pre-padding-x;
+        padding-block: $kendo-pre-padding-y;
+        padding-inline: $kendo-pre-padding-x;
         overflow: auto;
     }
 
@@ -133,7 +134,8 @@
     }
 
     .k-code {
-        padding: $kendo-code-padding-y $kendo-code-padding-x;
+        padding-block: $kendo-code-padding-y;
+        padding-inline: $kendo-code-padding-x;
     }
 
     // Display