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
root-container
@mixin root-container() { ... }
@mixin root-container() { padding: 0; margin: 0; margin-bottom: settings.$spacing; }
list-item
@mixin list-item() { ... }
@mixin list-item() { @include typography.style-as('caption'); margin-bottom: spacing.get('s2'); display: flex; align-items: center; &:last-child { margin: 0; } }
icon-wrapper
@mixin icon-wrapper() { ... }
@mixin icon-wrapper() { margin-right: spacing.get('s1'); display: inline-flex; }
text-large
@mixin text-large() { ... }
@mixin text-large() { @include typography.style-as('paragraph-2'); }
Description
Badge text styles
Parameters
None.
icon
@mixin icon() { ... }
@mixin icon() { width: settings.$icon-size; height: settings.$icon-size; }
icon-large
@mixin icon-large() { ... }
@mixin icon-large() { width: settings.$icon-size-large; height: settings.$icon-size-large; }
icon-personalized
@mixin icon-personalized() { ... }
@mixin icon-personalized() { color: color.get('icon', 'personalized'); }
icon-diet
@mixin icon-diet() { ... }
@mixin icon-diet() { color: color.get('icon', 'vetdiet'); }
icon-prescription
@mixin icon-prescription() { ... }
@mixin icon-prescription() { color: color.get('icon', 'rx'); }
icon-frozen
@mixin icon-frozen() { ... }
@mixin icon-frozen() { color: color.get('icon', 'frozen'); }
icon-chewy
@mixin icon-chewy() { ... }
@mixin icon-chewy() { color: color.get('icon', 'exclusive'); }
icon-fresh
@mixin icon-fresh() { ... }
@mixin icon-fresh() { color: color.get('icon', 'fresh'); }
icon-restricted
@mixin icon-restricted() { ... }
@mixin icon-restricted() { color: color.get('ui-elements', 'price', 'primary'); }
Variables
icon-size
$icon-size: kib-core.dimensions-get(default) !default;
Description
Icon size
Type
Number
icon-size-large
$icon-size-large: kib-core.dimensions-get(large) !default;
Description
Icon Large size
Type
Number
spacing
$spacing: unit.rem(12px) !default;
Description
Component spacing
Type
Number