100 lines
2.6 KiB
SCSS
100 lines
2.6 KiB
SCSS
|
// 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.
|
||
|
|
|
||
|
|
.button,
|
||
|
|
%button,
|
||
|
|
button,
|
||
|
|
[type='button'],
|
||
|
|
[type='reset'],
|
||
|
|
[type='submit'] {
|
||
|
|
// sass-lint:disable no-color-hex, no-color-literals
|
||
|
|
@extend %button--disabled;
|
||
|
|
@include typeface(headings);
|
||
|
|
@include margin-right(.75);
|
||
|
|
@include margin-bottom(.75);
|
||
|
|
// Some styles don't apply to <a> links since they are inline elements by default.
|
||
|
|
display: inline-block;
|
||
|
|
padding: 2px 10px;
|
||
|
|
// 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: $button;
|
||
|
|
text-align: center;
|
||
|
|
background-image: linear-gradient(#f6f6f6, #e2e2e2);
|
||
|
|
border: 1px solid #e4e4e4;
|
||
|
|
border-left-color: #d2d2d2;
|
||
|
|
border-right-color: #d2d2d2;
|
||
|
|
border-bottom-color: #b4b4b4;
|
||
|
|
border-radius: 2px;
|
||
|
|
|
||
|
|
// sass-lint:disable no-vendor-prefixes
|
||
|
|
// Correct the inability to style clickable types in iOS and Safari.
|
||
|
|
-moz-appearance: button;
|
||
|
|
-webkit-appearance: 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;
|
||
|
|
}
|
||
|
|
// sass-lint:enable no-vendor-prefixes
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus,
|
||
|
|
&:active {
|
||
|
|
// Override any link underlines and color changes.
|
||
|
|
text-decoration: none;
|
||
|
|
color: $button;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active {
|
||
|
|
border-color: #555;
|
||
|
|
text-shadow: $button 0 -1px 0;
|
||
|
|
background: $grey-dark;
|
||
|
|
color: $text-bg;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 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: $button-disabled;
|
||
|
|
background-color: $grey-extra-light;
|
||
|
|
border-color: $grey-extra-light;
|
||
|
|
background-image: none;
|
||
|
|
text-shadow: none;
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus,
|
||
|
|
&:active {
|
||
|
|
// Override any link underlines and color changes.
|
||
|
|
color: $button-disabled;
|
||
|
|
}
|
||
|
|
}
|