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

package/scss/stepper/_layout.scss

@@ -1,268 +1,22 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/stepper/_layout.scss" as *;
 
 @mixin kendo-stepper--layout() {
+    @include kendo-stepper--layout-base();
 
-    // 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: $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;
-            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;
-
-            &::before {
-                @include border-radius( var( --kendo-stepper-indicator-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: 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 {
-                border: 0;
-
-                &::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( var( --kendo-stepper-label-border-radius, #{$kendo-stepper-label-border-radius} ) );
-            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: var( --kendo-stepper-current-label-font-weight, #{$kendo-stepper-current-label-font-weight} );
-        }
-
-
-        // 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 {
-            pointer-events: none;
-
-            .k-step-link { cursor: default; }
-
-            .k-step-label-optional {
-                color: inherit;
-            }
-
-            .k-step-label {
-                font-weight: normal;
-            }
-        }
-
-
-        // 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: 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);
-        }
+    .k-step-current .k-step-label {
+        font-weight: $kendo-stepper-current-label-font-weight;
     }
 
-    // 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-stepper .k-step-disabled,
+    .k-stepper .k-step.k-disabled {
         .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;
+            font-weight: normal;
         }
 
-        .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} );
+        .k-step-indicator {
+            border: 0;
         }
     }
 }

package/scss/stepper/_theme.scss

@@ -1,204 +1,22 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/stepper/_theme.scss" as *;
 
 @mixin kendo-stepper--theme() {
+    @include kendo-stepper--theme-base();
 
-    // Base
     .k-stepper {
-        @include fill(
-            var( --kendo-stepper-text, #{$kendo-stepper-text} ),
-            var( --kendo-stepper-bg, #{$kendo-stepper-bg} ),
-            var( --kendo-stepper-border, #{$kendo-stepper-border} )
-        );
-
-
-        // Not done steps
         .k-step {
-            // Hover
-            &:hover,
-            &.k-hover {
-                .k-step-label {
-                    color: var( --kendo-stepper-label-hover-text, #{$kendo-stepper-label-hover-text} );
-                }
-
-                .k-step-indicator {
-                    @include fill(
-                        var( --kendo-stepper-indicator-hover-text, #{$kendo-stepper-indicator-hover-text} ),
-                        var( --kendo-stepper-indicator-hover-bg, #{$kendo-stepper-indicator-hover-bg} ),
-                        var( --kendo-stepper-indicator-hover-border, #{$kendo-stepper-indicator-hover-border} )
-                    );
-                }
-            }
-
             &.k-focus,
             .k-step-link:focus  {
-                // Labels only
                 .k-step-label:only-child {
-                    @include box-shadow( inset 0 0 0 var( --kendo-stepper-indicator-focus-size, #{$kendo-stepper-indicator-focus-size} ) color-mix(in srgb, k-color(border) 16%, transparent) );
+                    @include box-shadow( inset 0 0 0 $kendo-stepper-indicator-focus-size color-mix(in srgb, k-color(border) 16%, transparent) );
                 }
             }
 
-            // Disabled
-            &:disabled,
             &.k-disabled {
-                .k-step-indicator {
-                    @include fill(
-                        var( --kendo-stepper-indicator-disabled-text, #{$kendo-stepper-indicator-disabled-text} ),
-                        k-color(app-surface),
-                        var( --kendo-stepper-indicator-disabled-border, #{$kendo-stepper-indicator-disabled-border} )
-                    );
-
-                    &::before {
-                        background-color: var( --kendo-stepper-indicator-disabled-bg, #{$kendo-stepper-indicator-disabled-bg} );
-                    }
-                }
-
-                .k-step-label {
-                    @include fill( $color: var( --kendo-stepper-label-disabled-text, #{$kendo-stepper-label-disabled-text} ) );
-                }
+                background: transparent;
             }
         }
-        .k-step-indicator {
-            @include fill(
-                var( --kendo-stepper-indicator-text, #{$kendo-stepper-indicator-text} ),
-                var( --kendo-stepper-indicator-bg, #{$kendo-stepper-indicator-bg} ),
-                var( --kendo-stepper-indicator-border, #{$kendo-stepper-indicator-border} )
-            );
-        }
-        .k-step-indicator::after {
-            @include box-shadow( inset 0 0 0 var( --kendo-stepper-indicator-focus-size, #{$kendo-stepper-indicator-focus-size} ) k-color(surface-alt) );
-        }
-        .k-step-label:only-child {
-            @include fill(
-                k-color(on-app-surface),
-                k-color(surface-alt),
-                color-mix(in srgb, k-color(border) 16%, transparent)
-            );
-        }
-
-
-        // Done steps
-        .k-step-done {
-
-            .k-step-indicator {
-                @include fill(
-                    var( --kendo-stepper-indicator-done-text, #{$kendo-stepper-indicator-done-text} ),
-                    var( --kendo-stepper-indicator-done-bg, #{$kendo-stepper-indicator-done-bg} ),
-                    var( --kendo-stepper-indicator-done-border, #{$kendo-stepper-indicator-done-border} )
-                );
-            }
-
-
-            // Hover
-            &:hover,
-            &.k-hover,
-            &.k-step-hover {
-                .k-step-indicator {
-                    @include fill(
-                        var( --kendo-stepper-indicator-done-hover-text, #{$kendo-stepper-indicator-done-hover-text} ),
-                        var( --kendo-stepper-indicator-done-hover-bg, #{$kendo-stepper-indicator-done-hover-bg} ),
-                        var( --kendo-stepper-indicator-done-hover-border, #{$kendo-stepper-indicator-done-hover-border} )
-                    );
-                }
-            }
-
-
-            // Disabled
-            &.k-step-disabled,
-            &.k-disabled,
-            &:disabled {
-                .k-step-indicator {
-                    @include fill(
-                        var( --kendo-stepper-indicator-done-disabled-text, #{$kendo-stepper-indicator-done-disabled-text} ),
-                        k-color(app-surface ),
-                        var( --kendo-stepper-indicator-done-disabled-border, #{$kendo-stepper-indicator-done-disabled-border} )
-                    );
-
-                    &::before {
-                        background-color: var( --kendo-stepper-indicator-done-disabled-bg, #{$kendo-stepper-indicator-done-disabled-bg} );
-                    }
-                }
-
-                .k-step-label {
-                    @include fill( $color: var( --kendo-stepper-label-disabled-text, #{$kendo-stepper-label-disabled-text} ) );
-                }
-            }
-        }
-
-
-        // Current
-        .k-step-current {
-
-            .k-step-indicator {
-                @include fill(
-                    var( --kendo-stepper-indicator-current-text, #{$kendo-stepper-indicator-current-text} ),
-                    var( --kendo-stepper-indicator-current-bg, #{$kendo-stepper-indicator-current-bg} ),
-                    var( --kendo-stepper-indicator-current-border, #{$kendo-stepper-indicator-current-border} )
-                );
-            }
-
-
-            // Hover
-            &:hover,
-            &.k-hover,
-            &.k-step-hover {
-                .k-step-indicator {
-                    @include fill(
-                        var( --kendo-stepper-indicator-current-hover-text, #{$kendo-stepper-indicator-current-hover-text} ),
-                        var( --kendo-stepper-indicator-current-hover-bg, #{$kendo-stepper-indicator-current-hover-bg} ),
-                        var( --kendo-stepper-indicator-current-hover-border, #{$kendo-stepper-indicator-current-hover-border} )
-                    );
-                }
-            }
-
-
-            // Disabled
-            &.k-step-disabled,
-            &.k-disabled,
-            &:disabled {
-                .k-step-indicator {
-                    @include fill(
-                        var( --kendo-stepper-indicator-current-disabled-text, #{$kendo-stepper-indicator-current-disabled-text} ),
-                        k-color(app-surface),
-                        var( --kendo-stepper-indicator-current-disabled-border, #{$kendo-stepper-indicator-current-disabled-border} )
-                    );
-
-                    &::before {
-                        background-color: var( --kendo-stepper-indicator-current-disabled-bg, #{$kendo-stepper-indicator-current-disabled-bg} );
-                    }
-                }
-            }
-        }
-
-        // Label
-        .k-step-label {
-            @include fill( $color: var( --kendo-stepper-label-text, #{$kendo-stepper-label-text} ) );
-        }
-        .k-step-success .k-step-label .k-icon {
-            @include fill( $color: var( --kendo-stepper-label-success-text, #{$kendo-stepper-label-success-text} ) );
-        }
-        .k-step-error .k-step-label {
-            @include fill( $color: var( --kendo-stepper-label-error-text, #{$kendo-stepper-label-error-text} ) );
-        }
-
-        .k-step-error {
-            .k-step-label {
-                @include fill( $color: var( --kendo-stepper-label-error-text, #{$kendo-stepper-label-error-text} ) );
-            }
-
-            &:hover,
-            &.k-hover,
-            &.k-step-hover {
-                .k-step-label {
-                    @include fill( $color: var( --kendo-stepper-label-error-text, #{$kendo-stepper-label-error-text} ) );
-                }
-            }
-        }
-
-        // Optional Label
-        .k-step-label-optional {
-            color: var( --kendo-stepper-optional-label-text, #{$kendo-stepper-optional-label-text} );
-        }
     }
-
 }