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
- [function]
get - [variable]
base-padding - [variable]
base-border - [variable]
button-size-medium - [variable]
min-width - [variable]
border-radius
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'); } }
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
- [function]
get - [variable]
button-size-medium - [variable]
base-padding - [variable]
base-border
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;base-border
$base-border: unit.rem(2px) !default;