buttons

show-btn-state() mixin

Visually replace the button content with one of the available button states.

@mixin show-btn-state(
  $state
) { /* ... */ }
Parameters
NameDescriptionTypeDefault
$state

Name of the state to display, to be used in a btn-#{$state} class.

'loader' | 'success' none
scss
.foo {
  &.is-loading {
    @include show-btn-state('loader');
  }
}

Usage (scss)

css
.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-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');
  }
}