Chips Tab

Installation

  yarn add @chewy/kib-chips-styles

Import

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

Mixins

chip-selected-styles

@mixin chip-selected-styles() { ... }@mixin chip-selected-styles() { 
  background-color: map.get(variants.$styles, $type, '$chip-tab-selected-background');

  &,
  &:hover {
    color: map.get(variants.$styles, $type, '$chip-tab-selected-text-color');
    text-decoration: none;
  }
 }
Description

Styles for selected chip tab

Parameters

None.

Requires
Author
  • CDS

chip-deselected-styles

@mixin chip-deselected-styles() { ... }@mixin chip-deselected-styles() { 
  // stylelint-disable selector-class-pattern
  &:hover,
  &:focus,
  &.kib-chip-tab--disabled {
    color: settings.$chip-tab-default-deselected-text-color;
  }
  // stylelint-enable selector-class-pattern
 }
Description

Styles for deselected chip tab

Parameters

None.

Author
  • CDS

chip-deselected-disabled-styles

@mixin chip-deselected-disabled-styles() { ... }@mixin chip-deselected-disabled-styles() { 
  @include common.chip-disabled-styles;

  opacity: settings.$chip-tab-deselected-disabled-opacity;
 }
Description

Styles for deselected disabled chip tab

Parameters

None.

Author
  • CDS

chip-selected-icon-styles

@mixin chip-selected-icon-styles() { ... }@mixin chip-selected-icon-styles() { 
  @include common.chip-icon-styles($type);

  color: currentColor;
 }
Description

Styles for selected chip tab

Parameters

None.

Author
  • CDS

chip-selected-disabled-styles

@mixin chip-selected-disabled-styles() { ... }@mixin chip-selected-disabled-styles() { 
  @include common.chip-disabled-styles;

  opacity: settings.$chip-tab-selected-disabled-opacity;
 }
Description

Styles for selected disabled chip tab

Parameters

None.

Author
  • CDS

Variables

chip-tab-icon-spacing

$chip-tab-icon-spacing: spacing.get('s1') !default;
Description

Chip tab spacing between icon and label

Type

Number

Author
  • CDS

chip-tab-default-deselected-text-color

$chip-tab-default-deselected-text-color: color.get('chip', '04', 'text-02');
Description

Chip tab default theme deselected text color

Type

Color

Used by
Author
  • CDS

chip-tab-selected-disabled-opacity

$chip-tab-selected-disabled-opacity: 0.3;
Description

Chip tab selected disabled opacity

Type

Number

Author
  • CDS

chip-tab-deselected-disabled-opacity

$chip-tab-deselected-disabled-opacity: 0.5;
Description

Chip tab deselected disabled opacity

Type

Number

Author
  • CDS