1 | //
|
---|
2 | // Base styles
|
---|
3 | //
|
---|
4 |
|
---|
5 | .btn {
|
---|
6 | // scss-docs-start btn-css-vars
|
---|
7 | --#{$prefix}btn-padding-x: #{$btn-padding-x};
|
---|
8 | --#{$prefix}btn-padding-y: #{$btn-padding-y};
|
---|
9 | --#{$prefix}btn-font-family: #{$btn-font-family};
|
---|
10 | @include rfs($btn-font-size, --#{$prefix}btn-font-size);
|
---|
11 | --#{$prefix}btn-font-weight: #{$btn-font-weight};
|
---|
12 | --#{$prefix}btn-line-height: #{$btn-line-height};
|
---|
13 | --#{$prefix}btn-color: #{$btn-color};
|
---|
14 | --#{$prefix}btn-bg: transparent;
|
---|
15 | --#{$prefix}btn-border-width: #{$btn-border-width};
|
---|
16 | --#{$prefix}btn-border-color: transparent;
|
---|
17 | --#{$prefix}btn-border-radius: #{$btn-border-radius};
|
---|
18 | --#{$prefix}btn-hover-border-color: transparent;
|
---|
19 | --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
|
---|
20 | --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
|
---|
21 | --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
|
---|
22 | // scss-docs-end btn-css-vars
|
---|
23 |
|
---|
24 | display: inline-block;
|
---|
25 | padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
|
---|
26 | font-family: var(--#{$prefix}btn-font-family);
|
---|
27 | @include font-size(var(--#{$prefix}btn-font-size));
|
---|
28 | font-weight: var(--#{$prefix}btn-font-weight);
|
---|
29 | line-height: var(--#{$prefix}btn-line-height);
|
---|
30 | color: var(--#{$prefix}btn-color);
|
---|
31 | text-align: center;
|
---|
32 | text-decoration: if($link-decoration == none, null, none);
|
---|
33 | white-space: $btn-white-space;
|
---|
34 | vertical-align: middle;
|
---|
35 | cursor: if($enable-button-pointers, pointer, null);
|
---|
36 | user-select: none;
|
---|
37 | border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
|
---|
38 | @include border-radius(var(--#{$prefix}btn-border-radius));
|
---|
39 | @include gradient-bg(var(--#{$prefix}btn-bg));
|
---|
40 | @include box-shadow(var(--#{$prefix}btn-box-shadow));
|
---|
41 | @include transition($btn-transition);
|
---|
42 |
|
---|
43 | &:hover {
|
---|
44 | color: var(--#{$prefix}btn-hover-color);
|
---|
45 | text-decoration: if($link-hover-decoration == underline, none, null);
|
---|
46 | background-color: var(--#{$prefix}btn-hover-bg);
|
---|
47 | border-color: var(--#{$prefix}btn-hover-border-color);
|
---|
48 | }
|
---|
49 |
|
---|
50 | .btn-check + &:hover {
|
---|
51 | // override for the checkbox/radio buttons
|
---|
52 | color: var(--#{$prefix}btn-color);
|
---|
53 | background-color: var(--#{$prefix}btn-bg);
|
---|
54 | border-color: var(--#{$prefix}btn-border-color);
|
---|
55 | }
|
---|
56 |
|
---|
57 | &:focus-visible {
|
---|
58 | color: var(--#{$prefix}btn-hover-color);
|
---|
59 | @include gradient-bg(var(--#{$prefix}btn-hover-bg));
|
---|
60 | border-color: var(--#{$prefix}btn-hover-border-color);
|
---|
61 | outline: 0;
|
---|
62 | // Avoid using mixin so we can pass custom focus shadow properly
|
---|
63 | @if $enable-shadows {
|
---|
64 | box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
|
---|
65 | } @else {
|
---|
66 | box-shadow: var(--#{$prefix}btn-focus-box-shadow);
|
---|
67 | }
|
---|
68 | }
|
---|
69 |
|
---|
70 | .btn-check:focus-visible + & {
|
---|
71 | border-color: var(--#{$prefix}btn-hover-border-color);
|
---|
72 | outline: 0;
|
---|
73 | // Avoid using mixin so we can pass custom focus shadow properly
|
---|
74 | @if $enable-shadows {
|
---|
75 | box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
|
---|
76 | } @else {
|
---|
77 | box-shadow: var(--#{$prefix}btn-focus-box-shadow);
|
---|
78 | }
|
---|
79 | }
|
---|
80 |
|
---|
81 | .btn-check:checked + &,
|
---|
82 | :not(.btn-check) + &:active,
|
---|
83 | &:first-child:active,
|
---|
84 | &.active,
|
---|
85 | &.show {
|
---|
86 | color: var(--#{$prefix}btn-active-color);
|
---|
87 | background-color: var(--#{$prefix}btn-active-bg);
|
---|
88 | // Remove CSS gradients if they're enabled
|
---|
89 | background-image: if($enable-gradients, none, null);
|
---|
90 | border-color: var(--#{$prefix}btn-active-border-color);
|
---|
91 | @include box-shadow(var(--#{$prefix}btn-active-shadow));
|
---|
92 |
|
---|
93 | &:focus-visible {
|
---|
94 | // Avoid using mixin so we can pass custom focus shadow properly
|
---|
95 | @if $enable-shadows {
|
---|
96 | box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
|
---|
97 | } @else {
|
---|
98 | box-shadow: var(--#{$prefix}btn-focus-box-shadow);
|
---|
99 | }
|
---|
100 | }
|
---|
101 | }
|
---|
102 |
|
---|
103 | .btn-check:checked:focus-visible + & {
|
---|
104 | // Avoid using mixin so we can pass custom focus shadow properly
|
---|
105 | @if $enable-shadows {
|
---|
106 | box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
|
---|
107 | } @else {
|
---|
108 | box-shadow: var(--#{$prefix}btn-focus-box-shadow);
|
---|
109 | }
|
---|
110 | }
|
---|
111 |
|
---|
112 | &:disabled,
|
---|
113 | &.disabled,
|
---|
114 | fieldset:disabled & {
|
---|
115 | color: var(--#{$prefix}btn-disabled-color);
|
---|
116 | pointer-events: none;
|
---|
117 | background-color: var(--#{$prefix}btn-disabled-bg);
|
---|
118 | background-image: if($enable-gradients, none, null);
|
---|
119 | border-color: var(--#{$prefix}btn-disabled-border-color);
|
---|
120 | opacity: var(--#{$prefix}btn-disabled-opacity);
|
---|
121 | @include box-shadow(none);
|
---|
122 | }
|
---|
123 | }
|
---|
124 |
|
---|
125 |
|
---|
126 | //
|
---|
127 | // Alternate buttons
|
---|
128 | //
|
---|
129 |
|
---|
130 | // scss-docs-start btn-variant-loops
|
---|
131 | @each $color, $value in $theme-colors {
|
---|
132 | .btn-#{$color} {
|
---|
133 | @if $color == "light" {
|
---|
134 | @include button-variant(
|
---|
135 | $value,
|
---|
136 | $value,
|
---|
137 | $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
|
---|
138 | $hover-border: shade-color($value, $btn-hover-border-shade-amount),
|
---|
139 | $active-background: shade-color($value, $btn-active-bg-shade-amount),
|
---|
140 | $active-border: shade-color($value, $btn-active-border-shade-amount)
|
---|
141 | );
|
---|
142 | } @else if $color == "dark" {
|
---|
143 | @include button-variant(
|
---|
144 | $value,
|
---|
145 | $value,
|
---|
146 | $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
|
---|
147 | $hover-border: tint-color($value, $btn-hover-border-tint-amount),
|
---|
148 | $active-background: tint-color($value, $btn-active-bg-tint-amount),
|
---|
149 | $active-border: tint-color($value, $btn-active-border-tint-amount)
|
---|
150 | );
|
---|
151 | } @else {
|
---|
152 | @include button-variant($value, $value);
|
---|
153 | }
|
---|
154 | }
|
---|
155 | }
|
---|
156 |
|
---|
157 | @each $color, $value in $theme-colors {
|
---|
158 | .btn-outline-#{$color} {
|
---|
159 | @include button-outline-variant($value);
|
---|
160 | }
|
---|
161 | }
|
---|
162 | // scss-docs-end btn-variant-loops
|
---|
163 |
|
---|
164 |
|
---|
165 | //
|
---|
166 | // Link buttons
|
---|
167 | //
|
---|
168 |
|
---|
169 | // Make a button look and behave like a link
|
---|
170 | .btn-link {
|
---|
171 | --#{$prefix}btn-font-weight: #{$font-weight-normal};
|
---|
172 | --#{$prefix}btn-color: #{$btn-link-color};
|
---|
173 | --#{$prefix}btn-bg: transparent;
|
---|
174 | --#{$prefix}btn-border-color: transparent;
|
---|
175 | --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
|
---|
176 | --#{$prefix}btn-hover-border-color: transparent;
|
---|
177 | --#{$prefix}btn-active-color: #{$btn-link-hover-color};
|
---|
178 | --#{$prefix}btn-active-border-color: transparent;
|
---|
179 | --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
|
---|
180 | --#{$prefix}btn-disabled-border-color: transparent;
|
---|
181 | --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
|
---|
182 | --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
|
---|
183 |
|
---|
184 | text-decoration: $link-decoration;
|
---|
185 | @if $enable-gradients {
|
---|
186 | background-image: none;
|
---|
187 | }
|
---|
188 |
|
---|
189 | &:hover,
|
---|
190 | &:focus-visible {
|
---|
191 | text-decoration: $link-hover-decoration;
|
---|
192 | }
|
---|
193 |
|
---|
194 | &:focus-visible {
|
---|
195 | color: var(--#{$prefix}btn-color);
|
---|
196 | }
|
---|
197 |
|
---|
198 | &:hover {
|
---|
199 | color: var(--#{$prefix}btn-hover-color);
|
---|
200 | }
|
---|
201 |
|
---|
202 | // No need for an active state here
|
---|
203 | }
|
---|
204 |
|
---|
205 |
|
---|
206 | //
|
---|
207 | // Button Sizes
|
---|
208 | //
|
---|
209 |
|
---|
210 | .btn-lg {
|
---|
211 | @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
|
---|
212 | }
|
---|
213 |
|
---|
214 | .btn-sm {
|
---|
215 | @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
|
---|
216 | }
|
---|