kendo-menu-group-default-size | "md" | "md" | Default: "md"Computed: "md" |
| Description: The default size of the Menu group.
|
kendo-menu-border-width | 0px | 0px | Default: 0pxComputed: 0px |
| Description: The width of the border around the Menu.
|
kendo-menu-font-family | var(--kendo-font-family) | var(--kendo-font-family) | Default: var(--kendo-font-family)Computed: var(--kendo-font-family) |
| Description: The font family of the Menu.
|
kendo-menu-font-size | var(--kendo-font-size) | var(--kendo-font-size) | Default: var(--kendo-font-size)Computed: var(--kendo-font-size) |
| Description: The font size of the Menu.
|
kendo-menu-line-height | var(--kendo-line-height) | var(--kendo-line-height) | Default: var(--kendo-line-height)Computed: var(--kendo-line-height) |
| Description: The line height of the Menu used along with $kendo-font-size.
|
kendo-menu-bg | transparent | transparent | Default: transparentComputed: transparent |
| Description: The background color of the Menu.
|
kendo-menu-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface) |
| Description: The text color of the Menu.
|
kendo-menu-border | null | null | Default: nullComputed: null |
| Description: The border color of the Menu.
|
kendo-menu-gradient | null | null | Default: nullComputed: null |
| Description: The background gradient of the Menu.
|
kendo-menu-item-padding-x | k-spacing(3) | var(--kendo-spacing-3) | Default: k-spacing(3)Computed: var(--kendo-spacing-3) |
| Description: The horizontal padding of the Menu item.
|
kendo-menu-item-padding-y | k-spacing(1.5) | var(--kendo-spacing-1\.5) | Default: k-spacing(1.5)Computed: var(--kendo-spacing-1\.5) |
| Description: The vertical padding of the Menu item.
|
kendo-menu-item-spacing | k-spacing(0) | var(--kendo-spacing-0) | Default: k-spacing(0)Computed: var(--kendo-spacing-0) |
| Description: The spacing between the Menu items.
|
kendo-menu-item-icon-spacing | $kendo-icon-spacing | var(--kendo-spacing-1) | Default: $kendo-icon-spacingComputed: var(--kendo-spacing-1) |
| Description: The spacing between the Menu item text and icons.
|
kendo-menu-item-selected-font-weight | var(--kendo-font-weight-bold) | var(--kendo-font-weight-bold) | Default: var(--kendo-font-weight-bold)Computed: var(--kendo-font-weight-bold) |
| Description: The font weight of the selected Menu item.
|
kendo-menu-item-bg | null | null | Default: nullComputed: null |
| Description: The background color of the Menu item.
|
kendo-menu-item-text | k-color(subtle) | var(--kendo-color-subtle) | Default: k-color(subtle)Computed: var(--kendo-color-subtle) |
| Description: The text color of the Menu item.
|
kendo-menu-item-border | null | null | Default: nullComputed: null |
| Description: The border color of the Menu item.
|
kendo-menu-item-gradient | null | null | Default: nullComputed: null |
| Description: The background gradient of the Menu item.
|
kendo-menu-item-hover-bg | null | null | Default: nullComputed: null |
| Description: The background color of hovered Menu item.
|
kendo-menu-item-hover-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface) |
| Description: The text color of hovered Menu item.
|
kendo-menu-item-hover-border | null | null | Default: nullComputed: null |
| Description: The border color of hovered Menu item.
|
kendo-menu-item-hover-gradient | null | null | Default: nullComputed: null |
| Description: The background gradient of hovered Menu item.
|
kendo-menu-item-active-bg | null | null | Default: nullComputed: null |
| Description: The background color of active Menu item.
|
kendo-menu-item-active-text | k-color(primary-on-surface) | var(--kendo-color-primary-on-surface) | Default: k-color(primary-on-surface)Computed: var(--kendo-color-primary-on-surface) |
| Description: The text color of active Menu item.
|
kendo-menu-item-active-border | null | null | Default: nullComputed: null |
| Description: The border color of active Menu item.
|
kendo-menu-item-active-gradient | null | null | Default: nullComputed: null |
| Description: The background gradient of active Menu item.
|
kendo-menu-item-focus-shadow | $kendo-list-item-focus-shadow | (inset 0 0 0 2px var(--kendo-color-border-alt)) | Default: $kendo-list-item-focus-shadowComputed: (inset 0 0 0 2px var(--kendo-color-border-alt)) |
| Description: The base shadow of focused Menu item.
|
kendo-menu-item-selected-bg | null | null | Default: nullComputed: null |
| Description: The background color of selected Menu item.
|
kendo-menu-item-selected-text | k-color(primary-on-surface) | var(--kendo-color-primary-on-surface) | Default: k-color(primary-on-surface)Computed: var(--kendo-color-primary-on-surface) |
| Description: The text color of selected Menu item.
|
kendo-menu-item-selected-border | null | null | Default: nullComputed: null |
| Description: The border color of selected Menu item.
|
kendo-menu-item-selected-gradient | null | null | Default: nullComputed: null |
| Description: The background gradient of selected Menu item.
|
kendo-menu-scroll-button-bg | null | null | Default: nullComputed: null |
| Description: The background color of the Menu scroll buttons.
|
kendo-menu-scroll-button-text | k-color(subtle) | var(--kendo-color-subtle) | Default: k-color(subtle)Computed: var(--kendo-color-subtle) |
| Description: The text color of the Menu scroll buttons.
|
kendo-menu-scroll-button-border | null | null | Default: nullComputed: null |
| Description: The border color of the Menu scroll buttons.
|
kendo-menu-scroll-button-gradient | null | null | Default: nullComputed: null |
| Description: The background gradient of the Menu scroll buttons.
|
kendo-menu-scroll-button-hover-bg | null | null | Default: nullComputed: null |
| Description: The background color of hovered Menu scroll buttons.
|
kendo-menu-scroll-button-hover-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface) |
| Description: The text color of hovered Menu scroll buttons.
|
kendo-menu-scroll-button-hover-border | null | null | Default: nullComputed: null |
| Description: The border color of hovered Menu scroll buttons.
|
kendo-menu-scroll-button-hover-gradient | null | null | Default: nullComputed: null |
| Description: The background gradient of hovered Menu scroll buttons.
|
kendo-menu-icon-padding-x | null | null | Default: nullComputed: null |
| Description: The horizontal padding of the Menu expand arrow icon.
|
kendo-menu-icon-padding-y | null | null | Default: nullComputed: null |
| Description: The vertical padding of the Menu expand arrow icon.
|
kendo-menu-separator-margin-inline | k-spacing(1) | var(--kendo-spacing-1) | Default: k-spacing(1)Computed: var(--kendo-spacing-1) |
| Description: The inline margin of the horizontal Menu separator.
|
kendo-menu-separator-margin-block | k-spacing(1.5) | var(--kendo-spacing-1\.5) | Default: k-spacing(1.5)Computed: var(--kendo-spacing-1\.5) |
| Description: The block margin of the horizontal Menu separator.
|
kendo-menu-separator-border | k-color(border) | var(--kendo-color-border) | Default: k-color(border)Computed: var(--kendo-color-border) |
| Description: The border color of the Menu separator.
|
kendo-menu-popup-padding-x | null | null | Default: nullComputed: null |
| Description: The horizontal padding of the Menu popup.
|
kendo-menu-popup-padding-y | null | null | Default: nullComputed: null |
| Description: The vertical padding of the Menu popup.
|
kendo-menu-popup-border-width | $kendo-popup-border-width | 1px | Default: $kendo-popup-border-widthComputed: 1px |
| Description: The width of the border around the Menu popup.
|
kendo-menu-popup-sm-font-size | var(--kendo-font-size) | var(--kendo-font-size) | Default: var(--kendo-font-size)Computed: var(--kendo-font-size) |
| Description: The font size of the small Menu popup.
|
kendo-menu-popup-md-font-size | var(--kendo-font-size) | var(--kendo-font-size) | Default: var(--kendo-font-size)Computed: var(--kendo-font-size) |
| Description: The font size of the medium Menu popup.
|
kendo-menu-popup-lg-font-size | var(--kendo-font-size-lg) | var(--kendo-font-size-lg) | Default: var(--kendo-font-size-lg)Computed: var(--kendo-font-size-lg) |
| Description: The font size of the large Menu popup.
|
kendo-menu-popup-sm-line-height | var(--kendo-line-height) | var(--kendo-line-height) | Default: var(--kendo-line-height)Computed: var(--kendo-line-height) |
| Description: The line height of the small Menu popup.
|
kendo-menu-popup-md-line-height | var(--kendo-line-height) | var(--kendo-line-height) | Default: var(--kendo-line-height)Computed: var(--kendo-line-height) |
| Description: The line height of the medium Menu popup.
|
kendo-menu-popup-lg-line-height | var(--kendo-line-height-lg) | var(--kendo-line-height-lg) | Default: var(--kendo-line-height-lg)Computed: var(--kendo-line-height-lg) |
| Description: The line height of the large Menu popup.
|
kendo-menu-popup-bg | $kendo-popup-bg | var(--kendo-color-surface-alt) | Default: $kendo-popup-bgComputed: var(--kendo-color-surface-alt) |
| Description: The background color of the Menu popup.
|
kendo-menu-popup-text | $kendo-popup-text | var(--kendo-color-on-app-surface) | Default: $kendo-popup-textComputed: var(--kendo-color-on-app-surface) |
| Description: The text color of the Menu popup.
|
kendo-menu-popup-border | $kendo-popup-border | var(--kendo-color-border) | Default: $kendo-popup-borderComputed: var(--kendo-color-border) |
| Description: The border color of the Menu popup.
|
kendo-menu-popup-gradient | null | null | Default: nullComputed: null |
| Description: The background gradient of the Menu popup.
|
kendo-menu-popup-sm-item-padding-x | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The horizontal padding of the small Menu popup item.
|
kendo-menu-popup-md-item-padding-x | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The horizontal padding of the medium Menu popup item.
|
kendo-menu-popup-lg-item-padding-x | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The horizontal padding of the large Menu popup item.
|
kendo-menu-popup-sm-item-padding-y | k-spacing(0.5) | var(--kendo-spacing-0\.5) | Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5) |
| Description: The vertical padding of the small Menu popup item.
|
kendo-menu-popup-md-item-padding-y | k-spacing(1) | var(--kendo-spacing-1) | Default: k-spacing(1)Computed: var(--kendo-spacing-1) |
| Description: The vertical padding of the medium Menu popup item.
|
kendo-menu-popup-lg-item-padding-y | k-spacing(1.5) | var(--kendo-spacing-1\.5) | Default: k-spacing(1.5)Computed: var(--kendo-spacing-1\.5) |
| Description: The vertical padding of the large Menu popup item.
|
kendo-menu-popup-sm-item-padding-end | calc( #{$kendo-menu-popup-sm-item-padding-x} * 2 + #{$kendo-icon-size} ) | calc(var(--kendo-spacing-2) * 2 + 16px) | Default: calc( #{$kendo-menu-popup-sm-item-padding-x} * 2 + #{$kendo-icon-size} )Computed: calc(var(--kendo-spacing-2) * 2 + 16px) |
| Description: The end padding of the small Menu popup item.
|
kendo-menu-popup-md-item-padding-end | calc( #{$kendo-menu-popup-md-item-padding-x} * 2 + #{$kendo-icon-size} ) | calc(var(--kendo-spacing-2) * 2 + 16px) | Default: calc( #{$kendo-menu-popup-md-item-padding-x} * 2 + #{$kendo-icon-size} )Computed: calc(var(--kendo-spacing-2) * 2 + 16px) |
| Description: The end padding of the medium Menu popup item.
|
kendo-menu-popup-lg-item-padding-end | calc( #{$kendo-menu-popup-lg-item-padding-x} * 2 + #{$kendo-icon-size} ) | calc(var(--kendo-spacing-2) * 2 + 16px) | Default: calc( #{$kendo-menu-popup-lg-item-padding-x} * 2 + #{$kendo-icon-size} )Computed: calc(var(--kendo-spacing-2) * 2 + 16px) |
| Description: The end padding of the large Menu popup item.
|
kendo-menu-popup-sm-item-icon-margin-start | $kendo-menu-popup-sm-item-padding-x | var(--kendo-spacing-2) | Default: $kendo-menu-popup-sm-item-padding-xComputed: var(--kendo-spacing-2) |
| Description: The start margin of the small Menu popup item expand icon.
|
kendo-menu-popup-md-item-icon-margin-start | $kendo-menu-popup-md-item-padding-x | var(--kendo-spacing-2) | Default: $kendo-menu-popup-md-item-padding-xComputed: var(--kendo-spacing-2) |
| Description: The start margin of the medium Menu popup item expand icon.
|
kendo-menu-popup-lg-item-icon-margin-start | $kendo-menu-popup-lg-item-padding-x | var(--kendo-spacing-2) | Default: $kendo-menu-popup-lg-item-padding-xComputed: var(--kendo-spacing-2) |
| Description: The start margin of the large Menu popup item expand icon.
|
kendo-menu-popup-sm-item-icon-margin-end | calc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{list.slash( $kendo-menu-popup-sm-item-padding-x, 2 )}) ) | calc(-1 * (calc(var(--kendo-spacing-2) * 2 + 16px) - var(--kendo-spacing-2) / 2)) | Default: calc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{list.slash( $kendo-menu-popup-sm-item-padding-x, 2 )}) )Computed: calc(-1 * (calc(var(--kendo-spacing-2) * 2 + 16px) - var(--kendo-spacing-2) / 2)) |
| Description: The end margin of the small Menu popup item expand icon.
|
kendo-menu-popup-md-item-icon-margin-end | calc( -1 * (#{$kendo-menu-popup-md-item-padding-end} - #{list.slash( $kendo-menu-popup-md-item-padding-x, 2 )}) ) | calc(-1 * (calc(var(--kendo-spacing-2) * 2 + 16px) - var(--kendo-spacing-2) / 2)) | Default: calc( -1 * (#{$kendo-menu-popup-md-item-padding-end} - #{list.slash( $kendo-menu-popup-md-item-padding-x, 2 )}) )Computed: calc(-1 * (calc(var(--kendo-spacing-2) * 2 + 16px) - var(--kendo-spacing-2) / 2)) |
| Description: The end margin of the medium Menu popup item expand icon.
|
kendo-menu-popup-lg-item-icon-margin-end | calc( -1 * (#{$kendo-menu-popup-lg-item-padding-end} - #{list.slash( $kendo-menu-popup-lg-item-padding-x, 2 )}) ) | calc(-1 * (calc(var(--kendo-spacing-2) * 2 + 16px) - var(--kendo-spacing-2) / 2)) | Default: calc( -1 * (#{$kendo-menu-popup-lg-item-padding-end} - #{list.slash( $kendo-menu-popup-lg-item-padding-x, 2 )}) )Computed: calc(-1 * (calc(var(--kendo-spacing-2) * 2 + 16px) - var(--kendo-spacing-2) / 2)) |
| Description: The end margin of the large Menu popup item expand icon.
|
kendo-menu-popup-item-spacing | k-spacing(0) | var(--kendo-spacing-0) | Default: k-spacing(0)Computed: var(--kendo-spacing-0) |
| Description: The spacing between the Menu items in popup.
|
kendo-menu-popup-item-bg | null | null | Default: nullComputed: null |
| Description: The background color of the Menu item in popup.
|
kendo-menu-popup-item-text | null | null | Default: nullComputed: null |
| Description: The text color of the Menu item in popup.
|
kendo-menu-popup-item-border | null | null | Default: nullComputed: null |
| Description: The border color of the Menu item in popup.
|
kendo-menu-popup-item-gradient | null | null | Default: nullComputed: null |
| Description: The background gradient of the Menu item in popup.
|
kendo-menu-popup-item-hover-bg | color-mix(in srgb, k-color(on-app-surface) 8%, transparent) | color-mix(in srgb, var(--kendo-color-on-app-surface) 8%, transparent) | Default: color-mix(in srgb, k-color(on-app-surface) 8%, transparent)Computed: color-mix(in srgb, var(--kendo-color-on-app-surface) 8%, transparent) |
| Description: The background color of hovered Menu item in popup.
|
kendo-menu-popup-item-hover-text | $kendo-list-item-hover-text | var(--kendo-color-on-app-surface) | Default: $kendo-list-item-hover-textComputed: var(--kendo-color-on-app-surface) |
| Description: The text color of hovered Menu item in popup.
|
kendo-menu-popup-item-hover-border | null | null | Default: nullComputed: null |
| Description: The border color of hovered Menu item in popup.
|
kendo-menu-popup-item-hover-gradient | null | null | Default: nullComputed: null |
| Description: The background gradient of hovered Menu item in popup.
|
kendo-menu-popup-item-active-bg | $kendo-list-item-selected-bg | color-mix(in srgb, var(--kendo-color-on-app-surface) 12%, transparent) | Default: $kendo-list-item-selected-bgComputed: color-mix(in srgb, var(--kendo-color-on-app-surface) 12%, transparent) |
| Description: The background color of active Menu item in popup.
|
kendo-menu-popup-item-active-text | $kendo-list-item-selected-text | var(--kendo-color-on-app-surface) | Default: $kendo-list-item-selected-textComputed: var(--kendo-color-on-app-surface) |
| Description: The text color of active Menu item in popup.
|
kendo-menu-popup-item-active-border | null | null | Default: nullComputed: null |
| Description: The border color of active Menu item in popup.
|
kendo-menu-popup-item-active-gradient | null | null | Default: nullComputed: null |
| Description: The background gradient of active Menu item in popup.
|
kendo-menu-popup-item-focus-shadow | $kendo-menu-item-focus-shadow | (inset 0 0 0 2px var(--kendo-color-border-alt)) | Default: $kendo-menu-item-focus-shadowComputed: (inset 0 0 0 2px var(--kendo-color-border-alt)) |
| Description: The base shadow of focused Menu item in popup.
|
kendo-menu-group-sizes | | sm: | "font-size":"var(--kendo-font-size)","line-height":"var(--kendo-line-height)","item-padding-y":"var(--kendo-spacing-0\\.5)","item-padding-x":"var(--kendo-spacing-2)","item-padding-end":"calc(var(--kendo-spacing-2) * 2 + 16px)","item-icon-margin-start":"var(--kendo-spacing-2)","item-icon-margin-end":"calc(-1 * (calc(var(--kendo-spacing-2) * 2 + 16px) - var(--kendo-spacing-2) / 2))" | | md: | "font-size":"var(--kendo-font-size)","line-height":"var(--kendo-line-height)","item-padding-y":"var(--kendo-spacing-1)","item-padding-x":"var(--kendo-spacing-2)","item-padding-end":"calc(var(--kendo-spacing-2) * 2 + 16px)","item-icon-margin-start":"var(--kendo-spacing-2)","item-icon-margin-end":"calc(-1 * (calc(var(--kendo-spacing-2) * 2 + 16px) - var(--kendo-spacing-2) / 2))" | | lg: | "font-size":"var(--kendo-font-size-lg)","line-height":"var(--kendo-line-height-lg)","item-padding-y":"var(--kendo-spacing-1\\.5)","item-padding-x":"var(--kendo-spacing-2)","item-padding-end":"calc(var(--kendo-spacing-2) * 2 + 16px)","item-icon-margin-start":"var(--kendo-spacing-2)","item-icon-margin-end":"calc(-1 * (calc(var(--kendo-spacing-2) * 2 + 16px) - var(--kendo-spacing-2) / 2))" |
| Computed: (sm: (font-size: var(--kendo-font-size), line-height: var(--kendo-line-height), item-padding-y: var(--kendo-spacing-0\.5), item-padding-x: var(--kendo-spacing-2), item-padding-end: calc(var(--kendo-spacing-2) * 2 + 16px), item-icon-margin-start: var(--kendo-spacing-2), item-icon-margin-end: calc(-1 * (calc(var(--kendo-spacing-2) * 2 + 16px) - var(--kendo-spacing-2) / 2))), md: (font-size: var(--kendo-font-size), line-height: var(--kendo-line-height), item-padding-y: var(--kendo-spacing-1), item-padding-x: var(--kendo-spacing-2), item-padding-end: calc(var(--kendo-spacing-2) * 2 + 16px), item-icon-margin-start: var(--kendo-spacing-2), item-icon-margin-end: calc(-1 * (calc(var(--kendo-spacing-2) * 2 + 16px) - var(--kendo-spacing-2) / 2))), lg: (font-size: var(--kendo-font-size-lg), line-height: var(--kendo-line-height-lg), item-padding-y: var(--kendo-spacing-1\.5), item-padding-x: var(--kendo-spacing-2), item-padding-end: calc(var(--kendo-spacing-2) * 2 + 16px), item-icon-margin-start: var(--kendo-spacing-2), item-icon-margin-end: calc(-1 * (calc(var(--kendo-spacing-2) * 2 + 16px) - var(--kendo-spacing-2) / 2)))) |
| Description: The sizes map of the Menu group.
|
