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

package/scss/listbox/_variables.scss

@@ -1,20 +1,49 @@
 // Listbox
-$listbox-margin: 12px !default;
-$listbox-button-margin: 8px !default;
-$listbox-width: 10em !default;
-$listbox-default-height: 200px !default;
 
-$listbox-border-width: 1px !default;
-$listbox-font-family: $font-family !default;
-$listbox-font-size: $kendo-list-font-size-md !default;
-$listbox-line-height: $kendo-list-line-height-md !default;
+/// Margin between the listbox elements.
+/// @group listbox
+$kendo-listbox-spacing: k-map-get( $kendo-spacing, 3 ) !default;
+/// Margin between the listbox buttons.
+/// @group listbox
+$kendo-listbox-button-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+/// Width of the listbox.
+/// @group listbox
+$kendo-listbox-width: 10em !default;
+/// Height of the listbox.
+/// @group listbox
+$kendo-listbox-default-height: 200px !default;
+/// Width of the border around the listbox.
+/// @group listbox
+$kendo-listbox-border-width: 1px !default;
+/// Font family of the listbox.
+/// @group listbox
+$kendo-listbox-font-family: $font-family !default;
+/// Font size of the listbox.
+/// @group listbox
+$kendo-listbox-font-size: $kendo-list-font-size-md !default;
+/// Line height of the listbox.
+/// @group listbox
+$kendo-listbox-line-height: $kendo-list-line-height-md !default;
+/// Background color of the listbox.
+/// @group listbox
+$kendo-listbox-bg: $kendo-component-bg !default;
+/// Text color of the listbox.
+/// @group listbox
+$kendo-listbox-text: $kendo-component-text !default;
+/// Border color of the listbox.
+/// @group listbox
+$kendo-listbox-border: $kendo-component-border !default;
 
-$listbox-bg: $component-bg !default;
-$listbox-text: $component-text !default;
-$listbox-border: $component-border !default;
+/// Inline item padding of the listbox.
+/// @group listbox
+$kendo-listbox-item-padding-x: $kendo-list-item-padding-x-md !default;
+/// Block item padding of the listbox.
+/// @group listbox
+$kendo-listbox-item-padding-y: $kendo-list-item-padding-y-md !default;
 
-$listbox-item-padding-x: $kendo-list-item-padding-x-md !default;
-$listbox-item-padding-y: $kendo-list-item-padding-y-md !default;
-
-$listbox-drop-hint-border-width: 2px !default;
-$listbox-drop-hint-width: 2px !default;
+/// Width of the border around the drop hint.
+/// @group listbox
+$kendo-listbox-drop-hint-border-width: 2px !default;
+/// Width of the drop hint.
+/// @group listbox
+$kendo-listbox-drop-hint-width: 2px !default;

package/scss/listgroup/_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/listgroup/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/listgroup/_layout.scss";
+@import "@progress/kendo-theme-default/scss/listgroup/_layout.scss";

package/scss/listgroup/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/listgroup/_theme.scss";
+@import "@progress/kendo-theme-default/scss/listgroup/_theme.scss";

package/scss/listgroup/_variables.scss

@@ -5,10 +5,10 @@ $listgroup-border-radius: $kendo-border-radius-md !default;
 $listgroup-font-size: $font-size !default;
 $listgroup-line-height: k-math-div( 20, 14 ) !default;
 
-$listgroup-bg: $component-bg !default;
-$listgroup-text: $component-text !default;
-$listgroup-border: $component-border !default;
+$listgroup-bg: $kendo-component-bg !default;
+$listgroup-text: $kendo-component-text !default;
+$listgroup-border: $kendo-component-border !default;
 
-$listgroup-item-padding-x: k-map-get( $spacing, 2 ) !default;
-$listgroup-item-padding-y: k-map-get( $spacing, 2 ) !default;
+$listgroup-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$listgroup-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $listgroup-item-border-width: 1px !default;

package/scss/listview/_index.scss

@@ -3,13 +3,13 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_flex.scss";
-@import "../utils/_grid.scss";
+// @import "../utils/_flex.scss";
+// @import "../utils/_grid.scss";
 @import "../pager/_index.scss";
 @import "../icons/_index.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/listview/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/listview/_layout.scss";
+@import "@progress/kendo-theme-default/scss/listview/_layout.scss";

package/scss/listview/_theme.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/listview/_theme.scss";
+@import "@progress/kendo-theme-default/scss/listview/_theme.scss";
 
 @include exports( "listview/theme/material" ) {
 
@@ -9,7 +9,7 @@
     // Listview content
     .k-listview-content {}
     .k-listview-content > .k-selected.k-focus {
-        background-color: rgba( k-contrast-color( $listview-bg ), .12 );
+        background-color: rgba( k-contrast-color( $kendo-listview-bg ), .12 );
     }
 
 }

package/scss/listview/_variables.scss

@@ -1,25 +1,25 @@
 // Listview
-$listview-padding-x: k-map-get( $spacing, 1 ) !default;
-$listview-padding-y: k-map-get( $spacing, 1 ) !default;
-$listview-border-width: 1px !default;
-$listview-font-family: $font-family !default;
-$listview-font-size: $font-size !default;
-$listview-line-height: $line-height !default;
+$kendo-listview-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-listview-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-listview-border-width: 1px !default;
+$kendo-listview-font-family: $font-family !default;
+$kendo-listview-font-size: $font-size !default;
+$kendo-listview-line-height: $line-height !default;
 
-$listview-bg: $component-bg !default;
-$listview-text: $component-text !default;
-$listview-border: $component-border !default;
+$kendo-listview-bg: $kendo-component-bg !default;
+$kendo-listview-text: $kendo-component-text !default;
+$kendo-listview-border: $kendo-component-border !default;
 
-$listview-grid-gap: 10px !default;
+$kendo-listview-grid-gap: 10px !default;
 
-$listview-item-padding-x: k-map-get( $spacing, 1 ) !default;
-$listview-item-padding-y: k-map-get( $spacing, 1 ) !default;
+$kendo-listview-item-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-listview-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 
-$listview-item-selected-bg: rgba( k-contrast-color( $listview-bg ), .04 ) !default;
-$listview-item-selected-text: null !default;
-$listview-item-selected-border: null !default;
+$kendo-listview-item-selected-bg: rgba( k-contrast-color( $kendo-listview-bg ), .04 ) !default;
+$kendo-listview-item-selected-text: null !default;
+$kendo-listview-item-selected-border: null !default;
 
-$listview-item-focus-bg: rgba( k-contrast-color( $listview-bg ), .08 ) !default;
-$listview-item-focus-text: null !default;
-$listview-item-focus-border: null !default;
-$listview-item-focus-shadow: null !default;
+$kendo-listview-item-focus-bg: rgba( k-contrast-color( $kendo-listview-bg ), .08 ) !default;
+$kendo-listview-item-focus-text: null !default;
+$kendo-listview-item-focus-border: null !default;
+$kendo-listview-item-focus-shadow: null !default;

package/scss/loader/_index.scss

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

package/scss/loader/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/loader/_layout.scss";
+@import "@progress/kendo-theme-default/scss/loader/_layout.scss";

package/scss/loader/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/loader/_theme.scss";
+@import "@progress/kendo-theme-default/scss/loader/_theme.scss";

package/scss/loader/_variables.scss

@@ -1,43 +1,50 @@
 // Loader
-$loader-segment-border-radius: 50% !default;
-$loader-segment-size-sm: k-map-get( $spacing, 1 ) !default;
-$loader-segment-size-md: k-map-get( $spacing, 2 ) !default;
-$loader-segment-size-lg: k-map-get( $spacing, 4 ) !default;
-
-$loader-padding-sm: k-math-div( $loader-segment-size-sm, 2 ) !default;
-$loader-padding-md: k-math-div( $loader-segment-size-md, 2 ) !default;
-$loader-padding-lg: k-math-div( $loader-segment-size-lg, 2 ) !default;
-
-$loader-spinner-3-width-sm: ( $loader-segment-size-sm * 4 ) !default;
-$loader-spinner-3-height-sm: ( $loader-spinner-3-width-sm * $equilateral-height ) !default;
-$loader-spinner-3-width-md: ( $loader-segment-size-md * 4 ) !default;
-$loader-spinner-3-height-md: ( $loader-spinner-3-width-md * $equilateral-height ) !default;
-$loader-spinner-3-width-lg: ( $loader-segment-size-lg * 4 ) !default;
-$loader-spinner-3-height-lg: ( $loader-spinner-3-width-lg * $equilateral-height ) !default;
-
-$loader-spinner-4-width-sm: $loader-segment-size-sm * 4 !default;
-$loader-spinner-4-height-sm: $loader-spinner-4-width-sm !default;
-$loader-spinner-4-width-md: $loader-segment-size-md * 4 !default;
-$loader-spinner-4-height-md: $loader-spinner-4-width-md !default;
-$loader-spinner-4-width-lg: $loader-segment-size-lg * 4 !default;
-$loader-spinner-4-height-lg: $loader-spinner-4-width-lg !default;
-
-$loader-secondary-bg: #000000 !default;
-
-$loader-container-panel-border-width: 1px !default;
-$loader-container-panel-border-style: solid !default;
-$loader-container-panel-border-color: $component-border !default;
-$loader-container-panel-border-radius: $kendo-border-radius-md !default;
-$loader-container-panel-bg: $white !default;
-
-$loader-container-padding-sm: k-map-get( $spacing, 4 ) !default;
-$loader-container-gap-sm: k-map-get( $spacing, 1 ) !default;
-$loader-container-font-size-sm: $font-size-sm !default;
-
-$loader-container-padding-md: k-map-get( $spacing, 5 ) !default;
-$loader-container-gap-md: k-map-get( $spacing, 2 ) !default;
-$loader-container-font-size-md: $font-size-md !default;
-
-$loader-container-padding-lg: k-map-get( $spacing, 6 ) !default;
-$loader-container-gap-lg: k-map-get( $spacing, 3 ) !default;
-$loader-container-font-size-lg: $font-size-lg !default;
+
+$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-secondary-bg: #000000 !default;
+
+$kendo-loader-container-panel-border-width: 1px !default;
+$kendo-loader-container-panel-border-style: solid !default;
+$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-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-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;
+
+
+// Loading
+$kendo-loading-bg: $kendo-component-bg !default;
+$kendo-loading-text: currentColor !default;
+$kendo-loading-opacity: .3 !default;

package/scss/map/_index.scss

@@ -3,14 +3,14 @@
 
 // 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";
 
 
 // Component
-@import "_variables.scss";
-@import "images/markers.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./images/markers.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/map/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/map/_layout.scss";
+@import "@progress/kendo-theme-default/scss/map/_layout.scss";

package/scss/map/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/map/_theme.scss";
+@import "@progress/kendo-theme-default/scss/map/_theme.scss";

package/scss/map/_variables.scss

@@ -5,24 +5,24 @@ $map-font-size: $font-size !default;
 $map-line-height: $line-height !default;
 $map-font-family: $font-family !default;
 
-$map-bg: $component-bg !default;
-$map-text: $component-text !default;
-$map-border: $component-border !default;
+$map-bg: $kendo-component-bg !default;
+$map-text: $kendo-component-text !default;
+$map-border: $kendo-component-border !default;
 
-$map-navigator-margin: $spacer-x !default;
+$map-navigator-margin: k-map-get( $kendo-spacing, 4 ) !default;
 $map-navigator-padding: 2px !default;
-$map-navigator-width: calc( #{$icon-size * 3} + #{$map-navigator-padding * 2} ) !default;
+$map-navigator-width: calc( #{$kendo-icon-size * 3} + #{$map-navigator-padding * 2} ) !default;
 $map-navigator-height: $map-navigator-width !default;
 $map-navigator-border-width: 1px !default;
 
-$map-zoom-control-margin: $spacer-x !default;
+$map-zoom-control-margin: k-map-get( $kendo-spacing, 4 ) !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;
 
-$map-attribution-padding-x: $padding-x-sm !default;
-$map-attribution-padding-y: $padding-y-sm !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;
 
-$map-marker-size: $icon-size-lg !default;
-$map-marker-fill: $primary !default;
+$map-marker-size: $kendo-icon-size-xxl !default;
+$map-marker-fill: $kendo-color-primary !default;

package/scss/maskedtextbox/_index.scss

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

package/scss/maskedtextbox/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/maskedtextbox/_layout.scss";
+@import "@progress/kendo-theme-default/scss/maskedtextbox/_layout.scss";

package/scss/maskedtextbox/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/maskedtextbox/_theme.scss";
+@import "@progress/kendo-theme-default/scss/maskedtextbox/_theme.scss";

package/scss/mediaplayer/_index.scss

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

package/scss/mediaplayer/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/mediaplayer/_layout.scss";
+@import "@progress/kendo-theme-default/scss/mediaplayer/_layout.scss";

package/scss/mediaplayer/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/mediaplayer/_theme.scss";
+@import "@progress/kendo-theme-default/scss/mediaplayer/_theme.scss";

package/scss/mediaplayer/_variables.scss

@@ -4,12 +4,12 @@ $mediaplayer-font-family: $font-family !default;
 $mediaplayer-font-size: $font-size !default;
 $mediaplayer-line-height: $line-height !default;
 
-$mediaplayer-bg: $component-bg !default;
-$mediaplayer-text: $component-text !default;
-$mediaplayer-border: $component-border !default;
+$mediaplayer-bg: $kendo-component-bg !default;
+$mediaplayer-text: $kendo-component-text !default;
+$mediaplayer-border: $kendo-component-border !default;
 
-$mediaplayer-titlebar-padding-x: k-map-get( $spacing, 2 ) !default;
-$mediaplayer-titlebar-padding-y: k-map-get( $spacing, 2 ) !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;

package/scss/menu/_index.scss

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

package/scss/menu/_layout.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/menu/_layout.scss";
+@import "@progress/kendo-theme-default/scss/menu/_layout.scss";
 
 @include exports("menu/layout/material") {
 
@@ -6,7 +6,7 @@
 
         // Root items
         > .k-menu-item {
-            transition: $transition;
+            transition: $kendo-transition;
         }
     }
 
@@ -18,11 +18,11 @@
         }
 
         &.horizontal .k-menu-scroll-button {
-            width: calc( #{$line-height-em} + #{$nav-item-padding-y});
+            width: calc( #{$line-height-em} + #{k-map-get( $kendo-spacing, 1 )});
         }
 
         &.vertical .k-menu-scroll-button {
-            height: calc( #{$line-height-em} + #{$nav-item-padding-y});
+            height: calc( #{$line-height-em} + #{k-map-get( $kendo-spacing, 1 )});
         }
     }
 }

package/scss/menu/_theme.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/menu/_theme.scss";
+@import "@progress/kendo-theme-default/scss/menu/_theme.scss";
 
 @include exports("menu/theme/material") {
 

package/scss/menu/_variables.scss

@@ -7,36 +7,36 @@ $menu-font-size: $font-size !default;
 $menu-line-height: $line-height !default;
 
 $menu-bg: transparent !default;
-$menu-text: $component-text !default;
+$menu-text: $kendo-component-text !default;
 $menu-border: null !default;
 $menu-gradient: null !default;
 
-$menu-item-padding-x: $nav-item-padding-x !default;
-$menu-item-padding-y: $nav-item-padding-y !default;
-$menu-item-spacing: $nav-item-margin !default;
-$menu-item-icon-spacing: $icon-spacing !default;
+$menu-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$menu-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$menu-item-spacing: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$menu-item-icon-spacing: $kendo-icon-spacing !default;
 
 $menu-item-bg: rgba( $menu-text, 0 ) !default;
 $menu-item-text: null !default;
 $menu-item-border: null !default;
 $menu-item-gradient: null !default;
 
-$menu-item-hover-bg: rgba( $menu-text, $kendo-flat-button-hover-opacity * alpha( $menu-text ) ) !default;
+$menu-item-hover-bg: rgba( $menu-text, $kendo-flat-button-hover-opacity * k-color-alpha( $menu-text ) ) !default;
 $menu-item-hover-text: null !default;
 $menu-item-hover-border: null !default;
 $menu-item-hover-gradient: null !default;
 
-$menu-item-expanded-bg: rgba( $menu-text, $kendo-flat-button-active-opacity * alpha( $menu-text ) ) !default;
+$menu-item-expanded-bg: rgba( $menu-text, $kendo-flat-button-active-opacity * k-color-alpha( $menu-text ) ) !default;
 $menu-item-expanded-text: null !default;
 $menu-item-expanded-border: null !default;
 $menu-item-expanded-gradient: null !default;
 
 $menu-item-focus-shadow: null !default;
 
-$menu-separator-spacing: k-map-get( $spacing, 1 ) !default;
+$menu-separator-spacing: k-map-get( $kendo-spacing, 1 ) !default;
 
-$menu-scroll-button-bg: $component-bg !default;
-$menu-scroll-button-text: $subtle-text !default;
+$menu-scroll-button-bg: $kendo-component-bg !default;
+$menu-scroll-button-text: $kendo-subtle-text !default;
 $menu-scroll-button-border: transparent !default;
 $menu-scroll-button-gradient: null !default;
 
@@ -92,24 +92,24 @@ $kendo-menu-popup-gradient: null !default;
 
 /// Horizontal padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-x: k-map-get( $spacing, 4 ) !default;
-$kendo-menu-popup-item-padding-x-sm: k-map-get( $spacing, 4 ) !default;
-$kendo-menu-popup-item-padding-x-md: k-map-get( $spacing, 4 ) !default;
-$kendo-menu-popup-item-padding-x-lg: k-map-get( $spacing, 4 ) !default;
+$kendo-menu-popup-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-menu-popup-item-padding-x-sm: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-menu-popup-item-padding-x-md: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-menu-popup-item-padding-x-lg: k-map-get( $kendo-spacing, 4 ) !default;
 
 /// Vertical padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-y: k-map-get( $spacing, 2 ) !default;
-$kendo-menu-popup-item-padding-y-sm: k-map-get( $spacing, 2 ) - k-map-get( $spacing, thin ) !default;
-$kendo-menu-popup-item-padding-y-md: k-map-get( $spacing, 2 ) !default;
-$kendo-menu-popup-item-padding-y-lg: k-map-get( $spacing, 2 ) + k-map-get( $spacing, thin ) !default;
+$kendo-menu-popup-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-menu-popup-item-padding-y-sm: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-menu-popup-item-padding-y-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-menu-popup-item-padding-y-lg: k-map-get( $kendo-spacing, 2.5 ) !default;
 
 /// The end padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-end: calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$icon-size} ) !default;
-$kendo-menu-popup-item-padding-end-sm: calc( #{$kendo-menu-popup-item-padding-x-sm * 2} + #{$icon-size} ) !default;
-$kendo-menu-popup-item-padding-end-md: calc( #{$kendo-menu-popup-item-padding-x-md * 2} + #{$icon-size} ) !default;
-$kendo-menu-popup-item-padding-end-lg: calc( #{$kendo-menu-popup-item-padding-x-lg * 2} + #{$icon-size} ) !default;
+$kendo-menu-popup-item-padding-end: calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$kendo-icon-size} ) !default;
+$kendo-menu-popup-item-padding-end-sm: calc( #{$kendo-menu-popup-item-padding-x-sm * 2} + #{$kendo-icon-size} ) !default;
+$kendo-menu-popup-item-padding-end-md: calc( #{$kendo-menu-popup-item-padding-x-md * 2} + #{$kendo-icon-size} ) !default;
+$kendo-menu-popup-item-padding-end-lg: calc( #{$kendo-menu-popup-item-padding-x-lg * 2} + #{$kendo-icon-size} ) !default;
 
 /// The start margin of the menu item expand icon.
 /// @group menu
@@ -119,9 +119,9 @@ $kendo-menu-popup-item-icon-margin-start-lg: $kendo-menu-popup-item-padding-x-lg
 
 /// The end margin of the menu item expand icon.
 /// @group menu
-$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{$kendo-menu-popup-item-padding-x-sm / 2}) ) !default;
-$kendo-menu-popup-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-item-padding-end-md} - #{$kendo-menu-popup-item-padding-x-md / 2}) ) !default;
-$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (#{$kendo-menu-popup-item-padding-end-lg} - #{$kendo-menu-popup-item-padding-x-lg / 2}) ) !default;
+$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{k-math-div( $kendo-menu-popup-item-padding-x-sm, 2 )}) ) !default;
+$kendo-menu-popup-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-item-padding-end-md} - #{k-math-div( $kendo-menu-popup-item-padding-x-md, 2 )}) ) !default;
+$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (#{$kendo-menu-popup-item-padding-end-lg} - #{k-math-div( $kendo-menu-popup-item-padding-x-lg, 2 )}) ) !default;
 
 /// The spacing between the menu items in popup.
 /// @group menu

package/scss/menu-button/_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/menu-button/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/menu-button/_layout.scss";
+@import "@progress/kendo-theme-default/scss/menu-button/_layout.scss";

package/scss/menu-button/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/menu-button/_theme.scss";
+@import "@progress/kendo-theme-default/scss/menu-button/_theme.scss";

package/scss/menu-button/_variables.scss

@@ -2,4 +2,4 @@
 
 /// Horizontal padding of the arrow button.
 /// @group menu-button
-$kendo-menu-button-arrow-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-menu-button-arrow-padding-x: k-map-get( $kendo-spacing, 1 ) !default;

package/scss/messagebox/_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/messagebox/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/messagebox/_layout.scss";
+@import "@progress/kendo-theme-default/scss/messagebox/_layout.scss";

package/scss/messagebox/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/messagebox/_theme.scss";
+@import "@progress/kendo-theme-default/scss/messagebox/_theme.scss";