1 | import {
|
2 | component_styles_default
|
3 | } from "./chunk.7IGWJVQF.js";
|
4 | import {
|
5 | r
|
6 | } from "./chunk.WWAD5WF4.js";
|
7 |
|
8 |
|
9 | var button_styles_default = r`
|
10 | ${component_styles_default}
|
11 |
|
12 | :host {
|
13 | display: inline-block;
|
14 | position: relative;
|
15 | width: auto;
|
16 | cursor: pointer;
|
17 | }
|
18 |
|
19 | .button {
|
20 | display: inline-flex;
|
21 | align-items: stretch;
|
22 | justify-content: center;
|
23 | width: 100%;
|
24 | border-style: solid;
|
25 | border-width: var(--sl-input-border-width);
|
26 | font-family: var(--sl-input-font-family);
|
27 | font-weight: var(--sl-font-weight-semibold);
|
28 | text-decoration: none;
|
29 | user-select: none;
|
30 | white-space: nowrap;
|
31 | vertical-align: middle;
|
32 | padding: 0;
|
33 | transition: var(--sl-transition-x-fast) background-color, var(--sl-transition-x-fast) color,
|
34 | var(--sl-transition-x-fast) border, var(--sl-transition-x-fast) box-shadow;
|
35 | cursor: inherit;
|
36 | }
|
37 |
|
38 | .button::-moz-focus-inner {
|
39 | border: 0;
|
40 | }
|
41 |
|
42 | .button:focus {
|
43 | outline: none;
|
44 | }
|
45 |
|
46 | .button:focus-visible {
|
47 | outline: var(--sl-focus-ring);
|
48 | outline-offset: var(--sl-focus-ring-offset);
|
49 | }
|
50 |
|
51 | .button--disabled {
|
52 | opacity: 0.5;
|
53 | cursor: not-allowed;
|
54 | }
|
55 |
|
56 | /* When disabled, prevent mouse events from bubbling up */
|
57 | .button--disabled * {
|
58 | pointer-events: none;
|
59 | }
|
60 |
|
61 | .button__prefix,
|
62 | .button__suffix {
|
63 | flex: 0 0 auto;
|
64 | display: flex;
|
65 | align-items: center;
|
66 | pointer-events: none;
|
67 | }
|
68 |
|
69 | .button__label ::slotted(sl-icon) {
|
70 | vertical-align: -2px;
|
71 | }
|
72 |
|
73 | /*
|
74 | * Standard buttons
|
75 | */
|
76 |
|
77 | /* Default */
|
78 | .button--standard.button--default {
|
79 | background-color: var(--sl-color-neutral-0);
|
80 | border-color: var(--sl-color-neutral-300);
|
81 | color: var(--sl-color-neutral-700);
|
82 | }
|
83 |
|
84 | .button--standard.button--default:hover:not(.button--disabled) {
|
85 | background-color: var(--sl-color-primary-50);
|
86 | border-color: var(--sl-color-primary-300);
|
87 | color: var(--sl-color-primary-700);
|
88 | }
|
89 |
|
90 | .button--standard.button--default:active:not(.button--disabled) {
|
91 | background-color: var(--sl-color-primary-100);
|
92 | border-color: var(--sl-color-primary-400);
|
93 | color: var(--sl-color-primary-700);
|
94 | }
|
95 |
|
96 | /* Primary */
|
97 | .button--standard.button--primary {
|
98 | background-color: var(--sl-color-primary-600);
|
99 | border-color: var(--sl-color-primary-600);
|
100 | color: var(--sl-color-neutral-0);
|
101 | }
|
102 |
|
103 | .button--standard.button--primary:hover:not(.button--disabled) {
|
104 | background-color: var(--sl-color-primary-500);
|
105 | border-color: var(--sl-color-primary-500);
|
106 | color: var(--sl-color-neutral-0);
|
107 | }
|
108 |
|
109 | .button--standard.button--primary:active:not(.button--disabled) {
|
110 | background-color: var(--sl-color-primary-600);
|
111 | border-color: var(--sl-color-primary-600);
|
112 | color: var(--sl-color-neutral-0);
|
113 | }
|
114 |
|
115 | /* Success */
|
116 | .button--standard.button--success {
|
117 | background-color: var(--sl-color-success-600);
|
118 | border-color: var(--sl-color-success-600);
|
119 | color: var(--sl-color-neutral-0);
|
120 | }
|
121 |
|
122 | .button--standard.button--success:hover:not(.button--disabled) {
|
123 | background-color: var(--sl-color-success-500);
|
124 | border-color: var(--sl-color-success-500);
|
125 | color: var(--sl-color-neutral-0);
|
126 | }
|
127 |
|
128 | .button--standard.button--success:active:not(.button--disabled) {
|
129 | background-color: var(--sl-color-success-600);
|
130 | border-color: var(--sl-color-success-600);
|
131 | color: var(--sl-color-neutral-0);
|
132 | }
|
133 |
|
134 | /* Neutral */
|
135 | .button--standard.button--neutral {
|
136 | background-color: var(--sl-color-neutral-600);
|
137 | border-color: var(--sl-color-neutral-600);
|
138 | color: var(--sl-color-neutral-0);
|
139 | }
|
140 |
|
141 | .button--standard.button--neutral:hover:not(.button--disabled) {
|
142 | background-color: var(--sl-color-neutral-500);
|
143 | border-color: var(--sl-color-neutral-500);
|
144 | color: var(--sl-color-neutral-0);
|
145 | }
|
146 |
|
147 | .button--standard.button--neutral:active:not(.button--disabled) {
|
148 | background-color: var(--sl-color-neutral-600);
|
149 | border-color: var(--sl-color-neutral-600);
|
150 | color: var(--sl-color-neutral-0);
|
151 | }
|
152 |
|
153 | /* Warning */
|
154 | .button--standard.button--warning {
|
155 | background-color: var(--sl-color-warning-600);
|
156 | border-color: var(--sl-color-warning-600);
|
157 | color: var(--sl-color-neutral-0);
|
158 | }
|
159 | .button--standard.button--warning:hover:not(.button--disabled) {
|
160 | background-color: var(--sl-color-warning-500);
|
161 | border-color: var(--sl-color-warning-500);
|
162 | color: var(--sl-color-neutral-0);
|
163 | }
|
164 |
|
165 | .button--standard.button--warning:active:not(.button--disabled) {
|
166 | background-color: var(--sl-color-warning-600);
|
167 | border-color: var(--sl-color-warning-600);
|
168 | color: var(--sl-color-neutral-0);
|
169 | }
|
170 |
|
171 | /* Danger */
|
172 | .button--standard.button--danger {
|
173 | background-color: var(--sl-color-danger-600);
|
174 | border-color: var(--sl-color-danger-600);
|
175 | color: var(--sl-color-neutral-0);
|
176 | }
|
177 |
|
178 | .button--standard.button--danger:hover:not(.button--disabled) {
|
179 | background-color: var(--sl-color-danger-500);
|
180 | border-color: var(--sl-color-danger-500);
|
181 | color: var(--sl-color-neutral-0);
|
182 | }
|
183 |
|
184 | .button--standard.button--danger:active:not(.button--disabled) {
|
185 | background-color: var(--sl-color-danger-600);
|
186 | border-color: var(--sl-color-danger-600);
|
187 | color: var(--sl-color-neutral-0);
|
188 | }
|
189 |
|
190 | /*
|
191 | * Outline buttons
|
192 | */
|
193 |
|
194 | .button--outline {
|
195 | background: none;
|
196 | border: solid 1px;
|
197 | }
|
198 |
|
199 | /* Default */
|
200 | .button--outline.button--default {
|
201 | border-color: var(--sl-color-neutral-300);
|
202 | color: var(--sl-color-neutral-700);
|
203 | }
|
204 |
|
205 | .button--outline.button--default:hover:not(.button--disabled),
|
206 | .button--outline.button--default.button--checked:not(.button--disabled) {
|
207 | border-color: var(--sl-color-primary-600);
|
208 | background-color: var(--sl-color-primary-600);
|
209 | color: var(--sl-color-neutral-0);
|
210 | }
|
211 |
|
212 | .button--outline.button--default:active:not(.button--disabled) {
|
213 | border-color: var(--sl-color-primary-700);
|
214 | background-color: var(--sl-color-primary-700);
|
215 | color: var(--sl-color-neutral-0);
|
216 | }
|
217 |
|
218 | /* Primary */
|
219 | .button--outline.button--primary {
|
220 | border-color: var(--sl-color-primary-600);
|
221 | color: var(--sl-color-primary-600);
|
222 | }
|
223 |
|
224 | .button--outline.button--primary:hover:not(.button--disabled),
|
225 | .button--outline.button--primary.button--checked:not(.button--disabled) {
|
226 | background-color: var(--sl-color-primary-600);
|
227 | color: var(--sl-color-neutral-0);
|
228 | }
|
229 |
|
230 | .button--outline.button--primary:active:not(.button--disabled) {
|
231 | border-color: var(--sl-color-primary-700);
|
232 | background-color: var(--sl-color-primary-700);
|
233 | color: var(--sl-color-neutral-0);
|
234 | }
|
235 |
|
236 | /* Success */
|
237 | .button--outline.button--success {
|
238 | border-color: var(--sl-color-success-600);
|
239 | color: var(--sl-color-success-600);
|
240 | }
|
241 |
|
242 | .button--outline.button--success:hover:not(.button--disabled),
|
243 | .button--outline.button--success.button--checked:not(.button--disabled) {
|
244 | background-color: var(--sl-color-success-600);
|
245 | color: var(--sl-color-neutral-0);
|
246 | }
|
247 |
|
248 | .button--outline.button--success:active:not(.button--disabled) {
|
249 | border-color: var(--sl-color-success-700);
|
250 | background-color: var(--sl-color-success-700);
|
251 | color: var(--sl-color-neutral-0);
|
252 | }
|
253 |
|
254 | /* Neutral */
|
255 | .button--outline.button--neutral {
|
256 | border-color: var(--sl-color-neutral-600);
|
257 | color: var(--sl-color-neutral-600);
|
258 | }
|
259 |
|
260 | .button--outline.button--neutral:hover:not(.button--disabled),
|
261 | .button--outline.button--neutral.button--checked:not(.button--disabled) {
|
262 | background-color: var(--sl-color-neutral-600);
|
263 | color: var(--sl-color-neutral-0);
|
264 | }
|
265 |
|
266 | .button--outline.button--neutral:active:not(.button--disabled) {
|
267 | border-color: var(--sl-color-neutral-700);
|
268 | background-color: var(--sl-color-neutral-700);
|
269 | color: var(--sl-color-neutral-0);
|
270 | }
|
271 |
|
272 | /* Warning */
|
273 | .button--outline.button--warning {
|
274 | border-color: var(--sl-color-warning-600);
|
275 | color: var(--sl-color-warning-600);
|
276 | }
|
277 |
|
278 | .button--outline.button--warning:hover:not(.button--disabled),
|
279 | .button--outline.button--warning.button--checked:not(.button--disabled) {
|
280 | background-color: var(--sl-color-warning-600);
|
281 | color: var(--sl-color-neutral-0);
|
282 | }
|
283 |
|
284 | .button--outline.button--warning:active:not(.button--disabled) {
|
285 | border-color: var(--sl-color-warning-700);
|
286 | background-color: var(--sl-color-warning-700);
|
287 | color: var(--sl-color-neutral-0);
|
288 | }
|
289 |
|
290 | /* Danger */
|
291 | .button--outline.button--danger {
|
292 | border-color: var(--sl-color-danger-600);
|
293 | color: var(--sl-color-danger-600);
|
294 | }
|
295 |
|
296 | .button--outline.button--danger:hover:not(.button--disabled),
|
297 | .button--outline.button--danger.button--checked:not(.button--disabled) {
|
298 | background-color: var(--sl-color-danger-600);
|
299 | color: var(--sl-color-neutral-0);
|
300 | }
|
301 |
|
302 | .button--outline.button--danger:active:not(.button--disabled) {
|
303 | border-color: var(--sl-color-danger-700);
|
304 | background-color: var(--sl-color-danger-700);
|
305 | color: var(--sl-color-neutral-0);
|
306 | }
|
307 |
|
308 | /*
|
309 | * Text buttons
|
310 | */
|
311 |
|
312 | .button--text {
|
313 | background-color: transparent;
|
314 | border-color: transparent;
|
315 | color: var(--sl-color-primary-600);
|
316 | }
|
317 |
|
318 | .button--text:hover:not(.button--disabled) {
|
319 | background-color: transparent;
|
320 | border-color: transparent;
|
321 | color: var(--sl-color-primary-500);
|
322 | }
|
323 |
|
324 | .button--text:focus-visible:not(.button--disabled) {
|
325 | background-color: transparent;
|
326 | border-color: transparent;
|
327 | color: var(--sl-color-primary-500);
|
328 | }
|
329 |
|
330 | .button--text:active:not(.button--disabled) {
|
331 | background-color: transparent;
|
332 | border-color: transparent;
|
333 | color: var(--sl-color-primary-700);
|
334 | }
|
335 |
|
336 | /*
|
337 | * Size modifiers
|
338 | */
|
339 |
|
340 | .button--small {
|
341 | font-size: var(--sl-button-font-size-small);
|
342 | height: var(--sl-input-height-small);
|
343 | line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
|
344 | border-radius: var(--sl-input-border-radius-small);
|
345 | }
|
346 |
|
347 | .button--medium {
|
348 | font-size: var(--sl-button-font-size-medium);
|
349 | height: var(--sl-input-height-medium);
|
350 | line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
|
351 | border-radius: var(--sl-input-border-radius-medium);
|
352 | }
|
353 |
|
354 | .button--large {
|
355 | font-size: var(--sl-button-font-size-large);
|
356 | height: var(--sl-input-height-large);
|
357 | line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
|
358 | border-radius: var(--sl-input-border-radius-large);
|
359 | }
|
360 |
|
361 | /*
|
362 | * Pill modifier
|
363 | */
|
364 |
|
365 | .button--pill.button--small {
|
366 | border-radius: var(--sl-input-height-small);
|
367 | }
|
368 |
|
369 | .button--pill.button--medium {
|
370 | border-radius: var(--sl-input-height-medium);
|
371 | }
|
372 |
|
373 | .button--pill.button--large {
|
374 | border-radius: var(--sl-input-height-large);
|
375 | }
|
376 |
|
377 | /*
|
378 | * Circle modifier
|
379 | */
|
380 |
|
381 | .button--circle {
|
382 | padding-left: 0;
|
383 | padding-right: 0;
|
384 | }
|
385 |
|
386 | .button--circle.button--small {
|
387 | width: var(--sl-input-height-small);
|
388 | border-radius: 50%;
|
389 | }
|
390 |
|
391 | .button--circle.button--medium {
|
392 | width: var(--sl-input-height-medium);
|
393 | border-radius: 50%;
|
394 | }
|
395 |
|
396 | .button--circle.button--large {
|
397 | width: var(--sl-input-height-large);
|
398 | border-radius: 50%;
|
399 | }
|
400 |
|
401 | .button--circle .button__prefix,
|
402 | .button--circle .button__suffix,
|
403 | .button--circle .button__caret {
|
404 | display: none;
|
405 | }
|
406 |
|
407 | /*
|
408 | * Caret modifier
|
409 | */
|
410 |
|
411 | .button--caret .button__suffix {
|
412 | display: none;
|
413 | }
|
414 |
|
415 | .button--caret .button__caret {
|
416 | display: flex;
|
417 | align-items: center;
|
418 | }
|
419 |
|
420 | .button--caret .button__caret svg {
|
421 | width: 1em;
|
422 | height: 1em;
|
423 | }
|
424 |
|
425 | /*
|
426 | * Loading modifier
|
427 | */
|
428 |
|
429 | .button--loading {
|
430 | position: relative;
|
431 | cursor: wait;
|
432 | }
|
433 |
|
434 | .button--loading .button__prefix,
|
435 | .button--loading .button__label,
|
436 | .button--loading .button__suffix,
|
437 | .button--loading .button__caret {
|
438 | visibility: hidden;
|
439 | }
|
440 |
|
441 | .button--loading sl-spinner {
|
442 | --indicator-color: currentColor;
|
443 | position: absolute;
|
444 | font-size: 1em;
|
445 | height: 1em;
|
446 | width: 1em;
|
447 | top: calc(50% - 0.5em);
|
448 | left: calc(50% - 0.5em);
|
449 | }
|
450 |
|
451 | /*
|
452 | * Badges
|
453 | */
|
454 |
|
455 | .button ::slotted(sl-badge) {
|
456 | position: absolute;
|
457 | top: 0;
|
458 | right: 0;
|
459 | transform: translateY(-50%) translateX(50%);
|
460 | pointer-events: none;
|
461 | }
|
462 |
|
463 | .button--rtl ::slotted(sl-badge) {
|
464 | right: auto;
|
465 | left: 0;
|
466 | transform: translateY(-50%) translateX(-50%);
|
467 | }
|
468 |
|
469 | /*
|
470 | * Button spacing
|
471 | */
|
472 |
|
473 | .button--has-label.button--small .button__label {
|
474 | padding: 0 var(--sl-spacing-small);
|
475 | }
|
476 |
|
477 | .button--has-label.button--medium .button__label {
|
478 | padding: 0 var(--sl-spacing-medium);
|
479 | }
|
480 |
|
481 | .button--has-label.button--large .button__label {
|
482 | padding: 0 var(--sl-spacing-large);
|
483 | }
|
484 |
|
485 | .button--has-prefix.button--small {
|
486 | padding-inline-start: var(--sl-spacing-x-small);
|
487 | }
|
488 |
|
489 | .button--has-prefix.button--small .button__label {
|
490 | padding-inline-start: var(--sl-spacing-x-small);
|
491 | }
|
492 |
|
493 | .button--has-prefix.button--medium {
|
494 | padding-inline-start: var(--sl-spacing-small);
|
495 | }
|
496 |
|
497 | .button--has-prefix.button--medium .button__label {
|
498 | padding-inline-start: var(--sl-spacing-small);
|
499 | }
|
500 |
|
501 | .button--has-prefix.button--large {
|
502 | padding-inline-start: var(--sl-spacing-small);
|
503 | }
|
504 |
|
505 | .button--has-prefix.button--large .button__label {
|
506 | padding-inline-start: var(--sl-spacing-small);
|
507 | }
|
508 |
|
509 | .button--has-suffix.button--small,
|
510 | .button--caret.button--small {
|
511 | padding-inline-end: var(--sl-spacing-x-small);
|
512 | }
|
513 |
|
514 | .button--has-suffix.button--small .button__label,
|
515 | .button--caret.button--small .button__label {
|
516 | padding-inline-end: var(--sl-spacing-x-small);
|
517 | }
|
518 |
|
519 | .button--has-suffix.button--medium,
|
520 | .button--caret.button--medium {
|
521 | padding-inline-end: var(--sl-spacing-small);
|
522 | }
|
523 |
|
524 | .button--has-suffix.button--medium .button__label,
|
525 | .button--caret.button--medium .button__label {
|
526 | padding-inline-end: var(--sl-spacing-small);
|
527 | }
|
528 |
|
529 | .button--has-suffix.button--large,
|
530 | .button--caret.button--large {
|
531 | padding-inline-end: var(--sl-spacing-small);
|
532 | }
|
533 |
|
534 | .button--has-suffix.button--large .button__label,
|
535 | .button--caret.button--large .button__label {
|
536 | padding-inline-end: var(--sl-spacing-small);
|
537 | }
|
538 |
|
539 | /*
|
540 | * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
|
541 | * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
|
542 | * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
|
543 | * buttons and we style them here instead.
|
544 | */
|
545 |
|
546 | :host(.sl-button-group__button--first:not(.sl-button-group__button--last)) .button {
|
547 | border-start-end-radius: 0;
|
548 | border-end-end-radius: 0;
|
549 | }
|
550 |
|
551 | :host(.sl-button-group__button--inner) .button {
|
552 | border-radius: 0;
|
553 | }
|
554 |
|
555 | :host(.sl-button-group__button--last:not(.sl-button-group__button--first)) .button {
|
556 | border-start-start-radius: 0;
|
557 | border-end-start-radius: 0;
|
558 | }
|
559 |
|
560 | /* All except the first */
|
561 | :host(.sl-button-group__button:not(.sl-button-group__button--first)) {
|
562 | margin-inline-start: calc(-1 * var(--sl-input-border-width));
|
563 | }
|
564 |
|
565 | /* Add a visual separator between solid buttons */
|
566 | :host(.sl-button-group__button:not(.sl-button-group__button--focus, .sl-button-group__button--first, .sl-button-group__button--radio, [variant='default']):not(:hover, :active, :focus))
|
567 | .button:after {
|
568 | content: '';
|
569 | position: absolute;
|
570 | top: 0;
|
571 | inset-inline-start: 0;
|
572 | bottom: 0;
|
573 | border-left: solid 1px rgb(128 128 128 / 33%);
|
574 | mix-blend-mode: multiply;
|
575 | }
|
576 |
|
577 | /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
|
578 | :host(.sl-button-group__button--hover) {
|
579 | z-index: 1;
|
580 | }
|
581 |
|
582 | :host(.sl-button-group__button--focus),
|
583 | :host(.sl-button-group__button[checked]) {
|
584 | z-index: 2;
|
585 | }
|
586 | `;
|
587 |
|
588 | export {
|
589 | button_styles_default
|
590 | };
|