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

package/scss/components/slider/_layout.scss

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

package/scss/components/slider/_theme.scss

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

package/scss/components/slider/_variables.scss

@@ -0,0 +1,48 @@
+// Slider
+$kendo-slider-size: null !default;
+$kendo-slider-tick-size: null !default;
+$kendo-slider-alt-size: null !default;
+
+$kendo-slider-font-family: null !default;
+$kendo-slider-font-size: null !default;
+$kendo-slider-line-height: null !default;
+
+$kendo-slider-button-offset: null !default;
+$kendo-slider-button-size: null !default;
+$kendo-slider-button-spacing: null !default;
+$kendo-slider-button-focus-shadow: null !default;
+
+$kendo-slider-track-thickness: null !default;
+$kendo-slider-draghandle-size: null !default;
+$kendo-slider-draghandle-border-width: null !default;
+$kendo-slider-draghandle-active-scale: null !default;
+$kendo-slider-draghandle-active-size: null !default;
+
+$kendo-slider-draghandle-bg: null !default;
+$kendo-slider-draghandle-text: null !default;
+$kendo-slider-draghandle-border: null !default;
+$kendo-slider-draghandle-gradient: null !default;
+
+$kendo-slider-draghandle-hover-bg: null !default;
+$kendo-slider-draghandle-hover-text: null !default;
+$kendo-slider-draghandle-hover-border: null !default;
+$kendo-slider-draghandle-hover-gradient: null !default;
+
+$kendo-slider-draghandle-pressed-bg: null !default;
+$kendo-slider-draghandle-pressed-text: null !default;
+$kendo-slider-draghandle-pressed-border: null !default;
+$kendo-slider-draghandle-pressed-gradient: null !default;
+
+$kendo-slider-draghandle-focus-shadow: null !default;
+
+$kendo-slider-transition-speed: null !default;
+$kendo-slider-transition-function: null !default;
+$kendo-slider-draghandle-transition-speed: null !default;
+$kendo-slider-draghandle-transition-function: null !default;
+
+$kendo-slider-track-bg: null !default;
+$kendo-slider-selection-bg: null !default;
+$kendo-slider-disabled-opacity: null !default;
+
+$kendo-slider-tick-horizontal-image: "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;
+$kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;

package/scss/components/split-button/_index.scss

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

package/scss/components/split-button/_layout.scss

@@ -0,0 +1,41 @@
+@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;
+        }
+    }
+
+}
+
+
+@mixin kendo-split-button--layout() {
+    @include kendo-split-button--layout-base();
+}

package/scss/components/split-button/_theme.scss

@@ -0,0 +1,17 @@
+@use "../../mixins/index.import.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 );
+    }
+
+}
+
+
+@mixin kendo-split-button--theme() {
+    @include kendo-split-button--theme-base();
+}

package/scss/components/split-button/_variables.scss

@@ -0,0 +1,13 @@
+// Split-button
+
+$kendo-split-button-focus-shadow: null !default;
+
+$kendo-split-button-arrow-padding-x: null !default;
+$kendo-split-button-sm-arrow-padding-x: null !default;
+$kendo-split-button-md-arrow-padding-x: null !default;
+$kendo-split-button-lg-arrow-padding-x: null !default;
+
+$kendo-split-button-arrow-padding-y: null !default;
+$kendo-split-button-sm-arrow-padding-y: null !default;
+$kendo-split-button-md-arrow-padding-y: null !default;
+$kendo-split-button-lg-arrow-padding-y: null !default;

package/scss/components/splitter/_index.scss

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