1 | @use '../internal' as *;
|
2 |
|
3 |
|
4 | @mixin btn-close-x($height, $width) {
|
5 | background-color: var(--cirrus-bg);
|
6 | content: '';
|
7 | display: block;
|
8 | left: 50%;
|
9 | position: absolute;
|
10 | top: 50%;
|
11 | transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
12 | transform-origin: center center;
|
13 | height: $height;
|
14 | width: $width;
|
15 | }
|
16 |
|
17 | $generate-utility: should-generate-classes($BUTTON);
|
18 |
|
19 | @if $generate-utility {
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | #{$button-selectors} {
|
26 | line-height: 2rem;
|
27 | overflow: hidden;
|
28 | padding: 0.5rem 1rem;
|
29 | border: 1px solid transparent;
|
30 | border-radius: 0.25rem;
|
31 | cursor: pointer;
|
32 | text-align: center;
|
33 | transition: all var(--animation-duration);
|
34 | background-color: rgba(var(--btn-color), var(--bg-opacity));
|
35 | border-color: rgba(var(--btn-border-color), var(--color-opacity));
|
36 | color: rgba(var(--btn-fg), var(--color-opacity));
|
37 | font-size: $font-size-xs;
|
38 | font-weight: inherit;
|
39 | letter-spacing: 0.03rem;
|
40 | text-transform: uppercase;
|
41 | font-family: map-get($map: $font-families, $key: primary);
|
42 | min-width: 2rem;
|
43 | user-select: none;
|
44 | margin-bottom: 1rem;
|
45 | outline: none;
|
46 | --btn-color: #{hex-to-rgb(fill('gray', '000'))};
|
47 | --btn-fg: #{hex-to-rgb(fill('gray', '700'))};
|
48 | --btn-border-color: #{hex-to-rgb(fill('gray', '200'))};
|
49 |
|
50 |
|
51 | &:hover {
|
52 | transition: all var(--animation-duration);
|
53 | --btn-color: #{hex-to-rgb(fill('gray', '100'))};
|
54 | color: rgba(var(--btn-fg), var(--color-opacity));
|
55 | }
|
56 |
|
57 | &:active {
|
58 | transition: var(--animation-duration) ease;
|
59 | }
|
60 |
|
61 | &:focus {
|
62 | outline: none;
|
63 |
|
64 | &:not([disabled]) {
|
65 | box-shadow: var(--btn-shadow);
|
66 | }
|
67 | }
|
68 |
|
69 | &:disabled,
|
70 | &.btn--disabled {
|
71 | cursor: not-allowed;
|
72 | opacity: 0.5;
|
73 |
|
74 | &:active {
|
75 | pointer-events: none;
|
76 | }
|
77 | }
|
78 |
|
79 | &.outline {
|
80 | --btn-color: transparent;
|
81 |
|
82 | &:hover {
|
83 | --btn-color: #{hex-to-rgb(fill('gray', '200'))};
|
84 | }
|
85 | }
|
86 |
|
87 |
|
88 |
|
89 | &.loading:active::after {
|
90 | border-radius: 50%;
|
91 | border-right-color: transparent;
|
92 | border-top-color: transparent;
|
93 | transition: var(--animation-duration) ease;
|
94 | }
|
95 |
|
96 |
|
97 | &.btn-animated {
|
98 | transition: calc(var(--animation-duration) / 2) ease;
|
99 |
|
100 | &:active {
|
101 | transform: scale(0.95);
|
102 | transition: calc(var(--animation-duration) / 2) ease;
|
103 | }
|
104 | }
|
105 |
|
106 |
|
107 | &.btn-close {
|
108 | background-color: rgba(10, 10, 10, 0.2);
|
109 | border: none;
|
110 | border-radius: 290486px;
|
111 | cursor: pointer;
|
112 | display: inline-block;
|
113 | flex-grow: 0;
|
114 | flex-shrink: 0;
|
115 | font-size: 0;
|
116 | height: 20px;
|
117 | outline: 0;
|
118 | position: relative;
|
119 | vertical-align: top;
|
120 | width: 20px;
|
121 | padding: 0;
|
122 | min-width: 20px;
|
123 |
|
124 | &:hover {
|
125 | background-color: rgba(10, 10, 10, 0.3);
|
126 | }
|
127 |
|
128 | &::before {
|
129 | @include btn-close-x(2px, 50%);
|
130 | }
|
131 |
|
132 | &::after {
|
133 | @include btn-close-x(50%, 2px);
|
134 | }
|
135 | }
|
136 |
|
137 |
|
138 |
|
139 | &.btn-transparent {
|
140 | --btn-color: transparent;
|
141 | --btn-fg: #{hex-to-rgb($cirrus-dark)};
|
142 | --btn-border-color: transparent;
|
143 | --btn-shadow: 0 0 0 0.2rem rgba(246, 249, 252, 0.5);
|
144 |
|
145 | &:hover {
|
146 | --bg-opacity: 0.1;
|
147 | --btn-color: 0, 0, 0;
|
148 | }
|
149 | &.outline {
|
150 | --btn-fg: #{hex-to-rgb($cirrus-dark)};
|
151 | }
|
152 | }
|
153 |
|
154 | &.btn-light {
|
155 | --btn-color: #{hex-to-rgb($cirrus-light)};
|
156 | --btn-fg: #{hex-to-rgb($cirrus-dark)};
|
157 | --btn-border-color: #{hex-to-rgb($cirrus-light)};
|
158 | --btn-shadow: 0 0 0 0.2rem #{transparentize($cirrus-light, 0.5)};
|
159 |
|
160 | &:hover {
|
161 | --btn-color: #{hex-to-rgb(darken($cirrus-light, 10%))};
|
162 | }
|
163 | }
|
164 |
|
165 | &.btn-black {
|
166 | --btn-color: 0, 0, 0;
|
167 | --btn-fg: #{hex-to-rgb($cirrus-light)};
|
168 | --btn-border-color: 0, 0, 0;
|
169 | --btn-shadow: 0 0 0 0.2rem #{transparentize($cirrus-dark, 0.5)};
|
170 |
|
171 | &:hover {
|
172 | --btn-color: 0, 0, 0;
|
173 | }
|
174 | }
|
175 |
|
176 | @each $color, $value in $control-themes {
|
177 | &.btn-#{$color} {
|
178 | --btn-color: #{hex-to-rgb(map-get($value, bg))};
|
179 | --btn-fg: #{hex-to-rgb(map-get($value, fg))};
|
180 | --btn-border-color: #{hex-to-rgb(map-get($value, bg))};
|
181 | --btn-shadow: 0 0 0 0.2rem #{transparentize(map-get($value, bg), 0.5)};
|
182 |
|
183 | &:hover {
|
184 | --btn-color: #{hex-to-rgb(darken(map-get($value, bg), 10%))};
|
185 | }
|
186 | &.outline:hover {
|
187 | --btn-color: #{hex-to-rgb(map-get($value, bg))};
|
188 | }
|
189 | }
|
190 | }
|
191 |
|
192 | @each $size, $property-map in $button-sizes {
|
193 | &.btn--#{$size} {
|
194 | @include explode-properties($property-map);
|
195 | }
|
196 | }
|
197 |
|
198 |
|
199 | .fa-wrapper {
|
200 |
|
201 |
|
202 |
|
203 | &.pad-right {
|
204 | margin-right: 0.4rem;
|
205 | }
|
206 |
|
207 | &.pad-left {
|
208 | margin-left: 0.4rem;
|
209 | }
|
210 | }
|
211 |
|
212 |
|
213 | span:first-child {
|
214 | margin-right: 0.2rem;
|
215 | }
|
216 |
|
217 | span:last-child {
|
218 | margin-left: 0.2rem;
|
219 | }
|
220 | }
|
221 |
|
222 |
|
223 | a.btn {
|
224 | display: inline-flex;
|
225 | }
|
226 |
|
227 | [class^='btn-']:not(.btn-container):not(.btn-close),
|
228 | [class*=' btn-']:not(.btn-container):not(.btn-close) {
|
229 | background-color: rgba(var(--btn-color), var(--bg-opacity));
|
230 | border: 1px solid rgba(var(--btn-border-color), var(--color-opacity));
|
231 | color: rgba(var(--btn-fg), var(--color-opacity));
|
232 | transition: all var(--animation-duration);
|
233 |
|
234 | &:hover {
|
235 | background-color: rgba(var(--btn-color), var(--bg-opacity));
|
236 | border-color: rgba(var(--btn-border-color), var(--color-opacity));
|
237 | transition: all var(--animation-duration);
|
238 | }
|
239 |
|
240 |
|
241 | &.outline {
|
242 | background-color: transparent;
|
243 | color: rgba(var(--btn-color), var(--color-opacity));
|
244 |
|
245 | &:hover {
|
246 | background-color: rgba(var(--btn-color), var(--bg-opacity));
|
247 | color: rgba(var(--btn-fg), var(--color-opacity));
|
248 | transition: all var(--animation-duration);
|
249 | }
|
250 |
|
251 | &.btn-transparent {
|
252 | color: #{hex-to-rgb(fill('gray', '700'))} !important;
|
253 | }
|
254 | }
|
255 | }
|
256 |
|
257 |
|
258 | .loading.btn-accent:after {
|
259 | border: 2px solid #fff;
|
260 | border-right-color: transparent;
|
261 | border-top-color: transparent;
|
262 | }
|
263 |
|
264 |
|
265 |
|
266 |
|
267 | .btn-group {
|
268 | display: inline-flex;
|
269 |
|
270 | #{$button-selectors} {
|
271 | flex: 1 0 auto;
|
272 | margin: 0;
|
273 |
|
274 | &:first-child:not(:last-child) {
|
275 |
|
276 | border-top-right-radius: 0;
|
277 | border-bottom-right-radius: 0;
|
278 | }
|
279 |
|
280 | &:last-child:not(:first-child) {
|
281 |
|
282 | border-top-left-radius: 0;
|
283 | border-bottom-left-radius: 0;
|
284 | margin-left: -1px;
|
285 | }
|
286 |
|
287 | &:not(:first-child):not(:last-child) {
|
288 |
|
289 | border-radius: 0;
|
290 | margin-left: -1px;
|
291 | }
|
292 |
|
293 | @include elevate-on-focus();
|
294 | }
|
295 |
|
296 | &.btn-group-fill {
|
297 |
|
298 | display: flex;
|
299 |
|
300 | #{$button-selectors} {
|
301 | flex: 1 0;
|
302 | }
|
303 |
|
304 | &:focus {
|
305 | z-index: 1;
|
306 | }
|
307 | }
|
308 | }
|
309 |
|
310 | @include screen-below($sm) {
|
311 | .btn-group {
|
312 | display: flex;
|
313 | flex-direction: column;
|
314 |
|
315 | #{$button-selectors} {
|
316 | margin-bottom: -1px;
|
317 |
|
318 | &:first-child:not(:last-child) {
|
319 | border-radius: 0.25rem 0.25rem 0 0;
|
320 | }
|
321 |
|
322 | &:not(:first-child):not(:last-child) {
|
323 | margin-left: 0;
|
324 | }
|
325 |
|
326 | &:last-child:not(:first-child) {
|
327 | border-radius: 0 0 0.25rem 0.25rem;
|
328 | margin-left: 0;
|
329 | }
|
330 | }
|
331 | }
|
332 | }
|
333 | }
|