1 |
|
2 |
|
3 |
|
4 |
|
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 |
|
16 | @include hover {
|
17 | color: $color;
|
18 | background-color: $active-background;
|
19 | border-color: $active-border;
|
20 | }
|
21 | &:focus,
|
22 | &.focus {
|
23 |
|
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 |
|
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;
|
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 |
|
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 | }
|