@progress/kendo-theme-default 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/scheduler/_layout.scss

@@ -13,7 +13,7 @@
         display: flex;
         flex-direction: column;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         table,
         thead,
@@ -202,7 +202,7 @@
     // Header and footer
     .k-scheduler-toolbar {
         border-width: 0;
-        border-bottom-width: $toolbar-border-width;
+        border-bottom-width: $kendo-toolbar-border-width;
         white-space: nowrap;
         flex-shrink: 0;
         position: relative;
@@ -220,16 +220,8 @@
             display: inline-flex;
             flex-flow: row nowrap;
             align-items: center;
-            gap: $icon-spacing;
+            gap: $kendo-icon-spacing;
             cursor: pointer;
-
-            .k-sm-date-format,
-            .k-lg-date-format {
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-            .k-sm-date-format { display: none; }
         }
 
 
@@ -238,17 +230,6 @@
             display: inline-flex;
             flex-flow: row nowrap;
         }
-
-
-        // Responsive scheduler toolbar
-        @media (max-width: 1400px) {
-            .k-nav-current .k-lg-date-format { max-width: 200px; }
-        }
-
-        @media (max-width: 1024px) {
-            .k-nav-current .k-lg-date-format { display: none; }
-            .k-nav-current .k-sm-date-format { display: inline-block; }
-        }
     }
 
 
@@ -277,7 +258,7 @@
     .k-scheduler-footer {
         @include box-shadow( none );
         border-width: 0;
-        border-top-width: $toolbar-border-width;
+        border-top-width: $kendo-toolbar-border-width;
         white-space: nowrap;
         flex-shrink: 0;
         position: relative;
@@ -413,7 +394,7 @@
         cursor: default;
         position: absolute;
         overflow: hidden;
-        padding-right: $padding-x;
+        padding-right: $kendo-padding-md-x;
 
         > div {
             position: relative;
@@ -423,9 +404,9 @@
         // Template
         .k-event-template {
             line-height: $scheduler-event-line-height;
-            padding: $padding-y $padding-x;
+            padding: $kendo-padding-md-y $kendo-padding-md-x;
             // TODO: incompatible units
-            // padding-right: $padding-x-sm + $spacer;
+            // padding-right: $kendo-padding-sm-x + k-map-get( $kendo-spacing, 4 );
         }
         .k-event-time {
             padding-bottom: 0;
@@ -441,7 +422,7 @@
             position: absolute;
             top: 0;
             bottom: 0;
-            right: $padding-x;
+            right: $kendo-padding-md-x;
             z-index: 2;
 
             .k-event-delete {
@@ -467,7 +448,7 @@
 
         // Indicators
         .k-event-actions:first-child {
-            margin: $padding-y-sm .4ex 0 $padding-x-sm;
+            margin: $kendo-padding-sm-y .4ex 0 $kendo-padding-sm-x;
             top: 0;
             right: 0;
             float: left;
@@ -495,7 +476,7 @@
         }
         .k-resize-n::before,
         .k-resize-s::before {
-            width: $spacer * 2;
+            width: k-map-get( $kendo-spacing, 8 );
             border-bottom-width: 1px;
         }
         .k-resize-w {
@@ -508,7 +489,7 @@
         }
         .k-resize-w::before,
         .k-resize-e::before {
-            height: $spacer * 2;
+            height: k-map-get( $kendo-spacing, 8 );
             border-left-width: 1px;
         }
 
@@ -613,12 +594,12 @@
             position: absolute;
         }
         .k-label-top {
-            left: $padding-x-sm;
-            top: $padding-y-sm;
+            left: $kendo-padding-sm-x;
+            top: $kendo-padding-sm-y;
         }
         .k-label-bottom {
-            right: $padding-x-sm;
-            bottom: $padding-y-sm;
+            right: $kendo-padding-sm-x;
+            bottom: $kendo-padding-sm-y;
         }
 
         // Angle tingie
@@ -767,8 +748,8 @@
         .k-task > .k-event-delete {
             color: inherit;
             position: absolute;
-            top: $padding-y-sm;
-            right: $padding-y-sm;
+            top: $kendo-padding-sm-y;
+            right: $kendo-padding-sm-y;
             opacity: .5;
             visibility: hidden;
         }
@@ -965,7 +946,7 @@
         .k-scheduler-datetime-picker {
             display: flex;
             flex-flow: row nowrap;
-            gap: map-get( $spacing, 2 );
+            gap: k-map-get( $kendo-spacing, 2 );
         }
 
     }
@@ -1004,7 +985,7 @@
         .k-event {
             text-align: right;
             padding-right: 0;
-            padding-left: $padding-x;
+            padding-left: $kendo-padding-md-x;
 
             .k-resize-w {
                 left: auto;
@@ -1022,7 +1003,7 @@
             }
 
             .k-event-actions:first-child {
-                margin: $padding-y-sm $padding-x-sm 0 .4ex;
+                margin: $kendo-padding-sm-y $kendo-padding-sm-x 0 .4ex;
                 float: right;
             }
         }
@@ -1095,14 +1076,14 @@
 
 @include exports("scheduler/layout/compatibility") {
 
-    .k-ie,
     .k-safari {
         .k-scheduler-tooltip .k-tooltip-event:not(:last-child) {
             margin-bottom: $scheduler-tooltip-event-gap;
         }
 
         .k-scheduler-yearview .k-calendar-view .k-month {
-            margin: 0 ($scheduler-yearview-calendar-gap / 2);
+            margin-block: 0;
+            margin-inline: k-math-div( $scheduler-yearview-calendar-gap, 2 );
         }
     }
 

package/scss/scheduler/_theme.scss

@@ -84,7 +84,7 @@
 
     .k-scheduler-layout td.k-selected,
     .k-scheduler-layout .k-scheduler-cell.k-selected {
-        background-color: rgba($selected-bg, .25);
+        background-color: rgba($kendo-selected-bg, .25);
     }
 
     .k-scheduler-layout-flex {
@@ -127,7 +127,7 @@
         }
     }
     .k-event-inverse {
-        color: contrast-wcag( $scheduler-event-text );
+        color: k-contrast-legacy( $scheduler-event-text );
     }
     .k-event-ongoing {
         @include box-shadow( $scheduler-event-ongoing-shadow );
@@ -142,12 +142,12 @@
     .k-scheduler-marquee {}
     .k-scheduler-marquee::before,
     .k-scheduler-marquee::after {
-        border-color: $primary;
+        border-color: $kendo-color-primary;
     }
 
     // Edit dialog
     .k-scheduler-edit-dialog {
-        .k-dialog-buttongroup {
+        .k-dialog-actions {
             border-color: $scheduler-border;
         }
     }
@@ -186,10 +186,10 @@
         .k-scheduler-content .k-scheduler-row:hover,
         .k-scheduler-content .k-scheduler-row.k-hover {
             @include fill(
-                $hovered-text,
-                $hovered-bg,
-                $hovered-border,
-                $hovered-gradient
+                $kendo-hover-text,
+                $kendo-hover-bg,
+                $kendo-hover-border,
+                $kendo-hover-gradient
             );
         }
 
@@ -206,7 +206,7 @@
 
         // Selected
         .k-scheduler-content tr.k-selected {
-            background-color: rgba($selected-bg, .25);
+            background-color: rgba($kendo-selected-bg, .25);
         }
         .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {

package/scss/scheduler/_variables.scss

@@ -4,26 +4,26 @@ $scheduler-font-family: $font-family !default;
 $scheduler-font-size: $font-size !default;
 $scheduler-line-height: $line-height !default;
 
-$scheduler-bg: $component-bg !default;
-$scheduler-text: $component-text !default;
-$scheduler-border: $component-border !default;
+$scheduler-bg: $kendo-component-bg !default;
+$scheduler-text: $kendo-component-text !default;
+$scheduler-border: $kendo-component-border !default;
 
-$scheduler-toolbar-bg: $toolbar-bg !default;
-$scheduler-toolbar-text: $toolbar-text !default;
-$scheduler-toolbar-border: $toolbar-border !default;
-$scheduler-toolbar-gradient: $toolbar-gradient !default;
+$scheduler-toolbar-bg: $kendo-toolbar-bg !default;
+$scheduler-toolbar-text: $kendo-toolbar-text !default;
+$scheduler-toolbar-border: $kendo-toolbar-border !default;
+$scheduler-toolbar-gradient: $kendo-toolbar-gradient !default;
 
-$scheduler-footer-bg: $toolbar-bg !default;
-$scheduler-footer-text: $toolbar-text !default;
-$scheduler-footer-border: $toolbar-border !default;
-$scheduler-footer-gradient: $toolbar-gradient !default;
+$scheduler-footer-bg: $kendo-toolbar-bg !default;
+$scheduler-footer-text: $kendo-toolbar-text !default;
+$scheduler-footer-border: $kendo-toolbar-border !default;
+$scheduler-footer-gradient: $kendo-toolbar-gradient !default;
 
 $scheduler-event-min-height: 25px !default;
 $scheduler-event-border-radius: $kendo-border-radius-md !default;
-$scheduler-event-line-height: calc( #{$scheduler-event-min-height} - (2 * #{$padding-y}) ) !default;
+$scheduler-event-line-height: calc( #{$scheduler-event-min-height} - (2 * #{$kendo-padding-md-y}) ) !default;
 
-$scheduler-event-bg: tint( $selected-bg, 2 ) !default;
-$scheduler-event-text: $selected-text !default;
+$scheduler-event-bg: k-color-tint( $kendo-selected-bg, 2 ) !default;
+$scheduler-event-text: $kendo-selected-text !default;
 $scheduler-event-border: null !default;
 $scheduler-event-gradient: null !default;
 $scheduler-event-shadow: null !default;
@@ -34,61 +34,61 @@ $scheduler-event-hover-border: null !default;
 $scheduler-event-hover-gradient: null !default;
 $scheduler-event-hover-shadow: null !default;
 
-$scheduler-event-selected-bg: $selected-bg !default;
-$scheduler-event-selected-text: $selected-text !default;
+$scheduler-event-selected-bg: $kendo-selected-bg !default;
+$scheduler-event-selected-text: $kendo-selected-text !default;
 $scheduler-event-selected-border: null !default;
 $scheduler-event-selected-gradient: null !default;
 $scheduler-event-selected-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
 
 $scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
 
-$scheduler-cell-padding-x: map-get( $spacing, 2 ) !default;
-$scheduler-cell-padding-y: map-get( $spacing, 2 ) !default;
+$scheduler-cell-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$scheduler-cell-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $scheduler-cell-height: $line-height-em !default;
 $scheduler-datecolumn-width: 12em !default;
 $scheduler-timecolumn-width: 11em !default;
 
 $scheduler-current-time-color: #ff0000 !default;
 
-$scheduler-nonwork-bg: try-shade( $scheduler-bg, .5 ) !default;
+$scheduler-nonwork-bg: k-try-shade( $scheduler-bg, .5 ) !default;
 $scheduler-nonwork-text: null !default;
 
 $scheduler-weekend-bg: null !default;
 $scheduler-weekend-text: null !default;
 
-$scheduler-othermonth-bg: try-shade( $scheduler-bg, .5 ) !default;
+$scheduler-othermonth-bg: k-try-shade( $scheduler-bg, .5 ) !default;
 $scheduler-othermonth-text: null !default;
 
-$scheduler-yearview-padding-x: map-get( $spacing, 3 ) !default;
+$scheduler-yearview-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
 $scheduler-yearview-padding-y: $scheduler-yearview-padding-x !default;
 
-$scheduler-yearview-calendar-gap: map-get( $spacing, 3 ) !default;
+$scheduler-yearview-calendar-gap: k-map-get( $kendo-spacing, 3 ) !default;
 
 $scheduler-yearview-indicator-size: 3px !default;
 $scheduler-yearview-indicator-calc-offset-top: calc( #{$calendar-cell-size} - (#{$calendar-cell-padding-y} * 2)) !default;
-$scheduler-yearview-indicator-calc-offset-left: calc( 50% - (#{$scheduler-yearview-indicator-size} / 2) ) !default;
+$scheduler-yearview-indicator-calc-offset-left: calc( 50% - #{k-math-div( $scheduler-yearview-indicator-size, 2 )} ) !default;
 $scheduler-yearview-indicator-border-radius: 50% !default;
-$scheduler-yearview-indicator-bg: $primary !default;
-$scheduler-yearview-indicator-selected-bg: $primary-contrast !default;
+$scheduler-yearview-indicator-bg: $kendo-color-primary !default;
+$scheduler-yearview-indicator-selected-bg: $kendo-color-primary-contrast !default;
 
-$scheduler-tooltip-padding-x: $padding-x !default;
-$scheduler-tooltip-padding-y: $scheduler-tooltip-padding-x !default;
+$scheduler-tooltip-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$scheduler-tooltip-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $scheduler-tooltip-border-width: 0 !default;
-$scheduler-tooltip-bg: $primary-contrast !default;
+$scheduler-tooltip-bg: $kendo-color-primary-contrast !default;
 $scheduler-tooltip-text: $base-text !default;
 $scheduler-tooltip-border: null !default;
 $scheduler-tooltip-shadow: 0px 0px 10px rgba(0, 0, 0, .2) !default;
 
-$scheduler-tooltip-title-margin-y: map-get( $spacing, 3 ) !default;
+$scheduler-tooltip-title-margin-y: k-map-get( $kendo-spacing, 3 ) !default;
 $scheduler-tooltip-month-font-size: $font-size-sm !default;
 $scheduler-tooltip-day-font-size: $scheduler-tooltip-month-font-size * 2 !default;
 
 $scheduler-tooltip-events-max-height: 250px !default;
-$scheduler-tooltip-events-gap: $padding-y !default;
+$scheduler-tooltip-events-gap: k-map-get( $kendo-spacing, 1 ) !default;
 
-$scheduler-tooltip-event-padding-x: $padding-x !default;
-$scheduler-tooltip-event-padding-y: $padding-y !default;
+$scheduler-tooltip-event-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$scheduler-tooltip-event-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $scheduler-tooltip-event-border-radius: $kendo-border-radius-md !default;
-$scheduler-tooltip-event-gap: $padding-x-sm !default;
+$scheduler-tooltip-event-gap: k-map-get( $kendo-spacing, 1 ) !default;
 
 $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;

package/scss/scroller/_index.scss

@@ -7,6 +7,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/scrollview/_index.scss

@@ -8,6 +8,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/scrollview/_layout.scss

@@ -14,7 +14,7 @@
         overflow: hidden;
         display: block;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
     }
 
     .k-scrollview-wrap .k-scrollview,
@@ -115,7 +115,8 @@
 
     .k-scrollview-pageable > .k-button,
     .k-scrollview-nav > .k-link {
-        margin: 0 ($scrollview-pager-item-spacing / 2);
+        margin-block: 0;
+        margin-inline: k-math-div( $scrollview-pager-item-spacing, 2 );
         padding: 0;
         width: $scrollview-pagebutton-size;
         height: $scrollview-pagebutton-size;

package/scss/scrollview/_theme.scss

@@ -54,7 +54,7 @@
             opacity: $scrollview-navigation-hover-opacity;
 
             .k-icon::before {
-                box-shadow: $scrollview-pagebutton-shadow;
+                @include focus-indicator( $scrollview-pagebutton-shadow );
             }
         }
 
@@ -79,7 +79,7 @@
 
         &:focus,
         &.k-focus {
-            box-shadow: $scrollview-pagebutton-shadow;
+            @include focus-indicator( $scrollview-pagebutton-shadow );
         }
     }
 

package/scss/scrollview/_variables.scss

@@ -4,15 +4,15 @@ $scrollview-font-family: $font-family !default;
 $scrollview-font-size: $font-size !default;
 $scrollview-line-height: $line-height !default;
 
-$scrollview-bg: $component-bg !default;
-$scrollview-text: $component-text !default;
-$scrollview-border: $component-border !default;
+$scrollview-bg: $kendo-component-bg !default;
+$scrollview-text: $kendo-component-text !default;
+$scrollview-border: $kendo-component-border !default;
 
 $scrollview-pagebutton-size: 10px !default;
 $scrollview-pagebutton-bg: $kendo-button-bg !default;
 $scrollview-pagebutton-border: $kendo-button-border !default;
-$scrollview-pagebutton-primary-bg: $primary !default;
-$scrollview-pagebutton-primary-border: $primary !default;
+$scrollview-pagebutton-primary-bg: $kendo-color-primary !default;
+$scrollview-pagebutton-primary-border: $kendo-color-primary !default;
 $scrollview-pagebutton-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
 
 $scrollview-pager-offset: 0 !default;
@@ -25,7 +25,7 @@ $scrollview-pager-multidot-intermediate: 3 !default;
 $scrollview-pager-multidot-step: 1px !default;
 
 $scrollview-arrow-icon-size: 4.5em !default;
-$scrollview-arrow-tap-highlight-color: $rgba-transparent !default;
+$scrollview-arrow-tap-highlight-color: $kendo-color-rgba-transparent !default;
 $scrollview-navigation-color: white !default;
 $scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px !default;
 $scrollview-navigation-bg: rgba(0, 0, 0, 0) !default;

package/scss/searchbox/_index.scss

@@ -8,6 +8,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/signature/_index.scss

@@ -5,6 +5,6 @@
 @import "../input/_index.scss";
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/signature/_layout.scss

@@ -49,10 +49,10 @@
 
     // Sizes
     @each $size, $size-props in $kendo-signature-sizes {
-        $_padding-x: map-get($size-props, padding-x);
-        $_padding-y: map-get($size-props, padding-y);
-        $_line-size: map-get($size-props, line-size);
-        $_line-offset: map-get($size-props, line-offset);
+        $_padding-x: k-map-get($size-props, padding-x);
+        $_padding-y: k-map-get($size-props, padding-y);
+        $_line-size: k-map-get($size-props, line-size);
+        $_line-offset: k-map-get($size-props, line-offset);
 
         .k-signature-#{$size} {
             padding-inline: $_padding-x;

package/scss/signature/_variables.scss

@@ -1,15 +1,15 @@
 $kendo-signature-width: 250px !default;
 $kendo-signature-height: 84px !default;
 
-$kendo-signature-lg-min-height: 110px;
+$kendo-signature-lg-min-height: 110px !default;
 
 $kendo-signature-maximized-width: 750px !default;
 $kendo-signature-maximized-height: 252px !default;
 
-$kendo-signature-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-signature-padding-x-sm: map-get( $spacing, 1 ) - map-get($spacing, thin) !default;
-$kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
-$kendo-signature-padding-x-lg: map-get( $spacing, 2 ) !default;
+$kendo-signature-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-signature-padding-x-sm: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-signature-padding-x-md: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-signature-padding-x-lg: k-map-get( $kendo-spacing, 2 ) !default;
 
 $kendo-signature-padding-y: $kendo-signature-padding-x !default;
 $kendo-signature-padding-y-sm: $kendo-signature-padding-x-sm !default;
@@ -18,7 +18,7 @@ $kendo-signature-padding-y-lg: $kendo-signature-padding-x-lg !default;
 
 $kendo-signature-line-width: 1px !default;
 $kendo-signature-line-style: dashed !default;
-$kendo-signature-line-color: rgba( $info, .24 ) !default;
+$kendo-signature-line-color: rgba( $kendo-color-info, .24 ) !default;
 
 $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
 $kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-x-sm} ) !default;
@@ -45,5 +45,5 @@ $kendo-signature-sizes: (
     )
 ) !default;
 
-$kendo-signature-actions-gap: map-get( $spacing, 1 ) !default;
-$kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacing, hair ) !default;
+$kendo-signature-actions-gap: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-signature-maximized-line-width: 3px !default;

package/scss/skeleton/_index.scss

@@ -5,6 +5,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/skeleton/_layout.scss

@@ -21,6 +21,13 @@
         border-radius: $skeleton-circle-border-radius;
     }
 
+
+    // Legacy alias
+    .k-placeholder-line {
+        @extend .k-skeleton !optional;
+        @extend .k-skeleton-text !optional;
+    }
+
 }
 
 

package/scss/skeleton/_variables.scss

@@ -6,6 +6,6 @@ $skeleton-rect-border-radius: 0 !default;
 
 $skeleton-circle-border-radius: 9999px !default;
 
-$skeleton-item-bg: rgba( $inverse, .2 ) !default;
+$skeleton-item-bg: rgba( $kendo-color-inverse, .2 ) !default;
 
 $skeleton-wave-bg: rgba( black, .04 ) !default;

package/scss/slider/_index.scss

@@ -9,8 +9,8 @@
 
 
 // Component
-@import "_variables.scss";
-@import "images/slider-h.scss";
-@import "images/slider-v.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./images/slider-h.scss";
+@import "./images/slider-v.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/slider/_layout.scss

@@ -13,7 +13,7 @@
         align-items: center;
         position: relative;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -353,14 +353,14 @@
         .k-slider-horizontal & {
             height: $slider-track-thickness;
             left: 0;
-            margin-top: -($slider-track-thickness / 2);
+            margin-top: - k-math-div( $slider-track-thickness, 2 );
             top: 50%;
         }
 
         .k-slider-vertical & {
             bottom: 0;
             left: 50%;
-            margin-left: -($slider-track-thickness / 2);
+            margin-left: - k-math-div( $slider-track-thickness, 2 );
             width: $slider-track-thickness;
         }
     }
@@ -421,12 +421,12 @@
     .k-slider-tooltip {
         .k-callout-n,
         .k-callout-s {
-            margin-left: -$tooltip-callout-size / 2;
+            margin-left: - k-math-div( $tooltip-callout-size, 2 );
         }
 
         .k-callout-w,
         .k-callout-e {
-            margin-top: -$tooltip-callout-size / 2;
+            margin-top: - k-math-div( $tooltip-callout-size, 2 );
         }
     }
 

package/scss/slider/_theme.scss

@@ -1,9 +1,9 @@
 @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;
+    $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;
 
     .k-slider {
-        color: $component-text;
+        color: $kendo-component-text;
 
         .k-slider-track,
         .k-slider-selection {
@@ -29,10 +29,10 @@
 
             &:hover {
                 @include fill(
-                    $slider-draghandle-hovered-text,
-                    $slider-draghandle-hovered-bg,
-                    $slider-draghandle-hovered-border,
-                    $slider-draghandle-hovered-gradient
+                    $slider-draghandle-hover-text,
+                    $slider-draghandle-hover-bg,
+                    $slider-draghandle-hover-border,
+                    $slider-draghandle-hover-gradient
                 );
             }
 
@@ -48,13 +48,13 @@
 
             &:focus,
             &.k-focus {
-                @include box-shadow( $slider-draghandle-focused-shadow );
+                @include focus-indicator( $slider-draghandle-focus-shadow );
             }
         }
 
         &.k-focus {
             .k-draghandle {
-                @include box-shadow( $slider-draghandle-focused-shadow );
+                @include focus-indicator( $slider-draghandle-focus-shadow );
             }
         }