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

package/scss/loader/_variables.scss

@@ -1,26 +1,27 @@
 // Loader
+
 $kendo-loader-segment-border-radius: 50% !default;
-$kendo-loader-segment-size-sm: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-loader-segment-size-md: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-loader-segment-size-lg: k-map-get( $kendo-spacing, 4 ) !default;
-
-$kendo-loader-padding-sm: k-math-div( $kendo-loader-segment-size-sm, 2 ) !default;
-$kendo-loader-padding-md: k-math-div( $kendo-loader-segment-size-md, 2 ) !default;
-$kendo-loader-padding-lg: k-math-div( $kendo-loader-segment-size-lg, 2 ) !default;
-
-$kendo-loader-spinner-3-width-sm: ( $kendo-loader-segment-size-sm * 4 ) !default;
-$kendo-loader-spinner-3-height-sm: ( $kendo-loader-spinner-3-width-sm * $equilateral-height ) !default;
-$kendo-loader-spinner-3-width-md: ( $kendo-loader-segment-size-md * 4 ) !default;
-$kendo-loader-spinner-3-height-md: ( $kendo-loader-spinner-3-width-md * $equilateral-height ) !default;
-$kendo-loader-spinner-3-width-lg: ( $kendo-loader-segment-size-lg * 4 ) !default;
-$kendo-loader-spinner-3-height-lg: ( $kendo-loader-spinner-3-width-lg * $equilateral-height ) !default;
-
-$kendo-loader-spinner-4-width-sm: $kendo-loader-segment-size-sm * 4 !default;
-$kendo-loader-spinner-4-height-sm: $kendo-loader-spinner-4-width-sm !default;
-$kendo-loader-spinner-4-width-md: $kendo-loader-segment-size-md * 4 !default;
-$kendo-loader-spinner-4-height-md: $kendo-loader-spinner-4-width-md !default;
-$kendo-loader-spinner-4-width-lg: $kendo-loader-segment-size-lg * 4 !default;
-$kendo-loader-spinner-4-height-lg: $kendo-loader-spinner-4-width-lg !default;
+$kendo-loader-sm-segment-size: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-loader-md-segment-size: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-loader-lg-segment-size: k-map-get( $kendo-spacing, 4 ) !default;
+
+$kendo-loader-sm-padding: k-math-div( $kendo-loader-sm-segment-size, 2 ) !default;
+$kendo-loader-md-padding: k-math-div( $kendo-loader-md-segment-size, 2 ) !default;
+$kendo-loader-lg-padding: k-math-div( $kendo-loader-lg-segment-size, 2 ) !default;
+
+$kendo-loader-sm-spinner-3-width: ( $kendo-loader-sm-segment-size * 4 ) !default;
+$kendo-loader-sm-spinner-3-height: ( $kendo-loader-sm-spinner-3-width * $equilateral-height ) !default;
+$kendo-loader-md-spinner-3-width: ( $kendo-loader-md-segment-size * 4 ) !default;
+$kendo-loader-md-spinner-3-height: ( $kendo-loader-md-spinner-3-width * $equilateral-height ) !default;
+$kendo-loader-lg-spinner-3-width: ( $kendo-loader-lg-segment-size * 4 ) !default;
+$kendo-loader-lg-spinner-3-height: ( $kendo-loader-lg-spinner-3-width * $equilateral-height ) !default;
+
+$kendo-loader-sm-spinner-4-width: $kendo-loader-sm-segment-size * 4 !default;
+$kendo-loader-sm-spinner-4-height: $kendo-loader-sm-spinner-4-width !default;
+$kendo-loader-md-spinner-4-width: $kendo-loader-md-segment-size * 4 !default;
+$kendo-loader-md-spinner-4-height: $kendo-loader-md-spinner-4-width !default;
+$kendo-loader-lg-spinner-4-width: $kendo-loader-lg-segment-size * 4 !default;
+$kendo-loader-lg-spinner-4-height: $kendo-loader-lg-spinner-4-width !default;
 
 $kendo-loader-secondary-bg: #656565 !default;
 
@@ -30,17 +31,17 @@ $kendo-loader-container-panel-border-color: $kendo-component-border !default;
 $kendo-loader-container-panel-border-radius: $kendo-border-radius-md !default;
 $kendo-loader-container-panel-bg: $kendo-color-white !default;
 
-$kendo-loader-container-padding-sm: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-loader-container-gap-sm: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-loader-container-font-size-sm: $font-size-sm !default;
+$kendo-loader-sm-container-padding: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-loader-sm-container-gap: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-loader-sm-container-font-size: $kendo-font-size-sm !default;
 
-$kendo-loader-container-padding-md: k-map-get( $kendo-spacing, 5 ) !default;
-$kendo-loader-container-gap-md: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-loader-container-font-size-md: $font-size-md !default;
+$kendo-loader-md-container-padding: k-map-get( $kendo-spacing, 5 ) !default;
+$kendo-loader-md-container-gap: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-loader-md-container-font-size: $kendo-font-size-md !default;
 
-$kendo-loader-container-padding-lg: k-map-get( $kendo-spacing, 6 ) !default;
-$kendo-loader-container-gap-lg: k-map-get( $kendo-spacing, 3 ) !default;
-$kendo-loader-container-font-size-lg: $font-size-lg !default;
+$kendo-loader-lg-container-padding: k-map-get( $kendo-spacing, 6 ) !default;
+$kendo-loader-lg-container-gap: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-loader-lg-container-font-size: $kendo-font-size-lg !default;
 
 
 // Loading

package/scss/map/_index.scss

@@ -3,7 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_position.scss";
+// @import "../utils/_position.scss";
 @import "../button/_index.scss";
 @import "../scroller/_index.scss";
 @import "../icons/_index.scss";

package/scss/map/_layout.scss

@@ -4,11 +4,11 @@
     .k-map {
         height: 600px;
         box-sizing: border-box;
-        border-width: $map-border-width;
+        border-width: $kendo-map-border-width;
         border-style: solid;
-        font-size: $map-font-size;
-        line-height: $map-line-height;
-        font-family: $map-font-family;
+        font-size: $kendo-map-font-size;
+        line-height: $kendo-map-line-height;
+        font-family: $kendo-map-font-family;
 
         *,
         *::before,
@@ -37,7 +37,7 @@
         // Marker
         .k-marker {
             transform: translate(-50%, -100%);
-            font-size: $map-marker-size;
+            font-size: $kendo-map-marker-size;
             cursor: pointer;
             position: absolute;
             overflow: visible;
@@ -46,9 +46,9 @@
 
         // Attribution
         .k-attribution {
-            padding: $map-attribution-padding-y $map-attribution-padding-x;
+            padding: $kendo-map-attribution-padding-y $kendo-map-attribution-padding-x;
             border-width: 0;
-            font-size: $map-attribution-font-size;
+            font-size: $kendo-map-attribution-font-size;
             z-index: 1000;
         }
 
@@ -66,10 +66,10 @@
 
     // Navigator
     .k-navigator {
-        margin: $map-navigator-margin;
-        width: $map-navigator-width;
-        height: $map-navigator-width;
-        border-width: $map-navigator-border-width;
+        margin: $kendo-map-navigator-margin;
+        width: $kendo-map-navigator-width;
+        height: $kendo-map-navigator-width;
+        border-width: $kendo-map-navigator-border-width;
         border-style: solid;
         box-sizing: border-box;
         border-radius: 50%;
@@ -95,25 +95,25 @@
         .k-navigator-n,
         .k-navigator-up {
             transform: translateX(-50%);
-            top: $map-navigator-padding;
+            top: $kendo-map-navigator-padding;
             left: 50%;
         }
         .k-navigator-e,
         .k-navigator-right {
             transform: translateY(-50%);
-            right: $map-navigator-padding;
+            right: $kendo-map-navigator-padding;
             top: 50%;
         }
         .k-navigator-s,
         .k-navigator-down {
             transform: translateX(-50%);
-            bottom: $map-navigator-padding;
+            bottom: $kendo-map-navigator-padding;
             left: 50%;
         }
         .k-navigator-w,
         .k-navigator-left {
             transform: translateY(-50%);
-            left: $map-navigator-padding;
+            left: $kendo-map-navigator-padding;
             top: 50%;
         }
     }
@@ -121,7 +121,7 @@
 
     // Zoom control
     .k-zoom-control {
-        margin: $spacer-x;
+        margin: k-map-get( $kendo-spacing, 4 );
         border: 0;
         background: none;
         display: flex;

package/scss/map/_theme.scss

@@ -2,9 +2,9 @@
 
     .k-map {
         @include fill(
-            $map-text,
-            $map-bg,
-            $map-border
+            $kendo-map-text,
+            $kendo-map-bg,
+            $kendo-map-border
         );
 
         .k-navigator {
@@ -18,11 +18,11 @@
         }
 
         .k-marker {
-            color: $map-marker-fill;
+            color: $kendo-map-marker-fill;
         }
 
         .k-attribution {
-            background-color: $map-attribution-bg;
+            background-color: $kendo-map-attribution-bg;
         }
     }
 

package/scss/map/_variables.scss

@@ -1,28 +1,28 @@
 // Map
-$map-border-width: 0px !default;
+$kendo-map-border-width: 0px !default;
 
-$map-font-size: $font-size !default;
-$map-line-height: $line-height !default;
-$map-font-family: $font-family !default;
+$kendo-map-font-size: $kendo-font-size-md !default;
+$kendo-map-line-height: $kendo-line-height-md !default;
+$kendo-map-font-family: $kendo-font-family !default;
 
-$map-bg: $kendo-component-bg !default;
-$map-text: $kendo-component-text !default;
-$map-border: $kendo-component-border !default;
+$kendo-map-bg: $kendo-component-bg !default;
+$kendo-map-text: $kendo-component-text !default;
+$kendo-map-border: $kendo-component-border !default;
 
-$map-navigator-margin: $spacer-x !default;
-$map-navigator-padding: 2px !default;
-$map-navigator-width: calc( #{$icon-size * 3} + #{$map-navigator-padding * 2} ) !default;
-$map-navigator-height: $map-navigator-width !default;
-$map-navigator-border-width: 1px !default;
+$kendo-map-navigator-margin: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-map-navigator-padding: 2px !default;
+$kendo-map-navigator-width: calc( #{$kendo-icon-size * 3} + #{$kendo-map-navigator-padding * 2} ) !default;
+$kendo-map-navigator-height: $kendo-map-navigator-width !default;
+$kendo-map-navigator-border-width: 1px !default;
 
-$map-zoom-control-margin: $spacer-x !default;
-$map-zoom-control-button-padding-x: $kendo-button-padding-y !default;
-$map-zoom-control-button-padding-y: $map-zoom-control-button-padding-x !default;
+$kendo-map-zoom-control-margin: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-map-zoom-control-button-padding-x: $kendo-button-padding-y !default;
+$kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding-x !default;
 
-$map-attribution-padding-x: $kendo-padding-sm-x !default;
-$map-attribution-padding-y: $kendo-padding-sm-y !default;
-$map-attribution-font-size: ($map-font-size * .75) !default;
-$map-attribution-bg: rgba( $map-bg, .8 ) !default;
+$kendo-map-attribution-padding-x: $kendo-padding-sm-x !default;
+$kendo-map-attribution-padding-y: $kendo-padding-sm-y !default;
+$kendo-map-attribution-font-size: ($kendo-map-font-size * .75) !default;
+$kendo-map-attribution-bg: rgba( $kendo-map-bg, .8 ) !default;
 
-$map-marker-size: $icon-size-lg !default;
-$map-marker-fill: $kendo-color-primary !default;
+$kendo-map-marker-size: $kendo-icon-size-xxl !default;
+$kendo-map-marker-fill: $kendo-color-primary !default;

package/scss/mediaplayer/_layout.scss

@@ -2,13 +2,13 @@
 
     // Base
     .k-mediaplayer {
-        border-width: $mediaplayer-border-width;
+        border-width: $kendo-media-player-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $mediaplayer-font-family;
-        font-size: $mediaplayer-font-size;
-        line-height: $mediaplayer-line-height;
+        font-family: $kendo-media-player-font-family;
+        font-size: $kendo-media-player-font-size;
+        line-height: $kendo-media-player-line-height;
         display: block;
         position: relative;
         -webkit-touch-callout: none;
@@ -31,7 +31,7 @@
 
     // Title bar
     .k-mediaplayer-titlebar {
-        padding: $mediaplayer-titlebar-padding-y $mediaplayer-titlebar-padding-x;
+        padding: $kendo-media-player-titlebar-padding-y $kendo-media-player-titlebar-padding-x;
         position: absolute;
         z-index: 2;
         top: 0;

package/scss/mediaplayer/_theme.scss

@@ -3,18 +3,18 @@
     // Theme
     .k-mediaplayer {
         @include fill(
-            $mediaplayer-text,
-            $mediaplayer-bg,
-            $mediaplayer-border
+            $kendo-media-player-text,
+            $kendo-media-player-bg,
+            $kendo-media-player-border
         );
     }
 
 
     // Title bar
     .k-mediaplayer-titlebar {
-        color: $mediaplayer-titlebar-text;
-        background-image: linear-gradient( $mediaplayer-titlebar-gradient );
-        text-shadow: 0 0 2px rgba( $mediaplayer-text, .5 );
+        color: $kendo-media-player-titlebar-text;
+        background-image: linear-gradient( $kendo-media-player-titlebar-gradient );
+        text-shadow: 0 0 2px rgba( $kendo-media-player-text, .5 );
     }
 
 }

package/scss/mediaplayer/_variables.scss

@@ -1,16 +1,16 @@
 // Media player
-$mediaplayer-border-width: 1px !default;
-$mediaplayer-font-family: $font-family !default;
-$mediaplayer-font-size: $font-size !default;
-$mediaplayer-line-height: $line-height !default;
+$kendo-media-player-border-width: 1px !default;
+$kendo-media-player-font-family: $kendo-font-family !default;
+$kendo-media-player-font-size: $kendo-font-size-md !default;
+$kendo-media-player-line-height: $kendo-line-height-md !default;
 
-$mediaplayer-bg: $kendo-component-bg !default;
-$mediaplayer-text: $kendo-component-text !default;
-$mediaplayer-border: $kendo-component-border !default;
+$kendo-media-player-bg: $kendo-component-bg !default;
+$kendo-media-player-text: $kendo-component-text !default;
+$kendo-media-player-border: $kendo-component-border !default;
 
-$mediaplayer-titlebar-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$mediaplayer-titlebar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-$mediaplayer-titlebar-bg: null !default;
-$mediaplayer-titlebar-text: $mediaplayer-bg !default;
-$mediaplayer-titlebar-border: null !default;
-$mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplayer-text, 0 ) !default;
+$kendo-media-player-titlebar-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-media-player-titlebar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-media-player-titlebar-bg: null !default;
+$kendo-media-player-titlebar-text: $kendo-media-player-bg !default;
+$kendo-media-player-titlebar-border: null !default;
+$kendo-media-player-titlebar-gradient: rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) !default;

package/scss/menu/_layout.scss

@@ -2,13 +2,13 @@
 
     // Menu bar
     .k-menu-bar {
-        border-width: $menu-border-width;
+        border-width: $kendo-menu-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $menu-font-family;
-        font-size: $menu-font-size;
-        line-height: $menu-line-height;
+        font-family: $kendo-menu-font-family;
+        font-size: $kendo-menu-font-size;
+        line-height: $kendo-menu-line-height;
         display: flex;
         flex-wrap: nowrap;
         align-items: stretch;
@@ -49,13 +49,13 @@
 
     // Menu link
     .k-menu-link {
-        padding: $menu-item-padding-y $menu-item-padding-x;
+        padding: $kendo-menu-item-padding-y $kendo-menu-item-padding-x;
         outline: 0;
         color: inherit;
         display: flex;
         flex-flow: row nowrap;
         flex: 1 1 auto;
-        gap: $menu-item-icon-spacing;
+        gap: $kendo-menu-item-icon-spacing;
         align-items: center;
         position: relative;
         white-space: nowrap;
@@ -75,7 +75,7 @@
 
     // Expand arrow
     .k-menu-expand-arrow {
-        margin-inline-end: -$icon-spacing;
+        margin-inline-end: -$kendo-icon-spacing;
         display: inline-flex;
         flex-flow: row wrap;
         align-items: center;
@@ -89,11 +89,11 @@
         flex-direction: row;
 
         > .k-menu-item + .k-menu-item {
-            margin-left: $menu-item-spacing;
+            margin-left: $kendo-menu-item-spacing;
         }
 
         > .k-separator {
-            margin: 0 $menu-separator-spacing;
+            margin: 0 $kendo-menu-separator-spacing;
             width: 0;
             height: auto;
             border-width: 0 0 0 1px;
@@ -107,7 +107,7 @@
         flex-direction: column;
 
         > .k-menu-item + .k-menu-item {
-            margin-top: $menu-item-spacing;
+            margin-top: $kendo-menu-item-spacing;
         }
 
         > .k-menu-item > .k-menu-link {
@@ -116,12 +116,12 @@
         }
 
         > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
-            margin-inline-start: $kendo-menu-popup-item-icon-margin-start;
-            margin-inline-end: $kendo-menu-popup-item-icon-margin-end;
+            margin-inline-start: $kendo-menu-popup-md-item-icon-margin-start;
+            margin-inline-end: $kendo-menu-popup-md-item-icon-margin-end;
         }
 
         > .k-separator {
-            margin: $menu-separator-spacing 0;
+            margin: $kendo-menu-separator-spacing 0;
             height: 0;
             border-width: 1px 0 0;
             border-style: solid;
@@ -162,7 +162,7 @@
         }
 
         .k-separator {
-            margin: $menu-separator-spacing 0;
+            margin: $kendo-menu-separator-spacing 0;
             height: 0;
             border-width: 1px 0 0;
             border-style: solid;
@@ -177,63 +177,63 @@
 
     // Sizes
     .k-menu-group-sm {
-        font-size: $kendo-menu-popup-font-size-sm;
-        line-height: $kendo-menu-popup-line-height-sm;
+        font-size: $kendo-menu-popup-sm-font-size;
+        line-height: $kendo-menu-popup-sm-line-height;
 
         // jquery popup overrides those
         .k-menu-item {
-            font-size: $kendo-menu-popup-font-size-sm;
-            line-height: $kendo-menu-popup-line-height-sm;
+            font-size: $kendo-menu-popup-sm-font-size;
+            line-height: $kendo-menu-popup-sm-line-height;
         }
 
         .k-menu-link {
-            padding: $kendo-menu-popup-item-padding-y-sm $kendo-menu-popup-item-padding-x-sm;
-            padding-inline-end: $kendo-menu-popup-item-padding-end-sm;
+            padding: $kendo-menu-popup-sm-item-padding-y $kendo-menu-popup-sm-item-padding-x;
+            padding-inline-end: $kendo-menu-popup-sm-item-padding-end;
         }
 
         .k-menu-expand-arrow {
-            margin-inline-start: $kendo-menu-popup-item-icon-margin-start-sm;
-            margin-inline-end: $kendo-menu-popup-item-icon-margin-end-sm;
+            margin-inline-start: $kendo-menu-popup-sm-item-icon-margin-start;
+            margin-inline-end: $kendo-menu-popup-sm-item-icon-margin-end;
         }
     }
     .k-menu-group-md {
-        font-size: $kendo-menu-popup-font-size-md;
-        line-height: $kendo-menu-popup-line-height-md;
+        font-size: $kendo-menu-popup-md-font-size;
+        line-height: $kendo-menu-popup-md-line-height;
 
         // jquery popup overrides those
         .k-menu-item {
-            font-size: $kendo-menu-popup-font-size-md;
-            line-height: $kendo-menu-popup-line-height-md;
+            font-size: $kendo-menu-popup-md-font-size;
+            line-height: $kendo-menu-popup-md-line-height;
         }
 
         .k-menu-link {
-            padding: $kendo-menu-popup-item-padding-y-md $kendo-menu-popup-item-padding-x-md;
-            padding-inline-end: $kendo-menu-popup-item-padding-end-md;
+            padding: $kendo-menu-popup-md-item-padding-y $kendo-menu-popup-md-item-padding-x;
+            padding-inline-end: $kendo-menu-popup-md-item-padding-end;
         }
 
         .k-menu-expand-arrow {
-            margin-inline-start: $kendo-menu-popup-item-icon-margin-start;
-            margin-inline-end: $kendo-menu-popup-item-icon-margin-end;
+            margin-inline-start: $kendo-menu-popup-md-item-icon-margin-start;
+            margin-inline-end: $kendo-menu-popup-md-item-icon-margin-end;
         }
     }
     .k-menu-group-lg {
-        font-size: $kendo-menu-popup-font-size-lg;
-        line-height: $kendo-menu-popup-line-height-lg;
+        font-size: $kendo-menu-popup-lg-font-size;
+        line-height: $kendo-menu-popup-lg-line-height;
 
         // jquery popup overrides those
         .k-menu-item {
-            font-size: $kendo-menu-popup-font-size-lg;
-            line-height: $kendo-menu-popup-line-height-lg;
+            font-size: $kendo-menu-popup-lg-font-size;
+            line-height: $kendo-menu-popup-lg-line-height;
         }
 
         .k-menu-link {
-            padding: $kendo-menu-popup-item-padding-y-lg $kendo-menu-popup-item-padding-x-lg;
-            padding-inline-end: $kendo-menu-popup-item-padding-end-lg;
+            padding: $kendo-menu-popup-lg-item-padding-y $kendo-menu-popup-lg-item-padding-x;
+            padding-inline-end: $kendo-menu-popup-lg-item-padding-end;
         }
 
         .k-menu-expand-arrow {
-            margin-inline-start: $kendo-menu-popup-item-icon-margin-start-lg;
-            margin-inline-end: $kendo-menu-popup-item-icon-margin-end-lg;
+            margin-inline-start: $kendo-menu-popup-lg-item-icon-margin-start;
+            margin-inline-end: $kendo-menu-popup-lg-item-icon-margin-end;
         }
     }
 
@@ -334,7 +334,7 @@
         .k-menu-horizontal {
 
             > .k-menu-item + .k-menu-item {
-                margin-right: $menu-item-spacing;
+                margin-right: $kendo-menu-item-spacing;
                 margin-left: 0;
             }
         }

package/scss/menu/_theme.scss

@@ -2,43 +2,43 @@
 
     .k-menu:not(.k-context-menu) {
         @include fill(
-            $menu-text,
-            $menu-bg,
-            $menu-border,
-            $menu-gradient
+            $kendo-menu-text,
+            $kendo-menu-bg,
+            $kendo-menu-border,
+            $kendo-menu-gradient
         );
 
         > .k-item {
             @include fill(
-                $menu-item-text,
-                $menu-item-bg,
-                $menu-item-border,
-                $menu-item-gradient
+                $kendo-menu-item-text,
+                $kendo-menu-item-bg,
+                $kendo-menu-item-border,
+                $kendo-menu-item-gradient
             );
 
             &:hover,
             &.k-hover {
                 @include fill(
-                    $menu-item-hover-text,
-                    $menu-item-hover-bg,
-                    $menu-item-hover-border,
-                    $menu-item-hover-gradient
+                    $kendo-menu-item-hover-text,
+                    $kendo-menu-item-hover-bg,
+                    $kendo-menu-item-hover-border,
+                    $kendo-menu-item-hover-gradient
                 );
             }
 
             &:active,
             &.k-active {
                 @include fill(
-                    $menu-item-expanded-text,
-                    $menu-item-expanded-bg,
-                    $menu-item-expanded-border,
-                    $menu-item-expanded-gradient
+                    $kendo-menu-item-expanded-text,
+                    $kendo-menu-item-expanded-bg,
+                    $kendo-menu-item-expanded-border,
+                    $kendo-menu-item-expanded-gradient
                 );
             }
 
             &:focus,
             &.k-focus {
-                @include box-shadow( $menu-item-focus-shadow );
+                @include focus-indicator( $kendo-menu-item-focus-shadow, true );
             }
         }
     }
@@ -85,7 +85,7 @@
         .k-item:focus,
         .k-item.k-focus {
             > .k-link {
-                @include box-shadow( $kendo-menu-popup-item-focus-shadow );
+                @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true );
             }
         }
     }
@@ -94,18 +94,18 @@
     // Scrolling
     .k-menu-scroll-wrapper .k-menu-scroll-button {
         @include fill(
-            $menu-scroll-button-text,
-            $menu-scroll-button-bg,
-            $menu-scroll-button-border,
-            $menu-scroll-button-gradient
+            $kendo-menu-scroll-button-text,
+            $kendo-menu-scroll-button-bg,
+            $kendo-menu-scroll-button-border,
+            $kendo-menu-scroll-button-gradient
         );
 
         &:hover {
             @include fill(
-                $menu-scroll-button-hover-text,
-                $menu-scroll-button-hover-bg,
-                $menu-scroll-button-hover-border,
-                $menu-scroll-button-hover-gradient
+                $kendo-menu-scroll-button-hover-text,
+                $kendo-menu-scroll-button-hover-bg,
+                $kendo-menu-scroll-button-hover-border,
+                $kendo-menu-scroll-button-hover-gradient
             );
 
             &::before {