@progress/kendo-theme-classic 4.41.2-dev.2 → 5.0.0-next.2

package/modules/@progress/kendo-theme-default/scss/slider/_layout.scss

@@ -1,528 +0,0 @@
-@include exports("slider/layout") {
-
-    // Slider
-    .k-slider {
-        border: 0;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $slider-font-family;
-        font-size: $slider-font-size;
-        line-height: $slider-line-height;
-        background: none;
-        display: inline-flex;
-        align-items: stretch;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        .k-button {
-            height: $slider-button-size;
-            line-height: $slider-button-size;
-            margin: 0;
-            min-width: 0;
-            outline: 0;
-            padding: 0;
-            position: absolute;
-            width: $slider-button-size;
-            box-sizing: content-box;
-
-            .k-icon,
-            .k-button-icon {
-                vertical-align: baseline;
-                line-height: $slider-button-size;
-                height: 100%;
-            }
-        }
-
-        .k-button-increase {
-            right: 0;
-            top: 0;
-        }
-
-        .k-button-decrease {
-            left: 0;
-            top: 0;
-        }
-
-        .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-state-disabled {
-            .k-tick,
-            .k-slider-track,
-            .k-draghandle {
-                cursor: default;
-            }
-        }
-
-        .k-rtl &,
-        &.k-rtl,
-        [dir="rtl"] &,
-        &[dir="rtl"] {
-            .k-slider-selection {
-                left: auto;
-                right: 0;
-            }
-
-            .k-button-increase {
-                left: 0;
-                right: auto;
-            }
-
-            .k-button-decrease {
-                right: 0;
-                left: auto;
-            }
-        }
-    }
-
-
-    // New rendering
-    .k-slider {
-        gap: calc( #{$slider-draghandle-size} / 2 );
-
-        > .k-button {
-            position: relative;
-            flex-shrink: 0;
-            align-self: center;
-        }
-        > .k-slider-track-wrap {
-            flex: 1 1 auto;
-            display: flex;
-            flex-flow: inherit;
-            position: relative;
-            touch-action: none;
-
-            .k-slider-items {
-                // 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;
-
-                &::after { display: none; }
-            }
-            .k-tick {
-                flex-shrink: 0;
-                flex-grow: 0;
-                flex-basis: 1px;
-            }
-
-            .k-draghandle {
-                position: absolute;
-            }
-        }
-
-        &-horizontal {
-            > .k-slider-track-wrap {
-
-                .k-slider-track {
-                    width: 100%;
-                }
-
-                .k-draghandle {
-                    top: 50%;
-                    transform: translate(-50%, -50%);
-                }
-                .k-draghandle:focus,
-                .k-draghandle:active {
-                    transform: translate(-50%, -50%) scale($slider-draghandle-active-scale);
-                }
-
-                .k-slider-selection {
-                    width: calc( (var(--kendo-slider-end, 0) - var(--kendo-slider-start, 0)) * 1% );
-                    left: calc( var(--kendo-slider-start, 0) * 1% );
-                }
-                .k-draghandle-start {
-                    left: calc( var(--kendo-slider-start, 0) * 1% );
-                }
-                .k-draghandle-end {
-                    left: calc( var(--kendo-slider-end, 0) * 1% );
-                }
-
-                [dir="rtl"] & {
-                    .k-slider-selection {
-                        left: unset;
-                        right: calc( var(--kendo-slider-start, 0) * 1% );
-                    }
-                    .k-draghandle-start {
-                        left: unset;
-                        right: calc( var(--kendo-slider-start, 0) * 1% );
-                    }
-                    .k-draghandle-end {
-                        left: unset;
-                        right: calc( var(--kendo-slider-end, 0) * 1% );
-                    }
-
-                    .k-draghandle {
-                        transform: translate(50%, -50%);
-                    }
-                    .k-draghandle:focus,
-                    .k-draghandle:active {
-                        transform: translate(50%, -50%) scale($slider-draghandle-active-scale);
-                    }
-                }
-            }
-        }
-
-        &-vertical {
-            > .k-slider-track-wrap {
-
-                .k-slider-track {
-                    height: 100%;
-                }
-                .k-draghandle {
-                    left: 50%;
-                    transform: translate(-50%, 50%);
-                }
-                .k-draghandle:focus,
-                .k-draghandle:active {
-                    transform: translate(-50%, 50%) scale($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: $slider-size;
-        width: $slider-alt-size;
-        flex-flow: column-reverse nowrap;
-
-        .k-button-decrease {
-            bottom: 0;
-            top: auto;
-        }
-
-        .k-tick {
-            text-align: right;
-            margin-left: 2px;
-        }
-
-        .k-slider-topleft .k-tick {
-            text-align: left;
-        }
-
-        // ticks
-
-        .k-tick { background-position: -92px center; }
-        .k-slider-topleft .k-tick { background-position: -122px center; }
-        .k-slider-bottomright .k-tick { background-position: -152px center; }
-
-        .k-tick-large {
-            display: flex;
-            align-items: center;
-            background-position: -2px center;
-        }
-
-        .k-slider-topleft .k-tick-large { background-position: -32px center; }
-        .k-slider-bottomright .k-tick-large { background-position: -62px center; }
-
-        .k-first { background-position: -92px 100%; }
-        .k-tick-large.k-first { background-position: -2px 100%; }
-        .k-slider-topleft .k-first { background-position: -122px 100%; }
-        .k-slider-topleft .k-tick-large.k-first { background-position: -32px 100%; }
-        .k-slider-bottomright .k-first { background-position: -152px 100%; }
-        .k-slider-bottomright .k-tick-large.k-first { background-position: -62px 100%; }
-
-        .k-last { background-position: -92px 0; }
-        .k-tick-large.k-last { background-position: -2px 0; }
-        .k-slider-topleft .k-last { background-position: -122px 0; }
-        .k-slider-topleft .k-tick-large.k-last { background-position: -32px 0; }
-        .k-slider-bottomright .k-last { background-position: -152px 0; }
-        .k-slider-bottomright .k-tick-large.k-last { background-position: -62px 0; }
-
-        // labels
-
-        .k-label {
-            text-align: left;
-            left: 120%;
-            top: 50%;
-            transform: translateY(-50%);
-        }
-        .k-first .k-label { top: 100%; }
-        .k-last .k-label { top: 0; }
-
-        .k-slider-topleft .k-label {
-            left: auto;
-            right: 120%;
-        }
-
-        .k-rtl &,
-        &.k-rtl,
-        [dir="rtl"] &,
-        &[dir="rtl"] {
-            .k-label {
-                left: auto;
-                right: 120%;
-            }
-
-            .k-slider-topleft .k-label {
-                left: 120%;
-                right: auto;
-            }
-        }
-
-    }
-
-
-    // Slider horizontal
-    .k-slider-horizontal {
-        height: $slider-alt-size;
-        width: $slider-size;
-        flex-flow: row nowrap;
-
-        // ticks
-        .k-tick {
-            float: left;
-            height: 100%;
-            text-align: center;
-        }
-
-        .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 {
-            left: 50%;
-            bottom: -1.2em;
-            transform: translateX(-50%);
-        }
-        .k-first .k-label { left: 0; }
-        .k-last .k-label { left: 100%; }
-
-        .k-slider-topleft .k-label {
-            top: -1.2em;
-        }
-
-        .k-rtl &,
-        &.k-rtl,
-        [dir="rtl"] &,
-        &[dir="rtl"] {
-            .k-slider-track,
-            .k-slider-selection {
-                right: 0;
-                left: auto;
-            }
-            .k-slider-buttons .k-slider-track {
-                right: $slider-button-spacing;
-            }
-
-            .k-button .k-i-arrow-e,
-            .k-button .k-i-arrow-w {
-                transform: scaleX(-1);
-            }
-        }
-    }
-
-    .k-slider-wrap {
-        height: 100%;
-        width: 100%;
-    }
-
-    .k-slider-track,
-    .k-slider-selection {
-        margin: 0;
-        padding: 0;
-        position: absolute;
-
-        .k-slider-horizontal & {
-            height: $slider-track-thickness;
-            left: 0;
-            margin-top: -($slider-track-thickness / 2);
-            top: 50%;
-        }
-
-        .k-slider-vertical & {
-            bottom: 0;
-            left: 50%;
-            margin-left: -($slider-track-thickness / 2);
-            width: $slider-track-thickness;
-        }
-    }
-
-    .k-slider-buttons .k-slider-track {
-        .k-slider-horizontal & {
-            left: $slider-button-spacing;
-        }
-
-        .k-slider-vertical & {
-            bottom: $slider-button-spacing;
-        }
-    }
-
-
-    .k-draghandle {
-        background-color: transparent;
-        background-repeat: no-repeat;
-        border-style: solid;
-        border-width: $slider-draghandle-border-width;
-        outline: 0;
-        position: absolute;
-        text-align: center;
-        text-decoration: none;
-        box-sizing: content-box;
-        width: $slider-draghandle-size;
-        height: $slider-draghandle-size;
-
-        .k-slider-horizontal & {
-            top: 50%;
-            transform: translateY(-50%);
-
-            &:active,
-            &.k-pressed {
-                transform: translateY(-50%) scale($slider-draghandle-active-scale);
-            }
-        }
-
-        .k-slider-vertical & {
-            left: 50%;
-            transform: translateX(-50%);
-
-            &:active,
-            &.k-pressed {
-                transform: translateX(-50%) scale($slider-draghandle-active-scale);
-            }
-        }
-
-        .k-slider-transitions.k-slider-horizontal & {
-            transition: left $slider-transition-speed $slider-transition-function, background-color $slider-transition-speed $slider-transition-function, transform $slider-draghandle-transition-speed $slider-draghandle-transition-function;
-        }
-
-        .k-slider-transitions.k-slider-vertical & {
-            transition: bottom  $slider-transition-speed $slider-transition-function, background-color $slider-transition-speed $slider-transition-function, transform $slider-draghandle-transition-speed $slider-draghandle-transition-function;
-        }
-
-        &.k-pressed {
-            transition: none;
-        }
-    }
-
-    .k-slider-selection {
-        .k-slider-transitions.k-slider-horizontal & {
-            transition: width $slider-transition-speed $slider-transition-function;
-        }
-
-        .k-slider-transitions.k-slider-vertical & {
-            transition: height $slider-transition-speed $slider-transition-function;
-        }
-
-        &.k-pressed {
-            transition: none;
-        }
-    }
-
-
-    .k-slider-items {
-        user-select: none;
-
-        .k-slider-buttons & {
-            margin-left: $slider-button-spacing;
-        }
-
-        .k-slider-horizontal & {
-            height: 100%;
-            padding: 2px 0;
-            box-sizing: border-box;
-        }
-
-        .k-slider-vertical & {
-            padding-top: 1px;
-        }
-
-        .k-slider-vertical .k-slider-buttons & {
-            margin: 0;
-            padding-top: $slider-button-spacing;
-        }
-    }
-    .k-slider-items::after {
-        content: "";
-        display: block;
-        clear: both;
-    }
-
-    .k-slider-tooltip {
-        .k-callout-n,
-        .k-callout-s {
-            margin-left: -$tooltip-callout-size / 2;
-        }
-
-        .k-callout-w,
-        .k-callout-e {
-            margin-top: -$tooltip-callout-size / 2;
-        }
-    }
-}
-
-
-
-
-@include exports( "slider/layout/legacy" ) {
-
-    .k-no-flexbox .k-slider {
-
-        &-horizontal {
-            display: inline-block;
-        }
-        &-vertical {
-            display: inline-block;
-        }
-
-    }
-
-}

package/modules/@progress/kendo-theme-default/scss/slider/_theme.scss

@@ -1,83 +0,0 @@
-@include exports("slider/theme") {
-    $slider-tick-horizontal-image: map-get($data-uris, "slider-h.gif") !default;
-    $slider-tick-vertical-image: map-get($data-uris, "slider-v.gif") !default;
-
-    .k-slider {
-        color: $component-text;
-
-        .k-slider-track,
-        .k-slider-selection {
-            @include border-radius( $border-radius );
-        }
-
-        .k-slider-track {
-            @include fill( $bg: $slider-track-bg );
-        }
-
-        .k-slider-selection {
-            @include fill( $bg: $slider-selection-bg );
-        }
-
-        .k-button {
-            @include border-radius( 50% );
-        }
-
-        .k-draghandle {
-            @include fill(
-                $slider-draghandle-text,
-                $slider-draghandle-bg,
-                $slider-draghandle-border,
-                $slider-draghandle-gradient
-            );
-            @include border-radius( 50% );
-
-            &:hover {
-                @include fill(
-                    $slider-draghandle-hovered-text,
-                    $slider-draghandle-hovered-bg,
-                    $slider-draghandle-hovered-border,
-                    $slider-draghandle-hovered-gradient
-                );
-            }
-
-            &:active,
-            &.k-pressed {
-                @include fill(
-                    $slider-draghandle-pressed-text,
-                    $slider-draghandle-pressed-bg,
-                    $slider-draghandle-pressed-border,
-                    $slider-draghandle-pressed-gradient
-                );
-            }
-
-            &:focus,
-            &.k-state-focused {
-                @include box-shadow( $slider-draghandle-focused-shadow );
-            }
-        }
-
-        &.k-state-focused {
-            .k-draghandle {
-                @include box-shadow( $slider-draghandle-focused-shadow );
-            }
-        }
-
-        &.k-state-disabled {
-            opacity: $slider-disabled-opacity;
-        }
-
-        .k-slider-wrap {
-            &:focus {
-                outline: none;
-            }
-        }
-    }
-
-    .k-slider-horizontal .k-tick {
-        @include background-image( $slider-tick-horizontal-image );
-    }
-
-    .k-slider-vertical .k-tick {
-        @include background-image( $slider-tick-vertical-image );
-    }
-}

package/modules/@progress/kendo-theme-default/scss/slider/_variables.scss

@@ -1,45 +0,0 @@
-// Slider
-$slider-size: 200px !default;
-$slider-tick-size: null !default;
-$slider-alt-size: 30px !default;
-
-$slider-font-family: $font-family !default;
-$slider-font-size: $font-size !default;
-$slider-line-height: $line-height !default;
-
-$slider-button-offset: 10px !default;
-$slider-button-size: ($slider-alt-size - 2) !default;
-$slider-button-spacing: ($slider-button-size + $slider-button-offset) !default;
-$slider-button-focused-shadow: null !default;
-
-$slider-track-thickness: 4px !default;
-$slider-draghandle-size: 14px !default;
-$slider-draghandle-border-width: 1px !default;
-$slider-draghandle-active-scale: 1 !default;
-$slider-draghandle-active-size: null !default;
-
-$slider-draghandle-bg: $primary-button-bg !default;
-$slider-draghandle-text: $primary-button-text !default;
-$slider-draghandle-border: $primary-button-border !default;
-$slider-draghandle-gradient: null !default;
-
-$slider-draghandle-hovered-bg: $primary-button-hovered-bg !default;
-$slider-draghandle-hovered-text: $primary-button-hovered-text !default;
-$slider-draghandle-hovered-border: $primary-button-hovered-border !default;
-$slider-draghandle-hovered-gradient: null !default;
-
-$slider-draghandle-pressed-bg: $primary-button-active-bg !default;
-$slider-draghandle-pressed-text: $primary-button-active-text !default;
-$slider-draghandle-pressed-border: $primary-button-active-border !default;
-$slider-draghandle-pressed-gradient: null !default;
-
-$slider-draghandle-focused-shadow: $primary-button-focused-shadow !default;
-
-$slider-transition-speed: .3s !default;
-$slider-transition-function: ease-out !default;
-$slider-draghandle-transition-speed: .4s !default;
-$slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default;
-
-$slider-track-bg: try-shade( $component-bg, 1 ) !default;
-$slider-selection-bg: $primary !default;
-$slider-disabled-opacity: null !default;

package/modules/@progress/kendo-theme-default/scss/slider/images/slider-h.scss

@@ -1,3 +0,0 @@
-@include exports("slider-h.gif") {
-    @include register-data-uri("slider-h.gif", "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7")
-}

package/modules/@progress/kendo-theme-default/scss/slider/images/slider-v.scss

@@ -1,3 +0,0 @@
-@include exports("slider-v.gif") {
-    @include register-data-uri("slider-v.gif", "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7")
-}

package/modules/@progress/kendo-theme-default/scss/splitter/_index.scss

@@ -1,12 +0,0 @@
-@import "../core/_index.scss";
-
-
-// Dependencies
-@import "../common/_index.scss";
-@import "../icons/_index.scss";
-
-
-// Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";