@progress/kendo-theme-fluent 5.7.0

package/scss/split-button/_variables.scss

@@ -0,0 +1,24 @@
+@use "../core/color-system" as *;
+@use "../button/variables" as *;
+
+/// Vertical padding of the split button arrow.
+/// @group split-button
+$kendo-split-button-arrow-padding-y-sm: $kendo-button-padding-y-sm !default;
+$kendo-split-button-arrow-padding-y-md: $kendo-button-padding-y-md !default;
+$kendo-split-button-arrow-padding-y-lg: $kendo-button-padding-y-lg !default;
+
+/// Horizontal padding of the split button arrow.
+/// @group split-button
+$kendo-split-button-arrow-padding-x-sm: $kendo-split-button-arrow-padding-y-sm !default;
+$kendo-split-button-arrow-padding-x-md: $kendo-split-button-arrow-padding-y-md !default;
+$kendo-split-button-arrow-padding-x-lg: $kendo-split-button-arrow-padding-y-lg !default;
+
+/// Height of the split button arrow delimiter.
+/// @group split-button
+$kendo-split-button-arrow-delimiter-size: calc( #{$kendo-button-inner-calc-size} / 2 ) !default;
+/// Width of the split button arrow delimiter.
+/// @group split-button
+$kendo-split-button-arrow-delimiter-line-size: 1px !default;
+/// Background color of the split button arrow delimiter.
+/// @group split-button
+$kendo-split-button-arrow-delimiter-bg: get-theme-color-var( neutral-60 ) !default;

package/scss/split-button/index.scss

@@ -0,0 +1,26 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "split-button",
+    dependencies: (
+        "button",
+        "menu"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "split-button" ) {
+        @include kendo-split-button--layout();
+        @include kendo-split-button--theme();
+    }
+}

package/scss/splitter/_layout.scss

@@ -0,0 +1,208 @@
+@use "../core" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-splitter--layout() {
+
+    // Base
+    .k-splitter {
+        height: 300px;
+        border-width: var( --kendo-splitter-border-width, #{$kendo-splitter-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-splitter-font-family, #{$kendo-splitter-font-family} );
+        font-size: var( --kendo-splitter-font-size, #{$kendo-splitter-font-size} );
+        line-height: var( --kendo-splitter-line-height, #{$kendo-splitter-line-height} );
+        display: block;
+        position: relative;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        // Pane
+        .k-pane {
+            overflow: hidden;
+        }
+        .k-scrollable {
+            overflow: auto;
+        }
+        .k-splitter-resizing {
+            overflow: hidden;
+        }
+
+        // Nested
+        .k-pane > & {
+            border-width: 0;
+            overflow: hidden;
+        }
+
+        // Loading
+        .k-pane-loading {
+            position: static;
+            top: 50%;
+            left: 50%;
+        }
+
+    }
+
+
+    // Splitbar
+    .k-ghost-splitbar,
+    .k-splitbar {
+        border-style: solid;
+        outline: 0;
+        position: absolute;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .k-collapse-prev,
+        .k-collapse-next {
+            cursor: pointer;
+        }
+
+        .k-icon {
+            font-size: var( --kendo-splitter-resize-icon-size, #{$kendo-splitter-resize-icon-size} );
+        }
+
+    }
+
+    .k-splitbar-draggable-horizontal { cursor: col-resize; }
+    .k-splitbar-draggable-vertical { cursor: row-resize; }
+
+    .k-ghost-splitbar-horizontal,
+    .k-splitbar-horizontal {
+        width: var( --kendo-splitter-splitbar-size, #{$kendo-splitter-splitbar-size} );
+        border-width: 0;
+        background-repeat: repeat-y;
+        flex-direction: column;
+        top: 0;
+    }
+    .k-ghost-splitbar-vertical,
+    .k-splitbar-vertical {
+        height: var( --kendo-splitter-splitbar-size, #{$kendo-splitter-splitbar-size} );
+        border-width: 0;
+        background-repeat: repeat-x;
+        flex-direction: row;
+        left: 0;
+    }
+
+    .k-splitbar-static-horizontal {
+        width: var( --kendo-splitter-splitbar-static-size, #{$kendo-splitter-splitbar-static-size} );
+    }
+    .k-splitbar-static-vertical {
+        height: var( --kendo-splitter-splitbar-static-size, #{$kendo-splitter-splitbar-static-size} );
+    }
+
+    .k-splitbar-draggable-horizontal .k-resize-handle {
+        width: var( --kendo-splitter-drag-handle-thickness, #{$kendo-splitter-drag-handle-thickness} );
+        height: var( --kendo-splitter-drag-handle-length, #{$kendo-splitter-drag-handle-length} );
+        position: static;
+        z-index: 1;
+    }
+
+    .k-splitbar .k-resize-handle {
+        display: none;
+        background-color: currentColor;
+    }
+
+    .k-splitbar-draggable-horizontal,
+    .k-splitbar-draggable-vertical {
+
+        .k-resize-handle {
+            display: block;
+        }
+    }
+
+    .k-splitbar-horizontal .k-collapse-prev {
+        margin-block-end: var( --kendo-splitter-drag-icon-margin, #{$kendo-splitter-drag-icon-margin} );
+    }
+
+    .k-splitbar-horizontal .k-collapse-next {
+        margin-block-start: var( --kendo-splitter-drag-icon-margin, #{$kendo-splitter-drag-icon-margin} );
+    }
+
+    .k-splitbar-vertical .k-collapse-prev {
+        margin-inline-end: var( --kendo-splitter-drag-icon-margin, #{$kendo-splitter-drag-icon-margin} );
+    }
+
+    .k-splitbar-vertical .k-collapse-next {
+        margin-inline-start: var( --kendo-splitter-drag-icon-margin, #{$kendo-splitter-drag-icon-margin} );
+    }
+
+    .k-splitbar-draggable-vertical .k-resize-handle {
+        width: var( --kendo-splitter-drag-handle-length, #{$kendo-splitter-drag-handle-length} );
+        height: var( --kendo-splitter-drag-handle-thickness, #{$kendo-splitter-drag-handle-thickness} );
+        position: static;
+        z-index: 1;
+    }
+
+    .k-pane > .k-splitter-overlay {
+        opacity: 0;
+        position: absolute;
+    }
+
+    // flexbox-based splitter
+
+    .k-splitter-flex {
+        display: flex;
+        width: 100%;
+        height: auto;
+
+        .k-pane {
+            position: relative;
+            flex: 1 1 auto;
+            display: block; // ie10 + flex
+            min-width: 0;
+            max-width: 100%;
+            min-height: 0;
+            max-height: 100%;
+            height: 100%; // allows nested elements to use height: 100%
+        }
+
+        .k-pane-static {
+            flex-grow: 0;
+            flex-shrink: 0;
+        }
+
+        .k-pane-flex {
+            display: flex;
+        }
+
+        .k-splitbar {
+            position: static;
+            flex: 0 0 auto;
+        }
+
+        .k-pane,
+        .k-pane-flex {
+            &.k-hidden,
+            &[hidden] {
+                // sass-lint:disable-block no-important
+                // hidden panes need to be zero-width to allow pane animation
+                flex: 0 1 0% !important;
+                overflow: hidden !important;
+                display: block !important;
+            }
+        }
+
+        &.k-splitter-horizontal {
+            flex-direction: row;
+
+            &[dir="rtl"] {
+                > .k-splitbar {
+                    > .k-collapse-next,
+                    > .k-collapse-prev {
+                        transform: scaleX(-1);
+                    }
+                }
+            }
+        }
+        &.k-splitter-vertical {
+            flex-direction: column;
+        }
+    }
+}

package/scss/splitter/_theme.scss

@@ -0,0 +1,36 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-splitter--theme() {
+
+    .k-splitter {
+        @include fill(
+            var( --kendo-splitter-text, #{$kendo-splitter-text} ),
+            var( --kendo-splitter-bg, #{$kendo-splitter-bg} ),
+            var( --kendo-splitter-border, #{$kendo-splitter-border} )
+        );
+    }
+
+    // Splitbar
+    .k-splitbar {
+        color: var( --kendo-splitbar-text, #{$kendo-splitbar-text} );
+        background-color: var( --kendo-splitbar-bg, #{$kendo-splitbar-bg} );
+    }
+    .k-splitbar:hover,
+    .k-splitbar.k-hover,
+    .k-splitbar-horizontal-hover,
+    .k-splitbar-vertical-hover {
+        color: var( --kendo-splitbar-hover-text, #{$kendo-splitbar-hover-text} );
+        background-color: var( --kendo-splitbar-hover-bg, #{$kendo-splitbar-hover-bg} );
+    }
+    .k-splitbar:focus,
+    .k-splitbar.k-focus {
+        color: var( --kendo-splitbar-selected-text, #{$kendo-splitbar-selected-text} );
+        background: var( --kendo-splitbar-selected-bg, #{$kendo-splitbar-selected-bg} );
+    }
+
+    // Ghost splitbar
+    .k-ghost-splitbar {
+        background-color: var( --kendo-splitbar-hover-bg, #{$kendo-splitbar-hover-bg} );
+    }
+}

package/scss/splitter/_variables.scss

@@ -0,0 +1,66 @@
+@use "../core/" as *;
+@use "../core/color-system" as *;
+
+/// Width of the border around the splitter.
+/// @group splitter
+$kendo-splitter-border-width: map-get( $kendo-spacing, hair ) !default;
+/// Font size of the splitter.
+/// @group splitter
+$kendo-splitter-font-size: var( --kendo-font-size, initial ) !default;
+/// Line hegiht of the splitter.
+/// @group splitter
+$kendo-splitter-line-height: var( --kendo-line-height, initial ) !default;
+/// Font family of the splitter.
+/// @group splitter
+$kendo-splitter-font-family: var( --kendo-font-family, initial ) !default;
+
+/// Background color of the splitter.
+/// @group splitter
+$kendo-splitter-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the splitter.
+/// @group splitter
+$kendo-splitter-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the splitter.
+/// @group splitter
+$kendo-splitter-border: var( --kendo-component-border, initial ) !default;
+
+/// Size of the splitter splitbar.
+/// @group splitter
+$kendo-splitter-splitbar-size: map-get( $kendo-spacing, 2 ) !default;
+/// Icon size of the splitter splitbar.
+/// @group splitter
+$kendo-splitter-resize-icon-size: calc( map-get( $kendo-spacing, 2 ) + map-get( $kendo-spacing, thin ) ) !default;
+/// Length of the splitter drag handle.
+/// @group splitter
+$kendo-splitter-drag-handle-length: map-get( $kendo-spacing, 5 ) !default;
+/// thickness of the splitter drag handle.
+/// @group splitter
+$kendo-splitter-drag-handle-thickness: map-get( $kendo-spacing, thin ) !default;
+/// Margin of the splitter drag handle icon.
+/// @group splitter
+$kendo-splitter-drag-icon-margin: calc( map-get( $kendo-spacing, 2 ) - map-get( $kendo-spacing, hair ) ) !default;
+
+/// Background color of the splitter splitbar.
+/// @group splitter
+$kendo-splitbar-bg: get-theme-color-var( neutral-10 ) !default;
+/// Text color of the splitter splitbar.
+/// @group splitter
+$kendo-splitbar-text: var( $kendo-component-text, initial ) !default;
+
+/// Hover background color of the splitter splitbar.
+/// @group splitter
+$kendo-splitbar-hover-bg: get-theme-color-var( neutral-20 ) !default;
+/// Hover text color of the splitter splitbar.
+/// @group splitter
+$kendo-splitbar-hover-text: $kendo-splitbar-text !default;
+
+/// Selected background color of the splitter splitbar.
+/// @group splitter
+$kendo-splitbar-selected-bg: var( --kendo-selected-bg, initial ) !default;
+/// Selected text color of the splitter splitbar.
+/// @group splitter
+$kendo-splitbar-selected-text: var( --kendo-selected-text, initial ) !default;
+
+/// Size of the splitter static splitbar.
+/// @group splitter
+$kendo-splitter-splitbar-static-size: map-get( $kendo-spacing, thin ) !default;

package/scss/splitter/index.scss

@@ -0,0 +1,25 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "splitter",
+    dependencies: (
+        "icon"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "splitter" ) {
+        @include kendo-splitter--layout();
+        @include kendo-splitter--theme();
+    }
+}

package/scss/stepper/_layout.scss

@@ -0,0 +1,251 @@
+@use "../core/color-system" as *;
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+
+@mixin kendo-stepper--layout() {
+
+    // Base
+    .k-stepper {
+        border-width: var( --kendo-stepper-border-width, #{$kendo-stepper-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-size: var( --kendo-stepper-font-size, #{$kendo-stepper-font-size} );
+        line-height: var( --kendo-stepper-line-height, #{$kendo-stepper-line-height} );
+        font-family: var( --kendo-stepper-font-family, #{$kendo-stepper-font-family} );
+        display: block;
+        position: relative;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+        // TODO: remove those once k-widget styles are removed. Link: https://github.com/telerik/kendo-themes/issues/1359
+        color: inherit;
+        background: none;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+
+        // Step list
+        .k-step-list {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            display: flex;
+            z-index: 1;
+        }
+
+
+        // Step
+        .k-step {
+            &.k-disabled {
+                background: transparent;
+            }
+        }
+
+
+        // Step link
+        .k-step-link {
+            outline: none;
+            color: inherit;
+            text-decoration: none;
+            white-space: nowrap;
+            display: flex;
+            align-items: center;
+            overflow: hidden;
+        }
+
+        // Step indicator
+        .k-step-indicator {
+            @include border-radius( var( --kendo-stepper-indicator-border-radius, #{$kendo-stepper-indicator-border-radius} ) );
+            margin: if( $kendo-stepper-indicator-focus-offset > 0, var( --kendo-stepper-indicator-focus-offset, #{$kendo-stepper-indicator-focus-offset} ), null );
+            width: var( --kendo-stepper-indicator-width, #{$kendo-stepper-indicator-width} );
+            height: var( --kendo-stepper-indicator-height, #{$kendo-stepper-indicator-height} );
+            border-width: var( --kendo-stepper-indicator-border-width, #{$kendo-stepper-indicator-border-width} );
+            border-style: solid;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex: none;
+            position: relative;
+            z-index: 1;
+            overflow: visible;
+            transition-property: color, background-color, border-color;
+            transition-duration: .4s;
+            transition-timing-function: ease-in-out;
+
+            &::after {
+                @include border-radius( 100% );
+                content: "";
+                border-width: var( --kendo-stepper-indicator-focus-border-width, #{$kendo-stepper-indicator-focus-border-width} );
+                border-style: solid;
+                border-color: inherit;
+                pointer-events: none;
+                display: none;
+                position: absolute;
+                inset: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
+                z-index: 2;
+            }
+        }
+
+        .k-step.k-focus,
+        .k-step-link:focus {
+            .k-step-indicator::after {
+                display: block;
+            }
+        }
+
+        .k-step.k-disabled {
+            .k-step-indicator::after {
+                display: none;
+            }
+        }
+
+
+        // Step label
+        .k-step-label {
+            max-width: clamp(100%, 10em, 100%);
+            display: inline-flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            z-index: 1;
+        }
+        .k-step-label:only-child {
+            @include border-radius( calc((var( --kendo-stepper-indicator-height, #{$kendo-stepper-indicator-height} ) + 2 * var( --kendo-stepper-indicator-border-width, #{$kendo-stepper-indicator-border-width} )) / 2) );
+            padding-inline: var( --kendo-stepper-label-padding-x, #{$kendo-stepper-label-padding-x} );
+            padding-block: var( --kendo-stepper-label-padding-y, #{$kendo-stepper-label-padding-y} );
+            border-width: 0;
+        }
+        .k-step-label .k-step-text {
+            max-width: calc( 10em - ( var( --kendo-icon-size, 1rem ) + var( --kendo-icon-spacing, .5rem ) ) );
+            flex-grow: 1;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+        .k-step-label .k-icon {
+            margin-inline-start: var( --kendo-icon-spacing, .5rem );
+        }
+
+        .k-step-current .k-step-label {
+            font-weight: bold;
+        }
+
+
+        // Optional label
+        .k-step-label-optional {
+            flex-basis: 100%;
+            font-size: var( --kendo-stepper-optional-label-font-size, #{$kendo-stepper-optional-label-font-size} );
+            font-style: var( --kendo-stepper-optional-label-font-style, #{$kendo-stepper-optional-label-font-style} );
+        }
+
+
+        .k-step-disabled,
+        .k-step.k-disabled {
+            opacity: 1;
+            pointer-events: none;
+
+            .k-step-link { cursor: default; }
+
+            .k-step-label-optional {
+                color: inherit;
+            }
+        }
+
+
+        // Progressbar
+        .k-progressbar {
+            pointer-events: none;
+            z-index: 0;
+            overflow: visible;
+        }
+
+        .k-progressbar-horizontal {
+            grid-row: 1 / -1;
+        }
+
+        .k-progressbar-vertical {
+            position: absolute;
+        }
+    }
+
+
+    // Horizontal
+    .k-step-list-horizontal {
+        flex-direction: row;
+        grid-row: 1;
+
+        .k-step {
+            flex: 1 0 auto;
+            text-align: center;
+        }
+
+        .k-step-link {
+            margin: auto;
+            max-width: 10em;
+            flex-direction: column;
+        }
+
+        // Label
+        .k-step-label {
+            text-align: center;
+        }
+        .k-step-indicator + .k-step-label {
+            margin-top: if($kendo-stepper-indicator-focus-offset > 0, calc(8px - #{$kendo-stepper-indicator-focus-offset}), 8px);
+        }
+
+        // Progressbar
+        & ~ .k-progressbar {
+            width: 100%;
+            height: var( --kendo-stepper-progressbar-size, #{$kendo-stepper-progressbar-size} );
+            top: calc(((var( --kendo-stepper-indicator-height, #{$kendo-stepper-indicator-height} ) + 2 * #{$kendo-stepper-indicator-focus-size}) / 2) + #{$kendo-stepper-indicator-focus-size} / 2);
+        }
+    }
+
+    // Vertical
+    .k-step-list-vertical {
+        flex-direction: column;
+
+        .k-step {
+            min-height: calc((var( --kendo-stepper-indicator-width, #{$kendo-stepper-indicator-width} ) + 2 * var( --kendo-stepper-indicator-border-width, #{$kendo-stepper-indicator-border-width} ) + 2 * #{$kendo-stepper-indicator-focus-size}) + 20px);
+        }
+
+        // Label
+        .k-step-label {
+            justify-content: flex-start;
+        }
+        .k-step-indicator + .k-step-label {
+            margin-inline-start: var( --kendo-stepper-label-margin-x, #{$kendo-stepper-label-margin-x} );
+        }
+
+
+        // Progressbar
+        & ~ .k-progressbar {
+            width: var( --kendo-stepper-progressbar-size, #{$kendo-stepper-progressbar-size} );
+            height: 100%;
+            min-height: 20px;
+            inset-inline-start: calc((var( --kendo-stepper-indicator-width, #{$kendo-stepper-indicator-width} ) + 2 * var( --kendo-stepper-indicator-border-width, #{$kendo-stepper-indicator-border-width} ) + 2 * #{$kendo-stepper-indicator-focus-size}) / 2);
+        }
+
+        // Inline content
+        .k-step-content {
+            height: 0;
+            overflow: hidden;
+            transition: $kendo-stepper-content-transition-property $kendo-stepper-content-transition-duration $kendo-stepper-content-transition-timing-function;
+        }
+
+        .k-step-current .k-step-content {
+            height: auto;
+            overflow: visible;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            margin-inline-start: calc( var( --kendo-stepper-indicator-width, #{$kendo-stepper-indicator-width} ) + 2 * var( --kendo-stepper-indicator-border-width, #{$kendo-stepper-indicator-border-width} ) );
+            padding-inline: var( --kendo-stepper-inline-content-padding-x, #{$kendo-stepper-inline-content-padding-x} );
+            padding-block: var( --kendo-stepper-inline-content-padding-y, #{$kendo-stepper-inline-content-padding-y} );
+        }
+    }
+}