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;Since v2.7.0
The background color for a dialog in light themes.
$rmd-dialog-light-background-color: rmd-theme-var(surface) !default;Since v2.7.0
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;Since v2.7.0
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;Since v2.7.0
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;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;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;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;The amount of padding to apply to the DialogHeader component.
$rmd-dialog-header-padding: 1.5rem !default;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;The amount of padding to apply to the DialogContent component.
$rmd-dialog-content-padding: 1.5rem !default;The amount of padding to apply to the DialogFooter component.
$rmd-dialog-footer-padding: 0.5rem !default;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;The enter animation duration. This should match the timeout prop for the Dialog component.
$rmd-dialog-enter-duration: 0.2s !default;The leave animation duration. This should match the timeout prop for the Dialog component.
$rmd-dialog-leave-duration: 0.15s !default;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;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;Creates the styles for one of the dialog'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 dialog's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The dialog 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 base dialog element.
Creates the styles for the DialogHeader component.
Creates the minimal required styles for the DialogTitle component.
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.
Creates the styles for the DialogFooter component. It has styles built-in to position the actions in different locations.
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.
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.
Creates all the styles for the dialog package.
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.
Color|String|Numberone of the dialog's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
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.
Stringone of the dialog'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 |