@progress/kendo-theme-fluent 11.2.1-dev.1 → 11.3.0-dev.0

package/scss/tabstrip/_layout.scss

@@ -2,348 +2,14 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/tabstrip/_layout.scss" as *;
 
 @mixin kendo-tabstrip--layout() {
+    @include kendo-tabstrip--layout-base();
 
-    // 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} );
-        box-sizing: border-box;
-        border-width: 0;
-        border-style: solid;
-        display: flex;
-        flex-direction: column;
-        position: relative;
-    }
-
-
-    // Tabstrip
-    .k-tabstrip {
-        border-width: 0;
-        border-color: transparent;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-tabstrip-font-family, #{$kendo-tabstrip-font-family} );
-        font-size: var( --kendo-tabstrip-font-size, #{$kendo-tabstrip-font-size} );
-        line-height: var( --kendo-tabstrip-line-height, #{$kendo-tabstrip-line-height} );
-        color: inherit;
-        background-color: transparent;
-        display: flex;
-        flex-flow: column nowrap;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-    }
-    .k-tabstrip-wrapper > .k-tabstrip {
-        flex: 1 1 auto;
-    }
-
-
-    // Tabstrip items wrapper
-    .k-tabstrip-items-wrapper {
-        box-sizing: border-box;
-        border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        position: relative;
-        flex-shrink: 0;
-    }
-
-
-    // Tabstrip items
-    .k-tabstrip-items {
-        box-sizing: border-box;
-        outline: 0;
-        display: flex;
-        flex-flow: row wrap;
-        flex: 1 1 auto;
-        gap: $kendo-tabstrip-item-gap;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        .k-item {
-            margin: 0;
-            padding: 0;
-            border: 0;
-            position: relative;
-            flex-shrink: 0;
-            display: flex;
-            flex-direction: row;
-            align-items: stretch;
-            justify-items: stretch;
-            outline: 0;
-
-            // Active state
-            &:active,
-            &.k-active,
-            &.k-selected {
-                font-weight: var( --kendo-tabstrip-item-selected-font-weight, #{$kendo-tabstrip-item-selected-font-weight} );
-            }
-        }
-
-        .k-item-actions {
-            margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: row;
-        }
-
-        .k-link {
-            padding-inline: var( --kendo-tabstrip-item-padding-x, #{$kendo-tabstrip-item-padding-x} );
-            padding-block: var( --kendo-tabstrip-item-padding-y, #{$kendo-tabstrip-item-padding-y} );
-            color: inherit;
-            cursor: pointer;
-            display: inline-flex;
-            vertical-align: middle;
-            flex: 1 1 auto;
-            flex-direction: row;
-            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; // stylelint-disable-line declaration-no-important
-        padding-inline: var( --kendo-tabstrip-content-padding-x, #{$kendo-tabstrip-content-padding-x} );
-        padding-block: var( --kendo-tabstrip-content-padding-y, #{$kendo-tabstrip-content-padding-y} );
-        box-sizing: border-box;
         border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        display: none;
-        overflow: auto;
-        flex: 1 1 auto;
-        position: relative;
-
-        &:active,
-        &.k-active {
-            display: block;
-        }
-    }
-
-
-    // Loading indicator
-    .k-tabstrip-items .k-loading {
-        width: 20%;
-        height: 0;
-        border: 0;
-        border-top: 1px solid transparent;
-        border-color: inherit;
-        background: none;
-        position: absolute;
-        top: 0;
-        left: 0;
-        transition: width .2s linear;
-
-        // TODO: a better name
-        display: none;
-
-        &.k-complete {
-            width: 100%;
-            border-top-width: 0;
-        }
-    }
-
-
-    // Scrolling
-    .k-tabstrip-scrollable {
-        > .k-tabstrip-items-wrapper {
-            > .k-tabstrip-items {
-                flex-wrap: nowrap;
-                white-space: nowrap;
-                overflow: hidden;
-
-                &.k-tabstrip-items-scroll {
-                    scrollbar-width: none;
-
-                    &::-webkit-scrollbar {
-                        display: none;
-                    }
-                }
-            }
-
-            &.k-tabstrip-top,
-            &.k-tabstrip-bottom {
-                .k-tabstrip-items.k-tabstrip-items-scroll {
-                    overflow-x: auto;
-                }
-            }
-
-            &.k-tabstrip-left,
-            &.k-tabstrip-right {
-                .k-tabstrip-items.k-tabstrip-items-scroll {
-                    overflow-y: auto;
-                }
-            }
-        }
-    }
-
-    .k-tabstrip-scrollable-overlay {
-        .k-tabstrip-items-wrapper {
-            &::before,
-            &::after {
-                content: '';
-                position: absolute;
-                z-index: 3;
-            }
-        }
-
-        &.k-tabstrip-top,
-        &.k-tabstrip-bottom {
-            .k-tabstrip-items-wrapper {
-                &::before,
-                &::after {
-                    height: 100%;
-                    aspect-ratio: 1;
-                }
-                &::before {
-                    inset-inline-start: 0;
-                }
-
-                &::after {
-                    inset-inline-end: 0;
-                }
-            }
-        }
-
-        &.k-tabstrip-left,
-        &.k-tabstrip-right {
-            .k-tabstrip-items-wrapper {
-                &::before,
-                &::after {
-                    width: 100%;
-                }
-                &::before {
-                    inset-block-start: 0;
-                }
-
-                &::after {
-                    inset-block-end: 0;
-                }
-            }
-        }
-
-        &.k-tabstrip-scrollable-start {
-            .k-tabstrip-items-wrapper {
-                &::before {
-                    display: none;
-                }
-            }
-        }
-
-        &.k-tabstrip-scrollable-end {
-            .k-tabstrip-items-wrapper {
-                &::after {
-                    display: none;
-                }
-            }
-        }
-    }
-
-    // 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 {
-                margin-block-end: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
-
-                .k-link {
-                    justify-content: center;
-                }
-            }
-
-        }
-    }
-    .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 {
-                margin-block-start: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
-
-                .k-link {
-                    justify-content: center;
-                }
-            }
-        }
-    }
-    .k-tabstrip-left {
-        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 {
-                flex-direction: column;
-            }
-
-            .k-item {
-                margin-inline-end: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
-            }
-        }
-
-    }
-    .k-tabstrip-right {
-        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 {
-                flex-direction: column;
-            }
-
-            .k-item {
-                margin-inline-start: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
-            }
-        }
-    }
-
-
-    // Tabstrip align
-    .k-tabstrip-items-start {
-        justify-content: flex-start;
-    }
-    .k-tabstrip-items-center {
-        justify-content: center;
-    }
-    .k-tabstrip-items-end {
-        justify-content: flex-end;
-    }
-    .k-tabstrip-items-justify {
-        justify-content: space-between;
-    }
-    .k-tabstrip-items-stretched > * {
-        flex: 1 0 0;
     }
 
     // Selected indicator
@@ -351,97 +17,12 @@
 
         .k-tabstrip-items-wrapper {
 
-            .k-item::after {
-                content: "";
-                border-width: 0;
-                border-style: solid;
-                display: block;
-                position: absolute;
-                z-index: 2;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
-                opacity: 0;
-                transform: scaleY(0);
-                pointer-events: none;
-                transition: opacity .3s, transform .3s;
-            }
             .k-item:active::after,
             .k-item.k-active::after,
             .k-item.k-selected::after {
                 opacity: 1;
                 transform: scaleY(1);
             }
-
-            .k-item > .k-link {
-                z-index: 1;
-            }
-        }
-
-
-        // 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 {
-                display: none !important; // stylelint-disable-line declaration-no-important
-            }
-        }
-
-    }
-
-
-    // RTL
-    .k-rtl .k-tabstrip,
-    .k-tabstrip[dir="rtl"] {
-
-        &.k-tabstrip-left,
-        &.k-tabstrip-right {
-            > .k-tabstrip-items-wrapper {
-                order: 1;
-            }
-
-            > .k-content { order: 0; }
-            > .k-tabstrip-content { order: 0; }
-        }
-
-    }
-
-     // TabStrip sizes
-     @each $size, $size-props in $kendo-tabstrip-sizes {
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_item-padding-x: map.get( $size-props, item-padding-x );
-        $_item-padding-y: map.get( $size-props, item-padding-y );
-
-        .k-tabstrip-#{$size} {
-            .k-tabstrip-items .k-link {
-                font-size: $_font-size;
-                line-height: $_line-height;
-                padding-block: $_item-padding-y;
-                padding-inline: $_item-padding-x;
-            }
-
-            :is(&.k-tabstrip-left, &.k-tabstrip-right):is(.k-tabstrip-scrollable-overlay) :is(.k-tabstrip-items-wrapper){
-                &::before,
-                &::after {
-                    height: calc( ($_line-height * 1em) + ($kendo-tabstrip-border-width * 2) + ($_item-padding-y * 2) );
-                }
-            }
         }
     }
 

package/scss/tabstrip/_theme.scss

@@ -1,146 +1,35 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/tabstrip/_theme.scss" as *;
 
 @mixin kendo-tabstrip--theme() {
+    @include kendo-tabstrip--theme-base();
 
-    // Wrapper
-    .k-tabstrip-wrapper {
-        @include fill(
-            var( --kendo-tabstrip-wrapper-text, #{$kendo-tabstrip-wrapper-text} ),
-            var( --kendo-tabstrip-wrapper-bg, #{$kendo-tabstrip-wrapper-bg} ),
-            var( --kendo-tabstrip-wrapper-border, #{$kendo-tabstrip-wrapper-border} )
-        );
-    }
-
-    // Items
     .k-tabstrip-items-wrapper {
-        @include fill(
-            var( --kendo-tabstrip-text, #{$kendo-tabstrip-text} ),
-            var( --kendo-tabstrip-bg, #{$kendo-tabstrip-bg} ),
-            var( --kendo-tabstrip-border, #{$kendo-tabstrip-border} )
-        );
 
-        .k-item {
-            @include fill(
-                var( --kendo-tabstrip-item-text, #{$kendo-tabstrip-item-text} ),
-                var( --kendo-tabstrip-item-bg, #{$kendo-tabstrip-item-bg} ),
-                var( --kendo-tabstrip-item-border, #{$kendo-tabstrip-item-border} )
-            );
+        .k-item:active,
+        .k-item.k-active,
+        .k-item.k-selected {
 
             &:hover,
             &.k-hover {
-                @include fill(
-                    var( --kendo-tabstrip-item-hover-text, #{$kendo-tabstrip-item-hover-text} ),
-                    var( --kendo-tabstrip-item-hover-bg, #{$kendo-tabstrip-item-hover-bg} ),
-                    var( --kendo-tabstrip-item-hover-border, #{$kendo-tabstrip-item-hover-border} )
-                );
-            }
-
-            &:focus,
-            &.k-focus {
-                @include box-shadow( var( --kendo-tabstrip-item-focus-shadow, #{$kendo-tabstrip-item-focus-shadow} ) );
-            }
-
-            &:active,
-            &.k-active,
-            &.k-selected {
-                @include fill(
-                    $color: var( --kendo-tabstrip-item-selected-text, #{$kendo-tabstrip-item-selected-text} ),
-                    $bg: var( --kendo-tabstrip-item-selected-bg, #{$kendo-tabstrip-item-selected-bg} )
-                );
-
-                &:hover,
-                &.k-hover {
-                    @include fill(
-                        $bg: var( --kendo-tabstrip-item-hover-bg, #{$kendo-tabstrip-item-hover-bg} )
-                    );
-                }
-
-            }
-
-            &:disabled,
-            &[disabled],
-            &.k-disabled {
-                @include fill(
-                    var( --kendo-tabstrip-item-disabled-text, #{$kendo-tabstrip-item-disabled-text} ),
-                    var( --kendo-tabstrip-item-disabled-bg, #{$kendo-tabstrip-item-disabled-bg} ),
-                    var( --kendo-tabstrip-item-disabled-border, #{$kendo-tabstrip-item-disabled-border} )
-                );
-            }
-
-            &.k-tabstrip-dragging {
-                @include fill( $color: var( --kendo-tabstrip-item-dragging-text, #{$kendo-tabstrip-item-dragging-text} ) );
+                background-color: $kendo-tabstrip-item-hover-bg;
             }
         }
 
+         .k-item.k-tabstrip-dragging {
+            color: $kendo-tabstrip-item-dragging-text;
+         }
     }
 
-    // Content
-    .k-tabstrip-content,
-    .k-tabstrip > .k-content {
-        @include fill(
-            var( --kendo-tabstrip-content-text, #{$kendo-tabstrip-content-text} ),
-            var( --kendo-tabstrip-content-bg, #{$kendo-tabstrip-content-bg} ),
-            var( --kendo-tabstrip-content-border, #{$kendo-tabstrip-content-border} )
-        );
-
-        &:focus,
-        &.k-focus {
-            outline-color: var( --kendo-tabstrip-content-focus-border, #{$kendo-tabstrip-content-focus-border} );
-        }
-    }
-
-    // Selected indicator
+        // Selected indicator
     @if ($kendo-tabstrip-indicator-size) {
         .k-tabstrip-items-wrapper {
             .k-item.k-active::after {
-                border-color: var( --kendo-tabstrip-indicator-color, #{$kendo-tabstrip-indicator-color} );
-            }
-        }
-    }
-
-    // Scrolling
-    .k-tabstrip-scrollable-overlay {
-        &.k-tabstrip-top,
-        &.k-tabstrip-bottom {
-            .k-tabstrip-items-wrapper {
-                &::before {
-                    background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
-                }
-
-                &::after {
-                    background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
-                }
-            }
-        }
-
-        &.k-tabstrip-left,
-        &.k-tabstrip-right {
-            .k-tabstrip-items-wrapper {
-                &::before {
-                    background: linear-gradient(180deg, $kendo-tabstrip-scroll-overlay);
-                }
-
-                &::after {
-                    background: linear-gradient(360deg, $kendo-tabstrip-scroll-overlay);
-                }
+                border-color: $kendo-tabstrip-indicator-color;
+                background: none;
             }
         }
     }
 
-    // RTL
-    :is(.k-rtl .k-tabstrip-scrollable-overlay, [dir="rtl"] .k-tabstrip-scrollable-overlay, .k-tabstrip-scrollable-overlay.k-rtl, .k-tabstrip-scrollable-overlay[dir="rtl"] ) {
-        &.k-tabstrip-top,
-        &.k-tabstrip-bottom {
-            .k-tabstrip-items-wrapper {
-                &::before {
-                    background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
-                }
-
-                &::after {
-                    background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
-                }
-            }
-        }
-    }
 }