Skip to main content
react-md
react-md - Expansion Panel - SassDoc

Variables

rmd-expansion-panel-spacing

Number

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;

rmd-expansion-panel-header-padding

Number

The amount of padding to use for the header element within the expansion panel.

$rmd-expansion-panel-header-padding: 1rem !default;

rmd-expansion-panel-expander-icon-spacing

Number

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;

rmd-expansion-panel-theme-values

Map

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;

Mixins

rmd-expansion-panel-theme

mixin

Creates the styles for one of the expansion-panel's theme values. This is mostly going to be an internal helper mixin util.

Parameters
NameDescriptionTypeDefault Value
$property

The property to set a rmd-expansion-panel-theme-values value to.

String
$theme-style

One of the keys of rmd-expansion-panel-theme-values to extract a value from.

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 rmd-expansion-panel-theme-values map when null.

Color|String|Numbernull

rmd-expansion-panel-theme-update-var

mixin

Updates one of the expansion-panel's theme variables with the new value for the section of your app.

Parameters
NameDescriptionTypeDefault Value
$theme-style

The expansion-panel theme style type to update. This should be one of the $rmd-expansion-panel-theme-values keys.

String
$value

The new value to use.

Color|String|Number

rmd-expansion-panel

mixin

Creates the styles for the expansion panel and all the child elements.

react-md-expansion-panel

mixin

Creates all the styles for the expansion-panel package as well as the root css variable theme.

Functions

rmd-expansion-panel-theme

function

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.

Returns — Color|String|Number

one of the expansion-panel's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-expansion-panel-theme-values map keys to get a value for.

String

rmd-expansion-panel-theme-var

function

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.

Returns — String

one of the expansion-panel's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-expansion-panel-theme-values map keys to set a value for.

String
$fallback

An optional fallback color to apply. This is set to null by default and not used since the link's theme variables should always exist.

Color|String|Numbernull