The amount of margin to apply to the snackbar so that it does not touch the viewport edges.
$rmd-snackbar-margin: 1rem !default;The z-index for the snackbar.
$rmd-snackbar-z-index: $rmd-utils-temporary-element-z-index + 10 !default;The elevation to add to a toast. This will be used to create the correct box-shadow.
$rmd-toast-elevation: 6 !default;The border radius to apply to a toast.
$rmd-toast-border-radius: 0.25rem !default;The background color for a toast in light themes.
$rmd-toast-light-background-color: #323232 !default;The text color for a toast in light themes.
$rmd-toast-light-color: $rmd-white-base !default;Since v2.7.0
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;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;The text color for a toast in dark themes
$rmd-toast-dark-color: $rmd-toast-light-color !default;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;The default text color for toasts
$rmd-toast-color: if(
$rmd-theme-light,
$rmd-toast-light-color,
$rmd-toast-dark-color
) !default;The minimum height for a single line toast.
$rmd-toast-min-height: 3rem !default;The minimum height for a two line toast.
$rmd-toast-two-line-min-height: 4.25rem !default;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;The amount of padding to apply to the top and bottom of the toast.
$rmd-toast-vertical-padding: 0.75rem !default;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;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;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;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;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;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;Creates the styles for one of the alert'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 alert's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The alert theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Generates the styles for a snackbar and should probably only be used internally.
Generates the styles for a toast and should probably only be used internally.
Creates all the styles for this package as well as defining all the theme CSS variables.
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.
Color|String|Numberone of the alert's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
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.
Stringone of the alert'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 |