Dialog Sass API

Variables

dialog-disable-everything

$dialog-disable-everything: false !default;

Set to true to disable all the styles

dialog-disable-default-transition

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

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

Used By

• @mixin dialog-styles

dialog-disable-fixed

$dialog-disable-fixed: false !default;

Set to true when the FixedDialog will not be used.

dialog-disable-header

$dialog-disable-header: false !default;

Set to true if the DialogHeader will not be used.

Used By

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

dialog-disable-title

$dialog-disable-title: false !default;

Set to true if the DialogTitle will not be used.

dialog-disable-content

$dialog-disable-content: false !default;

Set to true if the DialogContent will not be used.

dialog-disable-footer

$dialog-disable-footer: false !default;

Set to true if the DialogFooter will not be used.

Used By

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

dialog-disable-focus-outline

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

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

Used By

• @mixin dialog-styles

dialog-disable-footer-flex-vertical

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

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

Used By

• @mixin dialog-styles

dialog-disable-footer-flex-start

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

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

Used By

• @mixin dialog-styles

dialog-disable-footer-space-between

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

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

Used By

• @mixin dialog-styles

dialog-disable-footer-flex-end

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

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

Used By

• @mixin dialog-styles

dialog-elevation

$dialog-elevation: 16 !default;

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

dialog-z-index

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

The z-index to apply to the Dialog.

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-min-width

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

The min-width to apply to all Dialogs.

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;

The width to use when width="small".

Used By

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

dialog-medium-width

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

The width to use when width="medium".

Used By

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

dialog-large-width

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

The width to use when width="large".

Used By

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

dialog-extra-large-width

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

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

Used By

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

dialog-horizontal-margin

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

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

Used By

• @mixin dialog-variables

dialog-vertical-margin

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

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

Used By

• @mixin dialog-variables

dialog-transition-distance

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

The distance to move while the dialog enters and exits.

Used By

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

dialog-enter-duration

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

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

dialog-enter-timing-function

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

The Dialog enter transition timing function.

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;

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

Used By

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

dialog-leave-duration

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

The Dialog exit transition timing function.

dialog-header-padding

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

The amount of padding to apply to the DialogHeader component.

dialog-header-padding-bottom

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

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

Used By

• @mixin dialog-variables

dialog-content-padding

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

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

dialog-footer-padding

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

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

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
);

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

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 { … }

Conditionally applies the css variables based on feature flags

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) { … }

Generates all the styles based on feature flags.

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

a var() statement

Requires

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