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

package/scss/slider/_layout.scss

@@ -5,9 +5,9 @@
         border: 0;
         box-sizing: border-box;
         outline: 0;
-        font-family: $slider-font-family;
-        font-size: $slider-font-size;
-        line-height: $slider-line-height;
+        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;
@@ -80,7 +80,7 @@
     .k-slider {
         width: min-content;
         height: min-content;
-        gap: calc( #{$slider-draghandle-size} / 2 );
+        gap: calc( #{$kendo-slider-draghandle-size} / 2 );
 
         .k-button {
             flex: none;
@@ -138,7 +138,7 @@
                 }
                 .k-draghandle:focus,
                 .k-draghandle:active {
-                    transform: translate(-50%, -50%) scale($slider-draghandle-active-scale);
+                    transform: translate(-50%, -50%) scale($kendo-slider-draghandle-active-scale);
                 }
 
                 .k-slider-selection {
@@ -171,7 +171,7 @@
                     }
                     .k-draghandle:focus,
                     .k-draghandle:active {
-                        transform: translate(50%, -50%) scale($slider-draghandle-active-scale);
+                        transform: translate(50%, -50%) scale($kendo-slider-draghandle-active-scale);
                     }
                 }
             }
@@ -190,7 +190,7 @@
                 }
                 .k-draghandle:focus,
                 .k-draghandle:active {
-                    transform: translate(-50%, 50%) scale($slider-draghandle-active-scale);
+                    transform: translate(-50%, 50%) scale($kendo-slider-draghandle-active-scale);
                 }
 
                 .k-slider-selection {
@@ -211,7 +211,7 @@
 
     // Slider vertical
     .k-slider-vertical {
-        height: $slider-size;
+        height: $kendo-slider-size;
         flex-flow: column-reverse nowrap;
 
         .k-tick {
@@ -288,7 +288,7 @@
 
     // Slider horizontal
     .k-slider-horizontal {
-        width: $slider-size;
+        width: $kendo-slider-size;
         flex-flow: row nowrap;
 
         .k-tick { background-position: center -92px; }
@@ -351,17 +351,17 @@
         position: absolute;
 
         .k-slider-horizontal & {
-            height: $slider-track-thickness;
+            height: $kendo-slider-track-thickness;
             left: 0;
-            margin-top: - k-math-div( $slider-track-thickness, 2 );
+            margin-top: - k-math-div( $kendo-slider-track-thickness, 2 );
             top: 50%;
         }
 
         .k-slider-vertical & {
             bottom: 0;
             left: 50%;
-            margin-left: - k-math-div( $slider-track-thickness, 2 );
-            width: $slider-track-thickness;
+            margin-left: - k-math-div( $kendo-slider-track-thickness, 2 );
+            width: $kendo-slider-track-thickness;
         }
     }
 
@@ -370,20 +370,20 @@
         background-color: transparent;
         background-repeat: no-repeat;
         border-style: solid;
-        border-width: $slider-draghandle-border-width;
+        border-width: $kendo-slider-draghandle-border-width;
         outline: 0;
         position: absolute;
         text-align: center;
         text-decoration: none;
-        width: $slider-draghandle-size;
-        height: $slider-draghandle-size;
+        width: $kendo-slider-draghandle-size;
+        height: $kendo-slider-draghandle-size;
 
         .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;
+            transition: left $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-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;
+            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-pressed {
@@ -393,11 +393,11 @@
 
     .k-slider-selection {
         .k-slider-transitions.k-slider-horizontal & {
-            transition: width $slider-transition-speed $slider-transition-function;
+            transition: width $kendo-slider-transition-speed $kendo-slider-transition-function;
         }
 
         .k-slider-transitions.k-slider-vertical & {
-            transition: height $slider-transition-speed $slider-transition-function;
+            transition: height $kendo-slider-transition-speed $kendo-slider-transition-function;
         }
 
         &.k-pressed {
@@ -421,12 +421,12 @@
     .k-slider-tooltip {
         .k-callout-n,
         .k-callout-s {
-            margin-left: - k-math-div( $tooltip-callout-size, 2 );
+            margin-left: - k-math-div( $kendo-tooltip-callout-size, 2 );
         }
 
         .k-callout-w,
         .k-callout-e {
-            margin-top: - k-math-div( $tooltip-callout-size, 2 );
+            margin-top: - k-math-div( $kendo-tooltip-callout-size, 2 );
         }
     }
 
@@ -436,12 +436,12 @@
         position: absolute;
     }
     .k-slider-horizontal .k-slider-wrap:not(.k-slider-buttons) {
-        padding-left: calc( #{$slider-draghandle-size} / 2 );
-        padding-right: calc( #{$slider-draghandle-size} / 2 );
+        padding-left: calc( #{$kendo-slider-draghandle-size} / 2 );
+        padding-right: calc( #{$kendo-slider-draghandle-size} / 2 );
     }
     .k-slider-vertical .k-slider-wrap:not(.k-slider-buttons) {
-        padding-top: calc( #{$slider-draghandle-size} / 2 );
-        padding-bottom: calc( #{$slider-draghandle-size} / 2 );
+        padding-top: calc( #{$kendo-slider-draghandle-size} / 2 );
+        padding-bottom: calc( #{$kendo-slider-draghandle-size} / 2 );
     }
 
 }

package/scss/slider/_theme.scss

@@ -1,6 +1,6 @@
 @include exports("slider/theme") {
-    $slider-tick-horizontal-image: k-map-get($data-uris, "slider-h.gif") !default;
-    $slider-tick-vertical-image: k-map-get($data-uris, "slider-v.gif") !default;
+    $kendo-slider-tick-horizontal-image: k-map-get($_kendo-data-uris, "slider-h.gif") !default;
+    $kendo-slider-tick-vertical-image: k-map-get($_kendo-data-uris, "slider-v.gif") !default;
 
     .k-slider {
         color: $kendo-component-text;
@@ -11,63 +11,63 @@
         }
 
         .k-slider-track {
-            @include fill( $bg: $slider-track-bg );
+            @include fill( $bg: $kendo-slider-track-bg );
         }
 
         .k-slider-selection {
-            @include fill( $bg: $slider-selection-bg );
+            @include fill( $bg: $kendo-slider-selection-bg );
         }
 
         .k-draghandle {
             @include fill(
-                $slider-draghandle-text,
-                $slider-draghandle-bg,
-                $slider-draghandle-border,
-                $slider-draghandle-gradient
+                $kendo-slider-draghandle-text,
+                $kendo-slider-draghandle-bg,
+                $kendo-slider-draghandle-border,
+                $kendo-slider-draghandle-gradient
             );
             @include border-radius( 50% );
 
             &:hover {
                 @include fill(
-                    $slider-draghandle-hover-text,
-                    $slider-draghandle-hover-bg,
-                    $slider-draghandle-hover-border,
-                    $slider-draghandle-hover-gradient
+                    $kendo-slider-draghandle-hover-text,
+                    $kendo-slider-draghandle-hover-bg,
+                    $kendo-slider-draghandle-hover-border,
+                    $kendo-slider-draghandle-hover-gradient
                 );
             }
 
             &:active,
             &.k-pressed {
                 @include fill(
-                    $slider-draghandle-pressed-text,
-                    $slider-draghandle-pressed-bg,
-                    $slider-draghandle-pressed-border,
-                    $slider-draghandle-pressed-gradient
+                    $kendo-slider-draghandle-pressed-text,
+                    $kendo-slider-draghandle-pressed-bg,
+                    $kendo-slider-draghandle-pressed-border,
+                    $kendo-slider-draghandle-pressed-gradient
                 );
             }
 
             &:focus,
             &.k-focus {
-                @include box-shadow( $slider-draghandle-focus-shadow );
+                @include focus-indicator( $kendo-slider-draghandle-focus-shadow );
             }
         }
 
         &.k-focus {
             .k-draghandle {
-                @include box-shadow( $slider-draghandle-focus-shadow );
+                @include focus-indicator( $kendo-slider-draghandle-focus-shadow );
             }
         }
 
         &.k-disabled {
-            opacity: $slider-disabled-opacity;
+            opacity: $kendo-slider-disabled-opacity;
         }
     }
 
     .k-slider-horizontal .k-tick {
-        @include background-image( $slider-tick-horizontal-image );
+        @include background-image( $kendo-slider-tick-horizontal-image );
     }
 
     .k-slider-vertical .k-tick {
-        @include background-image( $slider-tick-vertical-image );
+        @include background-image( $kendo-slider-tick-vertical-image );
     }
 }

package/scss/slider/_variables.scss

@@ -1,45 +1,45 @@
 // 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-focus-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: $kendo-color-primary !default;
-$slider-draghandle-text: k-contrast-legacy( $kendo-color-primary ) !default;
-$slider-draghandle-border: $kendo-color-primary !default;
-$slider-draghandle-gradient: null !default;
-
-$slider-draghandle-hover-bg: k-try-shade( $kendo-color-primary , .5 ) !default;
-$slider-draghandle-hover-text: null !default;
-$slider-draghandle-hover-border: $kendo-color-primary !default;
-$slider-draghandle-hover-gradient: null !default;
-
-$slider-draghandle-pressed-bg: k-try-shade( $kendo-color-primary , 1.5 ) !default;
-$slider-draghandle-pressed-text: null !default;
-$slider-draghandle-pressed-border: k-try-shade( $kendo-color-primary , 1.5 ) !default;
-$slider-draghandle-pressed-gradient: null !default;
-
-$slider-draghandle-focus-shadow: 0 0 0 2px rgba( $kendo-color-primary , .3 ) !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: k-try-shade( $kendo-component-bg, 1 ) !default;
-$slider-selection-bg: $kendo-color-primary !default;
-$slider-disabled-opacity: null !default;
+$kendo-slider-size: 200px !default;
+$kendo-slider-tick-size: null !default;
+$kendo-slider-alt-size: 30px !default;
+
+$kendo-slider-font-family: $kendo-font-family !default;
+$kendo-slider-font-size: $kendo-font-size-md !default;
+$kendo-slider-line-height: $kendo-line-height-md !default;
+
+$kendo-slider-button-offset: 10px !default;
+$kendo-slider-button-size: ($kendo-slider-alt-size - 2) !default;
+$kendo-slider-button-spacing: ($kendo-slider-button-size + $kendo-slider-button-offset) !default;
+$kendo-slider-button-focus-shadow: null !default;
+
+$kendo-slider-track-thickness: 4px !default;
+$kendo-slider-draghandle-size: 14px !default;
+$kendo-slider-draghandle-border-width: 1px !default;
+$kendo-slider-draghandle-active-scale: 1 !default;
+$kendo-slider-draghandle-active-size: null !default;
+
+$kendo-slider-draghandle-bg: $kendo-color-primary !default;
+$kendo-slider-draghandle-text: k-contrast-legacy( $kendo-color-primary ) !default;
+$kendo-slider-draghandle-border: $kendo-color-primary !default;
+$kendo-slider-draghandle-gradient: null !default;
+
+$kendo-slider-draghandle-hover-bg: k-try-shade( $kendo-color-primary , .5 ) !default;
+$kendo-slider-draghandle-hover-text: null !default;
+$kendo-slider-draghandle-hover-border: $kendo-color-primary !default;
+$kendo-slider-draghandle-hover-gradient: null !default;
+
+$kendo-slider-draghandle-pressed-bg: k-try-shade( $kendo-color-primary , 1.5 ) !default;
+$kendo-slider-draghandle-pressed-text: null !default;
+$kendo-slider-draghandle-pressed-border: k-try-shade( $kendo-color-primary , 1.5 ) !default;
+$kendo-slider-draghandle-pressed-gradient: null !default;
+
+$kendo-slider-draghandle-focus-shadow: 0 0 0 2px rgba( $kendo-color-primary , .3 ) !default;
+
+$kendo-slider-transition-speed: .3s !default;
+$kendo-slider-transition-function: ease-out !default;
+$kendo-slider-draghandle-transition-speed: .4s !default;
+$kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default;
+
+$kendo-slider-track-bg: k-try-shade( $kendo-component-bg, 1 ) !default;
+$kendo-slider-selection-bg: $kendo-color-primary !default;
+$kendo-slider-disabled-opacity: null !default;

package/scss/split-button/_layout.scss

@@ -9,15 +9,15 @@
         flex: none;
 
         &.k-button-sm {
-            padding: $kendo-split-button-arrow-padding-y-sm $kendo-split-button-arrow-padding-x-sm;
+            padding: $kendo-split-button-sm-arrow-padding-y $kendo-split-button-sm-arrow-padding-x;
         }
 
         &.k-button-md {
-            padding: $kendo-split-button-arrow-padding-y-md $kendo-split-button-arrow-padding-x-md;
+            padding: $kendo-split-button-md-arrow-padding-y $kendo-split-button-md-arrow-padding-x;
         }
 
         &.k-button-lg {
-            padding: $kendo-split-button-arrow-padding-y-lg $kendo-split-button-arrow-padding-x-lg;
+            padding: $kendo-split-button-lg-arrow-padding-y $kendo-split-button-lg-arrow-padding-x;
         }
 
         .k-button-icon {
@@ -27,4 +27,3 @@
 
 
 }
-

package/scss/split-button/_theme.scss

@@ -3,7 +3,7 @@
     // Split button
     .k-split-button:focus,
     .k-split-button.k-focus {
-        @include box-shadow( $kendo-split-button-focus-shadow );
+        @include focus-indicator( $kendo-split-button-focus-shadow );
     }
 
 }

package/scss/split-button/_variables.scss

@@ -7,13 +7,13 @@ $kendo-split-button-focus-shadow: $kendo-button-focus-shadow !default;
 /// Horizontal padding of the arrow button.
 /// @group split-button
 $kendo-split-button-arrow-padding-x: $kendo-button-padding-y !default;
-$kendo-split-button-arrow-padding-x-sm: $kendo-button-padding-y-sm !default;
-$kendo-split-button-arrow-padding-x-md: $kendo-button-padding-y-md !default;
-$kendo-split-button-arrow-padding-x-lg: $kendo-button-padding-y-lg !default;
+$kendo-split-button-sm-arrow-padding-x: $kendo-button-sm-padding-y !default;
+$kendo-split-button-md-arrow-padding-x: $kendo-button-md-padding-y !default;
+$kendo-split-button-lg-arrow-padding-x: $kendo-button-lg-padding-y !default;
 
 /// Vertical padding of the arrow button.
 /// @group split-button
 $kendo-split-button-arrow-padding-y: $kendo-button-padding-y !default;
-$kendo-split-button-arrow-padding-y-sm: $kendo-button-padding-y-sm !default;
-$kendo-split-button-arrow-padding-y-md: $kendo-button-padding-y-md !default;
-$kendo-split-button-arrow-padding-y-lg: $kendo-button-padding-y-lg !default;
+$kendo-split-button-sm-arrow-padding-y: $kendo-button-sm-padding-y !default;
+$kendo-split-button-md-arrow-padding-y: $kendo-button-md-padding-y !default;
+$kendo-split-button-lg-arrow-padding-y: $kendo-button-lg-padding-y !default;

package/scss/splitter/_layout.scss

@@ -3,13 +3,13 @@
     // Base
     .k-splitter {
         height: 300px;
-        border-width: $splitter-border-width;
+        border-width: $kendo-splitter-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $splitter-font-family;
-        font-size: $splitter-font-size;
-        line-height: $splitter-line-height;
+        font-family: $kendo-splitter-font-family;
+        font-size: $kendo-splitter-font-size;
+        line-height: $kendo-splitter-line-height;
         display: block;
         position: relative;
         -webkit-touch-callout: none;
@@ -59,7 +59,7 @@
         }
 
         .k-icon {
-            font-size: $splitter-resize-icon-size;
+            font-size: $kendo-splitter-resize-icon-size;
         }
 
     }
@@ -69,7 +69,7 @@
 
     .k-ghost-splitbar-horizontal,
     .k-splitbar-horizontal {
-        width: $splitter-splitbar-size;
+        width: $kendo-splitter-splitbar-size;
         border-width: 0;
         background-repeat: repeat-y;
         flex-direction: column;
@@ -77,7 +77,7 @@
     }
     .k-ghost-splitbar-vertical,
     .k-splitbar-vertical {
-        height: $splitter-splitbar-size;
+        height: $kendo-splitter-splitbar-size;
         border-width: 0;
         background-repeat: repeat-x;
         flex-direction: row;
@@ -88,8 +88,8 @@
     .k-splitbar-static-vertical { height: 1px; }
 
     .k-splitbar-draggable-horizontal .k-resize-handle {
-        width: $splitter-drag-handle-thickness;
-        height: $splitter-drag-handle-length;
+        width: $kendo-splitter-drag-handle-thickness;
+        height: $kendo-splitter-drag-handle-length;
         position: static;
         z-index: 1;
     }
@@ -108,24 +108,24 @@
     }
 
     .k-splitbar-horizontal .k-collapse-prev {
-        margin-bottom: $splitter-drag-icon-margin;
+        margin-bottom: $kendo-splitter-drag-icon-margin;
     }
 
     .k-splitbar-horizontal .k-collapse-next {
-        margin-top: $splitter-drag-icon-margin;
+        margin-top: $kendo-splitter-drag-icon-margin;
     }
 
     .k-splitbar-vertical .k-collapse-prev {
-        margin-right: $splitter-drag-icon-margin;
+        margin-right: $kendo-splitter-drag-icon-margin;
     }
 
     .k-splitbar-vertical .k-collapse-next {
-        margin-left: $splitter-drag-icon-margin;
+        margin-left: $kendo-splitter-drag-icon-margin;
     }
 
     .k-splitbar-draggable-vertical .k-resize-handle {
-        width: $splitter-drag-handle-length;
-        height: $splitter-drag-handle-thickness;
+        width: $kendo-splitter-drag-handle-length;
+        height: $kendo-splitter-drag-handle-thickness;
         position: static;
         z-index: 1;
     }

package/scss/splitter/_theme.scss

@@ -2,33 +2,33 @@
 
     .k-splitter {
         @include fill(
-            $splitter-text,
-            $splitter-bg,
-            $splitter-border
+            $kendo-splitter-text,
+            $kendo-splitter-bg,
+            $kendo-splitter-border
         );
     }
 
     // Splitbar
     .k-splitbar {
-        color: $splitbar-text;
-        background-color: $splitbar-bg;
+        color: $kendo-splitbar-text;
+        background-color: $kendo-splitbar-bg;
     }
     .k-splitbar:hover,
     .k-splitbar.k-hover,
     .k-splitbar-horizontal-hover,
     .k-splitbar-vertical-hover {
-        color: $splitbar-hover-text;
-        background-color: $splitbar-hover-bg;
+        color: $kendo-splitbar-hover-text;
+        background-color: $kendo-splitbar-hover-bg;
     }
     .k-splitbar:focus,
     .k-splitbar.k-focus {
-        color: $splitbar-selected-text;
-        background: $splitbar-selected-bg;
+        color: $kendo-splitbar-selected-text;
+        background: $kendo-splitbar-selected-bg;
     }
 
     // Ghost splitbar
     .k-ghost-splitbar {
-        background-color: $splitbar-hover-bg;
+        background-color: $kendo-splitbar-hover-bg;
     }
 
 }

package/scss/splitter/_variables.scss

@@ -1,24 +1,24 @@
 // Splitter
-$splitter-border-width: 1px !default;
-$splitter-font-family: $font-family !default;
-$splitter-font-size: $font-size !default;
-$splitter-line-height: $line-height !default;
+$kendo-splitter-border-width: 1px !default;
+$kendo-splitter-font-family: $kendo-font-family !default;
+$kendo-splitter-font-size: $kendo-font-size-md !default;
+$kendo-splitter-line-height: $kendo-line-height-md !default;
 
-$splitter-bg: $kendo-component-bg !default;
-$splitter-text: $kendo-component-text !default;
-$splitter-border: $kendo-component-border !default;
+$kendo-splitter-bg: $kendo-component-bg !default;
+$kendo-splitter-text: $kendo-component-text !default;
+$kendo-splitter-border: $kendo-component-border !default;
 
-$splitter-splitbar-size: 8px !default;
-$splitter-resize-icon-size: 10px !default;
-$splitter-drag-handle-length: 20px !default;
-$splitter-drag-handle-thickness: 2px !default;
-$splitter-drag-icon-margin: 7px !default;
+$kendo-splitter-splitbar-size: 8px !default;
+$kendo-splitter-resize-icon-size: 10px !default;
+$kendo-splitter-drag-handle-length: 20px !default;
+$kendo-splitter-drag-handle-thickness: 2px !default;
+$kendo-splitter-drag-icon-margin: 7px !default;
 
-$splitbar-bg: $base-bg !default;
-$splitbar-text: $base-text !default;
+$kendo-splitbar-bg: $kendo-base-bg !default;
+$kendo-splitbar-text: $kendo-base-text !default;
 
-$splitbar-hover-bg: k-try-shade( $splitbar-bg, .5 ) !default;
-$splitbar-hover-text: $splitbar-text !default;
+$kendo-splitbar-hover-bg: k-try-shade( $kendo-splitbar-bg, .5 ) !default;
+$kendo-splitbar-hover-text: $kendo-splitbar-text !default;
 
-$splitbar-selected-bg: $kendo-selected-bg !default;
-$splitbar-selected-text: $kendo-selected-text !default;
+$kendo-splitbar-selected-bg: $kendo-selected-bg !default;
+$kendo-splitbar-selected-text: $kendo-selected-text !default;