The amount of padding to place before the first list item and after the last list item in the list.
$rmd-list-vertical-padding: 0.5rem !default;The amount of padding to place before the first list item and after the last list item in the list.
$rmd-list-dense-vertical-padding: 0.25rem !default;The amount of padding to place to the left and right of all the list items.
It is recommended to keep this value at 0 and instead update the $rmd-list-item-horizontal-padding instead to get better clickable areas and hover effects on each item.
$rmd-list-horizontal-padding: 0 !default;The amount of padding to place to the left and right of all the list items in a "dense" layout. It is recommended to keep this value at 0 and instead update the $rmd-list-item-horizontal-padding instead to get better clickable areas and hover effects on each item.
$rmd-list-dense-horizontal-padding: $rmd-list-horizontal-padding !default;The line height to apply to all items within the list. The default typography applied to lists uses the subtitle-1 typography specs, but it looks better to apply the main text line-height within lists.
$rmd-list-line-height: rmd-typography-value(body-1, line-height) !default;The font size to apply to all items in a list.
$rmd-list-font-size: rmd-typography-value(subtitle-1, font-size) !default;The font size to use for a "dense" list layout.
$rmd-list-dense-font-size: 0.8125rem !default;The amount of vertical padding to apply to each list item. This is really only added to help with the default "growing height" case of items since the list item is aligned using a centered flexbox.
$rmd-list-item-vertical-padding: 0.5rem !default;The amount of horizontal padding to apply to each list item.
$rmd-list-item-horizontal-padding: 1rem !default;The default height for a list item. To help create more general lists and layouts this height will be applied as a min-height instead of height so that it can grow in height based on the content. When using the ListItem component, it will automatically "upgrade" to use height when the secondaryText or list item "addons" are provided to help enforce the material design specs.
$rmd-list-item-height: 3rem !default;The default height for a dense list item.
$rmd-list-item-dense-height: 2.5rem !default;The height for a "medium" sized list item. This will normally get applied for any list item that has an icon or avatar.
$rmd-list-item-medium-height: 3.5rem !default;The height for a "medium" sized list item that is also dense.
$rmd-list-item-dense-medium-height: 3rem !default;The height for a "large" sized list item. This will normally get applied for any list item that has secondary text with no icon, or avatar.
$rmd-list-item-large-height: 4rem !default;The height for a "large" sized list item that is also dense.
$rmd-list-item-dense-large-height: 3.5rem !default;The height for an "extra large" sized list item. This will normally get applied for any list item that:
$rmd-list-item-extra-large-height: 4.5rem !default;The height for a "extra large" sized list item that is also dense.
$rmd-list-item-dense-extra-large-height: 4rem !default;The height for a list item with three lines of text.
$rmd-list-item-three-line-height: 5.5rem !default;The height for a list item with three lines of text while being dense.
$rmd-list-item-dense-three-line-height: 5rem !default;The line-height to use for the secondary text within the list item. This is different than the primary text since this can span multiple lines by default.
$rmd-list-item-secondary-text-line-height: 1.42857 !default;The max allowed height for the three-line list item's secondary text. You probably don't want to change this value unless you changed the other list item heights.
$rmd-list-item-secondary-text-three-line-max-height: 3rem !default;The max allowed height for the dense three-line list item's secondary text. You probably don't want to change this value unless you changed the other list item heights.
$rmd-list-item-dense-secondary-text-three-line-max-height: 2.25rem !default;The spacing between the left side of the list item up to the left side of the first character of text. This is normally just used to align the list items with other components.
$rmd-list-item-text-keyline: 4.5rem !default;The size to use for media that appears before or after the main content in a list item.
$rmd-list-item-media-size: 3.5rem !default;The size to use for large media that appears before or after the main content in a list item.
$rmd-list-item-media-large-size: 6.25rem !default;The amount of spacing to place between the main content and media that appears in a list item.
$rmd-list-item-media-spacing: 1rem !default;Since v2.4.3
The opacity to apply to a list item when it is disabled and the disabledOpacity boolean is enabled that will also darken any addons rendered in the list item.
$rmd-list-item-disabled-opacity: 0.5 !default;A Map of all the "themeable" parts of the list 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-list-theme-values: (
vertical-padding: $rmd-list-vertical-padding,
horizontal-padding: $rmd-list-horizontal-padding,
font-size: $rmd-list-font-size,
text-keyline: $rmd-list-item-text-keyline,
item-height: $rmd-list-item-height,
item-medium-height: $rmd-list-item-medium-height,
item-large-height: $rmd-list-item-large-height,
item-extra-large-height: $rmd-list-item-extra-large-height,
item-three-line-height: $rmd-list-item-three-line-height,
item-vertical-padding: $rmd-list-item-vertical-padding,
item-horizontal-padding: $rmd-list-item-horizontal-padding,
item-secondary-three-line-height:
$rmd-list-item-secondary-text-three-line-max-height,
dense-font-size: $rmd-list-dense-font-size,
dense-vertical-padding: $rmd-list-dense-vertical-padding,
dense-horizontal-padding: $rmd-list-dense-horizontal-padding,
dense-item-height: $rmd-list-item-dense-height,
dense-item-medium-height: $rmd-list-item-dense-medium-height,
dense-item-large-height: $rmd-list-item-dense-large-height,
dense-item-extra-large-height: $rmd-list-item-dense-extra-large-height,
dense-item-three-line-height: $rmd-list-item-dense-three-line-height,
dense-item-secondary-three-line-height:
$rmd-list-item-dense-secondary-text-three-line-max-height,
media-size: $rmd-list-item-media-size,
media-spacing: $rmd-list-item-media-spacing,
media-large-size: $rmd-list-item-media-large-size,
) !default;Creates the styles for one of the list'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 list's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The list theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
A "general" use mixin that will remove the default browser styles for a list and apply the optionally provided margin and padding instead.
| Name | Description | Type | Default Value |
|---|---|---|---|
$padding | The amount of padding to apply. | String|Number | 0 |
$margin | The amount of margin to apply. | String|Number | 0 |
Updates all the css variables for the list package to use a dense spec.
@use 'react-md' as *;
:root {
@include rmd-list-dense-theme;
}
Creates the styles for a list in react-md.
The base styles required for a ListItem. This probably won't be used externally.
Updates all the list item css variables to apply to dense theme.
@use 'react-md' as *;
:root {
@include rmd-list-item-dense-theme;
}
Updates the spacing for a list item addon by updated the text-spacing from the @react-md/icon package and doing some calculations with the current text-keyline within the list.
This probably shouldn't be used externally.
| Name | Description | Type | Default Value |
|---|---|---|---|
$subtract | The amount that should be subtracted | String|Number | — |
@use 'react-md' as *;
.custom-updater {
@include rmd-list-item-addon-spacing(rmd-icon-theme-var(size));
}
Creates all the styles for a list item.
Creates the styles for a subheader within a list.
Creates all the styles for the list package.
This function is used to quickly get one of the list's theme values. This is really just for the rmd-list-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 list's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
This function is used to get one of the list'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-list-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 link'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 |