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; }
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.
Requires
- [variable]
local-overlay-background-color
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;