Overlays
Installation
yarn add @chewy/kib-overlays-styles
Import
@use '~@chewy/kib-overlays-styles/src/styles' as kib-overlays;
Mixins
backdrop
@mixin backdrop($background) { ... }
@mixin backdrop($background) { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: settings.$backdrop-z-index; background-color: $background; }
Description
Overlay backdrop
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$background | (optional) specify the desired backdrop color | Color | — none |
Requires
- [variable]
backdrop-z-index
control
@mixin control() { ... }
@mixin control() { @include kib-button-new.generate-styles('utility', 'tertiary', 'medium', true); }
Description
Common header control styles
Parameters
None.
Css
// stylelint-disable-next-line block-no-empty @mixin control-icon
Deprecated!
Empty mixin
// stylelint-disable-next-line block-no-empty @mixin control-icon { ... }
// stylelint-disable-next-line block-no-empty @mixin control-icon { }
Description
Control icon styles
Variables
backdrop-background
$backdrop-background: color.get('ui-bg', 'overlay', 'primary') !default;
Description
Backdrop background color
Type
Color
backdrop-z-index
$backdrop-z-index: 5000 !default;
control-size
Deprecated!
Not used, using button medium size styles
$control-size: unit.rem(40px) !default;
Description
Header control size
Type
Number
control-padding
Deprecated!
Not used, using button medium size styles
$control-padding: unit.rem(14px) !default;
Description
Header control padding
Type
Number
control-icon-size
Deprecated!
Not used, using icon-only button medium size styles
$control-icon-size: unit.rem(20px) !default;
Description
Header control icon size
Type
Number