Product Definitions
Installation
yarn add @chewy/kib-product-stylesImport
@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; }
Description
Small container styles
Parameters
None.
Used by
- [mixin]
container - [mixin]
definitions-extended-container
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; }
Description
Item-level small container styles
Parameters
None.
Used by
- [mixin]
item - [mixin]
definitions-extended-container
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; }
Description
Item-level small label styles
Parameters
None.
Requires
- [function]
rem
Used by
- [mixin]
label - [mixin]
definitions-extended-container
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); }
Description
Item-level small content styles
Parameters
None.
Requires
- [function]
rem
Used by
- [mixin]
content - [mixin]
definitions-extended-container
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); }
definitions-extended-container
@mixin definitions-extended-container() { ... }@mixin definitions-extended-container() { @container (max-width: #{unit.rem(439px)}) { .kib-product-definitions { @include container-small; } .kib-product-definition { @include item-small; &__label { @include label-small; } &__content { @include content-small; } } } }
Description
Container query styles for extended product cards
Parameters
None.
Requires
- [mixin]
container-small - [mixin]
item-small - [mixin]
label-small - [mixin]
content-small - [function]
rem