Product Badges
Installation
yarn add @chewy/kib-product-styles
Import
@use '~@chewy/kib-product-styles/src/kib-product-badges/styles' as kib-product-badges;
Mixins
list
@mixin list() { ... }
@mixin list() { margin: 0; padding: 0; margin-bottom: settings.$spacing; }
list-item
@mixin list-item() { ... }
@mixin list-item() { display: flex; margin-bottom: spacing.get('s2'); &:last-child { margin: 0; } }
badge
@mixin badge() { ... }
@mixin badge() { @include typography.style-as('caption'); display: flex; align-items: center; color: color.get('text', 'secondary'); }
badge-large
@mixin badge-large() { ... }
@mixin badge-large() { @include typography.style-as('paragraph-2'); }
Description
Large badge text styles
Parameters
None.
icon-wrapper
@mixin icon-wrapper() { ... }
@mixin icon-wrapper() { margin-right: spacing.get('s1'); display: inline-flex; align-self: flex-start; }
label
@mixin label() { ... }
@mixin label() { @include a11y.visually-hidden; }
Description
Visually hidden text label
Parameters
None.
label-hidden
@mixin label-hidden() { ... }
@mixin label-hidden() { @include a11y.visually-hidden; }
Description
Wide accessible label styles
Parameters
None.
icon
@mixin icon() { ... }
@mixin icon() { width: settings.$icon-size; height: settings.$icon-size; @media (forced-colors: active) { &, path { fill: CanvasText; } } }
icon-large
@mixin icon-large() { ... }
@mixin icon-large() { width: settings.$icon-size-large; height: settings.$icon-size-large; }
icon-restricted
@mixin icon-restricted() { ... }
@mixin icon-restricted() { color: color.get('icon', 'red'); }
icon-promotion
@mixin icon-promotion() { ... }
@mixin icon-promotion() { color: color.get('ui-elements', 'price', 'primary'); }
icon-chewy-plus
@mixin icon-chewy-plus() { ... }
@mixin icon-chewy-plus() { color: color.get('ui-bg', 'brand', 'primary'); }
icon-chewy-plus-width
@mixin icon-chewy-plus-width() { ... }
@mixin icon-chewy-plus-width() { @if $large { width: unit.rem(64px); } @else { width: unit.rem(54px); } }
Variables
spacing
$spacing: spacing.get('s3') !default;
Description
List bottom spacing
Type
Number
icon-size
$icon-size: unit.rem(16px) !default;
Description
Badge icon size
Type
Number
icon-size-large
$icon-size-large: unit.rem(24px) !default;
Description
Large badge icon size
Type
Number