Skip to main content
react-md
Overlay - SassDoc

Variables

rmd-overlay-z-index

Number

The z-index for overlays.

$rmd-overlay-z-index: $rmd-utils-temporary-element-z-index !default;

rmd-overlay-transition-duration

Number

The transition duration for overlays entering and leaving.

$rmd-overlay-transition-duration: $rmd-transition-standard-time !default;

rmd-overlay-color

Color

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;

rmd-overlay-theme-values

Map

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;

Mixins

rmd-overlay-theme

mixin

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

Parameters
NameDescriptionTypeDefault Value
$property

The property to set a rmd-overlay-theme-values value to.

String
$theme-style

One of the keys of rmd-overlay-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-overlay-theme-values map when null.

Color|String|Numbernull

rmd-overlay-theme-update-var

mixin

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

Parameters
NameDescriptionTypeDefault Value
$theme-style

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

String
$value

The new value to use.

Color|String|Number

rmd-overlay

mixin

Creates the styles for the overlay component.

react-md-overlay

mixin

Creates the styles for overlays within react-md and also creates all the theme css variables for overlays.

Functions

rmd-overlay-theme

function

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.

Returns — Color|String|Number

one of the overlay's theme values.

Parameters
NameDescriptionTypeDefault Value
$style

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

String

rmd-overlay-theme-var

function

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.

Returns — String

one of the overlay's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-overlay-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