Quantity

Mixins

root-container

@mixin root-container() { ... }@mixin root-container() { 
  @include typography.style-as('button');

  padding: settings.$base-padding;
  border: settings.$base-border solid color.get('action', 'cta', 'alternate', '03');
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: button.$button-size-medium;
  min-width: settings.$min-width;
  width: fit-content;
  border-radius: button.$border-radius;
 }
Description

Root container styles

Parameters

None.

Requires

count-wrapper

@mixin count-wrapper() { ... }@mixin count-wrapper() { 
  text-align: center;
  margin: 0 spacing.get('s2');
  position: relative;

  /* stylelint-disable-next-line selector-class-pattern */
  .kib-spinning-loader__spinner {
    color: color.get('text', 'primary');
  }
 }
Description

Wrapper for the quantity value

Parameters

None.

Requires

action

@mixin action() { ... }@mixin action() { 
  @include button.base;
  @include button.text;
  @include button.button-styles('action', 'tertiary');
  @include button.focus;

  padding: spacing.get('s1');
  margin: 0;
  height: button.$button-size-medium - ((settings.$base-padding + settings.$base-border) * 2);
  aspect-ratio: 1;

  &:disabled,
  &[aria-disabled='true'] {
    @include button.disabled;
  }
 }
Description

Increment, decrement, and remove buttons

Parameters

None.

Requires

action-icon

@mixin action-icon() { ... }@mixin action-icon() { 
  @include button.icon;
  @include button.icon-size-medium;

  margin: 0;
 }
Description

Icons within buttons

Parameters

None.

Variables

min-width

$min-width: unit.rem(140px) !default;
Description

Min component width

Type

Number

base-padding

$base-padding: unit.rem(2px) !default;
Description

Base padding

Type

Number

Used by

base-border

$base-border: unit.rem(2px) !default;
Description

Base border

Type

Number

Used by