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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$background

(optional) specify the desired backdrop color

Color none
Requires

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;
Description

Backdrop stacking z-index

Type

Number

Used by

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