@progress/kendo-theme-default 5.0.0-beta.2 → 5.0.0-beta.6

package/scss/map/_layout.scss

@@ -3,12 +3,19 @@
     // Layout
     .k-map {
         height: 600px;
+        box-sizing: border-box;
         border-width: $map-border-width;
         border-style: solid;
         font-size: $map-font-size;
         line-height: $map-line-height;
         font-family: $map-font-family;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Scroll
         .km-scroll-wrapper {
@@ -72,21 +79,38 @@
 
 
         // Buttons
+        .k-button {
+            padding: 0;
+            width: auto;
+            height: auto;
+            line-height: 1;
+            box-shadow: none;
+            position: absolute;
+
+            .k-icon {
+                min-width: 0;
+                min-height: 0;
+            }
+        }
+        .k-navigator-n,
         .k-navigator-up {
             transform: translateX(-50%);
             top: $map-navigator-padding;
             left: 50%;
         }
+        .k-navigator-e,
         .k-navigator-right {
             transform: translateY(-50%);
             right: $map-navigator-padding;
             top: 50%;
         }
+        .k-navigator-s,
         .k-navigator-down {
             transform: translateX(-50%);
             bottom: $map-navigator-padding;
             left: 50%;
         }
+        .k-navigator-w,
         .k-navigator-left {
             transform: translateY(-50%);
             left: $map-navigator-padding;

package/scss/maskedtextbox/_layout.scss

@@ -1,4 +1,4 @@
-@include exports("maskedtextbox/layout") {
+@include exports( "maskedtextbox/layout" ) {
 
     // Masked textbox
     .k-maskedtextbox {}

package/scss/maskedtextbox/_theme.scss

@@ -1,4 +1,4 @@
-@include exports("maskedtextbox/theme") {
+@include exports( "maskedtextbox/theme" ) {
 
     // Masked textbox
     .k-maskedtextbox {}

package/scss/mediaplayer/_layout.scss

@@ -14,6 +14,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         > iframe {
             width: 100%;
             height: 100%;
@@ -48,6 +54,11 @@
         width: 100% !important;
         // sass-lint:enable no-important
         box-shadow: none;
+
+
+        .k-dropdown-list {
+            width: auto;
+        }
     }
     .k-mediaplayer-time-wrap {
         flex: 1;
@@ -57,6 +68,9 @@
         padding: 0 (14px / 2);
         align-items: center;
     }
+    .k-mediaplayer-volume {
+        width: 100px;
+    }
 
 
     // Seekbar
@@ -64,8 +78,9 @@
         width: 100%;
         position: absolute;
         z-index: 3;
-        top: -17px;
+        top: 0;
         left: 0;
+        transform: translateY( -50% );
     }
     .k-mediaplayer-seekbar .k-slider-track {
         // sass-lint:disable no-important
@@ -73,6 +88,9 @@
         // sass-lint:enable no-important
         border-radius: 0;
     }
+    .k-mediaplayer-seekbar .k-slider-selection {
+        border-radius: 0;
+    }
 
     .k-mediaplayer-fullscreen {
         z-index: 10000;

package/scss/menu/_layout.scss

@@ -1,7 +1,7 @@
 @include exports("menu/layout") {
 
-    // Base
-    .k-menu {
+    // Menu bar
+    .k-menu-bar {
         border-width: $menu-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -10,23 +10,32 @@
         font-size: $menu-font-size;
         line-height: $menu-line-height;
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         align-items: stretch;
         position: relative;
         cursor: default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
+    .k-menu { @extend .k-menu-bar !optional; }
 
 
     // Menu item
     .k-menu-item {
         border-width: 0;
         outline: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        flex: none;
         position: relative;
         user-select: none;
     }
-
     .k-menu-item-content {
         display: block;
         height: auto;
@@ -44,28 +53,34 @@
         outline: 0;
         color: inherit;
         display: flex;
-        flex-direction: row;
+        flex-flow: row nowrap;
         flex: 1 1 auto;
+        gap: $menu-item-icon-spacing;
         align-items: center;
         position: relative;
         white-space: nowrap;
         cursor: pointer;
+    }
 
-        > .k-icon:not(.k-menu-expand-arrow),
-        > .k-image,
-        > .k-sprite {
-            margin-right: $menu-item-icon-spacing;
-        }
+
+    // Menu item text
+    .k-menu-link-text {
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
 
     // Expand arrow
     .k-menu-expand-arrow {
-        margin: 0;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        right: $icon-spacing;
+        margin-inline-end: -$icon-spacing;
+        display: inline-flex;
+        flex-flow: row wrap;
+        align-items: center;
+        flex: none;
+        position: relative;
     }
 
 
@@ -113,27 +128,30 @@
 
     // Menu popup
     .k-menu-popup {
+        padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
+        box-sizing: border-box;
         border-width: $kendo-menu-popup-border-width;
         border-style: solid;
         overflow: auto;
         max-height: 80vh;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 
     // Sub menu
     .k-menu-group {
         margin: 0;
-        padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
+        padding: 0;
         list-style: none;
-        display: none;
+        display: flex;
+        flex-flow: column nowrap;
         position: absolute;
 
-        .k-menu-popup & {
-            position: relative;
-            display: flex;
-            flex-direction: column;
-        }
-
         .k-menu-item + .k-menu-item {
             margin-top: $kendo-menu-popup-item-spacing;
         }
@@ -143,10 +161,14 @@
             height: 0;
             border-width: 1px 0 0;
             border-style: solid;
-            border-color: $panel-border;
+            border-color: $component-border;
             display: block;
         }
     }
+    .k-menu-popup .k-menu-group {
+        position: relative;
+    }
+
 
     // Sizes
     .k-menu-group-sm {
@@ -163,6 +185,11 @@
             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;
         }
+
+        .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;
+        }
     }
     .k-menu-group-md {
         font-size: $kendo-menu-popup-font-size-md;
@@ -178,6 +205,11 @@
             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;
         }
+
+        .k-menu-expand-arrow {
+            margin-inline-start: $kendo-menu-popup-item-icon-margin-start;
+            margin-inline-end: $kendo-menu-popup-item-icon-margin-end;
+        }
     }
     .k-menu-group-lg {
         font-size: $kendo-menu-popup-font-size-lg;
@@ -193,6 +225,11 @@
             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;
         }
+
+        .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;
+        }
     }
 
 
@@ -221,11 +258,14 @@
     .k-context-menu-popup {
         z-index: 12000;
 
-        > .k-popup:not(.k-menu-popup),
         .k-context-menu {
-            border: 0;
+            border-width: 0;
         }
     }
+    .k-popup .k-context-menu,
+    .k-context-menu-popup .k-context-menu {
+        border-width: 0;
+    }
 
 
     // Scrolling
@@ -284,21 +324,6 @@
     .k-rtl,
     [dir="rtl"] {
 
-        .k-menu-link {
-            > .k-icon:not(.k-menu-expand-arrow),
-            > .k-image,
-            > .k-sprite {
-                margin-left: $menu-item-icon-spacing;
-                margin-right: 0;
-            }
-        }
-
-        .k-menu-expand-arrow {
-            right: unset;
-            left: $icon-spacing;
-        }
-
-
         // Orientation -- horizontal
         .k-menu-horizontal {
 

package/scss/menu/_theme.scss

@@ -81,11 +81,16 @@
                 );
             }
 
-            &:focus,
             &.k-focus {
                 @include box-shadow( $kendo-menu-popup-item-focus-shadow );
             }
         }
+
+        .k-item {
+            &:focus {
+                @include box-shadow( $kendo-menu-popup-item-focus-shadow );
+            }
+        }
     }
 
 

package/scss/menu/_variables.scss

@@ -33,7 +33,7 @@ $menu-item-expanded-gradient: null !default;
 
 $menu-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-$menu-separator-spacing: 0px !default;
+$menu-separator-spacing: map-get( $spacing, 1 ) !default;
 
 $menu-scroll-button-bg: $component-bg !default;
 $menu-scroll-button-text: $link-text !default;
@@ -49,113 +49,123 @@ $menu-scroll-button-hover-gradient: null !default;
 // Menu popup
 
 /// Horizontal padding of the menu popup.
-/// @group menu-popup
+/// @group menu
 $kendo-menu-popup-padding-x: null !default;
 
 /// Vertical padding of the menu popup.
-/// @group menu-popup
+/// @group menu
 $kendo-menu-popup-padding-y: null !default;
 
 /// Width of the border around the menu popup.
-/// @group menu-popup
+/// @group menu
 $kendo-menu-popup-border-width: $popup-border-width !default;
 
 /// Font sizes of the menu popup.
-/// @group menu-popup
-$kendo-menu-popup-font-size: $font-size !default;
-$kendo-menu-popup-font-size-sm: $font-size-sm !default;
-$kendo-menu-popup-font-size-md: $font-size !default;
-$kendo-menu-popup-font-size-lg: $font-size-lg !default;
+/// @group menu
+$kendo-menu-popup-font-size: $font-size-md !default;
+$kendo-menu-popup-font-size-sm: $font-size-md !default;
+$kendo-menu-popup-font-size-md: $font-size-md !default;
+$kendo-menu-popup-font-size-lg: $font-size-md !default;
 
 /// Line heights used along with $font-size.
-/// @group menu-popup
-$kendo-menu-popup-line-height: $line-height !default;
-$kendo-menu-popup-line-height-sm: $line-height-lg !default;
-$kendo-menu-popup-line-height-md: $line-height !default;
-$kendo-menu-popup-line-height-lg: $line-height-lg !default;
+/// @group menu
+$kendo-menu-popup-line-height: $line-height-md !default;
+$kendo-menu-popup-line-height-sm: $line-height-md !default;
+$kendo-menu-popup-line-height-md: $line-height-md !default;
+$kendo-menu-popup-line-height-lg: $line-height-md !default;
 
 /// The background of the menu popup.
-/// @group menu-popup
+/// @group menu
 $kendo-menu-popup-bg: $popup-bg !default;
 /// The text color of the menu popup.
-/// @group menu-popup
+/// @group menu
 $kendo-menu-popup-text: $popup-text !default;
 /// The border color of the menu popup.
-/// @group menu-popup
+/// @group menu
 $kendo-menu-popup-border: $popup-border !default;
 /// The background gradient of the menu popup.
-/// @group menu-popup
+/// @group menu
 $kendo-menu-popup-gradient: null !default;
 
 
 // Menu popup item
 
 /// Horizontal padding of the menu item in popup.
-/// @group menu-popup-item
-$kendo-menu-popup-item-padding-x: null !default;
-$kendo-menu-popup-item-padding-x-base: map-get( $spacing, 2 ) !default;
-$kendo-menu-popup-item-padding-x-sm: ( $kendo-menu-popup-item-padding-x-base * .75 ) !default;
-$kendo-menu-popup-item-padding-x-md: $kendo-menu-popup-item-padding-x-base !default;
-$kendo-menu-popup-item-padding-x-lg: ( $kendo-menu-popup-item-padding-x-base * 1.25 ) !default;
+/// @group menu
+$kendo-menu-popup-item-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-menu-popup-item-padding-x-sm: map-get( $spacing, 2 ) !default;
+$kendo-menu-popup-item-padding-x-md: map-get( $spacing, 2 ) !default;
+$kendo-menu-popup-item-padding-x-lg: map-get( $spacing, 2 ) !default;
 
 /// Vertical padding of the menu item in popup.
-/// @group menu-popup-item
-$kendo-menu-popup-item-padding-y: null !default;
-$kendo-menu-popup-item-padding-y-base: map-get( $spacing, 1 ) !default;
-$kendo-menu-popup-item-padding-y-sm: ( $kendo-menu-popup-item-padding-y-base * .75 ) !default;
-$kendo-menu-popup-item-padding-y-md: $kendo-menu-popup-item-padding-y-base !default;
-$kendo-menu-popup-item-padding-y-lg: ( $kendo-menu-popup-item-padding-y-base * 1.25 ) !default;
+/// @group menu
+$kendo-menu-popup-item-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-menu-popup-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-menu-popup-item-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-menu-popup-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
 
 /// The end padding of the menu item in popup.
-/// @group menu-popup-item
-$kendo-menu-popup-item-padding-end: null !default;
+/// @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;
 
+/// The start margin of the menu item expand icon.
+/// @group menu
+$kendo-menu-popup-item-icon-margin-start-sm: $kendo-menu-popup-item-padding-x-sm !default;
+$kendo-menu-popup-item-icon-margin-start: $kendo-menu-popup-item-padding-x-md !default;
+$kendo-menu-popup-item-icon-margin-start-lg: $kendo-menu-popup-item-padding-x-lg !default;
+
+/// 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;
+
 /// The spacing between the menu items in popup.
-/// @group menu-popup-item
+/// @group menu
 $kendo-menu-popup-item-spacing: 0px !default;
 
 /// The background of the menu item in popup.
-/// @group menu-popup-item
+/// @group menu
 $kendo-menu-popup-item-bg: null !default;
 /// The text color of the menu item in popup.
-/// @group menu-popup-item
+/// @group menu
 $kendo-menu-popup-item-text: null !default;
 /// The border color of the menu item in popup.
-/// @group menu-popup-item
+/// @group menu
 $kendo-menu-popup-item-border: null !default;
 /// The background gradient of the menu item in popup.
-/// @group menu-popup-item
+/// @group menu
 $kendo-menu-popup-item-gradient: null !default;
 
 /// The background of hovered menu item in popup.
-/// @group menu-popup-item
+/// @group menu
 $kendo-menu-popup-item-hover-bg: $kendo-list-item-hover-bg !default;
 /// The text color of hovered menu item in popup.
-/// @group menu-popup-item
+/// @group menu
 $kendo-menu-popup-item-hover-text: $kendo-list-item-hover-text !default;
 /// The border color of hovered menu item in popup.
-/// @group menu-popup-item
+/// @group menu
 $kendo-menu-popup-item-hover-border: null !default;
 /// The background gradient of hovered menu item in popup.
-/// @group menu-popup-item
+/// @group menu
 $kendo-menu-popup-item-hover-gradient: null !default;
 
 /// The background of expanded menu item in popup.
-/// @group menu-popup-item
+/// @group menu
 $kendo-menu-popup-item-expanded-bg: $kendo-list-item-selected-bg !default;
 /// The text color of expanded menu item in popup.
-/// @group menu-popup-item
+/// @group menu
 $kendo-menu-popup-item-expanded-text: $kendo-list-item-selected-text !default;
 /// The border color of expanded menu item in popup.
-/// @group menu-popup-item
+/// @group menu
 $kendo-menu-popup-item-expanded-border: null !default;
 /// The background gradient of expanded menu item in popup.
-/// @group menu-popup-item
+/// @group menu
 $kendo-menu-popup-item-expanded-gradient: null !default;
 
 /// The base shadow of focused menu item in popup.
-/// @group menu-popup-item
+/// @group menu
 $kendo-menu-popup-item-focus-shadow: $menu-item-focus-shadow !default;

package/scss/multiselect/_layout.scss

@@ -1,3 +1,6 @@
-@include exports("multiselect/layout") {
+@include exports( "multiselect/layout" ) {
+
+    // Multiselect
+    .k-multiselect {}
 
 }

package/scss/multiselect/_theme.scss

@@ -1,3 +1,6 @@
-@include exports("multiselect/theme") {
+@include exports( "multiselect/theme" ) {
+
+    // Multiselect
+    .k-multiselect {}
 
 }

package/scss/notification/_layout.scss

@@ -33,6 +33,12 @@
         display: block;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-notification-wrap {

package/scss/numerictextbox/_layout.scss

@@ -1,6 +1,10 @@
-@include exports("numerictextbox/layout") {
+@include exports( "numerictextbox/layout" ) {
 
     // Numeric textbox
-    .k-numerictextbox {}
+    .k-numeric-textbox {}
+
+
+    // Alias
+    .k-numerictextbox { @extend .k-numeric-textbox !optional; }
 
 }

package/scss/numerictextbox/_theme.scss

@@ -1,6 +1,6 @@
 @include exports( "numerictextbox/theme" ) {
 
     // Numeric textbox
-    .k-numerictextbox {}
+    .k-numeric-textbox {}
 
 }

package/scss/numerictextbox/_variables.scss

@@ -1 +1 @@
-// Numeric textbox
+// Numeric Textbox

package/scss/orgchart/_layout.scss

@@ -9,6 +9,12 @@
         font-family: $orgchart-font-family;
         line-height: $orgchart-line-height;
         overflow: auto;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-orgchart-container {

package/scss/orgchart/_variables.scss

@@ -40,10 +40,10 @@ $orgchart-card-shadow: $card-shadow !default;
 $orgchart-card-focus-shadow: $card-focus-shadow !default;
 
 $orgchart-card-title-margin-bottom: 0px !default;
-$orgchart-card-title-font-size: $font-size-lg !default;
+$orgchart-card-title-font-size: null !default;
 
 $orgchart-card-subtitle-margin-bottom: 0px !default;
-$orgchart-card-subtitle-font-size: $font-size !default;
+$orgchart-card-subtitle-font-size: null !default;
 
 $orgchart-card-body-border-width: 2px 0 0 !default;
 $orgchart-card-body-border-color: transparent !default;

package/scss/pager/_layout.scss

@@ -18,6 +18,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-link {
             text-decoration: none;
             outline: 0;
@@ -65,7 +71,6 @@
     %base-pager-item {
         min-width: $kendo-button-calc-size;
         height: $kendo-button-calc-size;
-        box-sizing: border-box;
         color: inherit;
         text-align: center;
         display: inline-flex;
@@ -225,7 +230,6 @@
             }
 
             height: $kendo-button-calc-size;
-            box-sizing: border-box;
             border-color: inherit;
         }
 

package/scss/pager/_variables.scss

@@ -62,5 +62,5 @@ $pager-number-focus-opacity: .12 !default;
 $pager-number-focus-bg: transparent !default;
 $pager-number-focus-shadow: inset 0 0 0 2px rgba($pager-number-selected-bg, $pager-number-focus-opacity) !default;
 
-$pager-input-width: 3em !default;
+$pager-input-width: 5em !default;
 $pager-dropdown-width: 5em !default;

package/scss/panelbar/_layout.scss

@@ -16,6 +16,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Root
         > .k-item,