Snackbar Sass API

Variables

snackbar-disable-everything

$snackbar-disable-everything: false !default;

snackbar-disable-absolute

$snackbar-disable-absolute: false !default;

Used By

• @mixin snackbar-styles

snackbar-disable-top

$snackbar-disable-top: false !default;

Used By

• @mixin snackbar-styles

snackbar-disable-bottom

$snackbar-disable-bottom: false !default;

Used By

• @mixin snackbar-styles

snackbar-disable-top-right

$snackbar-disable-top-right: $disable-top !default;

Used By

• @mixin snackbar-styles

snackbar-disable-top-left

$snackbar-disable-top-left: $disable-top !default;

Used By

• @mixin snackbar-styles

snackbar-disable-bottom-left

$snackbar-disable-bottom-left: $disable-bottom !default;

Used By

• @mixin snackbar-styles

snackbar-disable-bottom-right

$snackbar-disable-bottom-right: $disable-bottom !default;

Used By

• @mixin snackbar-styles

snackbar-disable-close-button

$snackbar-disable-close-button: false !default;

Used By

• @mixin snackbar-styles

snackbar-disable-action-button

$snackbar-disable-action-button: false !default;

Used By

• @mixin snackbar-styles

snackbar-disable-stacked

$snackbar-disable-stacked: false !default;

snackbar-default-align-items

$snackbar-default-align-items: center !default;

snackbar-gap

$snackbar-gap: spacing.get-var(md) !default;

snackbar-toast-gap

$snackbar-toast-gap: spacing.get-var(md) !default;

Used By

• @mixin snackbar-styles

snackbar-toast-gap-stacked

$snackbar-toast-gap-stacked: spacing.get-var(sm) !default;

Used By

• @mixin snackbar-styles

snackbar-toast-gap-both-buttons

$snackbar-toast-gap-both-buttons: spacing.get-var(xs) !default;

Used By

• @mixin snackbar-styles

snackbar-margin

$snackbar-margin: spacing.get-var(md) !default;

Used By

• @mixin snackbar-styles

snackbar-elevation

$snackbar-elevation: 6 !default;

snackbar-border-radius

$snackbar-border-radius: border-radius.get-var(xs) !default;

snackbar-vertical-padding

$snackbar-vertical-padding: calc(spacing.get-var(sm) * 1.5) !default;

snackbar-horizontal-padding

$snackbar-horizontal-padding: spacing.get-var(md) !default;

snackbar-action-horizontal-padding

$snackbar-action-horizontal-padding: spacing.get-var(sm) !default;

Used By

• @mixin snackbar-styles

snackbar-close-button-horizontal-padding

$snackbar-close-button-horizontal-padding: spacing.get-var(none) !default;

Used By

• @mixin snackbar-styles

snackbar-min-height

$snackbar-min-height: 3rem !default;

snackbar-min-width

$snackbar-min-width: 21.5rem !default;

snackbar-max-width

$snackbar-max-width: 35.5rem !default;

Used By

• @mixin snackbar-styles
• @mixin tabs-tablist-button-styles
• @mixin tabs-variables
• @mixin tooltip-variables

snackbar-z-index

$snackbar-z-index: utils.$temporary-element-z-index + 10 !default;

snackbar-typography

$snackbar-typography: map.merge(
  typography.$base-font-styles,
  typography.$subtitle-2-styles
) !default;

snackbar-light-theme-background-color

$snackbar-light-theme-background-color: #323232 !default;

snackbar-light-theme-color

$snackbar-light-theme-color: a11y.contrast-color($light-theme-background-color) !default;

snackbar-dark-theme-background-color

$snackbar-dark-theme-background-color: if(
  theme.$disable-dark-elevation,
  $light-theme-background-color,
  map.get(theme.$dark-elevation-colors, $elevation)
) !default;

snackbar-dark-theme-color

$snackbar-dark-theme-color: a11y.contrast-color($dark-theme-background-color) !default;

snackbar-background-color

$snackbar-background-color: theme.get-default-color(
  $light-theme-background-color,
  $dark-theme-background-color
) !default;

snackbar-color

$snackbar-color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;

snackbar-variables

$snackbar-variables: (background-color, color, offset);

Mixins

snackbar-set-var

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

Requires

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

snackbar-use-var

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

Requires

• @function app-bar-get-var

snackbar-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $avatar-background-color
• $avatar-color

snackbar-styles

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

Requires

• @mixin app-bar-use-var
• @mixin box-shadow
• $app-bar-disable-everything
• $box-default-align-items
• $app-bar-gap
• $snackbar-margin
• $dialog-z-index
• $snackbar-disable-absolute
• $snackbar-disable-top
• $snackbar-disable-top-left
• $snackbar-disable-bottom-left
• $snackbar-disable-bottom
• $snackbar-disable-bottom-right
• $snackbar-disable-top-right
• $card-elevation
• $badge-typography
• $avatar-border-radius
• $snackbar-toast-gap
• $snackbar-max-width
• $form-message-min-height
• $app-bar-horizontal-padding
• $dialog-min-width
• $snackbar-disable-action-button
• $snackbar-action-horizontal-padding
• $snackbar-disable-close-button
• $snackbar-close-button-horizontal-padding
• $snackbar-toast-gap-both-buttons
• $box-disable-stacked
• $snackbar-toast-gap-stacked
• $app-bar-vertical-padding
• $button-text-horizontal-padding

Functions

snackbar-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 if the position: absolute styles are not required where a Snackbar is rendered within another position: relative container.

Set to true to disable the styles for a Snackbar positioned at the top of the page/container.

Set to true to disable the styles for a Snackbar positioned at the bottom of the page/container.

Set to true to disable the styles for a Snackbar positioned at the top-right of the page/container.

Set to true to disable the styles for a Snackbar positioned at the top-left of the page/container.

Set to true to disable the styles for a Snackbar positioned at the bottom-left of the page/container.

Set to true to disable the styles for a Snackbar positioned at the bottom-right of the page/container.

Set to true to disable the ToastCloseButton styles.

Set to true to disable the ToastActionButton styles.

Set to true to disable the stacked Snackbar styles.

The default align-items for a Snackbar.

The default gap for a Snackbar.

The default gap for a Toast.

The default gap for a stacked Toast.

The default gap for a toast that has both a ToastActionButton and ToastCloseButton.

The viewport margin to apply to all Toast rendered within the Snackbar.

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

The default border-radius for a Toast.

The default vertical padding for a Toast.

The default horizontal padding for a Toast.

The default horizontal padding for a Toast that has an ToastActionButton.

The default horizontal padding for a Toast that has an ToastCloseButton.

The min-height for a Toast.

The min-width for a Toast when the viewport is tablet or above.

The max-width for a Toast.

The default z-index for a Toast.

The default Toast typography styles.

The background-color to use in the light theme.

The text color to use in the light theme.

The background-color to use in the dark theme.

The text color to use in the dark theme.

The default background-color for a Toast.

The default text color for a Toast.

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