Boolean$snackbar-disable-everything: false !default;Set to true to disable all the styles.
Boolean$snackbar-disable-absolute: false !default;Set to true if the position: absolute styles are not required where a
Snackbar is rendered within another position: relative container.
Boolean$snackbar-disable-top: false !default;Set to true to disable the styles for a Snackbar positioned at the top of the page/container.
Boolean$snackbar-disable-bottom: false !default;Set to true to disable the styles for a Snackbar positioned at the bottom of the page/container.
Boolean$snackbar-disable-top-right: $disable-top !default;Set to true to disable the styles for a Snackbar positioned at the top-right of the page/container.
Boolean$snackbar-disable-top-left: $disable-top !default;Set to true to disable the styles for a Snackbar positioned at the top-left of the page/container.
Boolean$snackbar-disable-bottom-left: $disable-bottom !default;Set to true to disable the styles for a Snackbar positioned at the bottom-left of the page/container.
Boolean$snackbar-disable-bottom-right: $disable-bottom !default;Set to true to disable the styles for a Snackbar positioned at the bottom-right of the page/container.
Boolean$snackbar-disable-close-button: false !default;Set to true to disable the ToastCloseButton styles.
Boolean$snackbar-disable-action-button: false !default;Set to true to disable the ToastActionButton styles.
Boolean$snackbar-disable-stacked: false !default;Set to true to disable the stacked Snackbar styles.
String$snackbar-default-align-items: center !default;The default align-items for a Snackbar.
Number$snackbar-gap: spacing.get-var(md) !default;The default gap for a Snackbar.
Number$snackbar-toast-gap: spacing.get-var(md) !default;The default gap for a Toast.
Number$snackbar-toast-gap-stacked: spacing.get-var(sm) !default;The default gap for a stacked Toast.
Number$snackbar-toast-gap-both-buttons: spacing.get-var(xs) !default;The default gap for a toast that has both a ToastActionButton and
ToastCloseButton.
Number$snackbar-margin: spacing.get-var(md) !default;The viewport margin to apply to all Toast rendered within the Snackbar.
Number$snackbar-elevation: 6 !default;A number between 0-24 representing the box-shadow elevation for a Toast.
Number$snackbar-border-radius: border-radius.get-var(xs) !default;The default border-radius for a Toast.
Number$snackbar-vertical-padding: calc(spacing.get-var(sm) * 1.5) !default;The default vertical padding for a Toast.
Number$snackbar-horizontal-padding: spacing.get-var(md) !default;The default horizontal padding for a Toast.
Number$snackbar-action-horizontal-padding: spacing.get-var(sm) !default;The default horizontal padding for a Toast that has an
ToastActionButton.
Number$snackbar-close-button-horizontal-padding: spacing.get-var(none) !default;The default horizontal padding for a Toast that has an
ToastCloseButton.
Number$snackbar-min-height: 3rem !default;The min-height for a Toast.
Number$snackbar-min-width: 21.5rem !default;The min-width for a Toast when the viewport is tablet or above.
Number$snackbar-max-width: 35.5rem !default;The max-width for a Toast.
Number$snackbar-z-index: utils.$temporary-element-z-index + 10 !default;The default z-index for a Toast.
Map$snackbar-typography: map.merge(
typography.$base-font-styles,
typography.$subtitle-2-styles
) !default;The default Toast typography styles.
Color $snackbar-light-theme-background-color: #323232 !default;The background-color to use in the light theme.
Color $snackbar-light-theme-color: a11y.contrast-color($light-theme-background-color) !default;The text color to use in the light theme.
Color $snackbar-dark-theme-color: a11y.contrast-color($dark-theme-background-color) !default;The text color to use in the dark theme.
Color $snackbar-background-color: theme.get-default-color(
$light-theme-background-color,
$dark-theme-background-color
) !default;The default background-color for a Toast.
Color $snackbar-color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;The default text color for a Toast.
List$snackbar-variables: (background-color, color, offset);The available configurable css variables and mostly used internally for the
get-var, set-var, and use-var utils.
mixin@mixin set-var($name, $value) { … }| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$value | The value to set the variable to. Supports | any | — |
mixin@mixin use-var($property, $name: $property, $fallback: null) { … }mixin@mixin variables { … }Conditionally applies the css variables based on feature flags
mixin@mixin styles($disable-layer: false) { … }Generates all the styles based on feature flags.
| Name | Description | Type | Default Value |
|---|---|---|---|
$disable-layer | Set this to | Boolean | false |
function@function get-var($name, $fallback: null) { … }Stringa var() statement
| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$fallback | An optional fallback value | any | null |