qt-ui-kit 1.0.69 → 1.0.71
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.
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -0
- package/dist/index.mjs.map +1 -1
- package/dist/style.css +268 -0
- package/package.json +1 -1
package/dist/style.css
CHANGED
|
@@ -5,9 +5,12 @@
|
|
|
5
5
|
:root, :host {
|
|
6
6
|
--font-sans: var(--font-geist-sans);
|
|
7
7
|
--font-mono: var(--font-geist-mono);
|
|
8
|
+
--color-indigo-600: oklch(51.1% 0.262 276.966);
|
|
8
9
|
--color-gray-100: oklch(96.7% 0.003 264.542);
|
|
10
|
+
--color-gray-200: oklch(92.8% 0.006 264.531);
|
|
9
11
|
--color-gray-400: oklch(70.7% 0.022 261.325);
|
|
10
12
|
--color-gray-700: oklch(37.3% 0.034 259.733);
|
|
13
|
+
--color-gray-800: oklch(27.8% 0.033 256.848);
|
|
11
14
|
--color-gray-900: oklch(21% 0.034 264.665);
|
|
12
15
|
--color-neutral-900: oklch(20.5% 0 0);
|
|
13
16
|
--color-black: #000;
|
|
@@ -19,7 +22,9 @@
|
|
|
19
22
|
--text-sm--line-height: calc(1.25 / 0.875);
|
|
20
23
|
--font-weight-normal: 400;
|
|
21
24
|
--font-weight-medium: 500;
|
|
25
|
+
--font-weight-semibold: 600;
|
|
22
26
|
--font-weight-bold: 700;
|
|
27
|
+
--tracking-wide: 0.025em;
|
|
23
28
|
--radius-md: 0.375rem;
|
|
24
29
|
--radius-lg: 0.5rem;
|
|
25
30
|
--radius-xl: 0.75rem;
|
|
@@ -35,10 +40,12 @@
|
|
|
35
40
|
--color-qtneutral-500: #CDCDCD;
|
|
36
41
|
--color-qtneutral-400: #EAE9F0;
|
|
37
42
|
--color-qtneutral-700: #82818E;
|
|
43
|
+
--color-qtneutral-800: #46454A;
|
|
38
44
|
--color-qtneutral-900: #1D1D1F;
|
|
39
45
|
--color-qtpurple-300: #D8D7FF;
|
|
40
46
|
--color-qtpurple-200: #EFEEFF;
|
|
41
47
|
--color-qtpurple-500: #6558FD;
|
|
48
|
+
--color-qtpurple-800: #4D4273;
|
|
42
49
|
--color-qtgreen-300: #D2F8B6;
|
|
43
50
|
--color-qtgreen-200: #E8FE99;
|
|
44
51
|
--color-qtgreen-50: #F1FEE8;
|
|
@@ -207,6 +214,42 @@
|
|
|
207
214
|
}
|
|
208
215
|
}
|
|
209
216
|
@layer utilities {
|
|
217
|
+
.absolute {
|
|
218
|
+
position: absolute;
|
|
219
|
+
}
|
|
220
|
+
.relative {
|
|
221
|
+
position: relative;
|
|
222
|
+
}
|
|
223
|
+
.top-0 {
|
|
224
|
+
top: calc(var(--spacing) * 0);
|
|
225
|
+
}
|
|
226
|
+
.top-1\/2 {
|
|
227
|
+
top: calc(1/2 * 100%);
|
|
228
|
+
}
|
|
229
|
+
.top-3 {
|
|
230
|
+
top: calc(var(--spacing) * 3);
|
|
231
|
+
}
|
|
232
|
+
.right-0 {
|
|
233
|
+
right: calc(var(--spacing) * 0);
|
|
234
|
+
}
|
|
235
|
+
.right-\[-6px\] {
|
|
236
|
+
right: -6px;
|
|
237
|
+
}
|
|
238
|
+
.bottom-0 {
|
|
239
|
+
bottom: calc(var(--spacing) * 0);
|
|
240
|
+
}
|
|
241
|
+
.left-1\/2 {
|
|
242
|
+
left: calc(1/2 * 100%);
|
|
243
|
+
}
|
|
244
|
+
.left-\[-6px\] {
|
|
245
|
+
left: -6px;
|
|
246
|
+
}
|
|
247
|
+
.z-0 {
|
|
248
|
+
z-index: 0;
|
|
249
|
+
}
|
|
250
|
+
.z-10 {
|
|
251
|
+
z-index: 10;
|
|
252
|
+
}
|
|
210
253
|
.col-span-2 {
|
|
211
254
|
grid-column: span 2 / span 2;
|
|
212
255
|
}
|
|
@@ -261,6 +304,15 @@
|
|
|
261
304
|
.grid {
|
|
262
305
|
display: grid;
|
|
263
306
|
}
|
|
307
|
+
.inline-block {
|
|
308
|
+
display: inline-block;
|
|
309
|
+
}
|
|
310
|
+
.h-3\.5 {
|
|
311
|
+
height: calc(var(--spacing) * 3.5);
|
|
312
|
+
}
|
|
313
|
+
.h-4 {
|
|
314
|
+
height: calc(var(--spacing) * 4);
|
|
315
|
+
}
|
|
264
316
|
.h-\[17px\] {
|
|
265
317
|
height: 17px;
|
|
266
318
|
}
|
|
@@ -298,6 +350,15 @@
|
|
|
298
350
|
.max-h-full {
|
|
299
351
|
max-height: 100%;
|
|
300
352
|
}
|
|
353
|
+
.w-3\.5 {
|
|
354
|
+
width: calc(var(--spacing) * 3.5);
|
|
355
|
+
}
|
|
356
|
+
.w-4 {
|
|
357
|
+
width: calc(var(--spacing) * 4);
|
|
358
|
+
}
|
|
359
|
+
.w-48 {
|
|
360
|
+
width: calc(var(--spacing) * 48);
|
|
361
|
+
}
|
|
301
362
|
.w-\[24px\] {
|
|
302
363
|
width: 24px;
|
|
303
364
|
}
|
|
@@ -351,9 +412,27 @@
|
|
|
351
412
|
.grow {
|
|
352
413
|
flex-grow: 1;
|
|
353
414
|
}
|
|
415
|
+
.-translate-x-1\/2 {
|
|
416
|
+
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
|
417
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
418
|
+
}
|
|
419
|
+
.-translate-y-1\/2 {
|
|
420
|
+
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
|
421
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
422
|
+
}
|
|
423
|
+
.translate-y-1\/2 {
|
|
424
|
+
--tw-translate-y: calc(1/2 * 100%);
|
|
425
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
426
|
+
}
|
|
427
|
+
.rotate-45 {
|
|
428
|
+
rotate: 45deg;
|
|
429
|
+
}
|
|
354
430
|
.transform {
|
|
355
431
|
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
|
356
432
|
}
|
|
433
|
+
.cursor-pointer {
|
|
434
|
+
cursor: pointer;
|
|
435
|
+
}
|
|
357
436
|
.grid-cols-1 {
|
|
358
437
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
359
438
|
}
|
|
@@ -417,6 +496,13 @@
|
|
|
417
496
|
.gap-\[40px\] {
|
|
418
497
|
gap: 40px;
|
|
419
498
|
}
|
|
499
|
+
.space-y-2 {
|
|
500
|
+
:where(& > :not(:last-child)) {
|
|
501
|
+
--tw-space-y-reverse: 0;
|
|
502
|
+
margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
|
|
503
|
+
margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
|
|
504
|
+
}
|
|
505
|
+
}
|
|
420
506
|
.space-y-3 {
|
|
421
507
|
:where(& > :not(:last-child)) {
|
|
422
508
|
--tw-space-y-reverse: 0;
|
|
@@ -485,6 +571,10 @@
|
|
|
485
571
|
border-style: var(--tw-border-style);
|
|
486
572
|
border-width: 3px;
|
|
487
573
|
}
|
|
574
|
+
.border-t {
|
|
575
|
+
border-top-style: var(--tw-border-style);
|
|
576
|
+
border-top-width: 1px;
|
|
577
|
+
}
|
|
488
578
|
.border-t-\[2px\] {
|
|
489
579
|
border-top-style: var(--tw-border-style);
|
|
490
580
|
border-top-width: 2px;
|
|
@@ -496,6 +586,9 @@
|
|
|
496
586
|
.border-black {
|
|
497
587
|
border-color: var(--color-black);
|
|
498
588
|
}
|
|
589
|
+
.border-gray-200 {
|
|
590
|
+
border-color: var(--color-gray-200);
|
|
591
|
+
}
|
|
499
592
|
.border-neutral-6 {
|
|
500
593
|
border-color: var(--color-neutral-6);
|
|
501
594
|
}
|
|
@@ -526,6 +619,9 @@
|
|
|
526
619
|
.border-transparent {
|
|
527
620
|
border-color: transparent;
|
|
528
621
|
}
|
|
622
|
+
.bg-black {
|
|
623
|
+
background-color: var(--color-black);
|
|
624
|
+
}
|
|
529
625
|
.bg-gray-100 {
|
|
530
626
|
background-color: var(--color-gray-100);
|
|
531
627
|
}
|
|
@@ -556,6 +652,9 @@
|
|
|
556
652
|
.bg-qtpurple-500 {
|
|
557
653
|
background-color: var(--color-qtpurple-500);
|
|
558
654
|
}
|
|
655
|
+
.bg-qtpurple-800 {
|
|
656
|
+
background-color: var(--color-qtpurple-800);
|
|
657
|
+
}
|
|
559
658
|
.bg-qtred-50 {
|
|
560
659
|
background-color: var(--color-qtred-50);
|
|
561
660
|
}
|
|
@@ -592,12 +691,18 @@
|
|
|
592
691
|
.py-2 {
|
|
593
692
|
padding-block: calc(var(--spacing) * 2);
|
|
594
693
|
}
|
|
694
|
+
.py-3 {
|
|
695
|
+
padding-block: calc(var(--spacing) * 3);
|
|
696
|
+
}
|
|
595
697
|
.py-4 {
|
|
596
698
|
padding-block: calc(var(--spacing) * 4);
|
|
597
699
|
}
|
|
598
700
|
.py-12 {
|
|
599
701
|
padding-block: calc(var(--spacing) * 12);
|
|
600
702
|
}
|
|
703
|
+
.pt-2 {
|
|
704
|
+
padding-top: calc(var(--spacing) * 2);
|
|
705
|
+
}
|
|
601
706
|
.pr-2 {
|
|
602
707
|
padding-right: calc(var(--spacing) * 2);
|
|
603
708
|
}
|
|
@@ -650,6 +755,14 @@
|
|
|
650
755
|
--tw-font-weight: var(--font-weight-normal);
|
|
651
756
|
font-weight: var(--font-weight-normal);
|
|
652
757
|
}
|
|
758
|
+
.font-semibold {
|
|
759
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
760
|
+
font-weight: var(--font-weight-semibold);
|
|
761
|
+
}
|
|
762
|
+
.tracking-wide {
|
|
763
|
+
--tw-tracking: var(--tracking-wide);
|
|
764
|
+
letter-spacing: var(--tracking-wide);
|
|
765
|
+
}
|
|
653
766
|
.break-words {
|
|
654
767
|
overflow-wrap: break-word;
|
|
655
768
|
}
|
|
@@ -665,9 +778,15 @@
|
|
|
665
778
|
.text-gray-700 {
|
|
666
779
|
color: var(--color-gray-700);
|
|
667
780
|
}
|
|
781
|
+
.text-gray-800 {
|
|
782
|
+
color: var(--color-gray-800);
|
|
783
|
+
}
|
|
668
784
|
.text-gray-900 {
|
|
669
785
|
color: var(--color-gray-900);
|
|
670
786
|
}
|
|
787
|
+
.text-indigo-600 {
|
|
788
|
+
color: var(--color-indigo-600);
|
|
789
|
+
}
|
|
671
790
|
.text-neutral-1 {
|
|
672
791
|
color: var(--color-neutral-1);
|
|
673
792
|
}
|
|
@@ -683,6 +802,9 @@
|
|
|
683
802
|
.text-qtneutral-700 {
|
|
684
803
|
color: var(--color-qtneutral-700);
|
|
685
804
|
}
|
|
805
|
+
.text-qtneutral-800 {
|
|
806
|
+
color: var(--color-qtneutral-800);
|
|
807
|
+
}
|
|
686
808
|
.text-qtneutral-900 {
|
|
687
809
|
color: var(--color-qtneutral-900);
|
|
688
810
|
}
|
|
@@ -692,6 +814,14 @@
|
|
|
692
814
|
.text-white {
|
|
693
815
|
color: var(--color-white);
|
|
694
816
|
}
|
|
817
|
+
.shadow-lg {
|
|
818
|
+
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
819
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
820
|
+
}
|
|
821
|
+
.shadow-md {
|
|
822
|
+
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
823
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
824
|
+
}
|
|
695
825
|
.grayscale {
|
|
696
826
|
--tw-grayscale: grayscale(100%);
|
|
697
827
|
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
@@ -749,6 +879,13 @@
|
|
|
749
879
|
}
|
|
750
880
|
}
|
|
751
881
|
}
|
|
882
|
+
.hover\:text-qtpurple-500 {
|
|
883
|
+
&:hover {
|
|
884
|
+
@media (hover: hover) {
|
|
885
|
+
color: var(--color-qtpurple-500);
|
|
886
|
+
}
|
|
887
|
+
}
|
|
888
|
+
}
|
|
752
889
|
.hover\:grayscale-0 {
|
|
753
890
|
&:hover {
|
|
754
891
|
@media (hover: hover) {
|
|
@@ -762,6 +899,14 @@
|
|
|
762
899
|
:root {
|
|
763
900
|
--font-sans: 'Inter', sans-serif;
|
|
764
901
|
}
|
|
902
|
+
.label-2 {
|
|
903
|
+
font-family: Inter;
|
|
904
|
+
font-weight: 500;
|
|
905
|
+
font-style: Medium;
|
|
906
|
+
font-size: 14px;
|
|
907
|
+
line-height: 120%;
|
|
908
|
+
letter-spacing: 0%;
|
|
909
|
+
}
|
|
765
910
|
.label-3 {
|
|
766
911
|
font-family: Inter;
|
|
767
912
|
font-weight: 500;
|
|
@@ -770,6 +915,15 @@
|
|
|
770
915
|
letter-spacing: 0%;
|
|
771
916
|
text-align: right;
|
|
772
917
|
}
|
|
918
|
+
.label-2-bold {
|
|
919
|
+
font-family: Inter;
|
|
920
|
+
font-weight: 700;
|
|
921
|
+
font-style: Bold;
|
|
922
|
+
font-size: 14px;
|
|
923
|
+
line-height: 120%;
|
|
924
|
+
letter-spacing: 0%;
|
|
925
|
+
color: #901212;
|
|
926
|
+
}
|
|
773
927
|
.label-3-bold {
|
|
774
928
|
font-family: Inter;
|
|
775
929
|
font-weight: 500;
|
|
@@ -777,6 +931,18 @@
|
|
|
777
931
|
line-height: 120%;
|
|
778
932
|
letter-spacing: 0%;
|
|
779
933
|
}
|
|
934
|
+
.caption-bold {
|
|
935
|
+
font-family: Inter;
|
|
936
|
+
font-weight: 600;
|
|
937
|
+
font-style: Semi Bold;
|
|
938
|
+
font-size: 12px;
|
|
939
|
+
line-height: 130%;
|
|
940
|
+
letter-spacing: 0%;
|
|
941
|
+
text-align: center;
|
|
942
|
+
}
|
|
943
|
+
.tooltip-shadow {
|
|
944
|
+
box-shadow: 0px 4px 4px 0px #00000040;
|
|
945
|
+
}
|
|
780
946
|
.body {
|
|
781
947
|
font-family: Inter;
|
|
782
948
|
font-weight: 400;
|
|
@@ -879,6 +1045,21 @@
|
|
|
879
1045
|
.no-defaults {
|
|
880
1046
|
all: unset;
|
|
881
1047
|
}
|
|
1048
|
+
@property --tw-translate-x {
|
|
1049
|
+
syntax: "*";
|
|
1050
|
+
inherits: false;
|
|
1051
|
+
initial-value: 0;
|
|
1052
|
+
}
|
|
1053
|
+
@property --tw-translate-y {
|
|
1054
|
+
syntax: "*";
|
|
1055
|
+
inherits: false;
|
|
1056
|
+
initial-value: 0;
|
|
1057
|
+
}
|
|
1058
|
+
@property --tw-translate-z {
|
|
1059
|
+
syntax: "*";
|
|
1060
|
+
inherits: false;
|
|
1061
|
+
initial-value: 0;
|
|
1062
|
+
}
|
|
882
1063
|
@property --tw-rotate-x {
|
|
883
1064
|
syntax: "*";
|
|
884
1065
|
inherits: false;
|
|
@@ -917,6 +1098,75 @@
|
|
|
917
1098
|
syntax: "*";
|
|
918
1099
|
inherits: false;
|
|
919
1100
|
}
|
|
1101
|
+
@property --tw-tracking {
|
|
1102
|
+
syntax: "*";
|
|
1103
|
+
inherits: false;
|
|
1104
|
+
}
|
|
1105
|
+
@property --tw-shadow {
|
|
1106
|
+
syntax: "*";
|
|
1107
|
+
inherits: false;
|
|
1108
|
+
initial-value: 0 0 #0000;
|
|
1109
|
+
}
|
|
1110
|
+
@property --tw-shadow-color {
|
|
1111
|
+
syntax: "*";
|
|
1112
|
+
inherits: false;
|
|
1113
|
+
}
|
|
1114
|
+
@property --tw-shadow-alpha {
|
|
1115
|
+
syntax: "<percentage>";
|
|
1116
|
+
inherits: false;
|
|
1117
|
+
initial-value: 100%;
|
|
1118
|
+
}
|
|
1119
|
+
@property --tw-inset-shadow {
|
|
1120
|
+
syntax: "*";
|
|
1121
|
+
inherits: false;
|
|
1122
|
+
initial-value: 0 0 #0000;
|
|
1123
|
+
}
|
|
1124
|
+
@property --tw-inset-shadow-color {
|
|
1125
|
+
syntax: "*";
|
|
1126
|
+
inherits: false;
|
|
1127
|
+
}
|
|
1128
|
+
@property --tw-inset-shadow-alpha {
|
|
1129
|
+
syntax: "<percentage>";
|
|
1130
|
+
inherits: false;
|
|
1131
|
+
initial-value: 100%;
|
|
1132
|
+
}
|
|
1133
|
+
@property --tw-ring-color {
|
|
1134
|
+
syntax: "*";
|
|
1135
|
+
inherits: false;
|
|
1136
|
+
}
|
|
1137
|
+
@property --tw-ring-shadow {
|
|
1138
|
+
syntax: "*";
|
|
1139
|
+
inherits: false;
|
|
1140
|
+
initial-value: 0 0 #0000;
|
|
1141
|
+
}
|
|
1142
|
+
@property --tw-inset-ring-color {
|
|
1143
|
+
syntax: "*";
|
|
1144
|
+
inherits: false;
|
|
1145
|
+
}
|
|
1146
|
+
@property --tw-inset-ring-shadow {
|
|
1147
|
+
syntax: "*";
|
|
1148
|
+
inherits: false;
|
|
1149
|
+
initial-value: 0 0 #0000;
|
|
1150
|
+
}
|
|
1151
|
+
@property --tw-ring-inset {
|
|
1152
|
+
syntax: "*";
|
|
1153
|
+
inherits: false;
|
|
1154
|
+
}
|
|
1155
|
+
@property --tw-ring-offset-width {
|
|
1156
|
+
syntax: "<length>";
|
|
1157
|
+
inherits: false;
|
|
1158
|
+
initial-value: 0px;
|
|
1159
|
+
}
|
|
1160
|
+
@property --tw-ring-offset-color {
|
|
1161
|
+
syntax: "*";
|
|
1162
|
+
inherits: false;
|
|
1163
|
+
initial-value: #fff;
|
|
1164
|
+
}
|
|
1165
|
+
@property --tw-ring-offset-shadow {
|
|
1166
|
+
syntax: "*";
|
|
1167
|
+
inherits: false;
|
|
1168
|
+
initial-value: 0 0 #0000;
|
|
1169
|
+
}
|
|
920
1170
|
@property --tw-blur {
|
|
921
1171
|
syntax: "*";
|
|
922
1172
|
inherits: false;
|
|
@@ -973,6 +1223,9 @@
|
|
|
973
1223
|
@layer properties {
|
|
974
1224
|
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
|
975
1225
|
*, ::before, ::after, ::backdrop {
|
|
1226
|
+
--tw-translate-x: 0;
|
|
1227
|
+
--tw-translate-y: 0;
|
|
1228
|
+
--tw-translate-z: 0;
|
|
976
1229
|
--tw-rotate-x: initial;
|
|
977
1230
|
--tw-rotate-y: initial;
|
|
978
1231
|
--tw-rotate-z: initial;
|
|
@@ -982,6 +1235,21 @@
|
|
|
982
1235
|
--tw-border-style: solid;
|
|
983
1236
|
--tw-leading: initial;
|
|
984
1237
|
--tw-font-weight: initial;
|
|
1238
|
+
--tw-tracking: initial;
|
|
1239
|
+
--tw-shadow: 0 0 #0000;
|
|
1240
|
+
--tw-shadow-color: initial;
|
|
1241
|
+
--tw-shadow-alpha: 100%;
|
|
1242
|
+
--tw-inset-shadow: 0 0 #0000;
|
|
1243
|
+
--tw-inset-shadow-color: initial;
|
|
1244
|
+
--tw-inset-shadow-alpha: 100%;
|
|
1245
|
+
--tw-ring-color: initial;
|
|
1246
|
+
--tw-ring-shadow: 0 0 #0000;
|
|
1247
|
+
--tw-inset-ring-color: initial;
|
|
1248
|
+
--tw-inset-ring-shadow: 0 0 #0000;
|
|
1249
|
+
--tw-ring-inset: initial;
|
|
1250
|
+
--tw-ring-offset-width: 0px;
|
|
1251
|
+
--tw-ring-offset-color: #fff;
|
|
1252
|
+
--tw-ring-offset-shadow: 0 0 #0000;
|
|
985
1253
|
--tw-blur: initial;
|
|
986
1254
|
--tw-brightness: initial;
|
|
987
1255
|
--tw-contrast: initial;
|