Snackbar Manager

Installation

  yarn add @chewy/kib-messaging-styles

Import

  @use '~@chewy/kib-messaging-styles/src/kib-snackbar-manager/styles' as kib-snackbar-manager;

Mixins

container

@mixin container() { ... }@mixin container() { 
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: settings.$z-index;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: settings.$spacing;
 }
Description

Snackbar manager root container

Parameters

None.

Requires

container-align-start

@mixin container-align-start() { ... }@mixin container-align-start() { 
  justify-content: flex-start;
 }
Description

Alignment styles for start direction

Parameters

None.

container-align-end

@mixin container-align-end() { ... }@mixin container-align-end() { 
  justify-content: flex-end;
 }
Description

Alignment styles for end direction

Parameters

None.

container-local

@mixin container-local() { ... }@mixin container-local() { 
  position: static;
  top: 0;
  margin: 0;
  align-items: center;
  justify-content: center;
 }
Description

Styles for snackbar local variant

Parameters

None.

container-local-visible

@mixin container-local-visible() { ... }@mixin container-local-visible() { 
  position: absolute;
 }
Description

When local variant is visible

Parameters

None.

container-local-overlay

@mixin container-local-overlay() { ... }@mixin container-local-overlay() { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: settings.$local-overlay-background-color;
 }
Description

Local variant overlay styles

Parameters

None.

snackbar-container

@mixin snackbar-container() { ... }@mixin snackbar-container() { 
  // Ensures snackbars appear in front of overlay
  position: relative;
 }
Description

Container holding snackbars

Parameters

None.

Variables

spacing

$spacing: spacing.get('s2') !default;
Description

Default spacing between snackbars and window viewport.

Type

Number

z-index

$z-index: 10 !default;
Description

Snackbar manager z-index

Type

Number

local-overlay-background-color

$local-overlay-background-color: color.get('ui-bg', 'overlay', '02') !default;
Description

Snackbar local variant background color

Type

Color