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; min-width: settings.$min-width; width: fit-content; border-radius: button.$border-radius; background-color: color.get('field', 'primary'); }
Description
Root container styles
Parameters
None.
Requires
- [function]
get
- [variable]
base-padding
- [variable]
base-border
- [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.generate-styles('action', 'tertiary', 'small'); @include button.icon-only; --kib-button-box-shadow-color: none; aspect-ratio: 1; padding: spacing.get('s1'); &:disabled, &[aria-disabled='true'] { @include button.disabled; } }
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;