The amount of spacing to use between panels when multiple are used together.
This gets applied as a margin-top
value.
$rmd-expansion-panel-spacing: 1rem !default;
The amount of padding to use for the header element within the expansion panel.
$rmd-expansion-panel-header-padding: 1rem !default;
The spacing to use for the expansion panel's expander icon. This is applied as padding-left
on the icon's containing <span>
.
$rmd-expansion-panel-expander-icon-spacing: $rmd-icon-spacing-with-text !default;
A Map of all the "themeable" parts of the expansion-panel package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.
Note: these variables feel useless to me. probably won't configure these
$rmd-expansion-panel-theme-values: (
spacing: $rmd-expansion-panel-spacing,
padding: $rmd-expansion-panel-header-padding,
icon-spacing: $rmd-expansion-panel-expander-icon-spacing,
) !default;
Creates the styles for one of the expansion-panel'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 expansion-panel's theme variables with the new value for the section of your app.
Name | Description | Type | Default Value |
---|---|---|---|
$theme-style | The expansion-panel theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Creates the styles for the expansion panel and all the child elements.
Creates all the styles for the expansion-panel package as well as the root css variable theme.
This function is used to quickly get one of the expansion-panel's theme values. This is really just for the rmd-expansion-panel-theme
mixin to provide some validation that a correct style key is used, but might be useful in other cases.
Color|String|Number
one of the expansion-panel's theme values.
Name | Description | Type | Default Value |
---|---|---|---|
$theme-style | One of the | String | — |
This function is used to get one of the expansion-panel'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-expansion-panel-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.
String
one of the expansion-panel'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 |