| Michael Lando | efa037d | 2017-02-19 12:57:33 +0200 | [diff] [blame] | 1 | // Button variants |
| 2 | // |
| 3 | // Easily pump out default styles, as well as :hover, :focus, :active, |
| 4 | // and disabled options for all buttons |
| 5 | |
| 6 | @mixin button-variant($color, $background, $border) { |
| 7 | color: $color; |
| 8 | background-color: $background; |
| 9 | border-color: $border; |
| 10 | |
| 11 | &:focus, |
| 12 | &.focus { |
| 13 | color: $color; |
| 14 | background-color: darken($background, 10%); |
| 15 | border-color: darken($border, 25%); |
| 16 | } |
| 17 | &:hover { |
| 18 | color: $color; |
| 19 | background-color: darken($background, 10%); |
| 20 | border-color: darken($border, 12%); |
| 21 | } |
| 22 | &:active, |
| 23 | &.active, |
| 24 | .open > &.dropdown-toggle { |
| 25 | color: $color; |
| 26 | background-color: darken($background, 10%); |
| 27 | border-color: darken($border, 12%); |
| 28 | |
| 29 | &:hover, |
| 30 | &:focus, |
| 31 | &.focus { |
| 32 | color: $color; |
| 33 | background-color: darken($background, 17%); |
| 34 | border-color: darken($border, 25%); |
| 35 | } |
| 36 | } |
| 37 | &:active, |
| 38 | &.active, |
| 39 | .open > &.dropdown-toggle { |
| 40 | background-image: none; |
| 41 | } |
| 42 | &.disabled, |
| 43 | &[disabled], |
| 44 | fieldset[disabled] & { |
| 45 | &, |
| 46 | &:hover, |
| 47 | &:focus, |
| 48 | &.focus, |
| 49 | &:active, |
| 50 | &.active { |
| 51 | background-color: $background; |
| 52 | border-color: $border; |
| 53 | } |
| 54 | } |
| 55 | |
| 56 | .badge { |
| 57 | color: $background; |
| 58 | background-color: $color; |
| 59 | } |
| 60 | } |
| 61 | |
| 62 | // Button sizes |
| 63 | @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { |
| 64 | padding: $padding-vertical $padding-horizontal; |
| 65 | font-size: $font-size; |
| 66 | line-height: $line-height; |
| 67 | border-radius: $border-radius; |
| 68 | } |