Spinning Loader
Installation
yarn add @chewy/kib-overlays-styles
Import
@use '~@chewy/kib-overlays-styles/src/kib-spinning-loader/styles' as kib-spinning-loader;
Mixins
container
@mixin container() { ... }
@mixin container() { @include common.backdrop(settings.$container-background); display: flex; justify-content: center; align-items: center; backdrop-filter: blur(0.1rem); }
Description
Generates the styles for the component container
Parameters
None.
Requires
- [variable]
container-background
container-emphasis
@mixin container-emphasis() { ... }
@mixin container-emphasis() { background-color: settings.$emphasis-container-background; }
Description
Generates emphasis styles for the component container
Parameters
None.
Requires
- [variable]
emphasis-container-background
container-embedded
@mixin container-embedded() { ... }
@mixin container-embedded() { position: absolute; }
Description
Generates emphasis styles for the component container
Parameters
None.
spinner
@mixin spinner() { ... }
@mixin spinner() { color: settings.$spinner-color; }
Description
Generates styles for the spinner component
Parameters
None.
Requires
- [variable]
spinner-color
Variables
container-background
$container-background: color.get('ui-bg', 'overlay', '02') !default;
emphasis-container-background
$emphasis-container-background: color.get('ui-bg', 'overlay', '02') !default;
spinner-color
$spinner-color: color.get('link', 'active', 'primary') !default;