buttons
show-btn-state() mixin
Visually replace the button content with one of the available button states.
@mixin show-btn-state(
$state
) { /* ... */ }
Parameters
Name | Description | Type | Default |
---|---|---|---|
$state | Name of the state to display, to be used in a | 'loader' | 'success' | — none |
.foo {
&.is-loading {
@include show-btn-state('loader');
}
}
Usage (scss)
.foo.is-loading .btn-content {
opacity: 0;
}
.foo.is-loading .btn-loader {
max-width: 100vw;
opacity: 1;
visibility: visible;
z-index: 1;
}
Output (css)
[data-btn-style='btn'] css
Base button style with the following available properties: color (default 'go'), content, icon, icon_size, size, class, type
[data-btn-style='btn'] {
@include corners;
@include font-family('heading');
@include font-size('small');
display: inline-block;
text-transform: capitalize;
.btn-inner {
align-items: center;
display: flex;
flex-direction: column;
overflow: hidden;
}
.btn-state {
display: block;
transition: all $time;
white-space: nowrap;
}
.btn-success,
.btn-loader {
height: 0;
max-width: 0;
opacity: 0;
position: relative;
visibility: hidden;
}
&.success {
&:not(.is-loading) {
@include show-btn-state('success');
}
}
&.is-loading {
@include show-btn-state('loader');
}
}
[data-btn-size='smallest'] & css
Smallest button, best without a background. The only difference between smaller
and smallest
is the icon size
[data-btn-size='smallest'] & {
padding: 0;
[data-icon] {
height: 0.5rem;
width: 0.5rem;
}
}
[data-btn-size='smaller'] & css
Smaller button, best without a background. The only difference between smaller
and smallest
is the icon size
[data-btn-size='smaller'] & {
padding: 0;
[data-icon] {
height: 0.75rem;
width: 0.75rem;
}
}
[data-btn-size='small'] & css
Small button, best without a background
[data-btn-size='small'] & {
padding: size('quarter-shim') size('shim');
[data-icon] {
height: 0.9rem;
width: 0.9rem;
}
}
[data-btn-size='medium'] & css
Medium button is the default
[data-btn-size='medium'] & {
padding: size('half-shim') size('gutter');
}
[data-btn-size='large'] css
A large button
[data-btn-size='large'] {
@include font-size('medium');
display: block;
margin: size('gutter') 0;
text-transform: uppercase;
width: 100%;
}
[data-btn-size] css
Show all regular buttons together, with and without icons. The only difference between smaller
and smallest
is the icon size.
[data-btn-size] {
content: '';
}
[data-btn-color='#{$color}'] css
[data-btn-color='#{$color}'] {
@include contrasted($color);
#{$focus} {
@include contrasted($focus-color);
}
}
[data-btn-color='text-light'] css
Light gray buttons have different hover color ratio
[data-btn-color='text-light'] {
color: color('text-light');
#{$focus} {
color: color('action');
}
}
[data-btn-style='link'] css
Button that looks like a text link
[data-btn-style='link'] {
color: color('action');
text-transform: capitalize;
#{$focus} {
color: color('focus');
}
.btn-content {
text-decoration: underline;
}
.btn-loader,
.btn-success {
display: none;
}
&.is-loading {
.btn-loader {
display: inline-block;
}
}
&.success {
.btn-success {
display: inline-block;
}
}
}
[data-link-btn-size='#{$size}'] css
[data-link-btn-size='#{$size}'] {
@include font-size($size);
}
[data-btn-style='icon'] css
Displays a linked icon only (text is hidden)
[data-btn-style='icon'] {
display: inline-block;
padding: size('half-shim');
&,
#{$link} {
color: color('text-light');
}
#{$focus} {
color: color('action');
}
&:focus {
@include outline('offset');
}
}