Product Definitions
Installation
yarn add @chewy/kib-product-styles
Import
@use '~@chewy/kib-product-styles/src/kib-product-definitions/styles' as kib-product-definitions;
Mixins
container-small
@mixin container-small() { ... }
@mixin container-small() { display: block; }
container
@mixin container() { ... }
@mixin container() { display: table; list-style: none; padding-left: 0; margin: { top: unit.rem(12px); bottom: unit.rem(12px); } @include media.query(max-sm) { @include container-small; } }
item-small
@mixin item-small() { ... }
@mixin item-small() { display: block; }
item
@mixin item() { ... }
@mixin item() { display: table-row; @include typography.style-as('paragraph-2'); @include media.query(max-sm) { @include item-small; } }
label-small
@mixin label-small() { ... }
@mixin label-small() { padding-right: unit.rem(0); display: inline; }
label
@mixin label() { ... }
@mixin label() { font-weight: bold; display: table-cell; padding-right: unit.rem(24px); color: color.get('text', 'secondary'); @include media.query(max-sm) { @include label-small; } }
Description
Item-level label styles
Parameters
None.
Requires
- [mixin]
label-small
- [function]
rem
- [function]
get
content-small
@mixin content-small() { ... }
@mixin content-small() { display: inline; padding-left: unit.rem(4px); }
content
@mixin content() { ... }
@mixin content() { display: table-cell; @include media.query(max-sm) { @include content-small; } }
spacing
@mixin spacing() { ... }
@mixin spacing() { padding-top: unit.rem(4px); }