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; }
autoship-logo
@mixin autoship-logo() { ... }
@mixin autoship-logo() { width: settings.$logo-width; height: settings.$logo-height; }
autoship-logo-condensed
@mixin autoship-logo-condensed() { ... }
@mixin autoship-logo-condensed() { width: settings.$logo-width-condensed; margin-bottom: calc(spacing.get('s1') * -1); }
row
@mixin row() { ... }
@mixin row() { display: inline-flex; flex-flow: row wrap; &:not(:last-child) { margin-bottom: spacing.get('s1'); } }
append-content
@mixin append-content() { ... }
@mixin append-content() { margin-left: spacing.get('s1'); display: flex; align-items: center; }
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
- [variable]
price-in-cart-color
- [variable]
price-in-cart-weight
autoship-icon
Deprecated!
Use autoship logo instead
@mixin autoship-icon() { ... }
@mixin autoship-icon() { height: settings.$icon-size; width: settings.$icon-size; }
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.
Requires
- [variable]
autoship-text-left-spacing
- [variable]
autoship-text-color
- [variable]
autoship-text-font-weight
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
- [variable]
autoship-text-font-weight
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;
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;
price-in-cart-weight
$price-in-cart-weight: typography.get('weight-bold') !default;
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;
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
Used by
- [mixin]
autoship-text
- [mixin]
autoship-text-condensed
autoship-text-left-spacing
Deprecated!
Use autoship logo instead.
$autoship-text-left-spacing: unit.rem(2px) !default;