Product Message
Installation
yarn add @chewy/kib-product-styles
Import
@use '~@chewy/kib-product-styles/src/kib-product-message/styles' as kib-product-message;
Mixins
message
@mixin message() { ... }
@mixin message() { @include typography.style-as('caption'); width: fit-content; margin-bottom: settings.$spacing-bottom; margin-top: 0; }
promotion-base
@mixin promotion-base() { ... }
@mixin promotion-base() { padding: settings.$promotion-padding; border-radius: settings.$promotion-border-radius; color: settings.$promotion-text-color; }
Description
base promotion message styles
Parameters
None.
Requires
- [variable]
promotion-padding
- [variable]
promotion-border-radius
- [variable]
promotion-text-color
promotion
@mixin promotion() { ... }
@mixin promotion() { @if $type == 'brand' { background-color: settings.$promotion-background-color-brand; } @else { background-color: settings.$promotion-background-color; } }
Description
promotion message styles
Parameters
None.
Requires
- [variable]
promotion-background-color-brand
- [variable]
promotion-background-color
Variables
text-color
Deprecated!
no longer referenced
$text-color: color.get('text', 'secondary') !default;
Description
Default color of message text
Type
Color
promotion-border-radius
$promotion-border-radius: kib-core.dimensions-get(tiny) !default;
promotion-background-color
$promotion-background-color: color.get('ui-elements', 'promotion', 'primary') !default;
promotion-padding
$promotion-padding: spacing.get('s1') !default;
promotion-background-color-brand
$promotion-background-color-brand: color.get('ui-elements', 'promotion', 'alternate') !default;
promotion-text-color
$promotion-text-color: color.get('ui-elements', 'promotion', 'text') !default;
spacing-bottom
$spacing-bottom: unit.rem(12px) !default;