Dialog Sass API

Variables

dialog-disable-everything

$dialog-disable-everything: false !default;

dialog-disable-default-transition

$dialog-disable-default-transition: false !default;

Used By

• @mixin dialog-styles

dialog-disable-fixed

$dialog-disable-fixed: false !default;

dialog-disable-header

$dialog-disable-header: false !default;

Used By

• @mixin dialog-variables
• @mixin dialog-styles

dialog-disable-title

$dialog-disable-title: false !default;

dialog-disable-content

$dialog-disable-content: false !default;

dialog-disable-footer

$dialog-disable-footer: false !default;

Used By

• @mixin dialog-variables
• @mixin dialog-styles

dialog-disable-focus-outline

$dialog-disable-focus-outline: false !default;

Used By

• @mixin dialog-styles

dialog-disable-footer-flex-vertical

$dialog-disable-footer-flex-vertical: false !default;

Used By

• @mixin dialog-styles

dialog-disable-footer-flex-start

$dialog-disable-footer-flex-start: false !default;

Used By

• @mixin dialog-styles

dialog-disable-footer-space-between

$dialog-disable-footer-space-between: false !default;

Used By

• @mixin dialog-styles

dialog-disable-footer-flex-end

$dialog-disable-footer-flex-end: false !default;

Used By

• @mixin dialog-styles

dialog-elevation

$dialog-elevation: 16 !default;

dialog-z-index

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

Used By

• @mixin pseudo-element
• @mixin dialog-variables
• @mixin layout-styles
• @mixin menu-menu-styles
• @mixin overlay-variables
• @mixin sheet-variables
• @mixin slider-styles
• @mixin snackbar-styles
• @mixin tooltip-variables
• @mixin window-splitter-styles

dialog-background-color

$dialog-background-color: if(
  theme.$disable-dark-elevation,
  theme.theme-get-var(surface-color),
  null
) !default;

dialog-color

$dialog-color: if(
  theme.$disable-dark-elevation,
  theme.theme-get-var(text-primary-color),
  null
) !default;

dialog-min-width

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

Used By

• @mixin dialog-variables
• @mixin menu-variables
• @mixin segmented-button-styles
• @mixin snackbar-styles
• @mixin tabs-indicator-styles
• @mixin tabs-variables

dialog-small-width

$dialog-small-width: 25rem !default;

Used By

• @mixin dialog-variables
• @mixin dialog-styles

dialog-medium-width

$dialog-medium-width: 40rem !default;

Used By

• @mixin dialog-variables
• @mixin dialog-styles

dialog-large-width

$dialog-large-width: 60rem !default;

Used By

• @mixin dialog-variables
• @mixin dialog-styles

dialog-extra-large-width

$dialog-extra-large-width: 80rem !default;

Used By

• @mixin dialog-variables
• @mixin dialog-styles

dialog-horizontal-margin

$dialog-horizontal-margin: calc(spacing.get-var(lg) * 1.25) !default;

Used By

• @mixin dialog-variables

dialog-vertical-margin

$dialog-vertical-margin: spacing.get-var(lg) !default;

Used By

• @mixin dialog-variables

dialog-transition-distance

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

Used By

• @mixin dialog-styles
• @mixin tooltip-use-var
• @mixin tooltip-styles

dialog-enter-duration

$dialog-enter-duration: transition.$enter-duration !default;

dialog-enter-timing-function

$dialog-enter-timing-function: transition.$deceleration-timing-function !default;

Used By

• @mixin dialog-styles
• @mixin layout-styles
• @mixin sheet-styles
• @mixin tooltip-styles

dialog-leave-timing-function

$dialog-leave-timing-function: transition.$acceleration-timing-function !default;

Used By

• @mixin dialog-styles
• @mixin layout-styles
• @mixin sheet-styles
• @mixin tooltip-styles

dialog-leave-duration

$dialog-leave-duration: transition.$leave-duration !default;

dialog-header-padding

$dialog-header-padding: spacing.get-var(lg) !default;

dialog-header-padding-bottom

$dialog-header-padding-bottom: calc(spacing.get-var(md) * 1.25) !default;

Used By

• @mixin dialog-variables

dialog-content-padding

$dialog-content-padding: spacing.get-var(lg) !default;

dialog-footer-padding

$dialog-footer-padding: spacing.get-var(sm) !default;

dialog-variables

$dialog-variables: (
  min-width,
  horizontal-margin,
  vertical-margin,
  z-index,
  header-padding,
  header-padding-bottom,
  content-padding,
  footer-padding,
  width,
  small-width,
  medium-width,
  large-width,
  extra-large-width
);

Mixins

dialog-set-var

@mixin set-var($name, $value) { … }

Requires

• @function get-var-name
• @mixin app-bar-variables

dialog-use-var

@mixin use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function app-bar-get-var

dialog-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $dialog-min-width
• $dialog-horizontal-margin
• $dialog-vertical-margin
• $dialog-z-index
• $dialog-small-width
• $dialog-medium-width
• $dialog-large-width
• $dialog-extra-large-width
• $dialog-disable-header
• $card-header-padding
• $dialog-header-padding-bottom
• $chip-disable-content
• $card-content-padding
• $dialog-disable-footer
• $card-footer-padding

dialog-styles

@mixin styles($disable-layer: false) { … }

Requires

• @mixin app-bar-use-var
• @mixin app-bar-set-var
• @function app-bar-get-var
• @function scrollbar-size
• @mixin box-shadow
• $app-bar-disable-everything
• $card-elevation
• $avatar-background-color
• $avatar-color
• $dialog-small-width
• $dialog-medium-width
• $dialog-large-width
• $dialog-extra-large-width
• $dialog-disable-focus-outline
• $interaction-focus-color
• $disable-focus-visible
• $dialog-disable-default-transition
• $dialog-transition-distance
• $enter-duration
• $dialog-enter-timing-function
• $leave-duration
• $dialog-leave-timing-function
• $app-bar-disable-fixed
• $dialog-disable-header
• $app-bar-disable-title
• $chip-disable-content
• $dialog-disable-footer
• $dialog-disable-footer-flex-vertical
• $dialog-disable-footer-flex-start
• $dialog-disable-footer-space-between
• $dialog-disable-footer-flex-end

Functions

dialog-get-var

@function get-var($name, $fallback: null) { … }

Returns — String

Requires

• @function get-var-name
• @mixin app-bar-variables

Set to true to disable all the styles

Set to true of the default dialog enter/exit transition styles should not be generated.

Set to true when the FixedDialog will not be used.

Set to true if the DialogHeader will not be used.

Set to true if the DialogTitle will not be used.

Set to true if the DialogContent will not be used.

Set to true if the DialogFooter will not be used.

Set to true if the Dialog component will never gain focus because each Dialog usage has a child component with defaultFocus enabled.

Set to true if the DialogFooter will never set align="stacked-start" and align="stacked-end"

Set to true if the DialogFooter will never set align="start" and align="stacked-start".

Set to true if the DialogFooter will never set align="between".

Set to true if the DialogFooter will never set align="end" and `align="stacked-end".

A number between 0-24 representing the box-shadow elevation for the dialog.

The z-index to apply to the Dialog.

The default background color for a dialog.

The default text color for a dialog.

The min-width to apply to all Dialogs.

The width to use when width="small".

The width to use when width="medium".

The width to use when width="large".

The width to use when width="extra-large".

The amount of spacing to apply to the left and right of the dialog when it is centered.

The amount of spacing to apply to the top and bottom of the dialog when it is centered.

The distance to move while the dialog enters and exits.

The Dialog enter transition duration. If this value changes, the Dialog.timeout should be updated as well.

The Dialog enter transition timing function.

If this value changes, the Dialog.timeout should be updated as well.

The Dialog exit transition timing function.

The amount of padding to apply to the DialogHeader component.

The amount of padding-bottom to apply to the DialogHeader component.

The amount of padding-bottom to apply to the DialogContent component.

The amount of padding-bottom to apply to the DialogFooter component.

The available configurable css variables and mostly used internally for the get-var, set-var, and use-var utils.

The supported variable name

The value to set the variable to. Supports null which will just be a no-op.

The css property to apply the variable to

The supported variable name

An optional fallback value if the variable has not been set

Conditionally applies the css variables based on feature flags

Generates all the styles based on feature flags.

Set this to true to disable the layer behavior

a var() statement

The supported variable name

An optional fallback value