_button.scss

// Forms - Button
//
// Buttons are generally used for interface actions. Suitable for all-purpose
// use. Defaults to primary call-to-action appearance.
//
// :hover             - Suble hover state (will not be displayed on touch interfaces)
// :focus             - Focus state for users navigating the page using tab keys.
// :active            - "Pushed" button state
// .is-disabled       - Disabled (non-interactive) button state. Consider removing button from interface if not necessary to avoid confusion.
// .is-loading        - AJAX loading animation. Used when loading results inline.
// .-secondary        - Should be used if not the main call-to-action on a page.
// .-tertiary         - Used to de-emphasize button (for example, a "cancel" option), but still show inline with other fields.
//
// Markup:
//   <a class="button {{modifier_class}}">Example Button</a>
//
// Styleguide Forms - Button
.button {
  display: inline-block;
  clear: both;
  background: $blue;
  border: 0;
  margin: 0;
  line-height: 1.3;
  padding: 0.55em 1em 0.45em;
  cursor: pointer;
  color: #fff;
  font-family: $font-proxima-nova;
  font-weight: $weight-bold;
  font-size: $font-medium;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: none;
  border-radius: $lg-border-radius;

  // Fixes styling in Firefox/Safari; non-standard properties so not autoprefixed.
  -moz-appearance: none;
  -webkit-appearance: none;

  // Ensure text wraps to new lines when in an <input> button
  white-space: normal;

  &:hover {
    background: lighten($blue, $color-tint);
  }

  &:focus {
    outline: none;
    border: 1px solid $blue;
    box-shadow: 0 0 3px $blue;
    background: lighten($blue, $color-tint);
  }

  &:active {
    outline: 0;
    background: darken($blue, $color-tint);
  }

  &:link, &:active, &:hover {
    // overrides for default <a> styling
    color: #fff;
    text-decoration: none;
  }

  // secondary appearance
  &.-secondary {
    color: #fff;
    text-decoration: none;
    background: $dark-gray;
    font-size: $font-regular;
    font-weight: $weight-bold;

    &:hover {
      background: lighten($off-black, $color-tint);
    }

    &:active {
      background: darken($off-black, $color-tint);
    }
  }

  // tertiary appearance
  &.-tertiary {
    background: none;
    color: $dark-gray;
    font-size: $font-regular;
    font-weight: $weight-normal;
    text-transform: none;
    text-decoration: underline;
    border: 0;

    &:hover {
      color: $off-black;
      background-color: none;
      text-decoration: underline;
    }

    &:active {
      background-color: none;
    }
  }

  // disabled state
  &[disabled], &.is-disabled {
    background: $light-gray;
    color: lighten($light-gray, 10%);
    cursor: default;

    &:hover {
      background: $light-gray;
    }

    &:active {
      background: $light-gray;
      color: lighten($light-gray, 10%);
    }
  }

  &.is-loading, &.is-loading:hover, &.is-loading:active {
    position: relative;
    color: $light-gray;
    color: transparent;
    background: #eee data-url($data-spinner-svg) no-repeat center center;
    background-size: 32px;
    box-shadow: none;
    cursor: default;
    user-select: none;

    .modernizr-no-smil &, .modernizr-no-smil &:hover, .modernizr-no-smil &:active {
      // If no support for animated SVG, use 32px animated gif.
      background-image: forge-asset-url("images/fallbacks/spinner.gif");
    }

    .modernizr-no-rgba &, .modernizr-no-rgba &:hover, .modernizr-no-rgba &:active {
      // If no support for text color:transparent, hide image and lighten text.
      color: $light-gray;
      background-image: none;
    }
  }
}