@quidgest/ui 0.14.21 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/dist/ui.css +206 -215
  2. package/dist/ui.esm.js +2022 -1992
  3. package/dist/ui.js +8 -8
  4. package/dist/ui.min.css +1 -1
  5. package/dist/ui.min.js +652 -651
  6. package/dist/ui.scss +201 -169
  7. package/esm/components/QBadge/QBadge.d.ts.map +1 -1
  8. package/esm/components/QBadge/QBadge.vue.js +32 -33
  9. package/esm/components/QBadge/types.d.ts +5 -5
  10. package/esm/components/QBadge/types.d.ts.map +1 -1
  11. package/esm/components/QButton/QButton.d.ts +3 -1
  12. package/esm/components/QButton/QButton.d.ts.map +1 -1
  13. package/esm/components/QButton/QButton.vue.js +56 -61
  14. package/esm/components/QButton/index.d.ts +9 -3
  15. package/esm/components/QButton/index.d.ts.map +1 -1
  16. package/esm/components/QButton/types.d.ts +22 -11
  17. package/esm/components/QButton/types.d.ts.map +1 -1
  18. package/esm/components/QButtonGroup/QButtonGroup.d.ts.map +1 -1
  19. package/esm/components/QButtonGroup/QButtonGroup.vue.js +5 -6
  20. package/esm/components/QButtonToggle/QButtonToggle.d.ts.map +1 -1
  21. package/esm/components/QButtonToggle/QButtonToggle.vue.js +7 -8
  22. package/esm/components/QCollapsible/QCollapsible.vue.js +13 -13
  23. package/esm/components/QCombobox/QCombobox.d.ts +24 -12
  24. package/esm/components/QCombobox/QCombobox.d.ts.map +1 -1
  25. package/esm/components/QCombobox/QCombobox.vue.js +19 -18
  26. package/esm/components/QCombobox/index.d.ts +12 -6
  27. package/esm/components/QCombobox/index.d.ts.map +1 -1
  28. package/esm/components/QDialog/QDialog.vue.js +10 -10
  29. package/esm/components/QDialog/types.js +3 -3
  30. package/esm/components/QIcon/QIcon.vue.js +14 -14
  31. package/esm/components/QMeter/QMeter.vue.js +19 -19
  32. package/esm/components/QPropertyList/QPropertyListGroup.d.ts.map +1 -1
  33. package/esm/components/QPropertyList/QPropertyListGroup.vue.js +15 -16
  34. package/esm/components/QSelect/QSelect.d.ts.map +1 -1
  35. package/esm/components/QSelect/QSelect.vue.js +29 -28
  36. package/esm/components/__internal__/QClearButton/QClearButton.d.ts.map +1 -1
  37. package/esm/components/__internal__/QClearButton/QClearButton.vue.js +12 -11
  38. package/esm/composables/useColor/index.d.ts +33 -0
  39. package/esm/composables/useColor/index.d.ts.map +1 -0
  40. package/esm/composables/useColor/index.js +39 -0
  41. package/esm/composables/useColor/types.d.ts +36 -0
  42. package/esm/composables/useColor/types.d.ts.map +1 -0
  43. package/esm/templates/theme.d.ts.map +1 -1
  44. package/esm/templates/theme.js +13 -3
  45. package/esm/utils/color.d.ts +5 -0
  46. package/esm/utils/color.d.ts.map +1 -1
  47. package/package.json +1 -1
  48. package/esm/composables/useColorStyle/index.d.ts +0 -11
  49. package/esm/composables/useColorStyle/index.d.ts.map +0 -1
  50. package/esm/composables/useColorStyle/index.js +0 -33
  51. package/esm/composables/useColorStyle/types.d.ts +0 -36
  52. package/esm/composables/useColorStyle/types.d.ts.map +0 -1
package/dist/ui.css CHANGED
@@ -310,14 +310,14 @@ body *::-webkit-scrollbar-track {
310
310
  }
311
311
  }
312
312
 
313
- .q-clear-btn.q-btn {
313
+ .q-clear-btn.q-button {
314
314
  padding: 0.1rem;
315
315
  opacity: 0.5;
316
316
  }
317
- .q-clear-btn.q-btn:hover {
317
+ .q-clear-btn.q-button:hover {
318
318
  cursor: inherit;
319
319
  }
320
- .q-clear-btn.q-btn:hover, .q-clear-btn.q-btn:focus {
320
+ .q-clear-btn.q-button:hover, .q-clear-btn.q-button:focus {
321
321
  opacity: 1;
322
322
  }
323
323
 
@@ -336,7 +336,6 @@ body *::-webkit-scrollbar-track {
336
336
  font-size: 0.75rem;
337
337
  line-height: 1;
338
338
  position: relative;
339
- color: var(--q-badge-text-color);
340
339
  transition-property: color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke;
341
340
  transition-duration: 0.15s;
342
341
  }
@@ -347,7 +346,6 @@ body *::-webkit-scrollbar-track {
347
346
  width: calc(100% + 2px);
348
347
  height: calc(100% + 2px);
349
348
  border-radius: inherit;
350
- background-color: var(--q-badge-color);
351
349
  opacity: 0.1;
352
350
  }
353
351
  .q-badge__content {
@@ -356,50 +354,38 @@ body *::-webkit-scrollbar-track {
356
354
  gap: 0.25em;
357
355
  z-index: 1;
358
356
  }
359
- .q-badge__remove .q-btn__content {
360
- font-size: inherit;
361
- }
362
- .q-badge__remove.q-btn:not(:disabled) {
357
+ .q-badge__remove.q-button:not(:disabled) {
363
358
  padding: 0;
364
- border-radius: 9999px;
365
- color: inherit;
366
- }
367
- .q-badge__remove.q-btn:not(:disabled):hover {
368
- background-color: var(--q-badge-color);
369
359
  }
370
360
  .q-badge .q-icon {
371
361
  color: currentcolor;
372
362
  }
373
- .q-badge--large {
374
- font-size: 0.9rem;
375
- }
376
- .q-badge--pill {
377
- border-radius: 9999px;
378
- }
379
- .q-badge--tonal.q-badge--clickable:hover .q-badge__underlay {
380
- opacity: 1;
381
- }
382
- .q-badge--bold .q-badge__underlay {
383
- opacity: 1;
363
+ .q-badge--bold {
364
+ background-color: var(--q-badge-main-color);
365
+ border-color: var(--q-badge-main-color);
366
+ color: var(--q-badge-on-main-color);
384
367
  }
385
368
  .q-badge--outlined {
386
- border-color: currentcolor;
369
+ background-color: transparent;
370
+ border-color: var(--q-badge-main-color);
371
+ color: var(--q-badge-main-color);
387
372
  }
388
- .q-badge--outlined .q-badge__underlay {
389
- opacity: 0;
373
+ .q-badge--tonal {
374
+ color: var(--q-badge-main-color);
390
375
  }
391
- .q-badge--outlined.q-badge--clickable:hover .q-badge__underlay {
392
- background-color: var(--q-badge-color);
393
- opacity: 1;
376
+ .q-badge--tonal .q-badge__underlay {
377
+ background-color: var(--q-badge-main-color);
378
+ }
379
+ .q-badge--pill {
380
+ border-radius: 9999px;
394
381
  }
395
382
  .q-badge--clickable {
396
383
  cursor: pointer;
397
384
  }
398
385
  .q-badge--clickable:hover {
399
- color: var(--q-badge-text-hover-color, var(--q-badge-text-color));
400
- }
401
- .q-badge--clickable:hover .q-badge__underlay {
402
- background-color: var(--q-badge-hover-color, var(--q-badge-color));
386
+ color: var(--q-badge-on-hover-color, var(--q-badge-on-main-color));
387
+ background-color: var(--q-badge-hover-color);
388
+ border-color: var(--q-badge-hover-color);
403
389
  }
404
390
  .q-badge--clickable:focus {
405
391
  outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
@@ -408,100 +394,55 @@ body *::-webkit-scrollbar-track {
408
394
  outline: 0;
409
395
  }
410
396
  .q-badge--primary {
411
- --q-badge-color: var(--q-theme-primary);
412
- }
413
- .q-badge--primary.q-badge--bold.q-badge--clickable:hover {
414
- --q-badge-color: var(--q-theme-primary-dark);
397
+ --q-badge-main-color: var(--q-theme-primary);
398
+ --q-badge-on-main-color: var(--q-theme-on-primary);
399
+ --q-badge-hover-color: var(--q-theme-primary-dark);
400
+ --q-badge-on-hover-color: var(--q-theme-on-primary);
415
401
  }
416
- .q-badge--primary.q-badge--tonal, .q-badge--primary.q-badge--outlined {
417
- --q-badge-text-color: var(--q-theme-primary);
402
+ .q-badge--secondary {
403
+ --q-badge-main-color: var(--q-theme-secondary);
404
+ --q-badge-on-main-color: var(--q-theme-on-secondary);
405
+ --q-badge-hover-color: var(--q-theme-secondary-dark);
406
+ --q-badge-on-hover-color: var(--q-theme-on-secondary);
418
407
  }
419
- .q-badge--primary.q-badge--bold, .q-badge.q-badge--clickable:hover {
420
- --q-badge-text-color: var(--q-theme-on-primary);
421
- }
422
- .q-badge--primary.q-badge--bold .q-badge__remove.q-btn:not(:disabled):hover, .q-badge.q-badge--clickable:hover .q-badge__remove.q-btn:not(:disabled):hover {
423
- background-color: var(--q-badge-text-color);
424
- color: var(--q-badge-color);
408
+ .q-badge--highlight {
409
+ --q-badge-main-color: var(--q-theme-highlight);
410
+ --q-badge-on-main-color: var(--q-theme-on-highlight);
411
+ --q-badge-hover-color: var(--q-theme-highlight-dark);
412
+ --q-badge-on-hover-color: var(--q-theme-on-highlight);
425
413
  }
426
414
  .q-badge--info {
427
- --q-badge-color: var(--q-theme-info);
428
- }
429
- .q-badge--info.q-badge--bold.q-badge--clickable:hover {
430
- --q-badge-color: var(--q-theme-info-dark);
431
- }
432
- .q-badge--info.q-badge--tonal, .q-badge--info.q-badge--outlined {
433
- --q-badge-text-color: var(--q-theme-info);
434
- }
435
- .q-badge--info.q-badge--bold, .q-badge.q-badge--clickable:hover {
436
- --q-badge-text-color: var(--q-theme-on-info);
437
- }
438
- .q-badge--info.q-badge--bold .q-badge__remove.q-btn:not(:disabled):hover, .q-badge.q-badge--clickable:hover .q-badge__remove.q-btn:not(:disabled):hover {
439
- background-color: var(--q-badge-text-color);
440
- color: var(--q-badge-color);
415
+ --q-badge-main-color: var(--q-theme-info);
416
+ --q-badge-on-main-color: var(--q-theme-on-info);
417
+ --q-badge-hover-color: var(--q-theme-info-dark);
418
+ --q-badge-on-hover-color: var(--q-theme-on-info);
441
419
  }
442
420
  .q-badge--success {
443
- --q-badge-color: var(--q-theme-success);
444
- }
445
- .q-badge--success.q-badge--bold.q-badge--clickable:hover {
446
- --q-badge-color: var(--q-theme-success-dark);
447
- }
448
- .q-badge--success.q-badge--tonal, .q-badge--success.q-badge--outlined {
449
- --q-badge-text-color: var(--q-theme-success);
450
- }
451
- .q-badge--success.q-badge--bold, .q-badge.q-badge--clickable:hover {
452
- --q-badge-text-color: var(--q-theme-on-success);
453
- }
454
- .q-badge--success.q-badge--bold .q-badge__remove.q-btn:not(:disabled):hover, .q-badge.q-badge--clickable:hover .q-badge__remove.q-btn:not(:disabled):hover {
455
- background-color: var(--q-badge-text-color);
456
- color: var(--q-badge-color);
421
+ --q-badge-main-color: var(--q-theme-success);
422
+ --q-badge-on-main-color: var(--q-theme-on-success);
423
+ --q-badge-hover-color: var(--q-theme-success-dark);
424
+ --q-badge-on-hover-color: var(--q-theme-on-success);
457
425
  }
458
426
  .q-badge--warning {
459
- --q-badge-color: var(--q-theme-warning);
460
- }
461
- .q-badge--warning.q-badge--bold.q-badge--clickable:hover {
462
- --q-badge-color: var(--q-theme-warning-dark);
463
- }
464
- .q-badge--warning.q-badge--tonal, .q-badge--warning.q-badge--outlined {
465
- --q-badge-text-color: var(--q-theme-warning);
466
- }
467
- .q-badge--warning.q-badge--bold, .q-badge.q-badge--clickable:hover {
468
- --q-badge-text-color: var(--q-theme-on-warning);
469
- }
470
- .q-badge--warning.q-badge--bold .q-badge__remove.q-btn:not(:disabled):hover, .q-badge.q-badge--clickable:hover .q-badge__remove.q-btn:not(:disabled):hover {
471
- background-color: var(--q-badge-text-color);
472
- color: var(--q-badge-color);
427
+ --q-badge-main-color: var(--q-theme-warning);
428
+ --q-badge-on-main-color: var(--q-theme-on-warning);
429
+ --q-badge-hover-color: var(--q-theme-warning-dark);
430
+ --q-badge-on-hover-color: var(--q-theme-on-warning);
473
431
  }
474
432
  .q-badge--danger {
475
- --q-badge-color: var(--q-theme-danger);
476
- }
477
- .q-badge--danger.q-badge--bold.q-badge--clickable:hover {
478
- --q-badge-color: var(--q-theme-danger-dark);
479
- }
480
- .q-badge--danger.q-badge--tonal, .q-badge--danger.q-badge--outlined {
481
- --q-badge-text-color: var(--q-theme-danger);
482
- }
483
- .q-badge--danger.q-badge--bold, .q-badge.q-badge--clickable:hover {
484
- --q-badge-text-color: var(--q-theme-on-danger);
485
- }
486
- .q-badge--danger.q-badge--bold .q-badge__remove.q-btn:not(:disabled):hover, .q-badge.q-badge--clickable:hover .q-badge__remove.q-btn:not(:disabled):hover {
487
- background-color: var(--q-badge-text-color);
488
- color: var(--q-badge-color);
489
- }
490
- .q-badge--highlight {
491
- --q-badge-color: var(--q-theme-highlight);
492
- }
493
- .q-badge--highlight.q-badge--bold.q-badge--clickable:hover {
494
- --q-badge-color: var(--q-theme-highlight-dark);
495
- }
496
- .q-badge--highlight.q-badge--tonal, .q-badge--highlight.q-badge--outlined {
497
- --q-badge-text-color: var(--q-theme-highlight);
433
+ --q-badge-main-color: var(--q-theme-danger);
434
+ --q-badge-on-main-color: var(--q-theme-on-danger);
435
+ --q-badge-hover-color: var(--q-theme-danger-dark);
436
+ --q-badge-on-hover-color: var(--q-theme-on-danger);
498
437
  }
499
- .q-badge--highlight.q-badge--bold, .q-badge.q-badge--clickable:hover {
500
- --q-badge-text-color: var(--q-theme-on-highlight);
438
+ .q-badge--neutral {
439
+ --q-badge-main-color: var(--q-theme-neutral);
440
+ --q-badge-on-main-color: var(--q-theme-on-neutral);
441
+ --q-badge-hover-color: var(--q-theme-neutral-dark);
442
+ --q-badge-on-hover-color: var(--q-theme-on-neutral);
501
443
  }
502
- .q-badge--highlight.q-badge--bold .q-badge__remove.q-btn:not(:disabled):hover, .q-badge.q-badge--clickable:hover .q-badge__remove.q-btn:not(:disabled):hover {
503
- background-color: var(--q-badge-text-color);
504
- color: var(--q-badge-color);
444
+ .q-badge--large {
445
+ font-size: 0.9rem;
505
446
  }
506
447
 
507
448
  .q-badge-indicator {
@@ -575,161 +516,211 @@ body *::-webkit-scrollbar-track {
575
516
  transform-origin: 100% 100%;
576
517
  }
577
518
 
578
- .q-btn {
579
- --box-shadow-tint: 0 0 0;
580
- position: relative;
581
- display: flex;
582
- flex-direction: row;
519
+ .q-button {
520
+ --q-button-main-color: var(--q-theme-primary);
521
+ --q-button-on-main-color: var(--q-theme-on-primary);
522
+ --q-button-hover-color: var(--q-theme-primary-dark);
523
+ --q-button-on-hover-color: var(--q-theme-on-primary);
524
+ display: inline-flex;
525
+ -webkit-user-select: none;
526
+ -moz-user-select: none;
527
+ user-select: none;
583
528
  align-items: center;
584
- padding: 0.4rem;
529
+ justify-content: center;
530
+ overflow: hidden;
531
+ position: relative;
585
532
  border-width: 1px;
586
- background-color: transparent;
587
- user-select: none;
588
- -webkit-user-select: none;
589
- -moz-user-select: none;
533
+ border-color: transparent;
534
+ padding: 0.4rem;
535
+ line-height: 1;
536
+ gap: 0.25rem;
590
537
  border-radius: var(--border-radius);
538
+ outline: none;
539
+ margin: 0;
540
+ text-decoration: none;
541
+ white-space: nowrap;
591
542
  transition-property: color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke;
592
543
  transition-duration: 0.15s;
593
544
  }
594
- .q-btn:disabled {
545
+ .q-button__content {
546
+ display: inline-flex;
547
+ align-items: center;
548
+ justify-content: center;
549
+ gap: 0.25em;
550
+ width: 100%;
551
+ z-index: 1;
552
+ }
553
+ .q-button:disabled {
595
554
  opacity: 0.6;
596
555
  }
597
- .q-btn:focus {
556
+ .q-button:focus {
598
557
  outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
599
- z-index: 3;
558
+ z-index: 3; /* This fixes usage in QInputGroup */
600
559
  }
601
- .q-btn:focus:not(:focus-visible) {
560
+ .q-button:focus:not(:focus-visible) {
602
561
  outline: 0;
603
562
  }
604
- .q-btn:hover:not(:disabled) {
563
+ .q-button:hover:not(:disabled) {
605
564
  cursor: pointer;
606
565
  }
607
- .q-btn__content {
608
- position: relative;
609
- display: flex;
610
- flex-direction: row;
566
+ .q-button .q-icon {
567
+ color: currentcolor;
568
+ }
569
+ .q-button__spinner {
570
+ position: absolute;
571
+ top: 0;
572
+ left: 0;
573
+ width: 100%;
574
+ height: 100%;
575
+ display: inline-flex;
611
576
  align-items: center;
612
577
  justify-content: center;
613
- font-size: 0.9rem;
614
- white-space: nowrap;
615
- gap: 0.25rem;
616
- pointer-events: none;
617
- line-height: 1;
618
578
  }
619
- .q-btn .q-icon {
579
+ .q-button__spinner .q-spinner-loader {
580
+ font-size: 1em;
620
581
  color: currentcolor;
621
582
  }
622
- .q-btn .q-spinner-loader {
623
- color: currentcolor;
624
- }
625
- .q-btn--primary {
626
- --box-shadow-tint: var(--q-theme-primary-dark-rgb);
627
- background-color: var(--q-theme-primary);
628
- border-color: var(--q-theme-primary);
629
- color: var(--q-theme-on-primary);
583
+ .q-button--bold {
584
+ background-color: var(--q-button-main-color);
585
+ border-color: var(--q-button-main-color);
586
+ color: var(--q-button-on-main-color);
630
587
  }
631
- .q-btn--primary:hover:not(:disabled) {
632
- background-color: var(--q-theme-primary-dark);
633
- border-color: var(--q-theme-primary-dark);
634
- color: var(--q-theme-background);
588
+ .q-button--bold:hover:not(:disabled) {
589
+ background-color: var(--q-button-hover-color);
590
+ color: var(--q-button-on-hover-color);
591
+ border-color: var(--q-button-hover-color);
635
592
  }
636
- .q-btn--secondary {
637
- --box-shadow-tint: var(--q-theme-primary-dark-rgb);
638
- border-color: currentcolor;
639
- color: var(--q-theme-primary);
593
+ .q-button--outlined {
594
+ background-color: transparent;
595
+ border-color: var(--q-button-main-color);
596
+ color: var(--q-button-main-color);
640
597
  }
641
- .q-btn--secondary:hover:not(:disabled) {
642
- background-color: var(--q-theme-primary-dark);
643
- border-color: var(--q-theme-primary-dark);
644
- color: var(--q-theme-background);
598
+ .q-button--outlined:hover:not(:disabled) {
599
+ background-color: var(--q-button-hover-color);
600
+ color: var(--q-button-on-hover-color);
601
+ border-color: var(--q-button-hover-color);
645
602
  }
646
- .q-btn--tertiary {
647
- --box-shadow-tint: var(--q-theme-primary-dark-rgb);
603
+ .q-button--text {
648
604
  background-color: transparent;
649
605
  border-color: transparent;
650
- color: var(--q-theme-primary);
651
- }
652
- .q-btn--tertiary:hover:not(:disabled), .q-btn--tertiary:focus:not(:disabled) {
653
- color: var(--q-theme-primary-dark);
654
- }
655
- .q-btn--danger {
656
- --box-shadow-tint: var(--q-theme-danger-dark-rgb);
657
- background-color: var(--q-theme-danger);
658
- border-color: var(--q-theme-danger);
659
- color: var(--q-theme-on-danger);
660
- }
661
- .q-btn--danger:hover:not(:disabled) {
662
- background-color: var(--q-theme-danger-dark);
663
- border-color: var(--q-theme-danger-dark);
664
- color: var(--q-theme-background);
606
+ color: var(--q-button-main-color);
665
607
  }
666
- .q-btn--plain {
667
- color: var(--q-theme-on-background);
608
+ .q-button--text:hover:not(:disabled) {
609
+ color: var(--q-button-hover-color);
668
610
  }
669
- .q-btn--plain:hover:not(:disabled) {
670
- background-color: rgb(var(--q-theme-neutral-rgb)/10%);
611
+ .q-button--pill {
612
+ border-radius: 9999px;
671
613
  }
672
- .q-btn--active {
614
+ .q-button--primary {
615
+ --q-button-main-color: var(--q-theme-primary);
616
+ --q-button-on-main-color: var(--q-theme-on-primary);
617
+ --q-button-hover-color: var(--q-theme-primary-dark);
618
+ --q-button-on-hover-color: var(--q-theme-on-primary);
619
+ }
620
+ .q-button--secondary {
621
+ --q-button-main-color: var(--q-theme-secondary);
622
+ --q-button-on-main-color: var(--q-theme-on-secondary);
623
+ --q-button-hover-color: var(--q-theme-secondary-dark);
624
+ --q-button-on-hover-color: var(--q-theme-on-secondary);
625
+ }
626
+ .q-button--highlight {
627
+ --q-button-main-color: var(--q-theme-highlight);
628
+ --q-button-on-main-color: var(--q-theme-on-highlight);
629
+ --q-button-hover-color: var(--q-theme-highlight-dark);
630
+ --q-button-on-hover-color: var(--q-theme-on-highlight);
631
+ }
632
+ .q-button--info {
633
+ --q-button-main-color: var(--q-theme-info);
634
+ --q-button-on-main-color: var(--q-theme-on-info);
635
+ --q-button-hover-color: var(--q-theme-info-dark);
636
+ --q-button-on-hover-color: var(--q-theme-on-info);
637
+ }
638
+ .q-button--success {
639
+ --q-button-main-color: var(--q-theme-success);
640
+ --q-button-on-main-color: var(--q-theme-on-success);
641
+ --q-button-hover-color: var(--q-theme-success-dark);
642
+ --q-button-on-hover-color: var(--q-theme-on-success);
643
+ }
644
+ .q-button--warning {
645
+ --q-button-main-color: var(--q-theme-warning);
646
+ --q-button-on-main-color: var(--q-theme-on-warning);
647
+ --q-button-hover-color: var(--q-theme-warning-dark);
648
+ --q-button-on-hover-color: var(--q-theme-on-warning);
649
+ }
650
+ .q-button--danger {
651
+ --q-button-main-color: var(--q-theme-danger);
652
+ --q-button-on-main-color: var(--q-theme-on-danger);
653
+ --q-button-hover-color: var(--q-theme-danger-dark);
654
+ --q-button-on-hover-color: var(--q-theme-on-danger);
655
+ }
656
+ .q-button--neutral {
657
+ --q-button-main-color: var(--q-theme-neutral);
658
+ --q-button-on-main-color: var(--q-theme-on-neutral);
659
+ --q-button-hover-color: var(--q-theme-neutral-dark);
660
+ --q-button-on-hover-color: var(--q-theme-on-neutral);
661
+ }
662
+ .q-button--background {
663
+ --q-button-main-color: var(--q-theme-background);
664
+ --q-button-on-main-color: var(--q-theme-on-background);
665
+ --q-button-hover-color: var(--q-theme-primary-dark);
666
+ --q-button-on-hover-color: var(--q-theme-on-primary);
667
+ }
668
+ .q-button--active {
673
669
  z-index: 2;
674
670
  color: var(--q-theme-primary-dark);
675
671
  border-color: var(--q-theme-primary);
676
672
  background-color: rgb(var(--q-theme-primary-light-rgb)/50%);
677
673
  }
678
- .q-btn--loading:hover {
674
+ .q-button--loading:hover {
679
675
  cursor: not-allowed;
680
676
  }
681
- .q-btn--loading span {
677
+ .q-button--loading span {
682
678
  visibility: hidden;
683
679
  }
684
- .q-btn--small {
685
- padding: 0.25rem;
680
+ .q-button--small {
681
+ font-size: 0.8em;
686
682
  }
687
- .q-btn--small span {
688
- font-size: 0.75rem;
683
+ .q-button--borderless {
684
+ border-color: transparent;
689
685
  }
690
- .q-btn--borderless {
691
- border-color: transparent !important;
686
+ .q-button--elevated {
687
+ box-shadow: 0 3px 1px -2px rgb(var(--q-theme-on-background-rgb)/20%), 0 2px 2px 0 rgb(var(--q-theme-on-background-rgb)/14%), 0 1px 5px 0 rgb(var(--q-theme-on-background-rgb)/12%);
692
688
  }
693
- .q-btn--elevated {
694
- box-shadow: 0 2px 4px -1px rgb(var(--box-shadow-tint)/20%), 0 4px 5px 0 rgb(var(--box-shadow-tint)/14%), 0 1px 10px 0 rgb(var(--box-shadow-tint)/12%);
689
+ .q-button--icon-end .q-button__content {
690
+ flex-direction: row-reverse;
695
691
  }
696
- .q-btn--block {
697
- display: block;
698
- width: 100%;
692
+ .q-button--icon-top .q-button__content {
693
+ flex-direction: column;
699
694
  }
700
- .q-btn--block + .q-btn--block {
701
- margin-top: 0.5rem;
695
+ .q-button--icon-bottom .q-button__content {
696
+ flex-direction: column-reverse;
702
697
  }
703
- .q-btn__spinner {
704
- position: absolute;
705
- left: 50%;
706
- transform: translateX(-50%);
698
+ .q-button--block {
699
+ min-width: 100%;
707
700
  }
708
701
 
709
- .q-btn-group {
710
- --box-shadow-tint: 0 0 0;
702
+ .q-button-group {
711
703
  position: relative;
712
704
  display: inline-flex;
713
705
  border-radius: var(--border-radius);
714
706
  }
715
- .q-btn-group--elevated {
716
- --box-shadow-tint: var(--q-theme-primary-rgb);
717
- box-shadow: 0 2px 4px -1px rgb(var(--box-shadow-tint)/20%), 0 4px 5px 0 rgb(var(--box-shadow-tint)/14%), 0 1px 10px 0 rgb(var(--box-shadow-tint)/12%);
707
+ .q-button-group--elevated {
708
+ box-shadow: 0 3px 1px -2px rgb(var(--q-theme-on-background-rgb)/20%), 0 2px 2px 0 rgb(var(--q-theme-on-background-rgb)/14%), 0 1px 5px 0 rgb(var(--q-theme-on-background-rgb)/12%);
718
709
  }
719
- .q-btn-group > .q-btn {
710
+ .q-button-group > .q-button {
720
711
  position: relative;
721
712
  flex: 0 1 auto;
722
713
  }
723
- .q-btn-group > .q-btn:not(:last-child) {
714
+ .q-button-group > .q-button:not(:last-child) {
724
715
  border-top-right-radius: 0;
725
716
  border-bottom-right-radius: 0;
726
717
  }
727
- .q-btn-group > .q-btn:not(:first-child) {
718
+ .q-button-group > .q-button:not(:first-child) {
728
719
  border-top-left-radius: 0;
729
720
  border-bottom-left-radius: 0;
730
721
  margin-left: -1px;
731
722
  }
732
- .q-btn-group > .q-btn:hover {
723
+ .q-button-group > .q-button:hover {
733
724
  z-index: 3;
734
725
  }
735
726
 
@@ -1009,7 +1000,7 @@ body *::-webkit-scrollbar-track {
1009
1000
  margin: 0;
1010
1001
  padding: 0;
1011
1002
  }
1012
- .q-collapsible__btn .q-btn__content {
1003
+ .q-collapsible__btn .q-button__content {
1013
1004
  gap: 0;
1014
1005
  padding: 0.2rem;
1015
1006
  display: flex;
@@ -1017,7 +1008,7 @@ body *::-webkit-scrollbar-track {
1017
1008
  align-items: start;
1018
1009
  letter-spacing: 0.02rem;
1019
1010
  }
1020
- .q-collapsible__btn .q-btn__content h4 {
1011
+ .q-collapsible__btn .q-button__content h4 {
1021
1012
  margin: 0;
1022
1013
  text-transform: uppercase;
1023
1014
  }
@@ -2497,7 +2488,7 @@ body *::-webkit-scrollbar-track {
2497
2488
  font-size: 1rem;
2498
2489
  }
2499
2490
 
2500
- .q-dialog__header .q-btn {
2491
+ .q-dialog__header .q-button {
2501
2492
  align-items: center;
2502
2493
  }
2503
2494