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
@mixin autoship-logo() { ... }@mixin autoship-logo() { 
  width: settings.$logo-width;
  height: settings.$logo-height;
 }
Description

Autoship logo styles

Parameters

None.

Requires

autoship-logo-condensed

@mixin autoship-logo-condensed() { ... }@mixin autoship-logo-condensed() { 
  width: settings.$logo-width-condensed;
  margin-bottom: calc(spacing.get('s1') * -1);
 }
Description

Autoship logo styles

Parameters

None.

Requires

row

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

  &: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

autoship-icon

Deprecated!

Use autoship logo instead

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

Autoship icon styles

Parameters

None.

Requires

autoship-text

Deprecated!

Use autoship logo instead

@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.

autoship-text-condensed

Deprecated!

Use autoship logo instead

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

  font-weight: settings.$autoship-text-font-weight;
 }
Description

Autoship text condensed styles

Parameters

None.

Requires

Variables

logo-typography

$logo-typography: 'price-medium' !default;
Description

Autoship Logo typography token name

Type

String

logo-size

$logo-size: calc(
  typography.get($logo-typography, 'line-height') * typography.get($logo-typography, 'font-size')
) !default;
Description

Autoship Logo base size

Type

Number

logo-width

$logo-width: calc(#{$logo-size} * 4) !default;
Description

Autoship Logo width size

Type

Number

logo-width-condensed

$logo-width-condensed: calc(#{$logo-size} * 3.25) !default;
Description

Autoship Logo condensed width size

Type

Number

logo-height

$logo-height: #{$logo-size} !default;
Description

Autoship Logo height size

Type

Number

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: typography.get('weight-bold') !default;
Description

Price in cart text font weight

Type

Number

Used by

icon-size

Deprecated!

Use autoship logo instead.

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

Icon size styles

Type

Number

autoship-text-color

Deprecated!

Use autoship logo instead.

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

Autoship text color

Type

Color

Used by

autoship-text-font-weight

Deprecated!

Use autoship logo instead.

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

Autoship text font weight

Type

Number

autoship-text-left-spacing

Deprecated!

Use autoship logo instead.

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

Spacing between autoship text and icon

Type

Number

Used by