The z-index for overlays.
$rmd-overlay-z-index: $rmd-utils-temporary-element-z-index !default;
The transition duration for overlays entering and leaving.
$rmd-overlay-transition-duration: $rmd-transition-standard-time !default;
The background color for the overlay. It is recommended to make sure that an opacity is applied instead of a static color.
$rmd-overlay-color: rgba($rmd-black-base, 0.4) !default;
A Map of all the "themeable" parts of the overlay package. Every key in this map will be used to create a css variable to dynamically update the values of the overlay as needed.
$rmd-overlay-theme-values: (
background-color: $rmd-overlay-color,
active-opacity: 1,
z-index: $rmd-overlay-z-index,
) !default;
Creates the styles for one of the overlay'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 overlay's theme variables with the new value for the section of your app.
Name | Description | Type | Default Value |
---|---|---|---|
$theme-style | The overlay 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 overlay component.
Creates the styles for overlays within react-md and also creates all the theme css variables for overlays.
This function is used to quickly get one of the overlay's theme values. This is really just for the rmd-overlay-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 overlay's theme values.
Name | Description | Type | Default Value |
---|---|---|---|
$style | One of the | String | — |
This function is used to get one of the overlay'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-overlay-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 overlay'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 |