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;