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

package/scss/components/stepper/_theme.scss

@@ -0,0 +1,246 @@
+@use "../../color-system/_functions.import.scss" as *;
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../_variables.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
+                );
+            }
+        }
+    }
+
+}
+
+
+@mixin kendo-stepper--theme() {
+    @include kendo-stepper--theme-base();
+}

package/scss/components/stepper/_variables.scss

@@ -0,0 +1,92 @@
+// Stepper
+
+$kendo-stepper-margin-x: null !default;
+$kendo-stepper-margin-y: null !default;
+$kendo-stepper-padding-x: null !default;
+$kendo-stepper-padding-y: null !default;
+$kendo-stepper-label-margin-x: null !default;
+$kendo-stepper-label-padding-x: null !default;
+$kendo-stepper-label-padding-y: null !default;
+$kendo-stepper-label-border-radius: null !default;
+$kendo-stepper-border-width: null !default;
+
+$kendo-stepper-inline-content-padding-x: null !default;
+$kendo-stepper-inline-content-padding-y: null !default;
+
+// The font size of the Stepper.
+$kendo-stepper-font-size: null !default;
+// The line height of the Stepper.
+$kendo-stepper-line-height: null !default;
+// The font family of the Stepper.
+$kendo-stepper-font-family: null !default;
+
+$kendo-stepper-bg: null !default;
+$kendo-stepper-text: null !default;
+$kendo-stepper-border: null !default;
+
+$kendo-stepper-indicator-width: null !default;
+$kendo-stepper-indicator-height: null !default;
+$kendo-stepper-indicator-border-width: null !default;
+$kendo-stepper-indicator-border-radius: null !default;
+
+$kendo-stepper-indicator-focus-border-width: null !default;
+$kendo-stepper-indicator-focus-size: null !default;
+$kendo-stepper-indicator-focus-offset: null !default;
+$kendo-stepper-indicator-focus-calc-offset: null !default;
+
+$kendo-stepper-indicator-bg: null !default;
+$kendo-stepper-indicator-text: null !default;
+$kendo-stepper-indicator-border: null !default;
+
+$kendo-stepper-indicator-hover-bg: null !default;
+$kendo-stepper-indicator-hover-text: null !default;
+$kendo-stepper-indicator-hover-border: null !default;
+
+$kendo-stepper-indicator-disabled-bg: null !default;
+$kendo-stepper-indicator-disabled-text: null !default;
+$kendo-stepper-indicator-disabled-border: null !default;
+
+$kendo-stepper-indicator-done-bg: null !default;
+$kendo-stepper-indicator-done-text: null !default;
+$kendo-stepper-indicator-done-border: null !default;
+
+$kendo-stepper-indicator-done-hover-bg: null !default;
+$kendo-stepper-indicator-done-hover-text: null !default;
+$kendo-stepper-indicator-done-hover-border: null !default;
+
+$kendo-stepper-indicator-done-disabled-bg: null !default;
+$kendo-stepper-indicator-done-disabled-text: null !default;
+$kendo-stepper-indicator-done-disabled-border: null !default;
+
+$kendo-stepper-indicator-current-bg: null !default;
+$kendo-stepper-indicator-current-text: null !default;
+$kendo-stepper-indicator-current-border: null !default;
+
+$kendo-stepper-indicator-current-hover-bg: null !default;
+$kendo-stepper-indicator-current-hover-text: null !default;
+$kendo-stepper-indicator-current-hover-border: null !default;
+
+$kendo-stepper-indicator-current-disabled-bg: null !default;
+$kendo-stepper-indicator-current-disabled-text: null !default;
+$kendo-stepper-indicator-current-disabled-border: null !default;
+
+$kendo-stepper-label-text: null !default;
+$kendo-stepper-label-success-text: null !default;
+$kendo-stepper-label-error-text: null !default;
+$kendo-stepper-label-hover-text: null !default;
+$kendo-stepper-label-disabled-text: null !default;
+
+$kendo-stepper-optional-label-text: null !default;
+$kendo-stepper-optional-label-opacity: null !default;
+$kendo-stepper-optional-label-font-size: null !default;
+$kendo-stepper-optional-label-font-style: null !default;
+
+$kendo-stepper-progressbar-size: null !default;
+$kendo-stepper-progressbar-bg: null !default;
+$kendo-stepper-progressbar-text: null !default;
+$kendo-stepper-progressbar-fill-bg: null !default;
+$kendo-stepper-progressbar-fill-text: null !default;
+
+$kendo-stepper-content-transition-property: null !default;
+$kendo-stepper-content-transition-duration: null !default;
+$kendo-stepper-content-transition-timing-function: null !default;

package/scss/components/switch/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-switch--styles() {
+    @include import-once( "switch" ) {
+        @include core-styles();
+        @include kendo-switch--layout();
+        @include kendo-switch--theme();
+    }
+}

package/scss/components/switch/_layout.scss

@@ -0,0 +1,164 @@
+@use "sass:map";
+@use "sass:math";
+@use "../../color-system/_constants.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% );
+        }
+
+    }
+
+}
+
+
+@mixin kendo-switch--layout() {
+    @include kendo-switch--layout-base();
+}

package/scss/components/switch/_theme.scss

@@ -0,0 +1,175 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../_variables.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;
+        }
+    }
+
+}
+
+
+@mixin kendo-switch--theme() {
+    @include kendo-switch--theme-base();
+}