]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
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 | $active-background: darken($background, 10%); | |
8 | $active-border: darken($border, 12%); | |
9 | ||
10 | color: $color; | |
11 | background-color: $background; | |
12 | border-color: $border; | |
13 | @include box-shadow($btn-box-shadow); | |
14 | ||
15 | // Hover and focus styles are shared | |
16 | @include hover { | |
17 | color: $color; | |
18 | background-color: $active-background; | |
19 | border-color: $active-border; | |
20 | } | |
21 | &:focus, | |
22 | &.focus { | |
23 | // Avoid using mixin so we can pass custom focus shadow properly | |
24 | @if $enable-shadows { | |
25 | box-shadow: $btn-box-shadow, 0 0 0 2px rgba($border, .5); | |
26 | } @else { | |
27 | box-shadow: 0 0 0 2px rgba($border, .5); | |
28 | } | |
29 | } | |
30 | ||
31 | // Disabled comes first so active can properly restyle | |
32 | &.disabled, | |
33 | &:disabled { | |
34 | background-color: $background; | |
35 | border-color: $border; | |
36 | } | |
37 | ||
38 | &:active, | |
39 | &.active, | |
40 | .show > &.dropdown-toggle { | |
41 | color: $color; | |
42 | background-color: $active-background; | |
43 | background-image: none; // Remove the gradient for the pressed/active state | |
44 | border-color: $active-border; | |
45 | @include box-shadow($btn-active-box-shadow); | |
46 | } | |
47 | } | |
48 | ||
49 | @mixin button-outline-variant($color, $color-hover: #fff) { | |
50 | color: $color; | |
51 | background-image: none; | |
52 | background-color: transparent; | |
53 | border-color: $color; | |
54 | ||
55 | @include hover { | |
56 | color: $color-hover; | |
57 | background-color: $color; | |
58 | border-color: $color; | |
59 | } | |
60 | ||
61 | &:focus, | |
62 | &.focus { | |
63 | box-shadow: 0 0 0 2px rgba($color, .5); | |
64 | } | |
65 | ||
66 | &.disabled, | |
67 | &:disabled { | |
68 | color: $color; | |
69 | background-color: transparent; | |
70 | } | |
71 | ||
72 | &:active, | |
73 | &.active, | |
74 | .show > &.dropdown-toggle { | |
75 | color: $color-hover; | |
76 | background-color: $color; | |
77 | border-color: $color; | |
78 | } | |
79 | } | |
80 | ||
81 | // Button sizes | |
82 | @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { | |
83 | padding: $padding-y $padding-x; | |
84 | font-size: $font-size; | |
85 | @include border-radius($border-radius); | |
86 | } |