@progress/kendo-theme-default 5.0.0-next.4 → 5.0.2-dev.0

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,13 +10,20 @@
         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
@@ -24,10 +31,20 @@
         border-width: 0;
         outline: 0;
         display: flex;
-        flex: 0 0 auto;
+        flex-flow: column nowrap;
+        flex: none;
         position: relative;
         user-select: none;
     }
+    .k-menu-item-content {
+        display: block;
+        height: auto;
+        overflow: visible;
+
+        .k-actions {
+            margin-top: 0;
+        }
+    }
 
 
     // Menu link
@@ -36,40 +53,35 @@
         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-left: $icon-spacing;
-        margin-right: -$icon-spacing;
+        margin-inline-end: -$icon-spacing;
+        display: inline-flex;
+        flex-flow: row wrap;
+        align-items: center;
+        flex: none;
         position: relative;
     }
-    .k-menu-expand-arrow.k-i-arrow-60-left,
-    .k-menu-expand-arrow.k-i-arrow-60-right {
-        margin: 0;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-    }
-    .k-menu-expand-arrow.k-i-arrow-60-right {
-        right: $icon-spacing;
-    }
-    .k-menu-expand-arrow.k-i-arrow-60-left {
-        left: $icon-spacing;
-    }
 
 
     // Orientation -- horizontal
@@ -86,7 +98,6 @@
             height: auto;
             border-width: 0 0 0 1px;
             border-style: solid;
-            flex-shrink: 0;
         }
     }
 
@@ -100,8 +111,13 @@
         }
 
         > .k-menu-item > .k-menu-link {
-            padding: $menu-popup-item-padding-y $menu-popup-item-padding-x;
-            padding-right: $menu-popup-item-padding-end;
+            padding: $kendo-menu-popup-item-padding-y $kendo-menu-popup-item-padding-x;
+            padding-right: $kendo-menu-popup-item-padding-end;
+        }
+
+        > .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;
         }
 
         > .k-separator {
@@ -117,51 +133,107 @@
 
     // Menu popup
     .k-menu-popup {
-        border-width: $menu-popup-border-width;
+        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: $menu-popup-padding-y $menu-popup-padding-x;
-        font-size: $menu-popup-font-size;
-        line-height: $menu-popup-line-height;
+        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;
+        }
+
+        .k-separator {
+            margin: $menu-separator-spacing 0;
+            height: 0;
+            border-width: 1px 0 0;
+            border-style: solid;
+            border-color: $component-border;
+            display: block;
+        }
+    }
+    .k-menu-popup .k-menu-group {
+        position: relative;
+    }
+
+
+    // Sizes
+    .k-menu-group-sm {
+        font-size: $kendo-menu-popup-font-size-sm;
+        line-height: $kendo-menu-popup-line-height-sm;
+
+        // jquery popup overrides those
+        .k-menu-item {
+            font-size: $kendo-menu-popup-font-size-sm;
+            line-height: $kendo-menu-popup-line-height-sm;
+        }
+
+        .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;
         }
 
+        .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;
+        line-height: $kendo-menu-popup-line-height-md;
+
         // jquery popup overrides those
         .k-menu-item {
-            font-size: $menu-popup-font-size;
-            line-height: $menu-popup-line-height;
+            font-size: $kendo-menu-popup-font-size-md;
+            line-height: $kendo-menu-popup-line-height-md;
         }
 
-        .k-menu-item + .k-menu-item {
-            margin-top: $menu-popup-item-spacing;
+        .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;
+        }
+
+        .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;
+        line-height: $kendo-menu-popup-line-height-lg;
+
+        // jquery popup overrides those
+        .k-menu-item {
+            font-size: $kendo-menu-popup-font-size-lg;
+            line-height: $kendo-menu-popup-line-height-lg;
         }
 
         .k-menu-link {
-            padding: $menu-popup-item-padding-y $menu-popup-item-padding-x;
-            padding-right: $menu-popup-item-padding-end;
+            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-separator {
-            margin: $menu-separator-spacing 0;
-            height: 0;
-            border-width: 1px 0 0;
-            border-style: solid;
-            border-color: $panel-border;
-            display: block;
+        .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;
         }
     }
 
@@ -175,12 +247,12 @@
     }
     .k-context-menu {
         margin: 0;
-        padding: $menu-popup-padding-y $menu-popup-padding-x;
-        border-width: $menu-popup-border-width;
+        padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
+        border-width: $kendo-menu-popup-border-width;
         border-style: solid;
 
         &.k-menu-horizontal {
-            padding: $menu-popup-padding-x $menu-popup-padding-y;
+            padding: $kendo-menu-popup-padding-x $kendo-menu-popup-padding-y;
         }
     }
     .k-animation-container .k-context-menu.k-menu-horizontal {
@@ -191,11 +263,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
@@ -254,21 +329,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.k-i-arrow-60-down {
-            margin-left: -$icon-spacing;
-            margin-right: $icon-spacing;
-        }
-
-
         // Orientation -- horizontal
         .k-menu-horizontal {
 
@@ -283,8 +343,8 @@
         .k-menu-vertical {
 
             > .k-menu-item > .k-menu-link {
-                padding-right: $menu-popup-item-padding-x;
-                padding-left: $menu-popup-item-padding-end;
+                padding-right: $kendo-menu-popup-item-padding-x;
+                padding-left: $kendo-menu-popup-item-padding-end;
             }
         }
 
@@ -293,8 +353,8 @@
         .k-menu-group {
 
             .k-menu-link {
-                padding-right: $menu-popup-item-padding-x;
-                padding-left: $menu-popup-item-padding-end;
+                padding-right: $kendo-menu-popup-item-padding-x;
+                padding-left: $kendo-menu-popup-item-padding-end;
             }
 
         }

package/scss/menu/_theme.scss

@@ -17,7 +17,7 @@
             );
 
             &:hover,
-            &.k-state-hover {
+            &.k-hover {
                 @include fill(
                     $menu-item-hover-text,
                     $menu-item-hover-bg,
@@ -26,7 +26,8 @@
                 );
             }
 
-            > .k-state-active {
+            &:active,
+            &.k-active {
                 @include fill(
                     $menu-item-expanded-text,
                     $menu-item-expanded-bg,
@@ -36,7 +37,7 @@
             }
 
             &:focus,
-            &.k-state-focused {
+            &.k-focus {
                 @include box-shadow( $menu-item-focus-shadow );
             }
         }
@@ -45,42 +46,49 @@
     .k-menu-group,
     .k-menu.k-context-menu {
         @include fill(
-            $menu-popup-text,
-            $menu-popup-bg,
-            $menu-popup-border,
-            $menu-popup-gradient
+            $kendo-menu-popup-text,
+            $kendo-menu-popup-bg,
+            $kendo-menu-popup-border,
+            $kendo-menu-popup-gradient
         );
 
-        .k-item {
+        .k-item > .k-link {
             @include fill(
-                $menu-popup-item-text,
-                $menu-popup-item-bg,
-                $menu-popup-item-border,
-                $menu-popup-item-gradient
+                $kendo-menu-popup-item-text,
+                $kendo-menu-popup-item-bg,
+                $kendo-menu-popup-item-border,
+                $kendo-menu-popup-item-gradient
             );
 
             &:hover,
-            &.k-state-hover {
+            &.k-hover {
                 @include fill(
-                    $menu-popup-item-hover-text,
-                    $menu-popup-item-hover-bg,
-                    $menu-popup-item-hover-border,
-                    $menu-popup-item-hover-gradient
+                    $kendo-menu-popup-item-hover-text,
+                    $kendo-menu-popup-item-hover-bg,
+                    $kendo-menu-popup-item-hover-border,
+                    $kendo-menu-popup-item-hover-gradient
                 );
             }
 
-            > .k-state-active {
+            &:active,
+            &.k-active,
+            &.k-selected {
                 @include fill(
-                    $menu-popup-item-expanded-text,
-                    $menu-popup-item-expanded-bg,
-                    $menu-popup-item-expanded-border,
-                    $menu-popup-item-expanded-gradient
+                    $kendo-menu-popup-item-expanded-text,
+                    $kendo-menu-popup-item-expanded-bg,
+                    $kendo-menu-popup-item-expanded-border,
+                    $kendo-menu-popup-item-expanded-gradient
                 );
             }
 
-            &:focus,
-            &.k-state-focused {
-                @include box-shadow( $menu-popup-item-focus-shadow );
+            &.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

@@ -31,9 +31,9 @@ $menu-item-expanded-text: $component-text !default;
 $menu-item-expanded-border: null !default;
 $menu-item-expanded-gradient: null !default;
 
-$menu-item-focus-shadow: $list-item-focused-shadow !default;
+$menu-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-$menu-separator-spacing: 2px !default;
+$menu-separator-spacing: map-get( $spacing, 1 ) !default;
 
 $menu-scroll-button-bg: $component-bg !default;
 $menu-scroll-button-text: $link-text !default;
@@ -47,36 +47,125 @@ $menu-scroll-button-hover-gradient: null !default;
 
 
 // Menu popup
-$menu-popup-padding-x: $popup-padding-x !default;
-$menu-popup-padding-y: $popup-padding-y !default;
-$menu-popup-border-width: $popup-border-width !default;
-$menu-popup-font-size: $font-size !default;
-$menu-popup-line-height: $line-height !default;
-
-$menu-popup-bg: $popup-bg !default;
-$menu-popup-text: $popup-text !default;
-$menu-popup-border: $popup-border !default;
-$menu-popup-gradient: null !default;
-
-$menu-popup-item-padding-x: $list-item-padding-x !default;
-$menu-popup-item-padding-y: $list-item-padding-y !default;
-$menu-popup-item-padding-end: calc( #{$list-item-padding-x * 2} + #{$icon-size} ) !default;
-$menu-popup-item-spacing: 0px !default;
-$menu-popup-item-icon-spacing: $icon-spacing !default;
-
-$menu-popup-item-bg: null !default;
-$menu-popup-item-text: null !default;
-$menu-popup-item-border: null !default;
-$menu-popup-item-gradient: null !default;
-
-$menu-popup-item-hover-bg: $list-item-hovered-bg !default;
-$menu-popup-item-hover-text: $list-item-hovered-text !default;
-$menu-popup-item-hover-border: null !default;
-$menu-popup-item-hover-gradient: null !default;
-
-$menu-popup-item-expanded-bg: $list-item-selected-bg !default;
-$menu-popup-item-expanded-text: $list-item-selected-text !default;
-$menu-popup-item-expanded-border: null !default;
-$menu-popup-item-expanded-gradient: null !default;
-
-$menu-popup-item-focus-shadow: $menu-item-focus-shadow !default;
+
+/// Horizontal padding of the menu popup.
+/// @group menu
+$kendo-menu-popup-padding-x: null !default;
+
+/// Vertical padding of the menu popup.
+/// @group menu
+$kendo-menu-popup-padding-y: null !default;
+
+/// Width of the border around the menu popup.
+/// @group menu
+$kendo-menu-popup-border-width: $popup-border-width !default;
+
+/// Font sizes of the menu popup.
+/// @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
+$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
+$kendo-menu-popup-bg: $popup-bg !default;
+/// The text color of the menu popup.
+/// @group menu
+$kendo-menu-popup-text: $popup-text !default;
+/// The border color of the menu popup.
+/// @group menu
+$kendo-menu-popup-border: $popup-border !default;
+/// The background gradient of the menu popup.
+/// @group menu
+$kendo-menu-popup-gradient: null !default;
+
+
+// Menu popup item
+
+/// Horizontal padding of the menu item in popup.
+/// @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
+$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
+$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
+$kendo-menu-popup-item-spacing: 0px !default;
+
+/// The background of the menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-bg: null !default;
+/// The text color of the menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-text: null !default;
+/// The border color of the menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-border: null !default;
+/// The background gradient of the menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-gradient: null !default;
+
+/// The background of hovered menu item in popup.
+/// @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
+$kendo-menu-popup-item-hover-text: $kendo-list-item-hover-text !default;
+/// The border color of hovered menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-hover-border: null !default;
+/// The background gradient of hovered menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-hover-gradient: null !default;
+
+/// The background of expanded menu item in popup.
+/// @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
+$kendo-menu-popup-item-expanded-text: $kendo-list-item-selected-text !default;
+/// The border color of expanded menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-expanded-border: null !default;
+/// The background gradient of expanded menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-expanded-gradient: null !default;
+
+/// The base shadow of focused menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-focus-shadow: $menu-item-focus-shadow !default;

package/scss/multiselect/_index.scss

@@ -3,11 +3,13 @@
 
 // Dependencies
 @import "../common/_index.scss";
+@import "../forms/_variables.scss";
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 @import "../chip/_index.scss";
 @import "../floating-label/_index.scss";
 @import "../popup/_index.scss";
+@import "../list/_index.scss";
 @import "../icons/_index.scss";