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; } }
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.
Requires
- [variable]
chip-tab-default-deselected-text-color
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.
Requires
- [variable]
chip-tab-deselected-disabled-opacity
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.
Requires
- [variable]
chip-tab-selected-disabled-opacity
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
- [mixin]
chip-deselected-styles
Author
CDS
chip-tab-selected-disabled-opacity
$chip-tab-selected-disabled-opacity: 0.3;
Description
Chip tab selected disabled opacity
Type
Number
Used by
- [mixin]
chip-selected-disabled-styles
Author
CDS
chip-tab-deselected-disabled-opacity
$chip-tab-deselected-disabled-opacity: 0.5;
Description
Chip tab deselected disabled opacity
Type
Number
Used by
- [mixin]
chip-deselected-disabled-styles
Author
CDS