Product Favorite

Installation

  yarn add @chewy/kib-product-styles

Import

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

Mixins

favorite

Deprecated!
@mixin favorite() { ... }@mixin favorite() { 
  @include kib-button-small.button-small-default;
  @include kib-button-small.button-small-neutral;

  padding: 0;
  height: settings.$size;
  width: settings.$size;
 }
Description

Base button styles

Parameters

None.

Requires

icon

Deprecated!
@mixin icon() { ... }@mixin icon() { 
  padding: 0;
  padding-top: settings.$icon-margin-top;
  height: settings.$icon-size;
  width: settings.$icon-size;
  color: settings.$outline-color;
 }
Description

Icon styles

Parameters

None.

Requires

icon-favorited

Deprecated!
@mixin icon-favorited() { ... }@mixin icon-favorited() { 
  color: settings.$favorited-color;
 }
Description

Favorited state icon styles

Parameters

None.

Requires

Variables

size

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

Button size

Type

Number

icon-size

$icon-size: unit.rem(20px) !default;
Description

Icon size

Type

Number

icon-margin-top

$icon-margin-top: unit.rem(1px) !default;
Description

Icon margin top

Type

Number

Used by

outline-color

$outline-color: color.get('text', 'tertiary') !default;
Description

Icon outline color

Type

Color

favorited-color

$favorited-color: color.get('link', 'active', 'primary') !default;
Description

Favorited state icon color

Type

Color

Used by