@progress/kendo-theme-fluent 6.1.1-dev.8 → 6.2.1-dev.0

package/scss/tabstrip/_layout.scss

@@ -3,6 +3,7 @@
 
 @mixin kendo-tabstrip--layout() {
 
+    // Tabstrip wrapper
     .k-tabstrip-wrapper {
         padding-inline: var( --kendo-tabstrip-wrapper-padding-x, #{ $kendo-tabstrip-wrapper-padding-x} );
         padding-block: var( --kendo-tabstrip-wrapper-padding-y, #{ $kendo-tabstrip-wrapper-padding-y} );
@@ -13,6 +14,8 @@
         flex-direction: column;
     }
 
+
+    // Tabstrip
     .k-tabstrip {
         border-width: 0;
         border-color: transparent;
@@ -27,12 +30,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;
@@ -41,6 +45,8 @@
         position: relative;
     }
 
+
+    // Tabstrip items
     .k-tabstrip-items {
         box-sizing: border-box;
         outline: 0;
@@ -91,8 +97,18 @@
             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
@@ -113,7 +129,8 @@
         }
     }
 
-    // Loading
+
+    // Loading indicator
     .k-tabstrip-items .k-loading {
         width: 20%;
         height: 0;
@@ -147,6 +164,8 @@
             }
 
             > .k-button {
+                padding-block: var( --kendo-tabstrip-scrollable-button-padding-y, #{$kendo-tabstrip-scrollable-button-padding-y} );
+                padding-inline: var( --kendo-tabstrip-scrollable-button-padding-x, #{$kendo-tabstrip-scrollable-button-padding-x} );
                 width: auto;
                 height: auto;
                 flex: none;
@@ -158,25 +177,23 @@
                     min-height: auto;
                 }
             }
-            // TODO: Think of a less verbose name
-            &.k-hstack {
-                > .k-button {
-                    padding-inline: var( --kendo-tabstrip-scrollable-button-padding-x, #{$kendo-tabstrip-scrollable-button-padding-x} );
-                }
-            }
-
-            &.k-vstack {
-                > .k-button {
-                    padding-block: var( --kendo-tabstrip-scrollable-button-padding-y, #{$kendo-tabstrip-scrollable-button-padding-y} );
-                }
-            }
         }
     }
 
 
+    // 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: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
 
             .k-item {
@@ -187,6 +204,7 @@
     }
     .k-tabstrip-bottom {
         > .k-tabstrip-items-wrapper {
+            @extend .k-tabstrip-horizontal !optional;
             border-top-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
 
             .k-item {
@@ -199,6 +217,7 @@
         flex-direction: row;
 
         > .k-tabstrip-items-wrapper {
+            @extend .k-tabstrip-vertical !optional;
             border-right-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
 
             > .k-tabstrip-items {
@@ -215,6 +234,7 @@
         flex-direction: row-reverse;
 
         > .k-tabstrip-items-wrapper {
+            @extend .k-tabstrip-vertical !optional;
             border-left-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
 
             > .k-tabstrip-items {
@@ -266,20 +286,6 @@
                 transform: scaleY(0);
                 pointer-events: none;
                 transition: opacity .3s, transform .3s;
-
-                // Variants
-                .k-tabstrip-top > & {
-                    border-bottom-width: var( --kendo-tabstrip-indicator-size, #{$kendo-tabstrip-indicator-size} );
-                }
-                .k-tabstrip-bottom > & {
-                    border-top-width: var( --kendo-tabstrip-indicator-size, #{$kendo-tabstrip-indicator-size} );
-                }
-                .k-tabstrip-left > & {
-                    border-right-width: var( --kendo-tabstrip-indicator-size, #{$kendo-tabstrip-indicator-size} );
-                }
-                .k-tabstrip-right > & {
-                    border-left-width: var( --kendo-tabstrip-indicator-size, #{$kendo-tabstrip-indicator-size} );
-                }
             }
             .k-item:active::after,
             .k-item.k-active::after,
@@ -293,6 +299,22 @@
             }
         }
 
+
+        // Variants
+        .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item::after {
+            border-bottom-width: var( --kendo-tabstrip-indicator-size, #{$kendo-tabstrip-indicator-size} );
+        }
+        .k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item::after {
+            border-top-width: var( --kendo-tabstrip-indicator-size, #{$kendo-tabstrip-indicator-size} );
+        }
+        .k-tabstrip-left > .k-tabstrip-items-wrapper .k-item::after {
+            border-right-width: var( --kendo-tabstrip-indicator-size, #{$kendo-tabstrip-indicator-size} );
+        }
+        .k-tabstrip-right > .k-tabstrip-items-wrapper .k-item::after {
+            border-left-width: var( --kendo-tabstrip-indicator-size, #{$kendo-tabstrip-indicator-size} );
+        }
+
+
         // Hide tabstrip indicator when dragging
         .k-tabstrip-items-wrapper .k-item.k-tabstrip-dragging {
             &::after {
@@ -302,6 +324,8 @@
 
     }
 
+
+    // RTL
     .k-rtl .k-tabstrip,
     .k-tabstrip[dir="rtl"] {
 
@@ -315,8 +339,8 @@
             > .k-tabstrip-content { order: 0; }
         }
 
-        .k-tabstrip-prev,
-        .k-tabstrip-next {
+        .k-tabstrip-prev .k-button-icon,
+        .k-tabstrip-next .k-button-icon {
             transform: scaleX(-1);
         }
 

package/scss/tabstrip/_variables.scss

@@ -76,6 +76,8 @@ $kendo-tabstrip-item-disabled-bg: none !default;
 /// The border color of the disabled tabstrip item
 /// @group tabstrip
 $kendo-tabstrip-item-disabled-border: var( --kendo-disabled-border, initial ) !default;
+$kendo-tabstrip-item-disabled-opacity: null !default;
+$kendo-tabstrip-item-disabled-filter: null !default;
 
 /// The background color of hovered tabs
 /// @group tabstrip

package/scss/timeline/_layout.scss

@@ -167,7 +167,7 @@
             padding-inline-end: var( --kendo-timeline-items-padding, #{ $kendo-timeline-items-padding} );
             margin-block-start: var( --kendo-timeline-track-event-offset, #{ $kendo-timeline-track-event-offset } );
             transform: translate(-100%, -50%);
-            text-align: right;
+            text-align: end;
         }
 
         .k-timeline-event {
@@ -251,7 +251,7 @@
                     flex-direction: row-reverse;
 
                     .k-timeline-date-wrap {
-                        text-align: left;
+                        text-align: start;
                         padding-inline-end: 0;
                         padding-inline-start: var( --kendo-timeline-items-padding, #{ $kendo-timeline-items-padding } );
                     }

package/scss/tooltip/_layout.scss

@@ -53,7 +53,8 @@
         margin-inline-start: var( --kendo-tooltip-button-spacing, .5rem );
         flex-shrink: 0;
 
-        .k-icon {
+        .k-icon,
+        .k-svg-icon {
             color: inherit;
             vertical-align: top;
         }

package/scss/treelist/_layout.scss

@@ -46,8 +46,8 @@
             border-top-width: 0;
         }
 
-        .k-i-collapse,
-        .k-i-expand {
+        .k-i-caret-alt-down,
+        .k-i-caret-alt-right {
             margin-inline-end: map.get( $kendo-spacing, 2 );
         }
     }
@@ -92,7 +92,8 @@
         border-right: 1px solid;
         height: 1em;
         vertical-align: top;
-        margin: 0 .5em;
+        margin-block: 0;
+        margin-inline: .5em;
     }
 
 }

package/scss/treeview/_layout.scss

@@ -115,6 +115,7 @@
         position: relative;
 
         .k-icon,
+        .k-svg-icon,
         .k-image,
         .k-sprite {
             margin-inline-end: var( --kendo-icon-spacing, .5rem );

package/scss/typography/_layout.scss

@@ -4,16 +4,16 @@
 
 @mixin kendo-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; }
     }
 
     .k-body {

package/scss/upload/_layout.scss

@@ -55,7 +55,8 @@
                 align-items: center;
                 position: relative;
 
-                > .k-icon {
+                > .k-icon,
+                > .k-svg-icon {
                     margin-inline-end: var( --kendo-upload-icon-spacing, #{$kendo-upload-icon-spacing} );
                 }
             }
@@ -124,12 +125,6 @@
                 position: relative;
             }
 
-            .k-upload-status {
-                .k-icon {
-                    vertical-align: middle;
-                }
-            }
-
             .k-upload-pct {
                 margin-inline: var( --kendo-upload-icon-spacing, #{$kendo-upload-icon-spacing} );
                 font-weight: normal;

package/scss/window/_layout.scss

@@ -47,8 +47,10 @@
 
     // Title bar title text
     .k-window-title {
-        padding: .5em 0;
-        margin: -.5em 0;
+        padding-block: .5em;
+        padding-inline: 0;
+        margin-block: -.5em;
+        margin-inline: 0;
         font-size: var( --kendo-window-title-font-size, #{$kendo-window-title-font-size} );
         line-height: var( --kendo-window-title-line-height, #{$kendo-window-title-line-height} );
         font-weight: var( --kendo-window-title-font-weight, #{$kendo-window-title-font-weight} );
@@ -67,7 +69,8 @@
 
     // Actions
     .k-window-titlebar-actions {
-        margin: -5em 0;
+        margin-block: -5em;
+        margin-inline: 0;
         margin-inline-end: ( $kendo-window-titlebar-padding-y - $kendo-window-titlebar-padding-x );
         line-height: 1;
         display: flex;