pogodevorg/blog.pogodev.org

// Button
//
// In addition to the default styling of `<button>` and
// `<input type="submit|image|reset|button">` elements, the `.button` class and
// its variants can apply buttons styles to various elements (like an `<a>`
// link).
//
// :hover  - Hover styling.
// :active - Depressed button styling.
//
// Markup: button.twig
//
// Style guide: forms.button

// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
//    controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari.
.button,
%button,
button,
// 1
html [type='button'],
[type='reset'],
[type='submit'] {
  -moz-appearance: button;
  -webkit-appearance: button; // 2
}

.button,
%button,
button,
[type='button'],
[type='reset'],
[type='submit'] {
  @extend %button--disabled;
  // Some styles don't apply to <a> links since they are inline elements by default.
  display: inline-block;
  padding: 2px 6px;
  // Address Firefox 4+ setting `line-height` on `input` using `!important` in
  // the UA stylesheet. And prevent its "line-height: normal" rule below from
  // breaking the "appearance: button" styling on the input elements.
  line-height: inherit;
  text-decoration: none;
  // Improve usability and consistency of cursor style between image-type `input` and others.
  cursor: pointer;
  color: color(button);

  // Remove the inner border and padding in Firefox.
  &::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  // Restore the focus styles unset by the previous rule.
  &:-moz-focusring {
    outline: 1px dotted ButtonText;
  }

  &:hover,
  &:focus,
  &:active {
    // Override any link underlines and color changes.
    text-decoration: none;
    color: color(button);
  }
}

// Add button variations here.
.button,
%button {
  &--variant-name {
    // Add styles here.
  }
}

// The disabled variation should always go last, so that it overrides any
// other variations.
%button--disabled[disabled] {
  // Re-set default cursor for disabled elements.
  cursor: default;
  color: color(button-disabled);

  &:hover,
  &:focus,
  &:active {
    // Override any link underlines and color changes.
    color: color(button-disabled);
  }
}