/* Buttons
=============== */
// Main button styling %buttons {
-webkit-appearance: none; display: inline-block; border: $button-border-width $button-border-style $button-border-color; border-radius: $button-border-radius; background: $button-background; color: $button-color; font-weight: $button-font-weight; font-family: $button-font-family; font-size: $button-font-size; text-transform: $button-text-transform; padding: .75rem 1.25rem; margin: 0 0 .5rem 0; vertical-align: middle; text-align: center; cursor: pointer; text-decoration: none; line-height: 1;
}
// Buttons on hover %buttons-hover {
border: $button-border-width $button-border-style darken($button-border-color, 10%); background: $button-background-hover; color: $button-color; text-decoration: none;
}
// Buttons on focus %buttons-focus {
border: $button-border-width $button-border-style darken($button-border-color, 10%); background: darken($button-background, 10%); color: $button-color; text-decoration: none;
}
// Apply styles to .button class, button element, and button-based inputs #{$buttons} {
@extend %buttons; &::-moz-focus-inner { border: 0; padding: 0; } &:hover { @extend %buttons-hover; } &:focus, &:active { @extend %buttons-focus; }
}
// Secondary button color .accent-button, a.accent-button {
color: $accent-button-color; border: 1px solid $accent-button-background; background: $accent-button-background; &:hover, &:focus, &:active { color: $accent-button-color-hover; border: 1px solid darken($accent-button-background, 10%); background: darken($accent-button-background, 10%); }
}
// Muted buttons .muted-button, a.muted-button {
background: $muted-background; border: $muted-border; color: $muted-color; &:hover, &:focus, &:active { color: $muted-color-hover; border: $muted-border-hover; background: $muted-background-hover; }
}
// Round buttons .round-button, a.round-button {
border-radius: $round-buttons;
}
// Square buttons .square-button, a.square-button {
border-radius: 0;
}
// Full width buttons (block level) .full-button, a.full-button {
display: block; width: 100%;
}