Chirp Sass Documentation

Choices Switch

Installation

  yarn add @chewy/kib-choices-styles

Import

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

Mixins

@mixin switch-control-custom($block) { ... }@mixin switch-control-custom($block) { 
  @include mixins.choice-control-custom($block, settings.$rail-width, settings.$rail-height);

  border-radius: settings.$radius;
  background-color: settings.$background-color;
  transition: background-color 0.2s;

  &::after {
    border-radius: settings.$radius + settings.$border-width;
  }

  &,
  #{$block}__native:focus ~ &,
  #{$block}__native:checked ~ & {
    border-color: transparent;
  }

  #{$block}__native:hover ~ & {
    background-color: settings.$background-color-hover;
  }

  #{$block}__native:checked ~ & {
    background-color: settings.$background-color-checked;
    border-color: transparent;

    #{$block}__fill {
      transform: translateX(settings.$rail-width - settings.$thumb-size - settings.$thumb-offset);
    }
  }

  #{$block}__native:checked:hover ~ & {
    background-color: settings.$background-color-checked-hover;
  }
 }

Description

Switch custom input control styles and various states

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$block`	root class of parent block element	`String`	— none

Requires

[variable] rail-width
[variable] rail-height
[variable] radius
[variable] background-color
[variable] border-width
[variable] background-color-hover
[variable] background-color-checked
[variable] thumb-size
[variable] thumb-offset
[variable] background-color-checked-hover

Author

@mixin switch-control-fill() { ... }@mixin switch-control-fill() { 
  position: absolute;
  top: 50%;
  left: settings.$border-width * -1;
  z-index: 1;
  margin-top: math.div(settings.$thumb-size, -2);
  width: settings.$thumb-size;
  height: settings.$thumb-size;
  border-radius: settings.$radius - settings.$border-width;
  background-color: settings.$thumb-color;
  box-shadow: settings.$thumb-shadow;
  transform: translateX(settings.$thumb-offset);
  transition: transform 0.2s;
 }

Description

Control fill with inner pseudo element to style checked state

Parameters

None.

Requires

[variable] border-width
[variable] thumb-size
[variable] radius
[variable] thumb-color
[variable] thumb-shadow
[variable] thumb-offset

Author

Variables

$background-color: color.get('action', 'switch', 'background', 'off', 'primary') !default;

Description

Switch unchecked background color

Type

Color

Author

$background-color-hover: color.get('action', 'switch', 'background', 'off', '02') !default;

Description

Switch unchecked background color on hover state

Type

Color

Used by

[mixin] switch-control-custom
[mixin] menu-group-link

Author

$background-color-checked: color.get('action', 'switch', 'background', 'on', 'primary') !default;

Description

Switch checked background color

Type

Color

Used by

[mixin] switch-control-custom

Author

$background-color-checked-hover: color.get('action', 'switch', 'background', 'on', '02') !default;

Description

Switch checked background color on hover state

Type

Color

Used by

[mixin] switch-control-custom

Author

$radius: settings.$height !default;

Description

The base border radius which applies to the switch, thumb and focus outline elements.

Type

Number

Author

$rail-width: unit.rem(56px) !default;

Description

Switch rail width

Type

Number

Used by

[mixin] switch-control-custom

Author

$rail-height: unit.rem(32px) !default;

Description

Switch rail height

Type

Number

Used by

[mixin] switch-control-custom

Author

$thumb-color: color.get('action', 'switch', 'foreground') !default;

Description

Switch thumb color

Type

Color

Used by

[mixin] switch-control-fill

Author

$thumb-size: unit.rem(28px) !default;

Description

Switch thumb size, equal for width and height

Type

Number

Used by

[mixin] switch-control-custom
[mixin] switch-control-fill

Author

$thumb-offset: unit.rem(2px) !default;

Description

Distance of the thumb element from the switch's edges

Type

Number

Used by

[mixin] switch-control-custom
[mixin] switch-control-fill

Author

$thumb-shadow: unit.rem(0 1px 1px) rgba(#000, 0.14), unit.rem(0 2px 1px) rgba(#000, 0.12),
  unit.rem(0 1px 3px) rgba(#000, 0.2) !default;

Description

Drop shadow on thumb element

Type

List

Used by

[mixin] switch-control-fill