@progress/kendo-theme-default 10.2.0-dev.0 → 10.2.0-dev.2

package/scss/spreadsheet/_theme.scss

@@ -1,215 +1,5 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-@use "../button/_variables.scss" as *;
-@use "../list/_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/spreadsheet/_theme.scss" as *;
 
-@mixin kendo-spreadsheet--theme-base() {
-
-    // Spreadsheet
-    .k-spreadsheet {
-        @include fill(
-            $kendo-spreadsheet-text,
-            $kendo-spreadsheet-bg,
-            $kendo-spreadsheet-border
-        );
-    }
-
-    // Header
-    .k-spreadsheet-header {
-        @include fill(
-            $kendo-spreadsheet-header-text,
-            $kendo-spreadsheet-header-bg,
-            $kendo-spreadsheet-header-border,
-            $kendo-spreadsheet-header-gradient
-        );
-    }
-
-    // Row / Column Headers
-    .k-spreadsheet-top-corner,
-    .k-spreadsheet-row-header,
-    .k-spreadsheet-column-header {
-        @include fill(
-            $kendo-spreadsheet-table-header-text,
-            $kendo-spreadsheet-table-header-bg,
-            $kendo-spreadsheet-table-header-border,
-            $kendo-spreadsheet-table-header-gradient
-        );
-    }
-
-    // Cell editor
-    .k-spreadsheet-cell-editor {
-        @include fill(
-            $kendo-spreadsheet-cell-editor-text,
-            $kendo-spreadsheet-cell-editor-bg,
-            $kendo-spreadsheet-cell-editor-border
-        )
-    }
-
-    // Cells
-    .k-spreadsheet-merged-cell {
-        @include fill( $bg: $kendo-spreadsheet-bg );
-    }
-    .k-spreadsheet-disabled-mask {
-        @include fill( $bg: $kendo-spreadsheet-bg );
-    }
-
-    // Selection
-    .k-spreadsheet .k-selection-full,
-    .k-spreadsheet .k-selection-partial {
-        @include fill( $bg: $kendo-spreadsheet-partial-selection-bg );
-    }
-    .k-spreadsheet-selection {
-        @include fill(
-            $kendo-spreadsheet-selection-text,
-            $kendo-spreadsheet-selection-bg,
-            $kendo-spreadsheet-selection-border
-        );
-        @include box-shadow( $kendo-spreadsheet-selection-shadow );
-    }
-    .k-spreadsheet-selection-highlight {
-        @include fill( $border: $kendo-spreadsheet-selection-border );
-    }
-    .k-spreadsheet .k-single-selection::after {
-        @include fill(
-            $kendo-spreadsheet-single-selection-text,
-            $kendo-spreadsheet-single-selection-bg,
-            $kendo-spreadsheet-single-selection-border
-        )
-    }
-    .k-spreadsheet-active-cell {
-        @include fill ( $bg: $kendo-spreadsheet-active-cell-bg );
-        @include box-shadow( $kendo-spreadsheet-active-cell-shadow );
-    }
-
-    .k-spreadsheet .k-auto-fill {
-        @include fill(
-            $kendo-spreadsheet-auto-fill-text,
-            $kendo-spreadsheet-auto-fill-bg,
-            $kendo-spreadsheet-auto-fill-border
-        );
-        @include box-shadow( $kendo-spreadsheet-auto-fill-shadow );
-    }
-    .k-spreadsheet .k-auto-fill-punch {
-        @include fill( $bg: $kendo-spreadsheet-auto-fill-punch-bg );
-    }
-
-    // Resize handle
-    .k-spreadsheet .k-resize-handle,
-    .k-spreadsheet .k-resize-hint-handle,
-    .k-spreadsheet .k-resize-hint-marker {
-        @include fill( $bg: $kendo-spreadsheet-resize-handle-bg );
-    }
-
-    // Comments
-    .k-spreadsheet-has-comment::after {
-        border-block-color: $kendo-spreadsheet-cell-comment-border transparent;
-        border-inline-color: transparent $kendo-spreadsheet-cell-comment-border;
-    }
-
-    // Validation
-    .k-spreadsheet-cell .k-dirty {
-        border-block-color: $kendo-spreadsheet-cell-dirty-border transparent;
-        border-inline-color: $kendo-spreadsheet-cell-dirty-border transparent;
-    }
-
-    // Filter button
-    .k-spreadsheet .k-filter-range {
-        border-color: $kendo-color-primary;
-    }
-    .k-spreadsheet-filter {
-        @include fill(
-            $kendo-button-text,
-            $kendo-button-bg,
-            $kendo-button-border,
-            $kendo-button-gradient
-        );
-        box-shadow: inset 0 0 0 1px $kendo-button-border;
-
-        &:hover {
-            @include fill(
-                $kendo-button-hover-text,
-                $kendo-button-hover-bg,
-                $kendo-button-hover-border,
-                $kendo-button-hover-gradient
-            );
-        }
-
-        &.k-active {
-            @include fill(
-                $kendo-button-active-text,
-                $kendo-button-active-bg,
-                $kendo-button-active-border,
-                $kendo-button-active-gradient
-            );
-        }
-    }
-
-    // Filter menu legacy - delete after new rendering adoption R3 23
-    .k-spreadsheet-filter-menu {
-        > .k-menu,
-        > .k-menu:not(.k-context-menu) {
-
-            .k-item:hover,
-            .k-item.k-hover {
-                @include fill(
-                    $kendo-list-item-hover-text,
-                    $kendo-list-item-hover-bg
-                );
-            }
-        }
-
-        .k-spreadsheet-value-treeview-wrapper {
-            @include fill(
-                $kendo-spreadsheet-text,
-                $kendo-spreadsheet-bg,
-                $kendo-spreadsheet-border
-            );
-        }
-    }
-
-    // Delete after new rendering adoption R3 23
-    .k-spreadsheet-insert-image-dialog {
-        border-color: $kendo-spreadsheet-insert-image-dialog-preview-border;
-
-        .k-spreadsheet-has-image {
-            &:hover,
-            &.k-hover {
-                box-shadow: $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow;
-            }
-
-            &:hover div,
-            &.k-hover div {
-                color: $kendo-spreadsheet-insert-image-dialog-overlay-hover-text;
-            }
-        }
-    }
-
-    // Drawing
-    .k-spreadsheet-drawing {
-        &.k-spreadsheet-active-drawing {
-            outline-color: $kendo-spreadsheet-drawing-handle-outline-color;
-        }
-
-        .k-spreadsheet-drawing-handle {
-            border-color: $kendo-spreadsheet-drawing-handle-border-color;
-            background-color: $kendo-spreadsheet-drawing-handle-bg;
-        }
-    }
-
-    .k-spreadsheet-drawing-anchor-cell {
-        background: $kendo-spreadsheet-drawing-anchor-bg;
-    }
-
-    // Formula bar
-    .k-spreadsheet-formula-list {}
-    .k-syntax-ref { color: #ff8822; }
-    .k-syntax-num { color: #0099ff; }
-    .k-syntax-str { color: #38b714; }
-    .k-syntax-error { color: red; }
-    .k-syntax-bool { color: #a9169c; }
-    .k-syntax-paren-match { background-color: #caf200; }
-
-}
 
 @mixin kendo-spreadsheet--theme() {
     @include kendo-spreadsheet--theme-base();

package/scss/spreadsheet/_variables.scss

@@ -275,3 +275,89 @@ $kendo-spreadsheet-filter-padding: k-spacing(1) !default;
 $kendo-spreadsheet-filter-menu-link-padding-x: calc( #{$kendo-icon-size} + calc( 2 * #{k-spacing(1)} ) ) !default;
 
 $kendo-spreadsheet-filter-menu-icon-margin: 0 k-spacing(1) 0 calc(-1 * ( #{$kendo-icon-size} + #{k-spacing(1)} ) ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/spreadsheet/_variables.scss" with (
+    $kendo-spreadsheet-border-width: $kendo-spreadsheet-border-width,
+    $kendo-spreadsheet-font-family: $kendo-spreadsheet-font-family,
+    $kendo-spreadsheet-font-size: $kendo-spreadsheet-font-size,
+    $kendo-spreadsheet-line-height: $kendo-spreadsheet-line-height,
+    $kendo-spreadsheet-bg: $kendo-spreadsheet-bg,
+    $kendo-spreadsheet-text: $kendo-spreadsheet-text,
+    $kendo-spreadsheet-border: $kendo-spreadsheet-border,
+    $kendo-spreadsheet-header-bg: $kendo-spreadsheet-header-bg,
+    $kendo-spreadsheet-header-text: $kendo-spreadsheet-header-text,
+    $kendo-spreadsheet-header-border: $kendo-spreadsheet-header-border,
+    $kendo-spreadsheet-header-gradient: $kendo-spreadsheet-header-gradient,
+    $kendo-spreadsheet-table-header-bg: $kendo-spreadsheet-table-header-bg,
+    $kendo-spreadsheet-table-header-text: $kendo-spreadsheet-table-header-text,
+    $kendo-spreadsheet-table-header-border: $kendo-spreadsheet-table-header-border,
+    $kendo-spreadsheet-table-header-gradient: $kendo-spreadsheet-table-header-gradient,
+    $kendo-spreadsheet-action-bar-border-width: $kendo-spreadsheet-action-bar-border-width,
+    $kendo-spreadsheet-action-bar-padding-y: $kendo-spreadsheet-action-bar-padding-y,
+    $kendo-spreadsheet-action-bar-padding-x: $kendo-spreadsheet-action-bar-padding-x,
+    $kendo-spreadsheet-action-bar-font-size: $kendo-spreadsheet-action-bar-font-size,
+    $kendo-spreadsheet-action-bar-font-family: $kendo-spreadsheet-action-bar-font-family,
+    $kendo-spreadsheet-action-bar-spacing: $kendo-spreadsheet-action-bar-spacing,
+    $kendo-spreadsheet-formula-bar-gap: $kendo-spreadsheet-formula-bar-gap,
+    $kendo-spreadsheet-formula-input-padding-x: $kendo-spreadsheet-formula-input-padding-x,
+    $kendo-spreadsheet-formula-input-padding-y: $kendo-spreadsheet-formula-input-padding-y,
+    $kendo-spreadsheet-formula-input-line-height: $kendo-spreadsheet-formula-input-line-height,
+    $kendo-spreadsheet-formula-bar-icon-padding: $kendo-spreadsheet-formula-bar-icon-padding,
+    $kendo-spreadsheet-view-font-family: $kendo-spreadsheet-view-font-family,
+    $kendo-spreadsheet-view-font-size: $kendo-spreadsheet-view-font-size,
+    $kendo-spreadsheet-selection-bg: $kendo-spreadsheet-selection-bg,
+    $kendo-spreadsheet-selection-text: $kendo-spreadsheet-selection-text,
+    $kendo-spreadsheet-selection-border: $kendo-spreadsheet-selection-border,
+    $kendo-spreadsheet-selection-shadow: $kendo-spreadsheet-selection-shadow,
+    $kendo-spreadsheet-single-selection-bg: $kendo-spreadsheet-single-selection-bg,
+    $kendo-spreadsheet-single-selection-text: $kendo-spreadsheet-single-selection-text,
+    $kendo-spreadsheet-single-selection-border: $kendo-spreadsheet-single-selection-border,
+    $kendo-spreadsheet-partial-selection-bg: $kendo-spreadsheet-partial-selection-bg,
+    $kendo-spreadsheet-active-cell-bg: $kendo-spreadsheet-active-cell-bg,
+    $kendo-spreadsheet-active-cell-shadow: $kendo-spreadsheet-active-cell-shadow,
+    $kendo-spreadsheet-auto-fill-bg: $kendo-spreadsheet-auto-fill-bg,
+    $kendo-spreadsheet-auto-fill-text: $kendo-spreadsheet-auto-fill-text,
+    $kendo-spreadsheet-auto-fill-border: $kendo-spreadsheet-auto-fill-border,
+    $kendo-spreadsheet-auto-fill-shadow: $kendo-spreadsheet-auto-fill-shadow,
+    $kendo-spreadsheet-auto-fill-punch-bg: $kendo-spreadsheet-auto-fill-punch-bg,
+    $kendo-spreadsheet-cell-padding-y: $kendo-spreadsheet-cell-padding-y,
+    $kendo-spreadsheet-cell-padding-x: $kendo-spreadsheet-cell-padding-x,
+    $kendo-spreadsheet-cell-editor-line-height: $kendo-spreadsheet-cell-editor-line-height,
+    $kendo-spreadsheet-cell-editor-padding-x: $kendo-spreadsheet-cell-editor-padding-x,
+    $kendo-spreadsheet-cell-editor-padding-y: $kendo-spreadsheet-cell-editor-padding-y,
+    $kendo-spreadsheet-cell-editor-bg: $kendo-spreadsheet-cell-editor-bg,
+    $kendo-spreadsheet-cell-editor-text: $kendo-spreadsheet-cell-editor-text,
+    $kendo-spreadsheet-cell-editor-border: $kendo-spreadsheet-cell-editor-border,
+    $kendo-spreadsheet-resize-handle-bg: $kendo-spreadsheet-resize-handle-bg,
+    $kendo-spreadsheet-cell-comment-border: $kendo-spreadsheet-cell-comment-border,
+    $kendo-spreadsheet-cell-dirty-border: $kendo-spreadsheet-cell-dirty-border,
+    $kendo-spreadsheet-sheets-bar-padding-x: $kendo-spreadsheet-sheets-bar-padding-x,
+    $kendo-spreadsheet-sheets-bar-padding-y: $kendo-spreadsheet-sheets-bar-padding-y,
+    $kendo-spreadsheet-sheets-bar-border-width: $kendo-spreadsheet-sheets-bar-border-width,
+    $kendo-spreadsheet-insert-image-dialog-border-style: $kendo-spreadsheet-insert-image-dialog-border-style,
+    $kendo-spreadsheet-insert-image-dialog-border-width: $kendo-spreadsheet-insert-image-dialog-border-width,
+    $kendo-spreadsheet-insert-image-dialog-text-margin-bottom: $kendo-spreadsheet-insert-image-dialog-text-margin-bottom,
+    $kendo-spreadsheet-insert-image-dialog-preview-width: $kendo-spreadsheet-insert-image-dialog-preview-width,
+    $kendo-spreadsheet-insert-image-dialog-preview-height: $kendo-spreadsheet-insert-image-dialog-preview-height,
+    $kendo-spreadsheet-insert-image-dialog-preview-img: $kendo-spreadsheet-insert-image-dialog-preview-img,
+    $kendo-spreadsheet-insert-image-dialog-preview-border: $kendo-spreadsheet-insert-image-dialog-preview-border,
+    $kendo-spreadsheet-insert-image-dialog-preview-border-radius: $kendo-spreadsheet-insert-image-dialog-preview-border-radius,
+    $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow,
+    $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius,
+    $kendo-spreadsheet-insert-image-dialog-overlay-hover-text: $kendo-spreadsheet-insert-image-dialog-overlay-hover-text,
+    $kendo-spreadsheet-drawing-handle-width: $kendo-spreadsheet-drawing-handle-width,
+    $kendo-spreadsheet-drawing-handle-height: $kendo-spreadsheet-drawing-handle-height,
+    $kendo-spreadsheet-drawing-handle-border-style: $kendo-spreadsheet-drawing-handle-border-style,
+    $kendo-spreadsheet-drawing-handle-border-width: $kendo-spreadsheet-drawing-handle-border-width,
+    $kendo-spreadsheet-drawing-handle-outline-color: $kendo-spreadsheet-drawing-handle-outline-color,
+    $kendo-spreadsheet-drawing-handle-border-color: $kendo-spreadsheet-drawing-handle-border-color,
+    $kendo-spreadsheet-drawing-handle-bg: $kendo-spreadsheet-drawing-handle-bg,
+    $kendo-spreadsheet-drawing-handle-border-radius: $kendo-spreadsheet-drawing-handle-border-radius,
+    $kendo-spreadsheet-drawing-outline-style: $kendo-spreadsheet-drawing-outline-style,
+    $kendo-spreadsheet-drawing-outline-width: $kendo-spreadsheet-drawing-outline-width,
+    $kendo-spreadsheet-drawing-anchor-bg: $kendo-spreadsheet-drawing-anchor-bg,
+    $kendo-spreadsheet-dropzone-spacing-y: $kendo-spreadsheet-dropzone-spacing-y,
+    $kendo-spreadsheet-filter-padding: $kendo-spreadsheet-filter-padding,
+    $kendo-spreadsheet-filter-menu-link-padding-x: $kendo-spreadsheet-filter-menu-link-padding-x,
+    $kendo-spreadsheet-filter-menu-icon-margin: $kendo-spreadsheet-filter-menu-icon-margin
+);

package/scss/stacklayout/_layout.scss

@@ -1,9 +1,5 @@
-@mixin kendo-stack-layout--layout-base() {
+@use "@progress/kendo-theme-core/scss/components/stacklayout/_layout.scss" as *;
 
-    // StackLayout
-    .k-stack-layout {}
-
-}
 
 @mixin kendo-stack-layout--layout() {
     @include kendo-stack-layout--layout-base();

package/scss/stacklayout/_theme.scss

@@ -1,9 +1,5 @@
-@mixin kendo-stack-layout--theme-base() {
+@use "@progress/kendo-theme-core/scss/components/stacklayout/_theme.scss" as *;
 
-    // StackLayout
-    .k-stack-layout {}
-
-}
 
 @mixin kendo-stack-layout--theme() {
     @include kendo-stack-layout--theme-base();

package/scss/stepper/_layout.scss

@@ -1,294 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-@use "../icons/_variables.scss" as *;
-
-@mixin kendo-stepper--layout-base() {
-
-    // Base
-    .k-stepper {
-        margin-block: $kendo-stepper-margin-y;
-        margin-inline: $kendo-stepper-margin-x;
-        padding-block: $kendo-stepper-padding-y;
-        padding-inline: $kendo-stepper-padding-x;
-        border-width: $kendo-stepper-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-size: $kendo-stepper-font-size;
-        line-height: $kendo-stepper-line-height;
-        font-family: $kendo-stepper-font-family;
-        display: block;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-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;
-            position: relative;
-            z-index: 1;
-        }
-
-
-        // Step
-        .k-step { }
-
-
-        // 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( $kendo-stepper-indicator-border-radius );
-            margin: if($kendo-stepper-indicator-focus-offset > 0, $kendo-stepper-indicator-focus-offset, null);
-            width: $kendo-stepper-indicator-width;
-            height: $kendo-stepper-indicator-height;
-            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;
-
-            &::before {
-                @include border-radius( $kendo-stepper-indicator-border-radius );
-                content: "";
-                width: 100%;
-                height: 100%;
-                position: absolute;
-                top: 0;
-                left: 0;
-                z-index: -1;
-            }
-
-            &::after {
-                @include border-radius( 100% );
-                content: "";
-                border-width: $kendo-stepper-indicator-focus-border-width;
-                border-style: solid;
-                border-color: inherit;
-                pointer-events: none;
-                display: none;
-                position: absolute;
-                top: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
-                right: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
-                bottom: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
-                left: 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;
-            }
-        }
-
-
-        // 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( $kendo-stepper-label-border-radius );
-            padding-block: $kendo-stepper-label-padding-y;
-            padding-inline: $kendo-stepper-label-padding-x;
-            border-width: 0;
-        }
-        .k-step-label .k-step-text {
-            max-width: calc(10em - (#{$kendo-icon-size} + #{$kendo-icon-spacing}));
-            flex-grow: 1;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
-        .k-step-label .k-icon  {
-            margin-left: $kendo-icon-spacing;
-        }
-
-        .k-step-current .k-step-label {
-            font-weight: bold;
-        }
-
-
-        // Optional label
-        .k-step-label-optional {
-            flex-basis: 100%;
-            font-size: $kendo-stepper-optional-label-font-size;
-            font-style: $kendo-stepper-optional-label-font-style;
-            opacity: $kendo-stepper-optional-label-opacity;
-        }
-
-
-        .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, k-spacing(1), 8px);
-        }
-
-        // Progressbar
-        & ~ .k-progressbar {
-            width: 100%;
-            height: $kendo-stepper-progressbar-size;
-            top: calc(((#{$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((#{$kendo-stepper-indicator-width} + 2 * #{$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-left: $kendo-stepper-label-margin-x;
-        }
-
-
-        // Progressbar
-        & ~ .k-progressbar {
-            width: $kendo-stepper-progressbar-size;
-            height: 100%;
-            min-height: 20px;
-            left: calc((#{$kendo-stepper-indicator-width} + 2 * #{$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-left: $kendo-stepper-indicator-width + 2 * $kendo-stepper-indicator-border-width;
-            padding-block: $kendo-stepper-inline-content-padding-x;
-            padding-inline: $kendo-stepper-inline-content-padding-y;
-        }
-    }
-
-
-    // Stepper rtl
-    .k-rtl .k-stepper,
-    .k-stepper[dir="rtl"] {
-        direction: rtl;
-
-        .k-step-label .k-icon {
-            margin-left: 0;
-            margin-right: $kendo-icon-spacing;
-        }
-
-        // Horizontal
-        .k-step-list-horizontal { }
-
-
-        // Vertical
-        .k-step-list-vertical {
-            .k-step-indicator + .k-step-label {
-                margin-left: 0;
-                margin-right: $kendo-stepper-label-margin-x;
-            }
-
-            & ~ .k-progressbar {
-                left: auto;
-                right: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2);
-            }
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/stepper/_layout.scss" as *;
 
 
 @mixin kendo-stepper--layout() {