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 | // scss-docs-start btn-variant-mixin
|
---|
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 | // Avoid using mixin so we can pass custom focus shadow properly
|
---|
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 | // Remove CSS gradients if they're enabled
|
---|
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 | // Avoid using mixin so we can pass custom focus shadow properly
|
---|
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 | // Remove CSS gradients if they're enabled
|
---|
71 | background-image: if($enable-gradients, none, null);
|
---|
72 | border-color: $disabled-border;
|
---|
73 | }
|
---|
74 | }
|
---|
75 | // scss-docs-end btn-variant-mixin
|
---|
76 |
|
---|
77 | // scss-docs-start btn-outline-variant-mixin
|
---|
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 | // Avoid using mixin so we can pass custom focus shadow properly
|
---|
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 | // scss-docs-end btn-outline-variant-mixin
|
---|
125 |
|
---|
126 | // scss-docs-start btn-size-mixin
|
---|
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 | // Manually declare to provide an override to the browser default
|
---|
131 | @include border-radius($border-radius, 0);
|
---|
132 | }
|
---|
133 | // scss-docs-end btn-size-mixin
|
---|