@progress/kendo-theme-default 10.2.0-dev.1 → 10.2.0-dev.3

package/scss/stepper/_theme.scss

@@ -1,241 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-stepper--theme-base() {
-
-    // Base
-    .k-stepper {
-        @include fill(
-            $kendo-stepper-text,
-            $kendo-stepper-bg,
-            $kendo-stepper-border
-        );
-
-
-        // Not done steps
-        .k-step {
-            // Hover
-            &:hover,
-            &.k-hover,
-            &.k-step-hover {
-                .k-step-label {
-                    color: $kendo-stepper-label-hover-text;
-                }
-
-                .k-step-indicator {
-                    @include fill(
-                        $kendo-stepper-indicator-hover-text,
-                        $kendo-stepper-indicator-hover-bg,
-                        $kendo-stepper-indicator-hover-border
-                    );
-                }
-            }
-
-            &.k-focus,
-            .k-step-link:focus  {
-                // Labels only
-                .k-step-label:only-child {
-                    @include focus-indicator( $indicator: ( inset 0 0 0 $kendo-stepper-indicator-focus-size $kendo-component-border ), $inset: true );
-                }
-            }
-
-            // Disabled
-            &.k-step-disabled,
-            &.k-disabled,
-            &:disabled {
-                .k-step-indicator {
-                    @if($kendo-enable-color-system) {
-                        @include fill(
-                            $kendo-stepper-indicator-disabled-text,
-                            k-color( app-surface ),
-                            $kendo-stepper-indicator-disabled-border
-                        );
-
-                        &::before {
-                            background-color: $kendo-stepper-indicator-disabled-bg;
-                        }
-                    } @else {
-                        @include fill(
-                            $kendo-stepper-indicator-disabled-text,
-                            $kendo-stepper-indicator-disabled-bg,
-                            $kendo-stepper-indicator-disabled-border
-                        );
-                    }
-                }
-
-                .k-step-label {
-                    @include fill( $color: $kendo-stepper-label-disabled-text );
-                }
-            }
-        }
-        .k-step-indicator {
-            @include fill(
-                $kendo-stepper-indicator-text,
-                $kendo-stepper-indicator-bg,
-                $kendo-stepper-indicator-border
-            );
-        }
-        .k-step-indicator::after {
-            @include box-shadow( inset 0 0 0 $kendo-stepper-indicator-focus-size $kendo-component-bg );
-        }
-        .k-step-label:only-child {
-            @include fill(
-                $kendo-component-text,
-                $kendo-component-bg,
-                $kendo-component-border
-            );
-        }
-
-
-        // Done steps
-        .k-step-done {
-
-            .k-step-indicator {
-                @include fill(
-                    $kendo-stepper-indicator-done-text,
-                    $kendo-stepper-indicator-done-bg,
-                    $kendo-stepper-indicator-done-border
-                );
-            }
-
-
-            // Hover
-            &:hover,
-            &.k-hover,
-            &.k-step-hover {
-                .k-step-indicator {
-                    @include fill(
-                        $kendo-stepper-indicator-done-hover-text,
-                        $kendo-stepper-indicator-done-hover-bg,
-                        $kendo-stepper-indicator-done-hover-border
-                    );
-                }
-            }
-
-
-            // Disabled
-            &.k-step-disabled,
-            &.k-disabled,
-            &:disabled {
-                .k-step-indicator {
-                    @if($kendo-enable-color-system) {
-                        @include fill(
-                            $kendo-stepper-indicator-done-disabled-text,
-                            k-color( app-surface ),
-                            $kendo-stepper-indicator-done-disabled-border
-                        );
-
-                        &::before {
-                            background-color: $kendo-stepper-indicator-done-disabled-bg;
-                        }
-                    } @else {
-                        @include fill(
-                            $kendo-stepper-indicator-done-disabled-text,
-                            $kendo-stepper-indicator-done-disabled-bg,
-                            $kendo-stepper-indicator-done-disabled-border
-                        );
-                    }
-                }
-            }
-        }
-
-
-        // Current
-        .k-step-current {
-
-            .k-step-indicator {
-                @include fill(
-                    $kendo-stepper-indicator-current-text,
-                    $kendo-stepper-indicator-current-bg,
-                    $kendo-stepper-indicator-current-border
-                );
-            }
-
-
-            // Hover
-            &:hover,
-            &.k-hover,
-            &.k-step-hover {
-                .k-step-indicator {
-                    @include fill(
-                        $kendo-stepper-indicator-current-hover-text,
-                        $kendo-stepper-indicator-current-hover-bg,
-                        $kendo-stepper-indicator-current-hover-border
-                    );
-                }
-            }
-
-
-            // Disabled
-            &.k-step-disabled,
-            &.k-disabled,
-            &:disabled {
-                .k-step-indicator {
-                    @if($kendo-enable-color-system) {
-                        @include fill(
-                            $kendo-stepper-indicator-current-disabled-text,
-                            k-color( app-surface ),
-                            $kendo-stepper-indicator-current-disabled-border
-                        );
-
-                        &::before {
-                            background-color: $kendo-stepper-indicator-current-disabled-bg;
-                        }
-                    } @else {
-                        @include fill(
-                            $kendo-stepper-indicator-current-disabled-text,
-                            $kendo-stepper-indicator-current-disabled-bg,
-                            $kendo-stepper-indicator-current-disabled-border
-                        );
-                    }
-                }
-            }
-        }
-
-        // Label
-        .k-step-label {
-            @include fill( $color: $kendo-stepper-label-text );
-        }
-        .k-step-success .k-step-label .k-icon {
-            @include fill( $color: $kendo-stepper-label-success-text );
-        }
-
-        .k-step-error {
-            .k-step-label {
-                @include fill( $color: $kendo-stepper-label-error-text );
-            }
-
-            &:hover,
-            &.k-hover,
-            &.k-step-hover {
-                .k-step-label {
-                    @include fill( $color: $kendo-stepper-label-error-text );
-                }
-            }
-        }
-
-        // Optional Label
-        .k-step-label-optional {
-            color: $kendo-stepper-optional-label-text;
-        }
-
-        // Progressbar
-        .k-progressbar {
-            @include fill(
-                $color: $kendo-stepper-progressbar-text,
-                $bg: $kendo-stepper-progressbar-bg
-            );
-
-            .k-selected {
-                @include fill(
-                    $color: $kendo-stepper-progressbar-fill-text,
-                    $bg: $kendo-stepper-progressbar-fill-bg
-                );
-            }
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/stepper/_theme.scss" as *;
 
 
 @mixin kendo-stepper--theme() {

package/scss/stepper/_variables.scss

@@ -229,3 +229,75 @@ $kendo-stepper-content-transition-duration: 300ms !default;
 /// The timing function of the Stepper transition.
 /// @group stepper
 $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !default;
+
+@forward "@progress/kendo-theme-core/scss/components/stepper/_variables.scss" with (
+    $kendo-stepper-margin-x: $kendo-stepper-margin-x,
+    $kendo-stepper-margin-y: $kendo-stepper-margin-y,
+    $kendo-stepper-padding-x: $kendo-stepper-padding-x,
+    $kendo-stepper-padding-y: $kendo-stepper-padding-y,
+    $kendo-stepper-label-margin-x: $kendo-stepper-label-margin-x,
+    $kendo-stepper-label-padding-x: $kendo-stepper-label-padding-x,
+    $kendo-stepper-label-padding-y: $kendo-stepper-label-padding-y,
+    $kendo-stepper-label-border-radius: $kendo-stepper-label-border-radius,
+    $kendo-stepper-border-width: $kendo-stepper-border-width,
+    $kendo-stepper-inline-content-padding-x: $kendo-stepper-inline-content-padding-x,
+    $kendo-stepper-inline-content-padding-y: $kendo-stepper-inline-content-padding-y,
+    $kendo-stepper-font-size: $kendo-stepper-font-size,
+    $kendo-stepper-line-height: $kendo-stepper-line-height,
+    $kendo-stepper-font-family: $kendo-stepper-font-family,
+    $kendo-stepper-bg: $kendo-stepper-bg,
+    $kendo-stepper-text: $kendo-stepper-text,
+    $kendo-stepper-border: $kendo-stepper-border,
+    $kendo-stepper-indicator-width: $kendo-stepper-indicator-width,
+    $kendo-stepper-indicator-height: $kendo-stepper-indicator-height,
+    $kendo-stepper-indicator-border-width: $kendo-stepper-indicator-border-width,
+    $kendo-stepper-indicator-border-radius: $kendo-stepper-indicator-border-radius,
+    $kendo-stepper-indicator-focus-border-width: $kendo-stepper-indicator-focus-border-width,
+    $kendo-stepper-indicator-focus-size: $kendo-stepper-indicator-focus-size,
+    $kendo-stepper-indicator-focus-offset: $kendo-stepper-indicator-focus-offset,
+    $kendo-stepper-indicator-focus-calc-offset: $kendo-stepper-indicator-focus-calc-offset,
+    $kendo-stepper-indicator-bg: $kendo-stepper-indicator-bg,
+    $kendo-stepper-indicator-text: $kendo-stepper-indicator-text,
+    $kendo-stepper-indicator-border: $kendo-stepper-indicator-border,
+    $kendo-stepper-indicator-hover-bg: $kendo-stepper-indicator-hover-bg,
+    $kendo-stepper-indicator-hover-text: $kendo-stepper-indicator-hover-text,
+    $kendo-stepper-indicator-hover-border: $kendo-stepper-indicator-hover-border,
+    $kendo-stepper-indicator-disabled-bg: $kendo-stepper-indicator-disabled-bg,
+    $kendo-stepper-indicator-disabled-text: $kendo-stepper-indicator-disabled-text,
+    $kendo-stepper-indicator-disabled-border: $kendo-stepper-indicator-disabled-border,
+    $kendo-stepper-indicator-done-bg: $kendo-stepper-indicator-done-bg,
+    $kendo-stepper-indicator-done-text: $kendo-stepper-indicator-done-text,
+    $kendo-stepper-indicator-done-border: $kendo-stepper-indicator-done-border,
+    $kendo-stepper-indicator-done-hover-bg: $kendo-stepper-indicator-done-hover-bg,
+    $kendo-stepper-indicator-done-hover-text: $kendo-stepper-indicator-done-hover-text,
+    $kendo-stepper-indicator-done-hover-border: $kendo-stepper-indicator-done-hover-border,
+    $kendo-stepper-indicator-done-disabled-bg: $kendo-stepper-indicator-done-disabled-bg,
+    $kendo-stepper-indicator-done-disabled-text: $kendo-stepper-indicator-done-disabled-text,
+    $kendo-stepper-indicator-done-disabled-border: $kendo-stepper-indicator-done-disabled-border,
+    $kendo-stepper-indicator-current-bg: $kendo-stepper-indicator-current-bg,
+    $kendo-stepper-indicator-current-text: $kendo-stepper-indicator-current-text,
+    $kendo-stepper-indicator-current-border: $kendo-stepper-indicator-current-border,
+    $kendo-stepper-indicator-current-hover-bg: $kendo-stepper-indicator-current-hover-bg,
+    $kendo-stepper-indicator-current-hover-text: $kendo-stepper-indicator-current-hover-text,
+    $kendo-stepper-indicator-current-hover-border: $kendo-stepper-indicator-current-hover-border,
+    $kendo-stepper-indicator-current-disabled-bg: $kendo-stepper-indicator-current-disabled-bg,
+    $kendo-stepper-indicator-current-disabled-text: $kendo-stepper-indicator-current-disabled-text,
+    $kendo-stepper-indicator-current-disabled-border: $kendo-stepper-indicator-current-disabled-border,
+    $kendo-stepper-label-text: $kendo-stepper-label-text,
+    $kendo-stepper-label-success-text: $kendo-stepper-label-success-text,
+    $kendo-stepper-label-error-text: $kendo-stepper-label-error-text,
+    $kendo-stepper-label-hover-text: $kendo-stepper-label-hover-text,
+    $kendo-stepper-label-disabled-text: $kendo-stepper-label-disabled-text,
+    $kendo-stepper-optional-label-text: $kendo-stepper-optional-label-text,
+    $kendo-stepper-optional-label-opacity: $kendo-stepper-optional-label-opacity,
+    $kendo-stepper-optional-label-font-size: $kendo-stepper-optional-label-font-size,
+    $kendo-stepper-optional-label-font-style: $kendo-stepper-optional-label-font-style,
+    $kendo-stepper-progressbar-size: $kendo-stepper-progressbar-size,
+    $kendo-stepper-progressbar-bg: $kendo-stepper-progressbar-bg,
+    $kendo-stepper-progressbar-text: $kendo-stepper-progressbar-text,
+    $kendo-stepper-progressbar-fill-bg: $kendo-stepper-progressbar-fill-bg,
+    $kendo-stepper-progressbar-fill-text: $kendo-stepper-progressbar-fill-text,
+    $kendo-stepper-content-transition-property: $kendo-stepper-content-transition-property,
+    $kendo-stepper-content-transition-duration: $kendo-stepper-content-transition-duration,
+    $kendo-stepper-content-transition-timing-function: $kendo-stepper-content-transition-timing-function
+);

package/scss/switch/_layout.scss

@@ -1,162 +1,4 @@
-@use "sass:map";
-@use "sass:math";
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-switch--layout-base() {
-
-    .k-switch {
-        box-sizing: border-box;
-        font-family: $kendo-switch-font-family;
-        outline: 0;
-        display: inline-flex;
-        align-items: center;
-        vertical-align: middle;
-        line-height: 1;
-        position: relative;
-        cursor: pointer;
-        user-select: none;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        [type="checkbox"] {
-            display: none;
-        }
-
-        &[aria-readonly="true"] {
-            pointer-events: none;
-        }
-    }
-
-
-    // Readonly
-    .k-switch.k-readonly {
-        pointer-events: none;
-    }
-
-
-    // Switch track
-    .k-switch-track {
-        border-width: $kendo-switch-track-border-width;
-        border-style: if( $kendo-switch-track-border-width == null, null, solid );
-        outline: 0;
-        display: flex;
-        flex-flow: row nowrap;
-        flex: 1 0 auto;
-        position: relative;
-        transition: background-color 200ms ease-in-out;
-    }
-
-
-    // Switch thumb
-    .k-switch-thumb-wrap {
-        width: 0;
-        height: 0;
-        overflow: visible;
-        position: absolute;
-        transition: left 200ms ease-in-out;
-        top: 50%;
-    }
-    .k-switch-thumb {
-        border-width: $kendo-switch-thumb-border-width;
-        border-style: if( $kendo-switch-thumb-border-width == null, null, solid );
-        display: block;
-        position: absolute;
-        transform: translate( -50%, -50% );
-    }
-
-
-    // Switch label
-    .k-switch-label-on,
-    .k-switch-label-off {
-        text-transform: $kendo-switch-label-text-transform;
-        display: $kendo-switch-label-display;
-        position: absolute;
-        top: 50%;
-        transform: translateY( -50% );
-        overflow: hidden;
-    }
-
-
-    // Switch sizes
-    @each $size, $size-props in $kendo-switch-sizes {
-
-        $_font-size: map.get( $size-props, font-size );
-        $_track-width: map.get( $size-props, track-width );
-        $_track-height: map.get( $size-props, track-height );
-        $_thumb-width: map.get( $size-props, thumb-width );
-        $_thumb-height: map.get( $size-props, thumb-height );
-        $_thumb-offset: map.get( $size-props, thumb-offset );
-        $_label-offset: map.get( $size-props, label-offset );
-
-        .k-switch-#{$size} {
-            width: $_track-width;
-            height: $_track-height;
-            font-size: $_font-size;
-
-            .k-switch-track {
-                width: $_track-width;
-                height: $_track-height;
-            }
-
-            .k-switch-label-on { left: $_label-offset; }
-            .k-switch-label-off { right: $_label-offset; }
-
-            .k-switch-thumb {
-                width: $_thumb-width;
-                height: $_thumb-height;
-            }
-
-            &.k-switch-on .k-switch-thumb-wrap {
-                left: calc( 100% - #{math.div( $_thumb-width, 2 )} - #{$_thumb-offset} );
-            }
-            &.k-switch-off .k-switch-thumb-wrap {
-                left: calc( #{math.div( $_thumb-width, 2 )} + #{$_thumb-offset} );
-            }
-        }
-
-        .k-switch-#{$size}[dir="rtl"],
-        [dir="rtl"] .k-switch-#{$size},
-        .k-rtl .k-switch-#{$size} {
-
-            .k-switch-label-on {
-                left: auto;
-                right: $_label-offset;
-            }
-            .k-switch-label-off {
-                right: auto;
-                left: $_label-offset;
-            }
-
-            &.k-switch-on .k-switch-thumb-wrap {
-                left: calc( #{math.div( $_thumb-width, 2 )} + #{$_thumb-offset} );
-            }
-            &.k-switch-off .k-switch-thumb-wrap {
-                left: calc( 100% - #{math.div( $_thumb-width, 2 )} - #{$_thumb-offset} );
-            }
-        }
-    }
-
-
-    // RTL
-    .k-switch[dir="rtl"],
-    [dir="rtl"] .k-switch,
-    .k-switch.k-rtl,
-    .k-rtl .k-switch {
-
-        .k-switch-thumb {
-            transform: translate( 50%, -50% );
-        }
-
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/switch/_layout.scss" as *;
 
 
 @mixin kendo-switch--layout() {

package/scss/switch/_theme.scss

@@ -1,172 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-switch--theme-base() {
-
-    // Switch
-    .k-switch {}
-
-
-    // Switch OFF
-    .k-switch-off {
-
-        // Normal state
-        .k-switch-track {
-            @include fill(
-                $kendo-switch-off-track-text,
-                $kendo-switch-off-track-bg,
-                $kendo-switch-off-track-border,
-                $kendo-switch-off-track-gradient
-            );
-        }
-        .k-switch-thumb {
-            @include fill(
-                $kendo-switch-off-thumb-text,
-                $kendo-switch-off-thumb-bg,
-                $kendo-switch-off-thumb-border,
-                $kendo-switch-off-thumb-gradient
-            );
-        }
-
-        // Hover
-        &:hover,
-        &.k-hover {
-            .k-switch-track {
-                @include fill(
-                    $kendo-switch-off-track-hover-text,
-                    $kendo-switch-off-track-hover-bg,
-                    $kendo-switch-off-track-hover-border,
-                    $kendo-switch-off-track-hover-gradient
-                );
-            }
-
-            .k-switch-thumb {
-                @include fill(
-                    $kendo-switch-off-thumb-hover-text,
-                    $kendo-switch-off-thumb-hover-bg,
-                    $kendo-switch-off-thumb-hover-border,
-                    $kendo-switch-off-thumb-hover-gradient
-                );
-            }
-        }
-
-        // Focus
-        &:focus,
-        &.k-focus {
-            .k-switch-track {
-                @include fill(
-                    $kendo-switch-off-track-focus-text,
-                    $kendo-switch-off-track-focus-bg,
-                    $kendo-switch-off-track-focus-border,
-                    $kendo-switch-off-track-focus-gradient
-                );
-                @if $kendo-enable-focus-contrast {
-                    @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
-                } @else {
-                    outline: $kendo-switch-off-track-focus-ring;
-                }
-            }
-        }
-
-        // Disabled
-        &:disabled,
-        &.k-disabled {
-            .k-switch-track {
-                @include fill(
-                    $kendo-switch-off-track-disabled-text,
-                    $kendo-switch-off-track-disabled-bg,
-                    $kendo-switch-off-track-disabled-border,
-                    $kendo-switch-off-track-disabled-gradient
-                );
-            }
-        }
-
-        .k-switch-label-on {
-            color: transparent;
-        }
-    }
-
-
-    // Switch ON
-    .k-switch-on {
-
-        // Normal state
-        .k-switch-track {
-            @include fill(
-                $kendo-switch-on-track-text,
-                $kendo-switch-on-track-bg,
-                $kendo-switch-on-track-border,
-                $kendo-switch-on-track-gradient
-            );
-        }
-        .k-switch-thumb {
-            @include fill(
-                $kendo-switch-on-thumb-text,
-                $kendo-switch-on-thumb-bg,
-                $kendo-switch-on-thumb-border,
-                $kendo-switch-on-thumb-gradient
-            );
-        }
-
-        // Hover
-        &:hover,
-        &.k-hover {
-            .k-switch-track {
-                @include fill(
-                    $kendo-switch-on-track-hover-text,
-                    $kendo-switch-on-track-hover-bg,
-                    $kendo-switch-on-track-hover-border,
-                    $kendo-switch-on-track-hover-gradient
-                );
-            }
-
-            .k-switch-thumb {
-                @include fill(
-                    $kendo-switch-on-thumb-hover-text,
-                    $kendo-switch-on-thumb-hover-bg,
-                    $kendo-switch-on-thumb-hover-border,
-                    $kendo-switch-on-thumb-hover-gradient
-                );
-            }
-        }
-
-        // Focus
-        &:focus,
-        &.k-focus {
-            .k-switch-track {
-                @include fill(
-                    $kendo-switch-on-track-focus-text,
-                    $kendo-switch-on-track-focus-bg,
-                    $kendo-switch-on-track-focus-border,
-                    $kendo-switch-on-track-focus-gradient
-                );
-                @if $kendo-enable-focus-contrast {
-                    @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
-                } @else {
-                    outline: $kendo-switch-on-track-focus-ring;
-                }
-            }
-        }
-
-        // Disabled
-        &:disabled,
-        &.k-disabled {
-            .k-switch-track {
-                @include fill(
-                    $kendo-switch-on-track-disabled-text,
-                    $kendo-switch-on-track-disabled-bg,
-                    $kendo-switch-on-track-disabled-border,
-                    $kendo-switch-on-track-disabled-gradient
-                );
-            }
-        }
-
-        .k-switch-label-off {
-            color: transparent;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/switch/_theme.scss" as *;
 
 
 @mixin kendo-switch--theme() {