Snackbars

Variables

md-snackbar-transition-time
$md-snackbar-transition-time: $md-transition-time * 2 !default;
Sass (Scss)

Description

The default transition time for the snackbar to appear and disappear

Used by

md-snackbar-color
$md-snackbar-color: #323232 !default;
Sass (Scss)

Description

The background color for the snackbar.

Type

Color

Used by

md-snackbar-horizontal-padding
$md-snackbar-horizontal-padding: 24px !default;
Sass (Scss)

Description

The horizontal padding in a snackbar.

Type

Number

Used by

md-snackbar-vertical-padding
$md-snackbar-vertical-padding: 14px !default;
Sass (Scss)

Description

The vertical padding for a single line snackbar.

Type

Number
md-snackbar-vertical-multiline-padding
$md-snackbar-vertical-multiline-padding: 24px !default;
Sass (Scss)

Description

The vertical padding for a multi-line snackbar.

Type

Number
md-snackbar-mobile-button-left-margin
$md-snackbar-mobile-button-left-margin: 24px !default;
Sass (Scss)

Description

The margin between the snackbar's text and action on mobile devices.

Type

Number
md-snackbar-mobile-height
$md-snackbar-mobile-height: 48px !default;
Sass (Scss)

Description

The height of a single line snackbar on mobile devices.

Type

Number

Used by

md-snackbar-mobile-multiline-height
$md-snackbar-mobile-multiline-height: 80px !default;
Sass (Scss)

Description

The height of a multi-line snackbar on mobile devices.

Type

Number

Used by

md-snackbar-desktop-border-radius
$md-snackbar-desktop-border-radius: 2px !default;
Sass (Scss)

Description

The border radius for snackbars on desktop screens.

Type

Number

Used by

md-snackbar-desktop-button-left-margin
$md-snackbar-desktop-button-left-margin: 48px !default;
Sass (Scss)

Description

The margin between a snackbar's text and action on desktop screens.

Type

Number
md-snackbar-desktop-min-width
$md-snackbar-desktop-min-width: 288px !default;
Sass (Scss)

Description

The min width for a snackbar on desktop screens.

Type

Number

Used by

md-snackbar-desktop-max-width
$md-snackbar-desktop-max-width: 568px !default;
Sass (Scss)

Description

The max width for a snackbar on desktop screens.

Type

Number

Used by

md-snackbar-z-index
$md-snackbar-z-index: 20 !default;
Sass (Scss)

Description

The z-index to use for snackbars.

Type

Number

Used by

See

Mixins

react-md-snackbars
@mixin react-md-snackbars($include-media: $md-media-included) {}
Sass (Scss)
Click to expand

Description

Creates the styles for snackbars

Parameters

NameDescriptionTypeDefault value
$include-media

Boolean if the media queries should be included by default.

Boolean
$md-media-included

Requires

Used by

react-md-snackbars-mobile
@mixin react-md-snackbars-mobile {}
Sass (Scss)
Click to expand

Description

Creates the styles for snackbars on mobile devices. This should normally be used in a media query.

Parameters

None

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-snackbars-mobile;
}
Sass (Scss)

Requires

Used by

react-md-snackbars-desktop
@mixin react-md-snackbars-desktop {}
Sass (Scss)
Click to expand

Description

Creates the styles for snackbars on desktop screens. This should normally be used in a media query.

Parameters

None

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-snackbars-desktop;
}
Sass (Scss)

Requires

Used by

react-md-snackbars-media
@mixin react-md-snackbars-media {}
Sass (Scss)
Click to expand

Description

Creates the media queries and styles for snackbars on both mobile devices and desktop screens.

Parameters

None

Examples

Example Usage SCSS

@include react-md-snackbars-media;
Sass (Scss)

Requires

Used by