The elevation for menus. This should be a number from 0 to 24 (inclusive) as it gets passed to the rmd-elevation mixin.
$rmd-menu-elevation: 8 !default;Since v2.7.0
The background color for a menu in light themes.
$rmd-menu-light-background-color: rmd-theme-var(surface) !default;Since v2.7.0
The background color for a menu in dark themes when the $rmd-theme-dark-elevation feature flag is also enabled.
$rmd-menu-dark-elevation-background-color: map.get(
$rmd-theme-dark-elevation-colors,
$rmd-menu-elevation
) !default;Since v2.7.0
The background color for a menu in dark themes.
$rmd-menu-dark-background-color: if(
$rmd-theme-dark-elevation and $rmd-menu-dark-elevation-background-color,
$rmd-menu-dark-elevation-background-color,
rmd-theme-var(surface)
) !default;The background color to use for menus
$rmd-menu-background-color: if(
$rmd-theme-light,
$rmd-menu-light-background-color,
$rmd-menu-dark-background-color
) !default;The text color to use for menus
$rmd-menu-color: rmd-theme-var(on-surface) !default;The z-index for menus.
$rmd-menu-z-index: $rmd-utils-temporary-element-z-index !default;The min-width to apply to menus.
$rmd-menu-min-width: 7rem !default;The amount of spacing to use between icons and text within menu items. This really overwrites the additional spacing provided in the base list package since menu items are normally more dense and don't need to align with specific "keylines" in your app.
$rmd-menu-icon-spacing: 1rem !default;A Map of all the "themeable" parts of the menu package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.
$rmd-menu-theme-values: (
background-color: $rmd-menu-background-color,
color: $rmd-menu-color,
min-width: $rmd-menu-min-width,
icon-spacing: $rmd-menu-icon-spacing,
z-index: $rmd-menu-z-index,
) !default;Creates the styles for one of the menu's theme values. This is mostly going to be an internal helper mixin util.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to set a | String | — |
$theme-style | One of the keys of | String | — |
$fallback | A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the | Color|String|Number | null |
Updates one of the menu's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The menu theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Creates all the styles for the @react-md/menu package.
This function is used to quickly get one of the menu's theme values. This is really just for the rmd-menu-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.
Color|String|Numberone of the menu's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
This function is used to get one of the menu's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-menu-theme-values
This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.
Stringone of the menu's theme values as a css variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
$fallback | An optional fallback color to apply. This is set to | Color|String|Number | null |