Product Definitions

Installation

  yarn add @chewy/kib-product-styles

Import

  @use '~@chewy/kib-product-styles/src/kib-product-definitions/styles' as kib-product-definitions;

Mixins

container-small

@mixin container-small() { ... }@mixin container-small() { 
  display: block;
 }
Description

Small container styles

Parameters

None.

Used by

container

@mixin container() { ... }@mixin container() { 
  display: table;
  list-style: none;
  padding-left: 0;
  margin: {
    top: unit.rem(12px);
    bottom: unit.rem(12px);
  }
  @include media.query(max-sm) {
    @include container-small;
  }
 }
Description

Container styles

Parameters

None.

Requires

item-small

@mixin item-small() { ... }@mixin item-small() { 
  display: block;
 }
Description

Item-level small container styles

Parameters

None.

Used by

item

@mixin item() { ... }@mixin item() { 
  display: table-row;
  @include typography.style-as('paragraph-2');
  @include media.query(max-sm) {
    @include item-small;
  }
 }
Description

Item-level container styles

Parameters

None.

Requires

label-small

@mixin label-small() { ... }@mixin label-small() { 
  padding-right: unit.rem(0);
  display: inline;
 }
Description

Item-level small label styles

Parameters

None.

Requires
Used by

label

@mixin label() { ... }@mixin label() { 
  font-weight: bold;
  display: table-cell;
  padding-right: unit.rem(24px);
  color: color.get('text', 'secondary');

  @include media.query(max-sm) {
    @include label-small;
  }
 }
Description

Item-level label styles

Parameters

None.

Requires

content-small

@mixin content-small() { ... }@mixin content-small() { 
  display: inline;
  padding-left: unit.rem(4px);
 }
Description

Item-level small content styles

Parameters

None.

Requires
Used by

content

@mixin content() { ... }@mixin content() { 
  display: table-cell;
  @include media.query(max-sm) {
    @include content-small;
  }
 }
Description

Item-level content styles

Parameters

None.

Requires

spacing

@mixin spacing() { ... }@mixin spacing() { 
  padding-top: unit.rem(4px);
 }
Description

Item-level spacing styles

Parameters

None.

Requires