Skip to main content
react-md
react-md - Alert - SassDoc

Variables

rmd-snackbar-margin

Number

The amount of margin to apply to the snackbar so that it does not touch the viewport edges.

$rmd-snackbar-margin: 1rem !default;

rmd-snackbar-z-index

Number

The z-index for the snackbar.

$rmd-snackbar-z-index: $rmd-utils-temporary-element-z-index + 10 !default;

rmd-toast-elevation

Number

The elevation to add to a toast. This will be used to create the correct box-shadow.

$rmd-toast-elevation: 6 !default;

rmd-toast-border-radius

Number

The border radius to apply to a toast.

$rmd-toast-border-radius: 0.25rem !default;

rmd-toast-light-background-color

Color

The background color for a toast in light themes.

$rmd-toast-light-background-color: #323232 !default;

rmd-toast-light-color

Color

The text color for a toast in light themes.

$rmd-toast-light-color: $rmd-white-base !default;

rmd-toast-dark-elevation-background-color

Since v2.7.0

Color

The background color for a toast in dark themes when the $rmd-theme-dark-elevation feature flag is also enabled.

$rmd-toast-dark-elevation-background-color: map-get(
  $rmd-theme-dark-elevation-colors,
  $rmd-toast-elevation
) !default;
See also

rmd-toast-dark-background-color

Color

The background color for a toast in dark themes.

$rmd-toast-dark-background-color: if(
  $rmd-theme-dark-elevation and $rmd-toast-dark-elevation-background-color,
  $rmd-toast-dark-elevation-background-color,
  $rmd-toast-light-background-color
) !default;

rmd-toast-dark-color

Color

The text color for a toast in dark themes

$rmd-toast-dark-color: $rmd-toast-light-color !default;

rmd-toast-background-color

Color

The default background color for toasts.

$rmd-toast-background-color: if(
  $rmd-theme-light,
  $rmd-toast-light-background-color,
  $rmd-toast-dark-background-color
) !default;

rmd-toast-color

Color

The default text color for toasts

$rmd-toast-color: if(
  $rmd-theme-light,
  $rmd-toast-light-color,
  $rmd-toast-dark-color
) !default;

rmd-toast-min-height

Number

The minimum height for a single line toast.

$rmd-toast-min-height: 3rem !default;

rmd-toast-two-line-min-height

Number

The minimum height for a two line toast.

$rmd-toast-two-line-min-height: 4.25rem !default;

rmd-toast-min-width

Number

The min-width to apply to toasts for larger screens. Mobile devices that are smaller than this will just span the entire viewport excluding the default snackbar margin.

$rmd-toast-min-width: 21.5rem !default;

rmd-toast-vertical-padding

Number

The amount of padding to apply to the top and bottom of the toast.

$rmd-toast-vertical-padding: 0.75rem !default;

rmd-toast-horizontal-padding

Number

The amount of padding to apply to the left and right of the toast's message. When there is also an action in the toast, the right padding will be reduced to the $rmd-toast-action-margin.

$rmd-toast-horizontal-padding: 1rem !default;

rmd-toast-action-margin

Number

The amount of margin to apply to the toast's action if there is one. This will be applied to the left and right of the action.

$rmd-toast-action-margin: 0.5rem !default;

rmd-toast-stacked-action-margin-top

Number

The amount of margin-top to apply to the action button when it has been stacked within the toast.

$rmd-toast-stacked-action-margin-top: 0.25rem !default;

rmd-toast-enter-duration

Number

The transition duration for the enter animation for a toast. If this value gets updated, you'll also need to update the timoout prop on the Toast as well.

$rmd-toast-enter-duration: $rmd-transition-standard-time !default;

rmd-toast-exit-duration

Number

The transition duration for the exit animation for a toast. If this value gets updated, you'll also need to update the timoout prop on the Toast as well.

$rmd-toast-exit-duration: $rmd-transition-standard-time !default;

rmd-alert-theme-values

Map

A Map of all the "themeable" parts of the alert 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-alert-theme-values: (
  background-color: $rmd-toast-background-color,
  color: $rmd-toast-color,
  light-background-color: $rmd-toast-light-background-color,
  light-color: $rmd-toast-light-color,
  dark-background-color: $rmd-toast-dark-background-color,
  dark-color: $rmd-toast-dark-color,
) !default;

Mixins

rmd-alert-theme

mixin

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

Parameters
NameDescriptionTypeDefault Value
$property

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

String
$theme-style

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

Color|String|Numbernull

rmd-alert-theme-update-var

mixin

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

Parameters
NameDescriptionTypeDefault Value
$theme-style

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

String
$value

The new value to use.

Color|String|Number

rmd-snackbar

mixin

Generates the styles for a snackbar and should probably only be used internally.

rmd-toast

mixin

Generates the styles for a toast and should probably only be used internally.

react-md-alert

mixin

Creates all the styles for this package as well as defining all the theme CSS variables.

Functions

rmd-alert-theme

function

This function is used to quickly get one of the alert's theme values. This is really just for the rmd-alert-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 alert's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

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

String

rmd-alert-theme-var

function

This function is used to get one of the alert'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-alert-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 alert's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

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