106 lines
2.8 KiB
SCSS
106 lines
2.8 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'] {
|
|
// stylelint-disable color-no-hex, color-named
|
|
@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: var(--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;
|
|
|
|
// stylelint-disable property-no-vendor-prefix
|
|
// 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 property-no-vendor-prefix
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
// Override any link underlines and color changes.
|
|
text-decoration: none;
|
|
color: var(--color-button);
|
|
}
|
|
|
|
&:active {
|
|
border-color: #555;
|
|
text-shadow: var(--color-button 0 -1px 0) 0 -1px 0;
|
|
background: var(--color-grey-dark);
|
|
color: var(--color-text-bg);
|
|
}
|
|
}
|
|
|
|
// Add button variations here.
|
|
.button,
|
|
%button {
|
|
&--small {
|
|
@include type-layout(xs, 1);
|
|
@include margin-right(.3);
|
|
@include margin-bottom(.3);
|
|
padding: 0 6px;
|
|
}
|
|
|
|
&--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: var(--color-button-disabled);
|
|
background-color: var(--color-grey-extra-light);
|
|
border-color: var(--color-grey-extra-light);
|
|
background-image: none;
|
|
text-shadow: none;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
// Override any link underlines and color changes.
|
|
color: var(--color-button-disabled);
|
|
}
|
|
}
|