| // =========== Buttons |
| |
| button::-moz-focus-inner, |
| input::-moz-focus-inner { |
| border: 0; |
| padding: 0; |
| } |
| |
| %button { |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| appearance: none; |
| border: 0; |
| border-radius: $border-radius-10; |
| cursor: pointer; |
| display: inline-block; |
| font-family: $font-family-body; |
| font-size: $font-size-30; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| font-weight: bold; |
| line-height: 1.5em; |
| margin: 0 0 0.25rem 0; |
| padding: 0.5rem 0.75rem; |
| text-decoration: none; |
| vertical-align: bottom; |
| |
| &:focus { outline: 0; } |
| } |
| |
| // The standard button has the $color-brand colors |
| .button, |
| input[type=submit], |
| button { |
| @extend %button; |
| background: $color-brand-70; |
| color: $white; |
| |
| &:hover { |
| background: $color-brand-60; |
| color: $white; |
| } |
| |
| &:active, |
| &:focus { |
| box-shadow: inset 0 1px 3px rgba($black, 0.2); |
| } |
| } |
| |
| .button--neutral, |
| input[type=submit].button--neutral, |
| button.button--neutral { |
| @extend %button; |
| background: $color-neutral-30; |
| color: $color-neutral-70; |
| |
| &:hover { |
| background: $color-neutral-50; |
| color: $color-neutral-70; |
| } |
| |
| &:active, |
| &:focus { |
| box-shadow: inset 0 1px 3px rgba($black, 0.2); |
| } |
| } |
| |
| .button--success, |
| input[type=submit].button--success, |
| button.button--success { |
| @extend %button; |
| background-color: $color-success-50; |
| color: $white; |
| |
| &:hover { |
| background-color: $color-success-60; |
| color: $white; |
| } |
| |
| &:active, |
| &:focus { |
| box-shadow: inset 0 1px 3px rgba($black, 0.2); |
| } |
| } |
| |
| .button--alert, |
| input[type=submit].button--alert, |
| button.button--alert { |
| @extend %button; |
| background-color: $color-alert-50; |
| color: $white; |
| |
| &:hover { |
| background-color: $color-alert-60; |
| color: $white; |
| } |
| |
| &:active, |
| &:focus { |
| box-shadow: inset 0 1px 3px rgba($black, 0.2); |
| } |
| } |