1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | @mixin button-variant(
|
8 | $background,
|
9 | $border,
|
10 | $color: color-contrast($background),
|
11 | $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
|
12 | $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
|
13 | $hover-color: color-contrast($hover-background),
|
14 | $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
|
15 | $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
|
16 | $active-color: color-contrast($active-background),
|
17 | $disabled-background: $background,
|
18 | $disabled-border: $border,
|
19 | $disabled-color: color-contrast($disabled-background)
|
20 | ) {
|
21 | color: $color;
|
22 | @include gradient-bg($background);
|
23 | border-color: $border;
|
24 | @include box-shadow($btn-box-shadow);
|
25 |
|
26 | &:hover {
|
27 | color: $hover-color;
|
28 | @include gradient-bg($hover-background);
|
29 | border-color: $hover-border;
|
30 | }
|
31 |
|
32 | .btn-check:focus + &,
|
33 | &:focus {
|
34 | color: $hover-color;
|
35 | @include gradient-bg($hover-background);
|
36 | border-color: $hover-border;
|
37 | @if $enable-shadows {
|
38 | @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
|
39 | } @else {
|
40 |
|
41 | box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
|
42 | }
|
43 | }
|
44 |
|
45 | .btn-check:checked + &,
|
46 | .btn-check:active + &,
|
47 | &:active,
|
48 | &.active,
|
49 | .show > &.dropdown-toggle {
|
50 | color: $active-color;
|
51 | background-color: $active-background;
|
52 |
|
53 | background-image: if($enable-gradients, none, null);
|
54 | border-color: $active-border;
|
55 |
|
56 | &:focus {
|
57 | @if $enable-shadows {
|
58 | @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
|
59 | } @else {
|
60 |
|
61 | box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
|
62 | }
|
63 | }
|
64 | }
|
65 |
|
66 | &:disabled,
|
67 | &.disabled {
|
68 | color: $disabled-color;
|
69 | background-color: $disabled-background;
|
70 |
|
71 | background-image: if($enable-gradients, none, null);
|
72 | border-color: $disabled-border;
|
73 | }
|
74 | }
|
75 |
|
76 |
|
77 |
|
78 | @mixin button-outline-variant(
|
79 | $color,
|
80 | $color-hover: color-contrast($color),
|
81 | $active-background: $color,
|
82 | $active-border: $color,
|
83 | $active-color: color-contrast($active-background)
|
84 | ) {
|
85 | color: $color;
|
86 | border-color: $color;
|
87 |
|
88 | &:hover {
|
89 | color: $color-hover;
|
90 | background-color: $active-background;
|
91 | border-color: $active-border;
|
92 | }
|
93 |
|
94 | .btn-check:focus + &,
|
95 | &:focus {
|
96 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
97 | }
|
98 |
|
99 | .btn-check:checked + &,
|
100 | .btn-check:active + &,
|
101 | &:active,
|
102 | &.active,
|
103 | &.dropdown-toggle.show {
|
104 | color: $active-color;
|
105 | background-color: $active-background;
|
106 | border-color: $active-border;
|
107 |
|
108 | &:focus {
|
109 | @if $enable-shadows {
|
110 | @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
|
111 | } @else {
|
112 |
|
113 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
114 | }
|
115 | }
|
116 | }
|
117 |
|
118 | &:disabled,
|
119 | &.disabled {
|
120 | color: $color;
|
121 | background-color: transparent;
|
122 | }
|
123 | }
|
124 |
|
125 |
|
126 |
|
127 | @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
128 | padding: $padding-y $padding-x;
|
129 | @include font-size($font-size);
|
130 |
|
131 | @include border-radius($border-radius, 0);
|
132 | }
|
133 |
|