Chips Choices

Installation

  yarn add @chewy/kib-chips-styles

Import

  @use '~@chewy/kib-chips-styles/src/kib-chip-choices/styles' as kib-chip-choices;

Mixins

chip-choices-container-styles

@mixin chip-choices-container-styles() { ... }@mixin chip-choices-container-styles() { 
  padding-left: spacing.get('s1');
  padding-right: spacing.get('s1');

  @include kib-core.media-query(small) {
    @include kib-scroller.container;
    @include kib-scroller.hide-scrollbar;

    scroll-padding-left: kib-core.dimensions-get(tiny);
    scroll-snap-type: x proximity;
  }
 }
Description

Styles for chip choices container

Parameters

None.

Requires

chip-choices-child-styles

@mixin chip-choices-child-styles() { ... }@mixin chip-choices-child-styles() { 
  @include kib-core.media-query(small) {
    @include kib-scroller.item;
    @include kib-scroller.item-snap-start;

    margin-top: spacing.get('s1');
    margin-bottom: spacing.get('s1');
  }

  margin: spacing.get('s1', 's2', 's2') 0;
 }
Description

Styles for chip choice items

Parameters

None.

Requires

Variables

chip-choice-default-label-color

$chip-choice-default-label-color: color.get('text', 'primary') !default;
Description

Chip choices default label color

Type

Color