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

package/scss/timeline/_layout.scss

@@ -3,9 +3,9 @@
     .k-timeline {
         box-sizing: border-box;
         outline: 0;
-        font-family: $timeline-font-family;
-        font-size: $timeline-font-size;
-        line-height: $timeline-line-height;
+        font-family: $kendo-timeline-font-family;
+        font-size: $kendo-timeline-font-size;
+        line-height: $kendo-timeline-line-height;
         display: block;
         background-color: transparent;
         -webkit-touch-callout: none;
@@ -31,18 +31,18 @@
         .k-timeline-flag {
             display: inline-block;
             text-align: center;
-            padding: $timeline-flag-padding-y $timeline-flag-padding-x;
+            padding: $kendo-timeline-flag-padding-y $kendo-timeline-flag-padding-x;
             border-radius: $kendo-border-radius;
-            line-height: $timeline-flag-line-height;
-            min-width: $timeline-flag-min-width;
-            max-width: $timeline-flag-max-width;
+            line-height: $kendo-timeline-flag-line-height;
+            min-width: $kendo-timeline-flag-min-width;
+            max-width: $kendo-timeline-flag-max-width;
             position: relative;
             z-index: 1;
         }
 
         .k-timeline-circle {
-            width: $timeline-circle-width;
-            height: $timeline-circle-height;
+            width: $kendo-timeline-circle-width;
+            height: $kendo-timeline-circle-height;
             border-radius: 50%;
             flex-shrink: 0;
             position: relative;
@@ -104,15 +104,15 @@
         .k-timeline-card-callout {
             &.k-callout-w,
             &.k-callout-e {
-                top: $timeline-track-event-offset;
+                top: $kendo-timeline-track-event-offset;
             }
         }
     }
 
     .k-timeline-vertical,
     .k-timeline-horizontal {
-        padding: 0 $timeline-spacing-x;
-        margin: $timeline-spacing-y 0;
+        padding: 0 $kendo-timeline-spacing-x;
+        margin: $kendo-timeline-spacing-y 0;
         width: 100%;
         position: relative;
         border: 0;
@@ -124,21 +124,21 @@
             content: "";
             position: absolute;
             top: 0;
-            border-width: $timeline-track-border-width;
+            border-width: $kendo-timeline-track-border-width;
             border-style: solid;
         }
     }
 
     .k-timeline-vertical {
-        padding-left: $timeline-vertical-padding-with-dates-calc;
+        padding-left: $kendo-timeline-vertical-padding-with-dates-calc;
 
         &.k-timeline-dates-hidden {
-            padding-left: $timeline-vertical-padding-calc;
+            padding-left: $kendo-timeline-vertical-padding-calc;
         }
 
         &::after {
             height: 100%;
-            width: $timeline-track-size;
+            width: $kendo-timeline-track-size;
             transform: translateX(-50%);
             border-radius: $kendo-border-radius-lg;
         }
@@ -148,7 +148,7 @@
             align-items: center;
 
             &:first-child {
-                padding-top: $timeline-spacing-y;
+                padding-top: $kendo-timeline-spacing-y;
             }
         }
 
@@ -158,8 +158,8 @@
 
         .k-timeline-date-wrap {
             position: absolute;
-            padding-right: $timeline-items-padding;
-            margin-top: $timeline-track-event-offset;
+            padding-right: $kendo-timeline-items-padding;
+            margin-top: $kendo-timeline-track-event-offset;
             transform: translate(-100%, -50%);
             text-align: right;
         }
@@ -167,20 +167,20 @@
         .k-timeline-event {
             display: flex;
             align-items: flex-start;
-            padding: $timeline-spacing-y 0;
+            padding: $kendo-timeline-spacing-y 0;
         }
 
         .k-timeline-card {
-            padding-left: $timeline-items-padding;
+            padding-left: $kendo-timeline-items-padding;
 
             .k-card {
-                margin-left: $timeline-items-padding;
-                min-height: $timeline-event-min-height-calc;
-                width: $timeline-event-width;
+                margin-left: $kendo-timeline-items-padding;
+                min-height: $kendo-timeline-event-min-height-calc;
+                width: $kendo-timeline-event-width;
                 max-width: 100%;
 
                 .k-card-header {
-                    border-radius: $card-border-radius; // In vertical collapsed mode there shold be a bottom border radius
+                    border-radius: $kendo-card-border-radius; // In vertical collapsed mode there shold be a bottom border radius
                 }
 
                 .k-card-title {
@@ -216,13 +216,13 @@
         }
 
         .k-timeline-circle {
-            margin-top: $timeline-track-event-offset;
+            margin-top: $kendo-timeline-track-event-offset;
             transform: translate(-50%, -50%);
-            margin-right: - k-math-div( $timeline-circle-width, 2 );
+            margin-right: - k-math-div( $kendo-timeline-circle-width, 2 );
         }
 
         &.k-timeline-alternating {
-            padding-left: $timeline-spacing-x;
+            padding-left: $kendo-timeline-spacing-x;
 
             &::after {
                 left: 50%;
@@ -245,15 +245,15 @@
                     .k-timeline-date-wrap {
                         text-align: left;
                         padding-right: 0;
-                        padding-left: $timeline-items-padding;
+                        padding-left: $kendo-timeline-items-padding;
                     }
 
                     .k-timeline-card {
                         padding-left: 0;
-                        padding-right: $timeline-items-padding;
+                        padding-right: $kendo-timeline-items-padding;
 
                         .k-card {
-                            margin-right: $timeline-items-padding;
+                            margin-right: $kendo-timeline-items-padding;
                             margin-left: auto;
                         }
                     }
@@ -299,7 +299,7 @@
 
         .k-timeline-date-wrap {
             margin-top: auto;
-            margin-bottom: $timeline-date-margin-bottom;
+            margin-bottom: $kendo-timeline-date-margin-bottom;
         }
 
         .k-timeline-card {
@@ -312,11 +312,11 @@
 
         .k-timeline-events-list {
             overflow-x: hidden;
-            padding-top: $timeline-track-margin-bottom;
+            padding-top: $kendo-timeline-track-margin-bottom;
 
             .k-timeline-scrollable-wrap {
                 position: relative;
-                height: $timeline-event-height;
+                height: $kendo-timeline-event-height;
 
                 .k-timeline-event {
                     position: absolute;
@@ -330,20 +330,20 @@
 
         .k-timeline-track-wrap {
             position: relative;
-            padding: k-math-div( $timeline-track-arrow-height, 2 ) 0;
+            padding: k-math-div( $kendo-timeline-track-arrow-height, 2 ) 0;
 
             &::after {
                 top: auto;
-                bottom: $timeline-track-bottom-calc;
-                left: $timeline-track-start-calc;
-                right: $timeline-track-end-calc;
+                bottom: $kendo-timeline-track-bottom-calc;
+                left: $kendo-timeline-track-start-calc;
+                right: $kendo-timeline-track-end-calc;
                 transform: translateY(-50%);
-                height: $timeline-track-size;
+                height: $kendo-timeline-track-size;
             }
 
             .k-timeline-track {
                 overflow: hidden;
-                margin: 0 $timeline-track-arrow-width;
+                margin: 0 $kendo-timeline-track-arrow-width;
                 position: relative;
                 z-index: 2;
 
@@ -353,14 +353,14 @@
             }
 
             .k-timeline-flag {
-                margin-bottom: $timeline-flag-margin-bottom-calc;
+                margin-bottom: $kendo-timeline-flag-margin-bottom-calc;
                 position: relative;
-                min-width: $timeline-horizontal-flag-min-width;
+                min-width: $kendo-timeline-horizontal-flag-min-width;
 
                 &::after {
                     content: "";
-                    width: $timeline-flag-callout-width;
-                    height: $timeline-flag-callout-height;
+                    width: $kendo-timeline-flag-callout-width;
+                    height: $kendo-timeline-flag-callout-height;
                     position: absolute;
                     left: 50%;
                     bottom: 0;
@@ -370,18 +370,18 @@
         }
 
         .k-timeline-scrollable-wrap {
-            padding-bottom: $timeline-track-wrap-padding-bottom;
+            padding-bottom: $kendo-timeline-track-wrap-padding-bottom;
             display: flex;
             outline: 0;
         }
     }
 
     .k-timeline-arrow {
-        width: $timeline-track-arrow-width;
-        height: $timeline-track-arrow-height;
+        width: $kendo-timeline-track-arrow-width;
+        height: $kendo-timeline-track-arrow-height;
         border-radius: 50%;
         position: absolute;
-        bottom: calc(#{$timeline-track-size} + #{$timeline-track-wrap-padding-bottom} + 2 * #{$timeline-track-border-width});
+        bottom: calc(#{$kendo-timeline-track-size} + #{$kendo-timeline-track-wrap-padding-bottom} + 2 * #{$kendo-timeline-track-border-width});
         z-index: 3;
         display: flex;
         align-items: center;
@@ -397,11 +397,11 @@
     }
 
     .k-timeline-mobile {
-        padding: 0 $timeline-mobile-spacing-x;
-        margin: $timeline-mobile-spacing-y 0;
+        padding: 0 $kendo-timeline-mobile-spacing-x;
+        margin: $kendo-timeline-mobile-spacing-y 0;
 
         .k-timeline-flag {
-            max-width: $timeline-mobile-flag-max-width;
+            max-width: $kendo-timeline-mobile-flag-max-width;
         }
 
         &.k-timeline-horizontal {
@@ -411,14 +411,14 @@
         }
 
         &.k-timeline-vertical {
-            padding-left: $timeline-mobile-vertical-padding-with-dates-calc;
+            padding-left: $kendo-timeline-mobile-vertical-padding-with-dates-calc;
 
             &.k-timeline-dates-hidden {
-                padding-left: $timeline-mobile-vertical-padding-calc;
+                padding-left: $kendo-timeline-mobile-vertical-padding-calc;
             }
 
             &.k-timeline-alternating {
-                padding-left: $timeline-mobile-spacing-x;
+                padding-left: $kendo-timeline-mobile-spacing-x;
             }
 
             .k-timeline-card {

package/scss/timeline/_theme.scss

@@ -2,32 +2,32 @@
 
     .k-timeline {
         .k-timeline-flag {
-            color: $timeline-flag-text;
-            background-color: $timeline-flag-bg;
+            color: $kendo-timeline-flag-text;
+            background-color: $kendo-timeline-flag-bg;
         }
 
         .k-timeline-circle {
-            background-color: $timeline-circle-bg;
+            background-color: $kendo-timeline-circle-bg;
         }
 
         .k-timeline-card {
             .k-card-header {
-                background-color: $card-bg;
-                color: $card-text;
+                background-color: $kendo-card-bg;
+                color: $kendo-card-text;
             }
 
             .k-card-body {
 
                 // Scrollbar styles for Mozilla
-                scrollbar-color: $card-border $card-bg;
+                scrollbar-color: $kendo-card-border $kendo-card-bg;
 
                 // Scrollbar styles for Chrome, Safari and Opera
                 &::-webkit-scrollbar-track {
-                    background: $card-bg;
+                    background: $kendo-card-bg;
                 }
 
                 &::-webkit-scrollbar-thumb {
-                    background: $card-border;
+                    background: $kendo-card-border;
                 }
 
                 &::-webkit-scrollbar-thumb:hover {
@@ -43,25 +43,25 @@
 
         .k-timeline-arrow.k-disabled {
             opacity: 1; // The arrow button in disabled mode should have a solid background
-            color: $timeline-track-arrow-disabled-text;
-            background-color: $timeline-track-arrow-disabled-bg;
-            border-color: $timeline-track-arrow-disabled-border;
+            color: $kendo-timeline-track-arrow-disabled-text;
+            background-color: $kendo-timeline-track-arrow-disabled-bg;
+            border-color: $kendo-timeline-track-arrow-disabled-border;
         }
     }
 
     .k-timeline-vertical,
     .k-timeline-horizontal .k-timeline-track-wrap {
         &::after {
-            background-color: $timeline-track-bg;
-            border-color: $timeline-track-border-color;
+            background-color: $kendo-timeline-track-bg;
+            border-color: $kendo-timeline-track-border-color;
         }
     }
 
     .k-timeline-horizontal .k-timeline-flag::after {
-        background-color: $timeline-flag-bg;
+        background-color: $kendo-timeline-flag-bg;
     }
 
     .k-timeline-track-item.k-focus .k-timeline-circle {
-        @include focus-indicator( $timeline-track-item-focus-shadow );
+        @include focus-indicator( $kendo-timeline-track-item-focus-shadow );
     }
 }

package/scss/timeline/_variables.scss

@@ -1,66 +1,66 @@
 // Timeline
-$timeline-spacing-x: 40px !default;
-$timeline-spacing-y: 40px !default;
-$timeline-items-padding: 16px !default;
+$kendo-timeline-spacing-x: 40px !default;
+$kendo-timeline-spacing-y: 40px !default;
+$kendo-timeline-items-padding: 16px !default;
 
-$timeline-font-family: $font-family !default;
-$timeline-font-size: $font-size !default;
-$timeline-line-height: $line-height !default;
+$kendo-timeline-font-family: $kendo-font-family !default;
+$kendo-timeline-font-size: $kendo-font-size-md !default;
+$kendo-timeline-line-height: $kendo-line-height-md !default;
 
-$timeline-mobile-spacing-x: 16px !default;
-$timeline-mobile-spacing-y: 16px !default;
+$kendo-timeline-mobile-spacing-x: 16px !default;
+$kendo-timeline-mobile-spacing-y: 16px !default;
 
-$timeline-track-arrow-width: 30px !default;
-$timeline-track-arrow-height: 30px !default;
+$kendo-timeline-track-arrow-width: 30px !default;
+$kendo-timeline-track-arrow-height: 30px !default;
 
-$timeline-track-arrow-disabled-bg: k-true-mix($kendo-button-bg, $kendo-body-bg, 65%) !default;
-$timeline-track-arrow-disabled-text: k-true-mix($kendo-button-text, $kendo-body-bg, 65%) !default;
-$timeline-track-arrow-disabled-border: k-true-mix(#000000, $kendo-body-bg, 4.8%) !default;
+$kendo-timeline-track-arrow-disabled-bg: k-true-mix($kendo-button-bg, $kendo-body-bg, 65%) !default;
+$kendo-timeline-track-arrow-disabled-text: k-true-mix($kendo-button-text, $kendo-body-bg, 65%) !default;
+$kendo-timeline-track-arrow-disabled-border: k-true-mix(#000000, $kendo-body-bg, 4.8%) !default;
 
-$timeline-track-size: 6px !default;
-$timeline-track-wrap-padding-bottom: k-math-div( $timeline-track-size, 2 ) !default;
-$timeline-track-border-width: 1px !default;
-$timeline-track-margin-bottom: 16px !default;
-$timeline-track-bottom-calc: calc(#{k-math-div( $timeline-track-arrow-height, 2 )} + #{$timeline-track-wrap-padding-bottom}) !default;
-$timeline-track-start-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
-$timeline-track-end-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
-$timeline-track-bg: $kendo-button-bg !default;
-$timeline-track-border-color: $kendo-button-border !default;
+$kendo-timeline-track-size: 6px !default;
+$kendo-timeline-track-wrap-padding-bottom: k-math-div( $kendo-timeline-track-size, 2 ) !default;
+$kendo-timeline-track-border-width: 1px !default;
+$kendo-timeline-track-margin-bottom: 16px !default;
+$kendo-timeline-track-bottom-calc: calc(#{k-math-div( $kendo-timeline-track-arrow-height, 2 )} + #{$kendo-timeline-track-wrap-padding-bottom}) !default;
+$kendo-timeline-track-start-calc: calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width}) !default;
+$kendo-timeline-track-end-calc: calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width}) !default;
+$kendo-timeline-track-bg: $kendo-button-bg !default;
+$kendo-timeline-track-border-color: $kendo-button-border !default;
 
-$timeline-track-item-focus-shadow: 0 3px 4px 0 rgba($kendo-color-primary, .4) !default;
+$kendo-timeline-track-item-focus-shadow: 0 3px 4px 0 rgba($kendo-color-primary, .4) !default;
 
-$timeline-track-event-offset: 36px !default;
+$kendo-timeline-track-event-offset: 36px !default;
 
-$timeline-flag-padding-x: $kendo-button-padding-x !default;
-$timeline-flag-padding-y: $kendo-button-padding-y !default;
-$timeline-flag-line-height: $kendo-button-line-height !default;
-$timeline-flag-min-width: 80px !default;
-$timeline-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-spacing-x}) !default;
-$timeline-mobile-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-mobile-spacing-x}) !default;
-$timeline-horizontal-flag-min-width: 60px !default;
-$timeline-flag-bg: $kendo-color-primary !default;
-$timeline-flag-text: k-contrast-legacy( $timeline-flag-bg ) !default;
+$kendo-timeline-flag-padding-x: $kendo-button-padding-x !default;
+$kendo-timeline-flag-padding-y: $kendo-button-padding-y !default;
+$kendo-timeline-flag-line-height: $kendo-button-line-height !default;
+$kendo-timeline-flag-min-width: 80px !default;
+$kendo-timeline-flag-max-width: calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-spacing-x}) !default;
+$kendo-timeline-mobile-flag-max-width: calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x}) !default;
+$kendo-timeline-horizontal-flag-min-width: 60px !default;
+$kendo-timeline-flag-bg: $kendo-color-primary !default;
+$kendo-timeline-flag-text: k-contrast-legacy( $kendo-timeline-flag-bg ) !default;
 
-$timeline-flag-callout-width: 10px !default;
-$timeline-flag-callout-height: 10px !default;
+$kendo-timeline-flag-callout-width: 10px !default;
+$kendo-timeline-flag-callout-height: 10px !default;
 
-$timeline-flag-offset-bottom: 4px !default;
-$timeline-flag-margin-bottom-calc: calc(#{$timeline-track-size} + 2 * #{$timeline-track-border-width} + #{$timeline-flag-offset-bottom} + #{$timeline-flag-callout-height}) !default;
+$kendo-timeline-flag-offset-bottom: 4px !default;
+$kendo-timeline-flag-margin-bottom-calc: calc(#{$kendo-timeline-track-size} + 2 * #{$kendo-timeline-track-border-width} + #{$kendo-timeline-flag-offset-bottom} + #{$kendo-timeline-flag-callout-height}) !default;
 
-$timeline-date-width: 50px !default;
-$timeline-date-margin-bottom: 8px !default;
+$kendo-timeline-date-width: 50px !default;
+$kendo-timeline-date-margin-bottom: 8px !default;
 
-$timeline-vertical-padding-calc: calc(#{$timeline-spacing-x} + (#{$timeline-flag-min-width} - #{$timeline-track-size}) / 2) !default;
-$timeline-vertical-padding-with-dates-calc: calc(#{$timeline-vertical-padding-calc} + #{$timeline-date-width}) !default;
-$timeline-mobile-vertical-padding-calc: calc(#{$timeline-mobile-spacing-x} + (#{$timeline-flag-min-width} - #{$timeline-track-size}) / 2) !default;
-$timeline-mobile-vertical-padding-with-dates-calc: calc(#{$timeline-mobile-vertical-padding-calc} + #{$timeline-date-width}) !default;
+$kendo-timeline-vertical-padding-calc: calc(#{$kendo-timeline-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2) !default;
+$kendo-timeline-vertical-padding-with-dates-calc: calc(#{$kendo-timeline-vertical-padding-calc} + #{$kendo-timeline-date-width}) !default;
+$kendo-timeline-mobile-vertical-padding-calc: calc(#{$kendo-timeline-mobile-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2) !default;
+$kendo-timeline-mobile-vertical-padding-with-dates-calc: calc(#{$kendo-timeline-mobile-vertical-padding-calc} + #{$kendo-timeline-date-width}) !default;
 
-$timeline-circle-width: 16px !default;
-$timeline-circle-height: 16px !default;
-$timeline-circle-bg: $kendo-color-primary !default;
+$kendo-timeline-circle-width: 16px !default;
+$kendo-timeline-circle-height: 16px !default;
+$kendo-timeline-circle-bg: $kendo-color-primary !default;
 
-$timeline-collapse-arrow-padding-x: $kendo-padding-md-x !default;
+$kendo-timeline-collapse-arrow-padding-x: $kendo-padding-md-x !default;
 
-$timeline-event-width: 400px !default;
-$timeline-event-height: 600px !default;
-$timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$card-border-width})) !default;
+$kendo-timeline-event-width: 400px !default;
+$kendo-timeline-event-height: 600px !default;
+$kendo-timeline-event-min-height-calc: calc(2 * (#{$kendo-timeline-track-event-offset} - #{$kendo-card-border-width})) !default;

package/scss/timeselector/_layout.scss

@@ -2,13 +2,13 @@
 
     // Time selector
     .k-timeselector {
-        border-width: $time-selector-border-width;
+        border-width: $kendo-time-selector-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $time-selector-font-family;
-        font-size: $time-selector-font-size;
-        line-height: $time-selector-line-height;
+        font-family: $kendo-time-selector-font-family;
+        font-size: $kendo-time-selector-font-size;
+        line-height: $kendo-time-selector-line-height;
         position: relative;
         overflow: hidden;
         display: flex;
@@ -26,7 +26,7 @@
     // Time selector header
     .k-time-header,
     .k-time-selector-header {
-        padding: $time-selector-header-padding-y $time-selector-header-padding-x;
+        padding: $kendo-time-selector-header-padding-y $kendo-time-selector-header-padding-x;
         box-sizing: border-box;
         display: flex;
         align-items: center;
@@ -71,12 +71,12 @@
     .k-time-highlight,
     .k-time-list-highlight {
         width: 100%;
-        height: $time-list-highlight-height;
-        border-width: $time-list-highlight-border-width;
+        height: $kendo-time-list-highlight-height;
+        border-width: $kendo-time-list-highlight-border-width;
         border-style: solid;
         box-sizing: border-box;
         position: absolute;
-        top: calc( 50% + #{k-math-div( $time-list-title-height, 2 )});
+        top: calc( 50% + #{k-math-div( $kendo-time-list-title-height, 2 )});
         left: 0;
         right: 0;
         transform: translateY(-50%);
@@ -86,8 +86,8 @@
 
     // Time list wrapper
     .k-time-list-wrapper {
-        min-width: $time-list-width;
-        height: $time-list-height;
+        min-width: $kendo-time-list-width;
+        height: $kendo-time-list-height;
         box-sizing: content-box;
         display: inline-flex;
         flex-flow: column nowrap;
@@ -98,8 +98,8 @@
         flex: 1 1 auto;
 
         .k-title {
-            font-size: $time-list-title-font-size;
-            line-height: $time-list-title-line-height;
+            font-size: $kendo-time-list-title-font-size;
+            line-height: $kendo-time-list-title-line-height;
             font-weight: bold;
             text-align: center;
             text-transform: capitalize;
@@ -115,14 +115,14 @@
                 width: 100%;
                 left: 0;
                 pointer-events: none;
-                height: calc( 50% - #{k-math-div( $time-list-highlight-height, 2 )} );
+                height: calc( 50% - #{k-math-div( $kendo-time-list-highlight-height, 2 )} );
                 box-sizing: border-box;
                 border-width: 0;
                 border-style: solid;
             }
 
             &::before {
-                top: $time-list-title-height;
+                top: $kendo-time-list-title-height;
             }
 
             &::after {
@@ -173,7 +173,7 @@
 
         > ul {
             height: auto;
-            width: $time-list-width;
+            width: $kendo-time-list-width;
             margin: auto;
         }
 
@@ -189,21 +189,21 @@
     // Time list item
     .k-time-list-item,
     .k-time-list .k-item {
-        padding: $time-list-item-padding-y $time-list-item-padding-x;
+        padding: $kendo-time-list-item-padding-y $kendo-time-list-item-padding-x;
     }
 
 
     // Time separator
     .k-time-separator {
         width: 0;
-        height: $time-list-highlight-height;
+        height: $kendo-time-list-highlight-height;
         align-self: center;
         display: inline-flex;
         justify-content: center;
         align-items: center;
         position: relative;
         z-index: 11;
-        top: calc( #{k-math-div( $time-list-title-height, 2 )} );
+        top: calc( #{k-math-div( $kendo-time-list-title-height, 2 )} );
     }
 
 

package/scss/timeselector/_theme.scss

@@ -3,9 +3,9 @@
     // Time selector
     .k-timeselector {
         @include fill(
-            $time-selector-text,
-            $time-selector-bg,
-            $time-selector-border
+            $kendo-time-selector-text,
+            $kendo-time-selector-bg,
+            $kendo-time-selector-border
         );
     }
 
@@ -16,11 +16,11 @@
 
         .k-time-now {
             // TODO: use a variable
-            color: $link-text;
+            color: $kendo-link-text;
         }
         .k-time-now:hover {
             // TODO: use a variable
-            color: $link-hover-text;
+            color: $kendo-link-hover-text;
         }
     }
 
@@ -29,17 +29,17 @@
     .k-time-list-wrapper {
 
         .k-title {
-            color: $time-list-title-text;
+            color: $kendo-time-list-title-text;
         }
 
         &.k-focus {
             .k-title {
-                color: $time-list-title-focus-text;
+                color: $kendo-time-list-title-focus-text;
             }
 
             &::before,
             &::after {
-                background-color: $time-list-focus-bg;
+                background-color: $kendo-time-list-focus-bg;
             }
         }
     }
@@ -50,7 +50,7 @@
         &::before,
         &::after {
             $shadow-size: 3em;
-            box-shadow: 0 0 $shadow-size k-math-div( $shadow-size, 2 ) $time-selector-bg;
+            box-shadow: 0 0 $shadow-size k-math-div( $shadow-size, 2 ) $kendo-time-selector-bg;
         }
 
         .k-item:hover {
@@ -64,8 +64,8 @@
 
     .k-time-highlight {
         @include fill(
-            $bg: $time-list-highlight-bg,
-            $border: $time-list-highlight-border
+            $bg: $kendo-time-list-highlight-bg,
+            $border: $kendo-time-list-highlight-border
         );
     }