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-icon
@mixin autoship-icon() { ... }
@mixin autoship-icon() { height: settings.$icon-size; width: settings.$icon-size; }
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.
Requires
- [variable]
autoship-text-left-spacing
- [variable]
autoship-text-color
- [variable]
autoship-text-font-weight
row
@mixin row() { ... }
@mixin row() { display: inline-flex; flex-direction: row; &: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
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;
autoship-text-font-weight
$autoship-text-font-weight: kib-typography.get-type-weight(semibold) !default;
autoship-text-left-spacing
$autoship-text-left-spacing: unit.rem(2px) !default;
price-in-cart-color
$price-in-cart-color: color.get('ui-elements', 'price', 'primary') !default;
price-in-cart-weight
$price-in-cart-weight: kib-typography.get-type-weight(bold) !default;