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