@progress/kendo-theme-fluent 5.7.0

package/scss/wizard/_layout.scss

@@ -0,0 +1,128 @@
+@use "_variables.scss" as *;
+@use "../core/color-system" as *;
+
+@mixin kendo-wizard--layout() {
+
+    .k-wizard {
+        padding-inline: var( --kendo-wizard-padding-x, #{$kendo-wizard-padding-x} );
+        padding-block: var( --kendo-wizard-padding-y, #{$kendo-wizard-padding-y} );
+        border-width: var( --kendo-wizard-border-width, #{$kendo-wizard-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-size: var( --kendo-wizard-font-size, #{$kendo-wizard-font-size} );
+        line-height: var( --kendo-wizard-line-height, #{$kendo-wizard-line-height} );
+        font-family: var( --kendo-wizard-font-family, #{$kendo-wizard-font-family} );
+        position: relative;
+        color: inherit;
+        background: none;
+        display: flex;
+        align-items: stretch;
+        overflow: hidden;
+
+        .k-wizard-steps {
+            box-sizing: border-box;
+            display: flex;
+            overflow: hidden;
+        }
+
+        .k-wizard-step {
+            box-sizing: border-box;
+            padding-inline: var( --kendo-wizard-content-padding-x, #{$kendo-wizard-content-padding-x} );
+            padding-block: var( --kendo-wizard-content-padding-y, #{$kendo-wizard-content-padding-y} );
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            justify-content: space-between;
+
+            &:focus,
+            &.k-focus {
+                outline-width: 1px;
+                outline-style: solid;
+                outline-offset: -1px;
+            }
+        }
+
+        .k-wizard-content {
+            padding-inline: var( --kendo-wizard-content-padding-x, #{$kendo-wizard-content-padding-x} );
+            padding-block: var( --kendo-wizard-content-padding-y, #{$kendo-wizard-content-padding-x} );
+            box-sizing: border-box;
+            overflow-y: auto;
+        }
+
+        .k-wizard-buttons {
+            margin-block-start: var( --kendo-wizard-buttons-margin-y, #{$kendo-wizard-buttons-margin-y} );
+            box-sizing: border-box;
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: space-between;
+            flex-shrink: 0;
+
+            .k-button {
+                margin-inline-end: var( --kendo-wizard-buttons-margin-x, #{$kendo-wizard-buttons-margin-x} );
+            }
+
+            .k-wizard-pager {
+                vertical-align: middle;
+            }
+        }
+
+        .k-wizard-buttons-right {
+            .k-button:last-of-type {
+                margin-inline-end: 0;
+            }
+        }
+
+        .k-stepper {
+            .k-step-list-vertical {
+                .k-step {
+                    flex: 1 0 auto;
+                }
+            }
+
+            .k-step-indicator {
+                flex-shrink: 0;
+            }
+        }
+    }
+
+    .k-wizard-horizontal {
+        flex-direction: column;
+
+        .k-wizard-steps {
+            margin-block-start: var( --kendo-wizard-content-padding-y, #{$kendo-wizard-content-padding-y} );
+        }
+
+        .k-wizard-steps,
+        .k-wizard-content {
+            flex: 1 1 auto;
+        }
+    }
+
+    .k-wizard-vertical {
+
+        .k-wizard-steps {
+            flex: 1 0 0%;
+        }
+
+        .k-wizard-content {
+            flex: 1 1 0%;
+        }
+
+        .k-wizard-steps {
+            margin-inline-start: var( --kendo-wizard-steps-padding-x, #{$kendo-wizard-steps-padding-x} );
+        }
+    }
+
+    .k-wizard-left {
+        flex-direction: row-reverse;
+
+        .k-wizard-steps {
+            margin-inline-end: var( --kendo-wizard-content-padding-x, #{$kendo-wizard-content-padding-x} );
+            margin-inline-start: 0;
+        }
+    }
+
+}

package/scss/wizard/_theme.scss

@@ -0,0 +1,21 @@
+@use "../core/color-system" as *;
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+
+@mixin kendo-wizard--theme() {
+
+    .k-wizard-step {
+        .k-wizard-content {
+            @include fill(
+                var( --kendo-wizard-content-text, #{$kendo-wizard-content-text} ),
+                var( --kendo-wizard-content-bg, #{$kendo-wizard-content-bg} )
+            );
+        }
+
+        &:focus,
+        &.k-focus {
+            outline-color: var( --kendo-wizard-step-border-focused, #{$kendo-wizard-step-border-focused} );
+        }
+    }
+
+}

package/scss/wizard/_variables.scss

@@ -0,0 +1,54 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Border width of the wizard.
+/// @group wizard
+$kendo-wizard-border-width: 0px !default;
+/// Horizontal padding of the wizard.
+/// @group wizard
+$kendo-wizard-padding-x: map-get( $kendo-spacing, 6 ) !default;
+/// Vertical padding of the wizard.
+/// @group wizard
+$kendo-wizard-padding-y: map-get( $kendo-spacing, 6 ) !default;
+/// Font size of the wizard.
+/// @group wizard
+$kendo-wizard-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the wizard.
+/// @group wizard
+$kendo-wizard-line-height: var( --kendo-line-height, normal ) !default;
+/// Font family of the wizard.
+/// @group wizard
+$kendo-wizard-font-family: var( --kendo-font-family, inherit ) !default;
+
+
+/// Horizontal padding of the wizard steps.
+/// @group wizard
+$kendo-wizard-steps-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the wizard steps.
+/// @group wizard
+$kendo-wizard-steps-padding-y: map-get( $kendo-spacing, 3 ) !default;
+
+/// Horizontal padding of the wizard content.
+/// @group wizard
+$kendo-wizard-content-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the wizard content.
+/// @group wizard
+$kendo-wizard-content-padding-y: map-get( $kendo-spacing, 3 ) !default;
+/// Text color of the wizard content.
+/// @group wizard
+$kendo-wizard-content-text: var( --kendo-component-text, initial ) !default;
+/// Background color of the wizard content.
+/// @group wizard
+$kendo-wizard-content-bg: var( --kendo-component-bg, initial ) !default;
+
+/// Horizontal margin of the wizard buttons container.
+/// @group wizard
+$kendo-wizard-buttons-margin-x: map-get( $kendo-spacing, 7 ) !default;
+/// Vertical margin of the wizard buttons container.
+/// @group wizard
+$kendo-wizard-buttons-margin-y: map-get( $kendo-spacing, 6 ) !default;
+
+/// Outline of the focused wizard step.
+/// @group wizard
+$kendo-wizard-step-border-focused: get-theme-color-var( neutral-130 ) !default;
+

package/scss/wizard/index.scss

@@ -0,0 +1,27 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "wizard",
+    dependencies: (
+        "button",
+        "icon",
+        "stepper"
+    )
+);
+
+
+// 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( "wizard" ) {
+        @include kendo-wizard--layout();
+        @include kendo-wizard--theme();
+    }
+}