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

package/scss/slider/_layout.scss

@@ -1,404 +1,4 @@
-@use "sass:math";
-@use "sass:list";
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-@use "../tooltip/_variables.scss" as *;
-
-@mixin kendo-slider--layout-base() {
-
-    // Slider
-    .k-slider {
-        border: 0;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-slider-font-family;
-        font-size: $kendo-slider-font-size;
-        line-height: $kendo-slider-line-height;
-        background: none;
-        display: inline-flex;
-        align-items: center;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        .k-label {
-            width: auto;
-            font-size: .92em;
-            line-height: 1;
-            white-space: nowrap;
-            position: absolute;
-        }
-
-        .k-tick,
-        .k-slider-track {
-            cursor: pointer;
-        }
-
-        .k-tick {
-            background-color: transparent;
-            background-position: center center;
-            background-repeat: no-repeat;
-            margin: 0;
-            padding: 0;
-            position: relative;
-        }
-
-
-        &.k-disabled {
-            .k-tick,
-            .k-slider-track,
-            .k-draghandle {
-                cursor: default;
-            }
-        }
-    }
-
-    // New rendering
-    .k-slider {
-        width: min-content;
-        height: min-content;
-        gap: calc( #{$kendo-slider-draghandle-size} / 2 );
-
-        .k-button {
-            flex: none;
-        }
-        .k-slider-track-wrap {
-            flex: 1 1 auto;
-            display: flex;
-            flex-flow: inherit;
-            position: relative;
-            touch-action: none;
-
-            .k-slider-items {
-                margin: 0;
-                padding: 0;
-                list-style: none;
-                // For some reason, Safari does not understand `flex-basis: 100%`
-                // See telerik/kendo-themes#2197
-                // flex-basis: 100%;
-                flex: 1 1 100%;
-                display: flex;
-                flex-flow: inherit;
-                justify-content: space-between;
-                user-select: none;
-            }
-            .k-tick {
-                flex: 0 0 1px;
-            }
-
-            .k-tick-horizontal {
-                width: 1px;
-                min-height: 100%;
-            }
-
-            .k-tick-vertical {
-                width: 100%;
-                min-height: 1px;
-            }
-
-            .k-draghandle {
-                position: absolute;
-            }
-        }
-
-        &-horizontal {
-            .k-slider-track-wrap {
-                height: 26px;
-
-                .k-slider-track {
-                    width: 100%;
-                }
-
-                .k-draghandle {
-                    top: 50%;
-                    transform: translate(-50%, -50%);
-                }
-                .k-draghandle:focus,
-                .k-draghandle:active {
-                    transform: translate(-50%, -50%) scale($kendo-slider-draghandle-active-scale);
-                }
-
-                .k-slider-selection {
-                    width: calc( (var(--kendo-slider-end, 0) - var(--kendo-slider-start, 0)) * 1% );
-                    inset-inline-start: calc( var(--kendo-slider-start, 0) * 1% );
-                }
-                .k-draghandle-start {
-                    inset-inline-start: calc( var(--kendo-slider-start, 0) * 1% );
-                }
-                .k-draghandle-end {
-                    inset-inline-start: calc( var(--kendo-slider-end, 0) * 1% );
-                }
-            }
-        }
-
-        &-vertical {
-            .k-slider-track-wrap {
-                width: 26px;
-
-                .k-slider-track {
-                    height: 100%;
-                }
-                .k-draghandle {
-                    left: 50%;
-                    transform: translate(-50%, 50%);
-                }
-                .k-draghandle:focus,
-                .k-draghandle:active {
-                    transform: translate(-50%, 50%) scale($kendo-slider-draghandle-active-scale);
-                }
-
-                .k-slider-selection {
-                    bottom: calc( var(--kendo-slider-start, 0) * 1% );
-                    height: calc( (var(--kendo-slider-end, 0) - var(--kendo-slider-start, 0)) * 1% );
-                }
-                .k-draghandle-start {
-                    bottom: calc( var(--kendo-slider-start, 0) * 1% );
-                }
-                .k-draghandle-end {
-                    bottom: calc( var(--kendo-slider-end, 0) * 1% );
-                }
-            }
-        }
-
-    }
-
-
-    // Slider vertical
-    .k-slider-vertical {
-        height: $kendo-slider-size;
-        flex-flow: column-reverse nowrap;
-
-        .k-tick {
-            text-align: end;
-            margin-left: 2px;
-        }
-
-        .k-slider-topleft .k-tick {
-            text-align: start;
-        }
-
-        // ticks
-
-        .k-tick { background-position: -94px center; }
-        .k-slider-topleft .k-tick { background-position: -124px center; }
-        .k-slider-bottomright .k-tick { background-position: -154px center; }
-
-        .k-tick-large {
-            display: flex;
-            align-items: center;
-            background-position: -4px center;
-        }
-
-        .k-slider-topleft .k-tick-large { background-position: -34px center; }
-        .k-slider-bottomright .k-tick-large { background-position: -64px center; }
-
-        .k-first { background-position: -94px 100%; }
-        .k-tick-large.k-first { background-position: -4px 100%; }
-        .k-slider-topleft .k-first { background-position: -124px 100%; }
-        .k-slider-topleft .k-tick-large.k-first { background-position: -34px 100%; }
-        .k-slider-bottomright .k-first { background-position: -154px 100%; }
-        .k-slider-bottomright .k-tick-large.k-first { background-position: -64px 100%; }
-
-        .k-last { background-position: -94px 0; }
-        .k-tick-large.k-last { background-position: -4px 0; }
-        .k-slider-topleft .k-last { background-position: -124px 0; }
-        .k-slider-topleft .k-tick-large.k-last { background-position: -34px 0; }
-        .k-slider-bottomright .k-last { background-position: -154px 0; }
-        .k-slider-bottomright .k-tick-large.k-last { background-position: -64px 0; }
-
-        // labels
-
-        .k-label {
-            text-align: start;
-            inset-inline-start: 120%;
-            top: 50%;
-            transform: translateY(-50%);
-        }
-        .k-first .k-label { top: 100%; }
-        .k-last .k-label { top: 0; }
-
-        .k-slider-topleft .k-label {
-            inset-inline-start: auto;
-            inset-inline-end: 120%;
-        }
-
-    }
-
-
-    // Slider horizontal
-    .k-slider-horizontal {
-        width: $kendo-slider-size;
-        flex-flow: row nowrap;
-
-        .k-tick { background-position: center -92px; }
-        .k-slider-topleft .k-tick { background-position: center -122px; }
-        .k-slider-bottomright .k-tick { background-position: center -152px; }
-
-        .k-tick-large { background-position: center -2px; }
-        .k-slider-topleft .k-tick-large { background-position: center -32px; }
-        .k-slider-bottomright .k-tick-large { background-position: center -62px; }
-
-        .k-first { background-position: 0 -92px; }
-        .k-tick-large.k-first { background-position: 0 -2px; }
-        .k-slider-topleft .k-first { background-position: 0 -122px; }
-        .k-slider-topleft .k-tick-large.k-first { background-position: 0 -32px; }
-        .k-slider-bottomright .k-first { background-position: 0 -152px; }
-        .k-slider-bottomright .k-tick-large.k-first { background-position: 0 -62px; }
-
-        .k-last { background-position: 100% -92px; }
-        .k-tick-large.k-last { background-position: 100% -2px; }
-        .k-slider-topleft .k-last { background-position: 100% -122px; }
-        .k-slider-topleft .k-tick-large.k-last { background-position: 100% -32px; }
-        .k-slider-bottomright .k-last { background-position: 100% -152px; }
-        .k-slider-bottomright .k-tick-large.k-last { background-position: 100% -62px; }
-
-        // labels
-
-        .k-label {
-            inset-inline-start: 50%;
-            bottom: -1.2em;
-            transform: translateX(-50%);
-        }
-        .k-first .k-label { inset-inline-start: 0; }
-        .k-last .k-label { inset-inline-start: 100%; }
-
-        .k-slider-topleft .k-label {
-            top: -1.2em;
-        }
-    }
-
-    .k-slider-track,
-    .k-slider-selection {
-        margin: 0;
-        padding: 0;
-        position: absolute;
-    }
-
-    .k-slider-horizontal :is(.k-slider-track, .k-slider-selection) {
-        height: $kendo-slider-track-thickness;
-        left: 0;
-        margin-top: - math.div( $kendo-slider-track-thickness, 2 );
-        top: 50%;
-    }
-
-    .k-slider-vertical :is(.k-slider-track, .k-slider-selection) {
-        bottom: 0;
-        left: 50%;
-        margin-left: - math.div( $kendo-slider-track-thickness, 2 );
-        width: $kendo-slider-track-thickness;
-    }
-
-    .k-draghandle {
-        background-color: transparent;
-        background-repeat: no-repeat;
-        border-style: solid;
-        border-width: $kendo-slider-draghandle-border-width;
-        outline: 0;
-        position: absolute;
-        text-align: center;
-        text-decoration: none;
-        width: $kendo-slider-draghandle-size;
-        height: $kendo-slider-draghandle-size;
-
-        &.k-pressed {
-            transition: none;
-        }
-    }
-
-    .k-slider-selection {
-        &.k-pressed {
-            transition: none;
-        }
-    }
-
-    .k-slider-transitions {
-        &.k-slider-horizontal {
-            .k-draghandle {
-                transition: inset-inline-start $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function;
-            }
-            .k-slider-selection {
-                transition: width $kendo-slider-transition-speed $kendo-slider-transition-function;
-            }
-        }
-
-        &.k-slider-vertical {
-            .k-draghandle {
-                transition: bottom  $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function;
-            }
-
-            .k-slider-selection {
-                transition: height $kendo-slider-transition-speed $kendo-slider-transition-function;
-            }
-        }
-    }
-
-    // Slider readonly
-    .k-slider.k-readonly {
-        .k-button,
-        .k-slider-track,
-        .k-tick,
-        .k-draghandle {
-            pointer-events: none;
-        }
-    }
-
-
-    // Slider tooltip
-    .k-slider-tooltip {
-        .k-callout-n,
-        .k-callout-s {
-            margin-inline-start: - list.slash( $kendo-tooltip-callout-size, 2 );
-        }
-
-        .k-callout-w,
-        .k-callout-e {
-            margin-top: - list.slash( $kendo-tooltip-callout-size, 2 );
-        }
-    }
-
-    // RTL
-    .k-slider-rtl {
-        &.k-slider-horizontal {
-
-            .k-draghandle {
-                transform: translate(50%, -50%);
-            }
-
-            .k-draghandle:focus,
-            .k-draghandle:active {
-                transform: if( $kendo-slider-draghandle-active-scale, translate(50%, -50%) scale($kendo-slider-draghandle-active-scale), null );
-            }
-
-            .k-label {
-                transform: translateX(50%);
-            }
-        }
-    }
-
-    .k-slider[dir="rtl"],
-    [dir="rtl"] .k-slider,
-    .k-slider.k-rtl,
-    .k-rtl .k-slider {
-        @extend .k-slider-rtl !optional;
-    }
-
-
-    // Angular specific
-    .k-slider kendo-resize-sensor {
-        position: absolute;
-    }
-
-    // Aliases
-    .k-draghandle { @extend .k-slider-thumb !optional; }
-    .k-draghandle-start { @extend .k-slider-thumb-start !optional; }
-    .k-draghandle-end { @extend .k-slider-thumb-end !optional; }
-}
+@use "@progress/kendo-theme-core/scss/components/slider/_layout.scss" as *;
 
 
 @mixin kendo-slider--layout() {

package/scss/slider/_theme.scss

@@ -1,83 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-slider--theme-base() {
-
-    // Slider
-    .k-slider {
-        // TODO: extract variables
-        color: $kendo-component-text;
-
-        .k-slider-track,
-        .k-slider-selection {
-            @include border-radius( k-border-radius(md) );
-        }
-
-        .k-slider-track {
-            @include fill( $bg: $kendo-slider-track-bg );
-        }
-
-        .k-slider-selection {
-            @include fill( $bg: $kendo-slider-selection-bg );
-        }
-
-        .k-draghandle {
-            @include fill(
-                $kendo-slider-draghandle-text,
-                $kendo-slider-draghandle-bg,
-                $kendo-slider-draghandle-border,
-                $kendo-slider-draghandle-gradient
-            );
-            @include border-radius( 50% );
-
-            &:hover,
-            &.k-hover {
-                @include fill(
-                    $kendo-slider-draghandle-hover-text,
-                    $kendo-slider-draghandle-hover-bg,
-                    $kendo-slider-draghandle-hover-border,
-                    $kendo-slider-draghandle-hover-gradient
-                );
-            }
-
-            // TODO: remove k-pressed and rely on k-active
-            &:active,
-            &.k-active,
-            &.k-pressed {
-                @include fill(
-                    $kendo-slider-draghandle-pressed-text,
-                    $kendo-slider-draghandle-pressed-bg,
-                    $kendo-slider-draghandle-pressed-border,
-                    $kendo-slider-draghandle-pressed-gradient
-                );
-            }
-
-            &:focus,
-            &.k-focus {
-                @include focus-indicator( $kendo-slider-draghandle-focus-shadow );
-            }
-        }
-
-        &.k-focus {
-            .k-draghandle {
-                @include focus-indicator( $kendo-slider-draghandle-focus-shadow );
-            }
-        }
-
-        &.k-disabled {
-            opacity: $kendo-slider-disabled-opacity;
-        }
-    }
-
-    .k-slider-horizontal .k-tick {
-        @include background-image( $kendo-slider-tick-horizontal-image );
-    }
-
-    .k-slider-vertical .k-tick {
-        @include background-image( $kendo-slider-tick-vertical-image );
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/slider/_theme.scss" as *;
 
 
 @mixin kendo-slider--theme() {

package/scss/slider/_variables.scss

@@ -123,3 +123,43 @@ $kendo-slider-tick-horizontal-image: "data:image/gif;base64,R0lGODlhAQC0AIABALi4
 /// The background image of the vertical Slider tick.
 /// @group slider
 $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;
+
+@forward "@progress/kendo-theme-core/scss/components/slider/_variables.scss" with (
+    $kendo-slider-size: $kendo-slider-size,
+    $kendo-slider-tick-size: $kendo-slider-tick-size,
+    $kendo-slider-alt-size: $kendo-slider-alt-size,
+    $kendo-slider-font-family: $kendo-slider-font-family,
+    $kendo-slider-font-size: $kendo-slider-font-size,
+    $kendo-slider-line-height: $kendo-slider-line-height,
+    $kendo-slider-button-offset: $kendo-slider-button-offset,
+    $kendo-slider-button-size: $kendo-slider-button-size,
+    $kendo-slider-button-spacing: $kendo-slider-button-spacing,
+    $kendo-slider-button-focus-shadow: $kendo-slider-button-focus-shadow,
+    $kendo-slider-track-thickness: $kendo-slider-track-thickness,
+    $kendo-slider-draghandle-size: $kendo-slider-draghandle-size,
+    $kendo-slider-draghandle-border-width: $kendo-slider-draghandle-border-width,
+    $kendo-slider-draghandle-active-scale: $kendo-slider-draghandle-active-scale,
+    $kendo-slider-draghandle-active-size: $kendo-slider-draghandle-active-size,
+    $kendo-slider-draghandle-bg: $kendo-slider-draghandle-bg,
+    $kendo-slider-draghandle-text: $kendo-slider-draghandle-text,
+    $kendo-slider-draghandle-border: $kendo-slider-draghandle-border,
+    $kendo-slider-draghandle-gradient: $kendo-slider-draghandle-gradient,
+    $kendo-slider-draghandle-hover-bg: $kendo-slider-draghandle-hover-bg,
+    $kendo-slider-draghandle-hover-text: $kendo-slider-draghandle-hover-text,
+    $kendo-slider-draghandle-hover-border: $kendo-slider-draghandle-hover-border,
+    $kendo-slider-draghandle-hover-gradient: $kendo-slider-draghandle-hover-gradient,
+    $kendo-slider-draghandle-pressed-bg: $kendo-slider-draghandle-pressed-bg,
+    $kendo-slider-draghandle-pressed-text: $kendo-slider-draghandle-pressed-text,
+    $kendo-slider-draghandle-pressed-border: $kendo-slider-draghandle-pressed-border,
+    $kendo-slider-draghandle-pressed-gradient: $kendo-slider-draghandle-pressed-gradient,
+    $kendo-slider-draghandle-focus-shadow: $kendo-slider-draghandle-focus-shadow,
+    $kendo-slider-transition-speed: $kendo-slider-transition-speed,
+    $kendo-slider-transition-function: $kendo-slider-transition-function,
+    $kendo-slider-draghandle-transition-speed: $kendo-slider-draghandle-transition-speed,
+    $kendo-slider-draghandle-transition-function: $kendo-slider-draghandle-transition-function,
+    $kendo-slider-track-bg: $kendo-slider-track-bg,
+    $kendo-slider-selection-bg: $kendo-slider-selection-bg,
+    $kendo-slider-disabled-opacity: $kendo-slider-disabled-opacity,
+    $kendo-slider-tick-horizontal-image: $kendo-slider-tick-horizontal-image,
+    $kendo-slider-tick-vertical-image: $kendo-slider-tick-vertical-image
+);

package/scss/split-button/_layout.scss

@@ -1,39 +1,4 @@
-@use "./_variables.scss" as *;
-
-@mixin kendo-split-button--layout-base() {
-
-    // Split button
-    .k-split-button {}
-
-    // Split button arrow
-    .k-split-button .k-split-button-arrow {
-        padding-block: $kendo-split-button-arrow-padding-y;
-        padding-inline: $kendo-split-button-arrow-padding-x;
-        width: auto;
-        aspect-ratio: auto;
-        flex: none;
-
-        &.k-button-sm {
-            padding-block: $kendo-split-button-sm-arrow-padding-y;
-            padding-inline: $kendo-split-button-sm-arrow-padding-x;
-        }
-
-        &.k-button-md {
-            padding-block: $kendo-split-button-md-arrow-padding-y;
-            padding-inline: $kendo-split-button-md-arrow-padding-x;
-        }
-
-        &.k-button-lg {
-            padding-block: $kendo-split-button-lg-arrow-padding-y;
-            padding-inline: $kendo-split-button-lg-arrow-padding-x;
-        }
-
-        .k-button-icon {
-            min-width: 0;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/split-button/_layout.scss" as *;
 
 
 @mixin kendo-split-button--layout() {

package/scss/split-button/_theme.scss

@@ -1,15 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./_variables.scss" as *;
-
-@mixin kendo-split-button--theme-base() {
-
-    // Split button
-    .k-split-button:focus,
-    .k-split-button.k-focus {
-        @include focus-indicator( $kendo-split-button-focus-shadow );
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/split-button/_theme.scss" as *;
 
 
 @mixin kendo-split-button--theme() {

package/scss/split-button/_variables.scss

@@ -31,3 +31,15 @@ $kendo-split-button-md-arrow-padding-y: $kendo-button-md-padding-y !default;
 /// The vertical padding of the large arrow Button.
 /// @group split-button
 $kendo-split-button-lg-arrow-padding-y: $kendo-button-lg-padding-y !default;
+
+@forward "@progress/kendo-theme-core/scss/components/split-button/_variables.scss" with (
+    $kendo-split-button-focus-shadow: $kendo-split-button-focus-shadow,
+    $kendo-split-button-arrow-padding-x: $kendo-split-button-arrow-padding-x,
+    $kendo-split-button-sm-arrow-padding-x: $kendo-split-button-sm-arrow-padding-x,
+    $kendo-split-button-md-arrow-padding-x: $kendo-split-button-md-arrow-padding-x,
+    $kendo-split-button-lg-arrow-padding-x: $kendo-split-button-lg-arrow-padding-x,
+    $kendo-split-button-arrow-padding-y: $kendo-split-button-arrow-padding-y,
+    $kendo-split-button-sm-arrow-padding-y: $kendo-split-button-sm-arrow-padding-y,
+    $kendo-split-button-md-arrow-padding-y: $kendo-split-button-md-arrow-padding-y,
+    $kendo-split-button-lg-arrow-padding-y: $kendo-split-button-lg-arrow-padding-y
+);