Product Badges

Installation

  yarn add @chewy/kib-product-styles

Import

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

Mixins

root-container

@mixin root-container() { ... }@mixin root-container() { 
  padding: 0;
  margin: 0;
  margin-bottom: settings.$spacing;
 }
Description

Root badges styles

Parameters

None.

Requires

list-item

@mixin list-item() { ... }@mixin list-item() { 
  @include typography.style-as('caption');

  margin-bottom: spacing.get('s2');
  display: flex;
  align-items: center;

  &:last-child {
    margin: 0;
  }
 }
Description

Single badge styles

Parameters

None.

Requires

icon-wrapper

@mixin icon-wrapper() { ... }@mixin icon-wrapper() { 
  margin-right: spacing.get('s1');
  display: inline-flex;
 }
Description

Icon wrapper styles

Parameters

None.

Requires

text-large

@mixin text-large() { ... }@mixin text-large() { 
  @include typography.style-as('paragraph-2');
 }
Description

Badge text styles

Parameters

None.

icon

@mixin icon() { ... }@mixin icon() { 
  width: settings.$icon-size;
  height: settings.$icon-size;
 }
Description

Badge icon styles

Parameters

None.

Requires

icon-large

@mixin icon-large() { ... }@mixin icon-large() { 
  width: settings.$icon-size-large;
  height: settings.$icon-size-large;
 }
Description

Badge icon large styles

Parameters

None.

Requires

icon-personalized

@mixin icon-personalized() { ... }@mixin icon-personalized() { 
  color: color.get('icon', 'personalized');
 }
Description

Icon styles for personalized badge

Parameters

None.

Requires

icon-diet

@mixin icon-diet() { ... }@mixin icon-diet() { 
  color: color.get('icon', 'vetdiet');
 }
Description

Icon styles for diet badge

Parameters

None.

Requires

icon-prescription

@mixin icon-prescription() { ... }@mixin icon-prescription() { 
  color: color.get('icon', 'rx');
 }
Description

Icon styles for prescription badge

Parameters

None.

Requires

icon-frozen

@mixin icon-frozen() { ... }@mixin icon-frozen() { 
  color: color.get('icon', 'frozen');
 }
Description

Icon styles for frozen badge

Parameters

None.

Requires

icon-chewy

@mixin icon-chewy() { ... }@mixin icon-chewy() { 
  color: color.get('icon', 'exclusive');
 }
Description

Icon styles for chewy badge

Parameters

None.

Requires

icon-fresh

@mixin icon-fresh() { ... }@mixin icon-fresh() { 
  color: color.get('icon', 'fresh');
 }
Description

Icon styles for fresh badge

Parameters

None.

Requires

icon-restricted

@mixin icon-restricted() { ... }@mixin icon-restricted() { 
  color: color.get('ui-elements', 'price', 'primary');
 }
Description

Icon styles for restricted badge

Parameters

None.

Requires

Variables

icon-size

$icon-size: kib-core.dimensions-get(default) !default;
Description

Icon size

Type

Number

icon-size-large

$icon-size-large: kib-core.dimensions-get(large) !default;
Description

Icon Large size

Type

Number

spacing

$spacing: unit.rem(12px) !default;
Description

Component spacing

Type

Number