Product Pricing

Installation

  yarn add @chewy/kib-product-styles

Import

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

Mixins

root-container

@mixin root-container() { ... }@mixin root-container() { 
  margin-bottom: spacing.get('s2');
  display: inline-flex;
  flex-direction: column;
 }
Description

Root product card styles

Parameters

None.

Requires

autoship-icon

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

Autoship icon styles

Parameters

None.

Requires

autoship-text

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

  margin-left: settings.$autoship-text-left-spacing;
  color: settings.$autoship-text-color;
  font-weight: settings.$autoship-text-font-weight;
 }
Description

Autoship text styles

Parameters

None.

row

@mixin row() { ... }@mixin row() { 
  display: inline-flex;
  flex-direction: row;

  &:not(:last-child) {
    margin-bottom: spacing.get('s1');
  }
 }
Description

Pricing row styles

Parameters

None.

Requires

append-content

@mixin append-content() { ... }@mixin append-content() { 
  margin-left: spacing.get('s1');
  display: flex;
  align-items: center;
 }
Description

Append additional content to the price

Parameters

None.

Requires

price-in-cart

@mixin price-in-cart() { ... }@mixin price-in-cart() { 
  color: settings.$price-in-cart-color;
  font-weight: settings.$price-in-cart-weight;
 }
Description

Price in cart text

Parameters

None.

Requires

Variables

icon-size

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

Icon size styles

Type

Number

autoship-text-color

$autoship-text-color: color.get('logos', 'as', 'primary') !default;
Description

Autoship text color

Type

Color

Used by

autoship-text-font-weight

$autoship-text-font-weight: kib-typography.get-type-weight(semibold) !default;
Description

Autoship text font weight

Type

Number

Used by

autoship-text-left-spacing

$autoship-text-left-spacing: unit.rem(2px) !default;
Description

Spacing between autoship text and icon

Type

Number

Used by

price-in-cart-color

$price-in-cart-color: color.get('ui-elements', 'price', 'primary') !default;
Description

Price in Cart text color

Type

Color

Used by

price-in-cart-weight

$price-in-cart-weight: kib-typography.get-type-weight(bold) !default;
Description

Price in cart text font weight

Type

Number

Used by