Skip to main content
react-md
Dialog - SassDoc

Variables

rmd-dialog-elevation

Number

The elevation (box-shadow) to use for the dialog when it is not full page. This should be a number between 0 and 24 since it gets passed to the rmd-elevation mixin.

$rmd-dialog-elevation: 16 !default;

rmd-dialog-light-background-color

Since v2.7.0

Color

The background color for a dialog in light themes.

$rmd-dialog-light-background-color: rmd-theme-var(surface) !default;

rmd-dialog-dark-elevation-background-color

Since v2.7.0

Color

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

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

rmd-dialog-dark-background-color

Since v2.7.0

Color

The background color for a dialog in dark themes.

$rmd-dialog-dark-background-color: if(
  $rmd-theme-dark-elevation and $rmd-dialog-dark-elevation-background-color,
  $rmd-dialog-dark-elevation-background-color,
  rmd-theme-var(surface)
) !default;

rmd-dialog-background-color

Since v2.7.0

Color

The base background color to apply to dialogs.

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

rmd-dialog-z-index

Number

The z-index for dialogs. This value is a bit larger than overlays just in case other components are using the overlay as well. The dialog's overlay will also gain this z-index value.

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

rmd-dialog-vertical-margin

Number

The amount of vertical viewport spacing there should be between the edge of the screen and a non-full page dialog. This value should be big enough so that users can still touch the overlay when a dialog is visible.

$rmd-dialog-vertical-margin: 1.5rem !default;

rmd-dialog-horizontal-margin

Number

The amount of horizontal viewport spacing there should be between the edge of the screen and a non-full page dialog. This value should be big enough so that users can still touch the overlay when a dialog is visible.

$rmd-dialog-horizontal-margin: 2.5rem !default;

rmd-dialog-header-padding

Number

The amount of padding to apply to the DialogHeader component.

$rmd-dialog-header-padding: 1.5rem !default;

rmd-dialog-header-padding-bottom

Number

The amount of padding-bottom to apply to the DialogHeader component. This is a bit smaller than the $rmd-dialog-header-padding value since it is usually used alongside the DialogContent component which has its own padding attached.

$rmd-dialog-header-padding-bottom: 1.25rem !default;

rmd-dialog-content-padding

Number

The amount of padding to apply to the DialogContent component.

$rmd-dialog-content-padding: 1.5rem !default;
Number

The amount of padding to apply to the DialogFooter component.

$rmd-dialog-footer-padding: 0.5rem !default;

rmd-dialog-transition-distance

Number

The distance that the dialog should travel while animating in and out of view. By default, this animation will cause the dialog to "fly" upwards. If you change this value to be a negative number, it will "fly" downwards.

$rmd-dialog-transition-distance: 1.875rem !default;

rmd-dialog-enter-duration

Number

The enter animation duration. This should match the timeout prop for the Dialog component.

$rmd-dialog-enter-duration: 0.2s !default;

rmd-dialog-leave-duration

Number

The leave animation duration. This should match the timeout prop for the Dialog component.

$rmd-dialog-leave-duration: 0.15s !default;

rmd-dialog-min-width

Number

The min width for a centered dialog. This is really just applied so you don't have super tiny dialogs if there isn't enough content in the dialog.

$rmd-dialog-min-width: 17.5rem !default;

rmd-dialog-theme-values

Map

A Map of all the "themeable" parts of the dialog 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-dialog-theme-values: (
  background-color: $rmd-dialog-background-color,
  horizontal-margin: $rmd-dialog-horizontal-margin,
  vertical-margin: $rmd-dialog-vertical-margin,
  min-width: $rmd-dialog-min-width,
  header-padding: $rmd-dialog-header-padding,
  header-padding-bottom: $rmd-dialog-header-padding-bottom,
  content-padding: $rmd-dialog-content-padding,
  footer-padding: $rmd-dialog-footer-padding,
  z-index: $rmd-dialog-z-index,
) !default;

Mixins

rmd-dialog-theme

mixin

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

Parameters
NameDescriptionTypeDefault Value
$property

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

String
$theme-style

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

Color|String|Numbernull

rmd-dialog-theme-update-var

mixin

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

Parameters
NameDescriptionTypeDefault Value
$theme-style

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

String
$value

The new value to use.

Color|String|Number

rmd-dialog

mixin

Creates the styles for the base dialog element.

rmd-dialog-header

mixin

Creates the styles for the DialogHeader component.

rmd-dialog-title

mixin

Creates the minimal required styles for the DialogTitle component.

rmd-dialog-content

mixin

Creates the styles for the DialogContent component. It is set up so that it will grow to fill the remaining space within the Dialog and the DialogHeader and DialogFooter components will be fixed to the top and bottom edges respectively. It will also include scrolling by default.

mixin

Creates the styles for the DialogFooter component. It has styles built-in to position the actions in different locations.

rmd-dialog-container

mixin

When the dialog is not set to be full page, the dialog gets wrapped in this container component so that it can be centered within the page using flexbox.

In the past versions, I did some old-school centering logic with left, top, and transform, but unfortunately this adds text blur in some browsers and made the transitions harder to customize since you would always need to apply the transforms at each stage of the transition. Using a flexbox approach fixes this.

rmd-dialog-overlay

mixin

Creates the styles for the dialog's overlay. This really requires the base styles and component from the overlay package and adds a few changes to help with nested dialogs.

react-md-dialog

mixin

Creates all the styles for the dialog package.

Functions

rmd-dialog-theme

function

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

Parameters
NameDescriptionTypeDefault Value
$theme-style

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

String

rmd-dialog-theme-var

function

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

Parameters
NameDescriptionTypeDefault Value
$theme-style

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