@progress/kendo-theme-bootstrap 9.1.0-dev.1 → 9.1.0-dev.3

package/dist/all.scss

@@ -25851,172 +25851,270 @@ $_kendo-module-meta: (
 // Component
 // #region @import "./_variables.scss"; -> scss/menu/_variables.scss
 // Menu
+
+/// The width of the border around the Menu.
+/// @group menu
 $kendo-menu-border-width: 0px !default;
+
+/// The font family of the Menu.
+/// @group menu
 $kendo-menu-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Menu.
+/// @group menu
 $kendo-menu-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the Menu used along with $kendo-font-size.
+/// @group menu
 $kendo-menu-line-height: var( --kendo-line-height, normal ) !default;
 
-$kendo-menu-bg: $kendo-component-header-bg !default;
+/// The background color of the Menu.
+/// @group menu
+$kendo-menu-bg: transparent !default;
+/// The text color of the Menu
+/// @group menu
 $kendo-menu-text: $kendo-component-header-text !default;
+/// The border color of the Menu.
+/// @group menu
 $kendo-menu-border: $kendo-component-header-border !default;
+/// The background gradient of the Menu.
+/// @group menu
 $kendo-menu-gradient: null !default;
 
+// Menu item
+
+/// The horizontal padding of the Menu item.
+/// @group menu
 $kendo-menu-item-padding-x: k-spacing(2) !default;
+/// The vertical padding of the Menu item.
+/// @group menu
 $kendo-menu-item-padding-y: k-spacing(2) !default;
+/// The spacing between the Menu items.
+/// @group menu
 $kendo-menu-item-spacing: k-spacing(0) !default;
+/// The spacing between the Menu item text and icons.
+/// @group menu
 $kendo-menu-item-icon-spacing: $kendo-icon-spacing !default;
 
+/// The font weight of the selected Menu item.
+/// @group menu
+$kendo-menu-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+
+/// The background color of the Menu item.
+/// @group menu
 $kendo-menu-item-bg: null !default;
-$kendo-menu-item-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-menu-text, .5 )) !default;
+/// The text color of the Menu item.
+/// @group menu
+$kendo-menu-item-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 76%, transparent), rgba( $kendo-menu-text, .76 )) !default;
+/// The border color of the Menu item.
+/// @group menu
 $kendo-menu-item-border: null !default;
+/// The background gradient of the Menu item.
+/// @group menu
 $kendo-menu-item-gradient: null !default;
 
+/// The background color of hovered Menu item.
+/// @group menu
 $kendo-menu-item-hover-bg: null !default;
-$kendo-menu-item-hover-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), rgba( $kendo-menu-text, .7 )) !default;
+/// The text color of hovered Menu item.
+/// @group menu
+$kendo-menu-item-hover-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 93%, transparent), rgba( $kendo-menu-text, .93 )) !default;
+/// The border color of hovered Menu item.
+/// @group menu
 $kendo-menu-item-hover-border: null !default;
+/// The background gradient of hovered Menu item.
+/// @group menu
 $kendo-menu-item-hover-gradient: null !default;
 
-$kendo-menu-item-expanded-bg: null !default;
-$kendo-menu-item-expanded-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 90%, transparent), rgba( $kendo-menu-text, .9 )) !default;
-$kendo-menu-item-expanded-border: null !default;
-$kendo-menu-item-expanded-gradient: null !default;
+/// The background color of active Menu item.
+/// @group menu
+$kendo-menu-item-active-bg: null !default;
+/// The text color of active Menu item.
+/// @group menu
+$kendo-menu-item-active-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 100%, transparent), rgba( $kendo-menu-text, 1 )) !default;
+/// The border color of active Menu item.
+/// @group menu
+$kendo-menu-item-active-border: null !default;
+/// The background gradient of active Menu item.
+/// @group menu
+$kendo-menu-item-active-gradient: null !default;
 
+/// The base shadow of focused Menu item.
+/// @group menu
 $kendo-menu-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( $kendo-menu-text, .15 )) !default;
 
-$kendo-menu-separator-spacing: k-spacing(1) !default;
+/// The background color of selected Menu item.
+/// @group menu
+$kendo-menu-item-selected-bg: null !default;
+/// The text color of selected Menu item.
+/// @group menu
+$kendo-menu-item-selected-text: null !default;
+/// The border color of selected Menu item.
+/// @group menu
+$kendo-menu-item-selected-border: null !default;
+/// The background gradient of selected Menu item.
+/// @group menu
+$kendo-menu-item-selected-gradient: null !default;
 
+/// The background color of the Menu scroll buttons.
+/// @group menu
 $kendo-menu-scroll-button-bg: $kendo-menu-bg !default;
+/// The text color of the Menu scroll buttons.
+/// @group menu
 $kendo-menu-scroll-button-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-menu-text, .5 )) !default;
+/// The border color of the Menu scroll buttons.
+/// @group menu
 $kendo-menu-scroll-button-border: $kendo-menu-border !default;
+/// The background gradient of the Menu scroll buttons.
+/// @group menu
 $kendo-menu-scroll-button-gradient: null !default;
 
+/// The background color of hovered Menu scroll buttons.
+/// @group menu
 $kendo-menu-scroll-button-hover-bg: null !default;
+/// The text color of hovered Menu scroll buttons.
+/// @group menu
 $kendo-menu-scroll-button-hover-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), rgba( $kendo-menu-text, .7 )) !default;
+/// The border color of hovered Menu scroll buttons.
+/// @group menu
 $kendo-menu-scroll-button-hover-border: null !default;
+/// The background gradient of hovered Menu scroll buttons.
+/// @group menu
 $kendo-menu-scroll-button-hover-gradient: null !default;
 
 
+// Menu Separator
+
+/// The inline margin of the horizontal Menu separator.
+/// @group menu
+$kendo-menu-separator-margin-inline: k-spacing(1);
+/// The block margin of the horizontal Menu separator.
+/// @group menu
+$kendo-menu-separator-margin-block: k-spacing(2);;
+/// The border color of Menu separator.
+/// @group menu
+$kendo-menu-separator-border: if($kendo-enable-color-system, k-color(border), $kendo-component-border) !default;
+
+
 // Menu popup
 
-/// Horizontal padding of the menu popup.
+/// The horizontal padding of the Menu popup.
 /// @group menu
 $kendo-menu-popup-padding-x: null !default;
 
-/// Vertical padding of the menu popup.
+/// The vertical padding of the Menu popup.
 /// @group menu
 $kendo-menu-popup-padding-y: null !default;
 
-/// Width of the border around the menu popup.
+/// The width of the border around the Menu popup.
 /// @group menu
 $kendo-menu-popup-border-width: $kendo-popup-border-width !default;
 
-/// Font sizes of the menu popup.
+/// The font sizes of the Menu popup.
 /// @group menu
-$kendo-menu-popup-font-size: var( --kendo-font-size, inherit )  !default;
-$kendo-menu-popup-sm-font-size: var( --kendo-font-size, inherit )  !default;
-$kendo-menu-popup-md-font-size: var( --kendo-font-size, inherit )  !default;
+$kendo-menu-popup-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-menu-popup-sm-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-menu-popup-md-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-menu-popup-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
-/// Line heights used along with $kendo-font-size.
+/// The line heights used along with $kendo-font-size.
 /// @group menu
 $kendo-menu-popup-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-menu-popup-sm-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-menu-popup-md-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-menu-popup-lg-line-height: var( --kendo-line-height, normal ) !default;
 
-/// The background of the menu popup.
+/// The background color of the Menu popup.
 /// @group menu
 $kendo-menu-popup-bg: $kendo-popup-bg !default;
-/// The text color of the menu popup.
+/// The text color of the Menu popup.
 /// @group menu
 $kendo-menu-popup-text: $kendo-popup-text !default;
-/// The border color of the menu popup.
+/// The border color of the Menu popup.
 /// @group menu
 $kendo-menu-popup-border: $kendo-popup-border !default;
-/// The background gradient of the menu popup.
+/// 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.
+/// The horizontal padding of the Menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-padding-x: k-spacing(4) !default;
 $kendo-menu-popup-sm-item-padding-x: k-spacing(4) !default;
 $kendo-menu-popup-md-item-padding-x: k-spacing(4) !default;
 $kendo-menu-popup-lg-item-padding-x: k-spacing(4) !default;
 
-/// Vertical padding of the menu item in popup.
+/// The vertical padding of the Menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-padding-y: k-spacing(1) !default;
 $kendo-menu-popup-sm-item-padding-y: k-spacing(0.5) !default;
 $kendo-menu-popup-md-item-padding-y: k-spacing(1) !default;
 $kendo-menu-popup-lg-item-padding-y: k-spacing(1.5) !default;
 
-/// The end padding of the menu item in popup.
+/// 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 + #{$kendo-icon-size} ) !default;
 $kendo-menu-popup-sm-item-padding-end: calc( #{$kendo-menu-popup-sm-item-padding-x} * 2 + #{$kendo-icon-size} ) !default;
 $kendo-menu-popup-md-item-padding-end: calc( #{$kendo-menu-popup-md-item-padding-x} * 2 + #{$kendo-icon-size} ) !default;
 $kendo-menu-popup-lg-item-padding-end: calc( #{$kendo-menu-popup-lg-item-padding-x} * 2 + #{$kendo-icon-size} ) !default;
 
-/// The start margin of the menu item expand icon.
+/// The start margin of the Menu item expand icon.
 /// @group menu
 $kendo-menu-popup-sm-item-icon-margin-start: $kendo-menu-popup-sm-item-padding-x !default;
 $kendo-menu-popup-md-item-icon-margin-start: $kendo-menu-popup-md-item-padding-x !default;
 $kendo-menu-popup-lg-item-icon-margin-start: $kendo-menu-popup-lg-item-padding-x !default;
 
-/// The end margin of the menu item expand icon.
+/// The end margin of the Menu item expand icon.
 /// @group menu
 $kendo-menu-popup-sm-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) ) !default;
 $kendo-menu-popup-md-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-md-item-padding-end} - #{k-math-div( $kendo-menu-popup-md-item-padding-x, 2 )}) ) !default;
 $kendo-menu-popup-lg-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-lg-item-padding-end} - #{k-math-div( $kendo-menu-popup-lg-item-padding-x, 2 )}) ) !default;
 
-/// The spacing between the menu items in popup.
+/// The spacing between the Menu items in popup.
 /// @group menu
 $kendo-menu-popup-item-spacing: k-spacing(0) !default;
 
-/// The background of the menu item in popup.
+/// The background color of the Menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-bg: null !default;
-/// The text color of the menu item in popup.
+/// 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.
+/// 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.
+/// 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.
+/// The background color 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.
+/// 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.
+/// 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.
+/// 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.
+/// The background color of active 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.
+$kendo-menu-popup-item-active-bg: $kendo-list-item-selected-bg !default;
+/// The text color of active 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.
+$kendo-menu-popup-item-active-text: $kendo-list-item-selected-text !default;
+/// The border color of active Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-expanded-border: null !default;
-/// The background gradient of expanded menu item in popup.
+$kendo-menu-popup-item-active-border: null !default;
+/// The background gradient of active Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-expanded-gradient: null !default;
+$kendo-menu-popup-item-active-gradient: null !default;
 
-/// The base shadow of focused menu item in popup.
+/// The base shadow of focused Menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
 
@@ -26050,7 +26148,6 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
     }
     .k-menu { @extend .k-menu-bar !optional; }
 
-
     // Menu item
     .k-menu-item {
         border-width: 0;
@@ -26060,6 +26157,10 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
         flex: none;
         position: relative;
         user-select: none;
+
+        &.k-selected {
+            font-weight: $kendo-menu-item-selected-font-weight;
+        }
     }
     .k-menu-item-content {
         display: block;
@@ -26119,8 +26220,8 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
         }
 
         > .k-separator {
-            margin-block: 0;
-            margin-inline: $kendo-menu-separator-spacing;
+            margin-block: $kendo-menu-separator-margin-block;
+            margin-inline: $kendo-menu-separator-margin-inline;
             width: 0;
             height: auto;
             border-width: 0 0 0 1px;
@@ -26132,6 +26233,7 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
     // Orientation -- vertical
     .k-menu-vertical {
         flex-direction: column;
+        width: 100%;
 
         > .k-menu-item + .k-menu-item {
             margin-top: $kendo-menu-item-spacing;
@@ -26149,12 +26251,11 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
         }
 
         > .k-separator {
-            margin-block: $kendo-menu-separator-spacing;
+            margin-block: $kendo-menu-separator-margin-block;
             margin-inline: 0;
             height: 0;
             border-width: 1px 0 0;
             border-style: solid;
-            border-color: $kendo-component-border;
             display: block;
         }
     }
@@ -26175,6 +26276,10 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
         *::after {
             box-sizing: border-box;
         }
+
+        .k-menu-item {
+            font-weight: initial;
+        }
     }
 
 
@@ -26192,12 +26297,11 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
         }
 
         .k-separator {
-            margin-block: $kendo-menu-separator-spacing;
+            margin-block: $kendo-menu-separator-margin-inline;
             margin-inline: 0;
             height: 0;
             border-width: 1px 0 0;
             border-style: solid;
-            border-color: $kendo-component-border;
             display: block;
         }
     }
@@ -26314,50 +26418,20 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
         margin: 0;
         padding: 0;
         border: 0;
-        position: relative;
+        display: flex;
+        align-items: center;
 
         .k-menu {
             overflow: hidden;
             flex-wrap: nowrap;
         }
+    }
 
-        .k-menu-scroll-button {
-            @include border-radius( 0 );
-            padding: 0;
-            border-width: 0;
-            border-color: inherit;
-            color: inherit;
-            background: inherit;
-            position: absolute;
+    .k-menu-scroll-wrapper-vertical {
+        flex-direction: column;
 
-            &.k-scroll-left {
-                top: 0;
-                inset-inline-start: 0;
-                height: 100%;
-                width: 16px;
-                border-right-width: 1px;
-            }
-            &.k-scroll-right {
-                top: 0;
-                inset-inline-end: 0;
-                height: 100%;
-                width: 16px;
-                border-left-width: 1px;
-            }
-            &.k-scroll-up {
-                top: 0;
-                inset-inline-start: 0;
-                width: 100%;
-                height: 16px;
-                border-bottom-width: 1px;
-            }
-            &.k-scroll-down {
-                bottom: 0;
-                inset-inline-start: 0;
-                width: 100%;
-                height: 16px;
-                border-top-width: 1px;
-            }
+        > .k-menu-scroll-button {
+            width: 100%;
         }
     }
 
@@ -26438,10 +26512,10 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
             &:active,
             &.k-active {
                 @include fill(
-                    $kendo-menu-item-expanded-text,
-                    $kendo-menu-item-expanded-bg,
-                    $kendo-menu-item-expanded-border,
-                    $kendo-menu-item-expanded-gradient
+                    $kendo-menu-item-active-text,
+                    $kendo-menu-item-active-bg,
+                    $kendo-menu-item-active-border,
+                    $kendo-menu-item-active-gradient
                 );
             }
 
@@ -26449,6 +26523,21 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
             &.k-focus {
                 @include focus-indicator( $kendo-menu-item-focus-shadow, true );
             }
+
+            &.k-selected {
+                @include fill(
+                    $kendo-menu-item-selected-text,
+                    $kendo-menu-item-selected-bg,
+                    $kendo-menu-item-selected-border,
+                    $kendo-menu-item-selected-gradient
+                );
+            }
+        }
+
+        > .k-separator {
+            @include fill(
+                $border: $kendo-menu-separator-border
+            );
         }
     }
 
@@ -26483,10 +26572,10 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
             &.k-active,
             &.k-selected {
                 @include fill(
-                    $kendo-menu-popup-item-expanded-text,
-                    $kendo-menu-popup-item-expanded-bg,
-                    $kendo-menu-popup-item-expanded-border,
-                    $kendo-menu-popup-item-expanded-gradient
+                    $kendo-menu-popup-item-active-text,
+                    $kendo-menu-popup-item-active-bg,
+                    $kendo-menu-popup-item-active-border,
+                    $kendo-menu-popup-item-active-gradient
                 );
             }
         }
@@ -26497,6 +26586,12 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
                 @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true );
             }
         }
+
+        > .k-separator {
+            @include fill(
+                $border: $kendo-menu-separator-border
+            );
+        }
     }
 
 
@@ -27025,8 +27120,8 @@ $kendo-toolbar-sizes: (
 
             // Selected
             &.k-selected {
-                color: $kendo-menu-popup-item-expanded-text;
-                background: $kendo-menu-popup-item-expanded-bg;
+                color: $kendo-menu-popup-item-active-text;
+                background: $kendo-menu-popup-item-active-bg;
             }
 
             // Disabled state