button, input {
@include line;
}
button, input, a.button, div.button, label.button {
// overrides that should be in reset/normalize outline-style: none; resize: none; -webkit-appearance: none; border: none; display: block; font-size: $em; font-family: $button-font; font-weight: bold; background-color: $primary; color: $darkest-color; padding: $spacing*1.2 $spacing*3; line-height: 1; letter-spacing: 1px; text-align: center; white-space: normal; cursor: pointer; @include rounded; @include shadowed; @include line; &:hover { text-decoration: none; background-color: $primary-light; } &:active { background-color: $primary-dark; @include depressed-shadow; } &.accent { background-color: $accent; &:hover { background-color: $accent-light; } &:active { background-color: $accent-dark; } } &.accent-2 { background-color: $accent-2; &:hover { background-color: $accent-2-light; } &:active { background-color: $accent-2-dark; } } &.neutral { background-color: $neutral-50; &:hover { background-color: $neutral-40; } &:active { background-color: $neutral-60; } } &.info { background-color: $info; color: $neutral-10; &:hover { background-color: $info-light; } &:active { background-color: $info-dark; } } &.info-2 { background-color: $info-2; color: $neutral-10; &:hover { background-color: $info-2-light; } &:active { background-color: $info-2-dark; } } &.warn { background-color: $warn; color: $neutral-10; &:hover { background-color: $warn-light; } &:active { background-color: $warn-dark; } } &.error { background-color: $error; &:hover { background-color: $error-light; } &:active { background-color: $error-dark; } } &.disabled { @include opacity(0.3); }
}