@niagads/ui 0.2.4-alpha.0 → 1.0.0-alpha.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 (45) hide show
  1. package/README.md +20 -20
  2. package/package.json +3 -3
  3. package/dist/Alert.js +0 -2
  4. package/dist/Alert.js.map +0 -1
  5. package/dist/Button.js +0 -2
  6. package/dist/Button.js.map +0 -1
  7. package/dist/Card.js +0 -2
  8. package/dist/Card.js.map +0 -1
  9. package/dist/Checkbox.js +0 -2
  10. package/dist/Checkbox.js.map +0 -1
  11. package/dist/Common/dist/utils.js +0 -2
  12. package/dist/Common/dist/utils.js.map +0 -1
  13. package/dist/Navigation.js +0 -2
  14. package/dist/Navigation.js.map +0 -1
  15. package/dist/RadioButton.js +0 -2
  16. package/dist/RadioButton.js.map +0 -1
  17. package/dist/Select.js +0 -2
  18. package/dist/Select.js.map +0 -1
  19. package/dist/Skeleton.js +0 -2
  20. package/dist/Skeleton.js.map +0 -1
  21. package/dist/TextInput.js +0 -2
  22. package/dist/TextInput.js.map +0 -1
  23. package/dist/client/Dropdown.js +0 -2
  24. package/dist/client/Dropdown.js.map +0 -1
  25. package/dist/client/HelpIcon.js +0 -2
  26. package/dist/client/HelpIcon.js.map +0 -1
  27. package/dist/client/Slider.js +0 -2
  28. package/dist/client/Slider.js.map +0 -1
  29. package/dist/client/Tabs.js +0 -2
  30. package/dist/client/Tabs.js.map +0 -1
  31. package/dist/client/Tooltip.js +0 -2
  32. package/dist/client/Tooltip.js.map +0 -1
  33. package/dist/client/index.d.ts +0 -63
  34. package/dist/client/index.js +0 -2
  35. package/dist/client/index.js.map +0 -1
  36. package/dist/index.d.ts +0 -100
  37. package/dist/index.js +0 -2
  38. package/dist/index.js.map +0 -1
  39. package/dist/layouts/RootLayout.js +0 -2
  40. package/dist/layouts/RootLayout.js.map +0 -1
  41. package/dist/layouts/index.d.ts +0 -28
  42. package/dist/layouts/index.js +0 -2
  43. package/dist/layouts/index.js.map +0 -1
  44. package/dist/niagads-ui.css +0 -1532
  45. package/dist/niagads-ui.css.map +0 -1
@@ -1,1532 +0,0 @@
1
- /*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */
2
- @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
3
- @layer theme, base, components, utilities;
4
- @layer theme {
5
- :root, :host {
6
- --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
7
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
- "Courier New", monospace;
10
- --color-red-50: oklch(0.971 0.013 17.38);
11
- --color-red-300: oklch(0.808 0.114 19.571);
12
- --color-red-400: oklch(0.704 0.191 22.216);
13
- --color-red-800: oklch(0.444 0.177 26.899);
14
- --color-red-950: oklch(0.258 0.092 26.042);
15
- --color-yellow-50: oklch(0.987 0.026 102.212);
16
- --color-yellow-300: oklch(0.905 0.182 98.111);
17
- --color-yellow-800: oklch(0.476 0.114 61.907);
18
- --color-green-50: oklch(0.982 0.018 155.826);
19
- --color-green-300: oklch(0.871 0.15 154.449);
20
- --color-green-400: oklch(0.792 0.209 151.711);
21
- --color-green-800: oklch(0.448 0.119 151.328);
22
- --color-blue-50: oklch(0.97 0.014 254.604);
23
- --color-blue-300: oklch(0.809 0.105 251.813);
24
- --color-blue-400: oklch(0.707 0.165 254.624);
25
- --color-blue-500: oklch(0.623 0.214 259.815);
26
- --color-blue-700: oklch(0.488 0.243 264.376);
27
- --color-blue-800: oklch(0.424 0.199 265.638);
28
- --color-purple-900: oklch(0.381 0.176 304.987);
29
- --color-pink-500: oklch(0.656 0.241 354.308);
30
- --color-slate-50: oklch(0.984 0.003 247.858);
31
- --color-slate-300: oklch(0.869 0.022 252.894);
32
- --color-slate-500: oklch(0.554 0.046 257.417);
33
- --color-gray-50: oklch(0.985 0.002 247.839);
34
- --color-gray-100: oklch(0.967 0.003 264.542);
35
- --color-gray-200: oklch(0.928 0.006 264.531);
36
- --color-gray-300: oklch(0.872 0.01 258.338);
37
- --color-gray-400: oklch(0.707 0.022 261.325);
38
- --color-gray-500: oklch(0.551 0.027 264.364);
39
- --color-gray-600: oklch(0.446 0.03 256.802);
40
- --color-gray-700: oklch(0.373 0.034 259.733);
41
- --color-gray-800: oklch(0.278 0.033 256.848);
42
- --color-gray-900: oklch(0.21 0.034 264.665);
43
- --color-neutral-200: oklch(0.922 0 0);
44
- --color-neutral-500: oklch(0.556 0 0);
45
- --color-black: #000;
46
- --color-white: #fff;
47
- --spacing: 0.25rem;
48
- --breakpoint-xl: 80rem;
49
- --container-sm: 24rem;
50
- --text-xs: 0.75rem;
51
- --text-xs--line-height: calc(1 / 0.75);
52
- --text-sm: 0.875rem;
53
- --text-sm--line-height: calc(1.25 / 0.875);
54
- --text-base: 1rem;
55
- --text-base--line-height: calc(1.5 / 1);
56
- --text-lg: 1.125rem;
57
- --text-lg--line-height: calc(1.75 / 1.125);
58
- --text-2xl: 1.5rem;
59
- --text-2xl--line-height: calc(2 / 1.5);
60
- --font-weight-normal: 400;
61
- --font-weight-medium: 500;
62
- --font-weight-semibold: 600;
63
- --font-weight-bold: 700;
64
- --tracking-tight: -0.025em;
65
- --radius-sm: 0.25rem;
66
- --radius-md: 0.375rem;
67
- --radius-lg: 0.5rem;
68
- --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
69
- --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
70
- --default-transition-duration: 150ms;
71
- --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
72
- --default-font-family: var(--font-sans);
73
- --default-mono-font-family: var(--font-mono);
74
- --color-primary: #3d5263;
75
- --color-secondary: #f9c664;
76
- --color-accent: #618eb5;
77
- --color-accent-dark: #27333f;
78
- }
79
- }
80
- @layer base {
81
- *, ::after, ::before, ::backdrop, ::file-selector-button {
82
- box-sizing: border-box;
83
- margin: 0;
84
- padding: 0;
85
- border: 0 solid;
86
- }
87
- html, :host {
88
- line-height: 1.5;
89
- -webkit-text-size-adjust: 100%;
90
- tab-size: 4;
91
- font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
92
- font-feature-settings: var(--default-font-feature-settings, normal);
93
- font-variation-settings: var(--default-font-variation-settings, normal);
94
- -webkit-tap-highlight-color: transparent;
95
- }
96
- hr {
97
- height: 0;
98
- color: inherit;
99
- border-top-width: 1px;
100
- }
101
- abbr:where([title]) {
102
- -webkit-text-decoration: underline dotted;
103
- text-decoration: underline dotted;
104
- }
105
- h1, h2, h3, h4, h5, h6 {
106
- font-size: inherit;
107
- font-weight: inherit;
108
- }
109
- a {
110
- color: inherit;
111
- -webkit-text-decoration: inherit;
112
- text-decoration: inherit;
113
- }
114
- b, strong {
115
- font-weight: bolder;
116
- }
117
- code, kbd, samp, pre {
118
- font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
119
- font-feature-settings: var(--default-mono-font-feature-settings, normal);
120
- font-variation-settings: var(--default-mono-font-variation-settings, normal);
121
- font-size: 1em;
122
- }
123
- small {
124
- font-size: 80%;
125
- }
126
- sub, sup {
127
- font-size: 75%;
128
- line-height: 0;
129
- position: relative;
130
- vertical-align: baseline;
131
- }
132
- sub {
133
- bottom: -0.25em;
134
- }
135
- sup {
136
- top: -0.5em;
137
- }
138
- table {
139
- text-indent: 0;
140
- border-color: inherit;
141
- border-collapse: collapse;
142
- }
143
- :-moz-focusring {
144
- outline: auto;
145
- }
146
- progress {
147
- vertical-align: baseline;
148
- }
149
- summary {
150
- display: list-item;
151
- }
152
- ol, ul, menu {
153
- list-style: none;
154
- }
155
- img, svg, video, canvas, audio, iframe, embed, object {
156
- display: block;
157
- vertical-align: middle;
158
- }
159
- img, video {
160
- max-width: 100%;
161
- height: auto;
162
- }
163
- button, input, select, optgroup, textarea, ::file-selector-button {
164
- font: inherit;
165
- font-feature-settings: inherit;
166
- font-variation-settings: inherit;
167
- letter-spacing: inherit;
168
- color: inherit;
169
- border-radius: 0;
170
- background-color: transparent;
171
- opacity: 1;
172
- }
173
- :where(select:is([multiple], [size])) optgroup {
174
- font-weight: bolder;
175
- }
176
- :where(select:is([multiple], [size])) optgroup option {
177
- padding-inline-start: 20px;
178
- }
179
- ::file-selector-button {
180
- margin-inline-end: 4px;
181
- }
182
- ::placeholder {
183
- opacity: 1;
184
- }
185
- @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
186
- ::placeholder {
187
- color: color-mix(in oklab, currentColor 50%, transparent);
188
- }
189
- }
190
- textarea {
191
- resize: vertical;
192
- }
193
- ::-webkit-search-decoration {
194
- -webkit-appearance: none;
195
- }
196
- ::-webkit-date-and-time-value {
197
- min-height: 1lh;
198
- text-align: inherit;
199
- }
200
- ::-webkit-datetime-edit {
201
- display: inline-flex;
202
- }
203
- ::-webkit-datetime-edit-fields-wrapper {
204
- padding: 0;
205
- }
206
- ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
207
- padding-block: 0;
208
- }
209
- :-moz-ui-invalid {
210
- box-shadow: none;
211
- }
212
- button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
213
- appearance: button;
214
- }
215
- ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
216
- height: auto;
217
- }
218
- [hidden]:where(:not([hidden="until-found"])) {
219
- display: none !important;
220
- }
221
- }
222
- @layer utilities {
223
- .sr-only {
224
- position: absolute;
225
- width: 1px;
226
- height: 1px;
227
- padding: 0;
228
- margin: -1px;
229
- overflow: hidden;
230
- clip: rect(0, 0, 0, 0);
231
- white-space: nowrap;
232
- border-width: 0;
233
- }
234
- .absolute {
235
- position: absolute;
236
- }
237
- .relative {
238
- position: relative;
239
- }
240
- .-inset-0\.5 {
241
- inset: calc(var(--spacing) * -0.5);
242
- }
243
- .right-0 {
244
- right: calc(var(--spacing) * 0);
245
- }
246
- .z-10 {
247
- z-index: 10;
248
- }
249
- .container {
250
- width: 100%;
251
- @media (width >= 40rem) {
252
- max-width: 40rem;
253
- }
254
- @media (width >= 48rem) {
255
- max-width: 48rem;
256
- }
257
- @media (width >= 64rem) {
258
- max-width: 64rem;
259
- }
260
- @media (width >= 80rem) {
261
- max-width: 80rem;
262
- }
263
- @media (width >= 96rem) {
264
- max-width: 96rem;
265
- }
266
- }
267
- .my-2\.5 {
268
- margin-block: calc(var(--spacing) * 2.5);
269
- }
270
- .me-3 {
271
- margin-inline-end: calc(var(--spacing) * 3);
272
- }
273
- .mt-2 {
274
- margin-top: calc(var(--spacing) * 2);
275
- }
276
- .mt-4 {
277
- margin-top: calc(var(--spacing) * 4);
278
- }
279
- .mt-\[2px\] {
280
- margin-top: 2px;
281
- }
282
- .mt-\[60px\] {
283
- margin-top: 60px;
284
- }
285
- .-mr-2 {
286
- margin-right: calc(var(--spacing) * -2);
287
- }
288
- .mb-2 {
289
- margin-bottom: calc(var(--spacing) * 2);
290
- }
291
- .mb-2\.5 {
292
- margin-bottom: calc(var(--spacing) * 2.5);
293
- }
294
- .mb-4 {
295
- margin-bottom: calc(var(--spacing) * 4);
296
- }
297
- .ml-2 {
298
- margin-left: calc(var(--spacing) * 2);
299
- }
300
- .block {
301
- display: block;
302
- }
303
- .contents {
304
- display: contents;
305
- }
306
- .flex {
307
- display: flex;
308
- }
309
- .hidden {
310
- display: none;
311
- }
312
- .inline {
313
- display: inline;
314
- }
315
- .inline-block {
316
- display: inline-block;
317
- }
318
- .inline-flex {
319
- display: inline-flex;
320
- }
321
- .table {
322
- display: table;
323
- }
324
- .size-6 {
325
- width: calc(var(--spacing) * 6);
326
- height: calc(var(--spacing) * 6);
327
- }
328
- .h-2 {
329
- height: calc(var(--spacing) * 2);
330
- }
331
- .h-2\.5 {
332
- height: calc(var(--spacing) * 2.5);
333
- }
334
- .h-4 {
335
- height: calc(var(--spacing) * 4);
336
- }
337
- .h-10 {
338
- height: calc(var(--spacing) * 10);
339
- }
340
- .h-48 {
341
- height: calc(var(--spacing) * 48);
342
- }
343
- .min-h-full {
344
- min-height: 100%;
345
- }
346
- .w-4 {
347
- width: calc(var(--spacing) * 4);
348
- }
349
- .w-10 {
350
- width: calc(var(--spacing) * 10);
351
- }
352
- .w-24 {
353
- width: calc(var(--spacing) * 24);
354
- }
355
- .w-32 {
356
- width: calc(var(--spacing) * 32);
357
- }
358
- .w-48 {
359
- width: calc(var(--spacing) * 48);
360
- }
361
- .w-56 {
362
- width: calc(var(--spacing) * 56);
363
- }
364
- .w-full {
365
- width: 100%;
366
- }
367
- .max-w-\[300px\] {
368
- max-width: 300px;
369
- }
370
- .max-w-\[360px\] {
371
- max-width: 360px;
372
- }
373
- .max-w-sm {
374
- max-width: var(--container-sm);
375
- }
376
- .flex-shrink-0 {
377
- flex-shrink: 0;
378
- }
379
- .origin-top-right {
380
- transform-origin: top right;
381
- }
382
- .animate-pulse {
383
- animation: var(--animate-pulse);
384
- }
385
- .flex-col {
386
- flex-direction: column;
387
- }
388
- .items-center {
389
- align-items: center;
390
- }
391
- .justify-between {
392
- justify-content: space-between;
393
- }
394
- .justify-center {
395
- justify-content: center;
396
- }
397
- .space-y-2 {
398
- :where(& > :not(:last-child)) {
399
- --tw-space-y-reverse: 0;
400
- margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
401
- margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
402
- }
403
- }
404
- .gap-x-1\.5 {
405
- column-gap: calc(var(--spacing) * 1.5);
406
- }
407
- .space-x-2 {
408
- :where(& > :not(:last-child)) {
409
- --tw-space-x-reverse: 0;
410
- margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
411
- margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
412
- }
413
- }
414
- .divide-x {
415
- :where(& > :not(:last-child)) {
416
- --tw-divide-x-reverse: 0;
417
- border-inline-style: var(--tw-border-style);
418
- border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
419
- border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
420
- }
421
- }
422
- .divide-y {
423
- :where(& > :not(:last-child)) {
424
- --tw-divide-y-reverse: 0;
425
- border-bottom-style: var(--tw-border-style);
426
- border-top-style: var(--tw-border-style);
427
- border-top-width: calc(1px * var(--tw-divide-y-reverse));
428
- border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
429
- }
430
- }
431
- .divide-gray-200 {
432
- :where(& > :not(:last-child)) {
433
- border-color: var(--color-gray-200);
434
- }
435
- }
436
- .rounded-full {
437
- border-radius: calc(infinity * 1px);
438
- }
439
- .rounded-lg {
440
- border-radius: var(--radius-lg);
441
- }
442
- .rounded-md {
443
- border-radius: var(--radius-md);
444
- }
445
- .rounded-sm {
446
- border-radius: var(--radius-sm);
447
- }
448
- .border {
449
- border-style: var(--tw-border-style);
450
- border-width: 1px;
451
- }
452
- .border-gray-200 {
453
- border-color: var(--color-gray-200);
454
- }
455
- .bg-gray-50 {
456
- background-color: var(--color-gray-50);
457
- }
458
- .bg-gray-200 {
459
- background-color: var(--color-gray-200);
460
- }
461
- .bg-gray-300 {
462
- background-color: var(--color-gray-300);
463
- }
464
- .bg-gray-800 {
465
- background-color: var(--color-gray-800);
466
- }
467
- .bg-white {
468
- background-color: var(--color-white);
469
- }
470
- .p-2 {
471
- padding: calc(var(--spacing) * 2);
472
- }
473
- .p-2\.5 {
474
- padding: calc(var(--spacing) * 2.5);
475
- }
476
- .p-4 {
477
- padding: calc(var(--spacing) * 4);
478
- }
479
- .px-3 {
480
- padding-inline: calc(var(--spacing) * 3);
481
- }
482
- .py-2 {
483
- padding-block: calc(var(--spacing) * 2);
484
- }
485
- .pr-2 {
486
- padding-right: calc(var(--spacing) * 2);
487
- }
488
- .text-center {
489
- text-align: center;
490
- }
491
- .text-left {
492
- text-align: left;
493
- }
494
- .align-middle {
495
- vertical-align: middle;
496
- }
497
- .text-sm {
498
- font-size: var(--text-sm);
499
- line-height: var(--tw-leading, var(--text-sm--line-height));
500
- }
501
- .text-xs {
502
- font-size: var(--text-xs);
503
- line-height: var(--tw-leading, var(--text-xs--line-height));
504
- }
505
- .font-bold {
506
- --tw-font-weight: var(--font-weight-bold);
507
- font-weight: var(--font-weight-bold);
508
- }
509
- .font-normal {
510
- --tw-font-weight: var(--font-weight-normal);
511
- font-weight: var(--font-weight-normal);
512
- }
513
- .font-semibold {
514
- --tw-font-weight: var(--font-weight-semibold);
515
- font-weight: var(--font-weight-semibold);
516
- }
517
- .text-gray-200 {
518
- color: var(--color-gray-200);
519
- }
520
- .text-gray-400 {
521
- color: var(--color-gray-400);
522
- }
523
- .text-gray-900 {
524
- color: var(--color-gray-900);
525
- }
526
- .underline {
527
- text-decoration-line: underline;
528
- }
529
- .shadow {
530
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
531
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
532
- }
533
- .shadow-lg {
534
- --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));
535
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
536
- }
537
- .shadow-sm {
538
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
539
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
540
- }
541
- .ring-1 {
542
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
543
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
544
- }
545
- .ring-black {
546
- --tw-ring-color: var(--color-black);
547
- }
548
- .ring-gray-300 {
549
- --tw-ring-color: var(--color-gray-300);
550
- }
551
- .outline {
552
- outline-style: var(--tw-outline-style);
553
- outline-width: 1px;
554
- }
555
- .transition {
556
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
557
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
558
- transition-duration: var(--tw-duration, var(--default-transition-duration));
559
- }
560
- .ring-inset {
561
- --tw-ring-inset: inset;
562
- }
563
- .hover\:bg-gray-50 {
564
- &:hover {
565
- @media (hover: hover) {
566
- background-color: var(--color-gray-50);
567
- }
568
- }
569
- }
570
- .hover\:bg-gray-700 {
571
- &:hover {
572
- @media (hover: hover) {
573
- background-color: var(--color-gray-700);
574
- }
575
- }
576
- }
577
- .hover\:text-white {
578
- &:hover {
579
- @media (hover: hover) {
580
- color: var(--color-white);
581
- }
582
- }
583
- }
584
- .focus\:border-blue-500 {
585
- &:focus {
586
- border-color: var(--color-blue-500);
587
- }
588
- }
589
- .focus\:ring-2 {
590
- &:focus {
591
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
592
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
593
- }
594
- }
595
- .focus\:ring-blue-500 {
596
- &:focus {
597
- --tw-ring-color: var(--color-blue-500);
598
- }
599
- }
600
- .focus\:ring-white {
601
- &:focus {
602
- --tw-ring-color: var(--color-white);
603
- }
604
- }
605
- .focus\:ring-offset-2 {
606
- &:focus {
607
- --tw-ring-offset-width: 2px;
608
- --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
609
- }
610
- }
611
- .focus\:ring-offset-gray-800 {
612
- &:focus {
613
- --tw-ring-offset-color: var(--color-gray-800);
614
- }
615
- }
616
- .focus\:outline-hidden {
617
- &:focus {
618
- --tw-outline-style: none;
619
- outline-style: none;
620
- @media (forced-colors: active) {
621
- outline: 2px solid transparent;
622
- outline-offset: 2px;
623
- }
624
- }
625
- }
626
- .focus\:outline-none {
627
- &:focus {
628
- --tw-outline-style: none;
629
- outline-style: none;
630
- }
631
- }
632
- .md\:flex {
633
- @media (width >= 48rem) {
634
- display: flex;
635
- }
636
- }
637
- .md\:hidden {
638
- @media (width >= 48rem) {
639
- display: none;
640
- }
641
- }
642
- .md\:items-center {
643
- @media (width >= 48rem) {
644
- align-items: center;
645
- }
646
- }
647
- .md\:p-6 {
648
- @media (width >= 48rem) {
649
- padding: calc(var(--spacing) * 6);
650
- }
651
- }
652
- }
653
- :root {
654
- --rt-color-white: #fff;
655
- --rt-color-dark: #222;
656
- --rt-color-success: #8dc572;
657
- --rt-color-error: #be6464;
658
- --rt-color-warning: #f0ad4e;
659
- --rt-color-info: #337ab7;
660
- --rt-opacity: 0.9;
661
- --rt-transition-show-delay: 0.15s;
662
- --rt-transition-closing-delay: 0.15s;
663
- }
664
- .core-styles-module_tooltip__3vRRp {
665
- left: 0;
666
- opacity: 0;
667
- pointer-events: none;
668
- position: absolute;
669
- top: 0;
670
- will-change: opacity;
671
- }
672
- .core-styles-module_fixed__pcSol {
673
- position: fixed;
674
- }
675
- .core-styles-module_arrow__cvMwQ {
676
- background: inherit;
677
- position: absolute;
678
- }
679
- .core-styles-module_noArrow__xock6 {
680
- display: none;
681
- }
682
- .core-styles-module_clickable__ZuTTB {
683
- pointer-events: auto;
684
- }
685
- .core-styles-module_show__Nt9eE {
686
- opacity: var(--rt-opacity);
687
- transition: opacity var(--rt-transition-show-delay) ease-out;
688
- }
689
- .core-styles-module_closing__sGnxF {
690
- opacity: 0;
691
- transition: opacity var(--rt-transition-closing-delay) ease-in;
692
- }
693
- .styles-module_tooltip__mnnfp {
694
- border-radius: 3px;
695
- font-size: 90%;
696
- padding: 8px 16px;
697
- width: max-content;
698
- }
699
- .styles-module_arrow__K0L3T {
700
- height: 8px;
701
- width: 8px;
702
- }
703
- [class*=react-tooltip__place-top]>.styles-module_arrow__K0L3T {
704
- transform: rotate(45deg);
705
- }
706
- [class*=react-tooltip__place-right]>.styles-module_arrow__K0L3T {
707
- transform: rotate(135deg);
708
- }
709
- [class*=react-tooltip__place-bottom]>.styles-module_arrow__K0L3T {
710
- transform: rotate(225deg);
711
- }
712
- [class*=react-tooltip__place-left]>.styles-module_arrow__K0L3T {
713
- transform: rotate(315deg);
714
- }
715
- .styles-module_dark__xNqje {
716
- background: var(--rt-color-dark);
717
- color: var(--rt-color-white);
718
- }
719
- .styles-module_light__Z6W-X {
720
- background-color: var(--rt-color-white);
721
- color: var(--rt-color-dark);
722
- }
723
- .styles-module_success__A2AKt {
724
- background-color: var(--rt-color-success);
725
- color: var(--rt-color-white);
726
- }
727
- .styles-module_warning__SCK0X {
728
- background-color: var(--rt-color-warning);
729
- color: var(--rt-color-white);
730
- }
731
- .styles-module_error__JvumD {
732
- background-color: var(--rt-color-error);
733
- color: var(--rt-color-white);
734
- }
735
- .styles-module_info__BWdHW {
736
- background-color: var(--rt-color-info);
737
- color: var(--rt-color-white);
738
- }
739
- .ui-link {
740
- color: var(--color-blue-700);
741
- &:visited {
742
- color: var(--color-purple-900);
743
- }
744
- &:hover {
745
- @media (hover: hover) {
746
- text-decoration-line: underline;
747
- }
748
- }
749
- &:active {
750
- color: var(--color-red-950);
751
- }
752
- }
753
- .ui-info-link {
754
- cursor: pointer;
755
- color: var(--color-blue-700);
756
- text-decoration-line: underline;
757
- text-decoration-color: var(--color-blue-700);
758
- text-decoration-style: dashed;
759
- text-underline-offset: 4px;
760
- }
761
- .icon-disabled {
762
- stroke: var(--color-slate-300);
763
- }
764
- .info-bubble, .inline-info-bubble {
765
- width: calc(var(--spacing) * 4);
766
- height: calc(var(--spacing) * 4);
767
- stroke: var(--color-primary);
768
- color: transparent;
769
- }
770
- .inline-info-bubble {
771
- margin-left: calc(var(--spacing) * 1);
772
- }
773
- .icon-button {
774
- width: calc(var(--spacing) * 4);
775
- height: calc(var(--spacing) * 4);
776
- stroke-width: 4;
777
- }
778
- .ui-alert {
779
- margin-bottom: calc(var(--spacing) * 4);
780
- display: flex;
781
- border-radius: var(--radius-lg);
782
- padding: calc(var(--spacing) * 4);
783
- font-size: var(--text-sm);
784
- line-height: var(--tw-leading, var(--text-sm--line-height));
785
- &.info {
786
- border-color: var(--color-blue-300);
787
- background-color: var(--color-blue-50);
788
- color: var(--color-blue-800);
789
- @media (prefers-color-scheme: dark) {
790
- border-color: var(--color-blue-800);
791
- }
792
- @media (prefers-color-scheme: dark) {
793
- background-color: var(--color-gray-800);
794
- }
795
- @media (prefers-color-scheme: dark) {
796
- color: var(--color-blue-400);
797
- }
798
- }
799
- &.warning {
800
- border-color: var(--color-yellow-300);
801
- background-color: var(--color-yellow-50);
802
- color: var(--color-yellow-800);
803
- @media (prefers-color-scheme: dark) {
804
- border-color: var(--color-yellow-800);
805
- }
806
- @media (prefers-color-scheme: dark) {
807
- background-color: var(--color-gray-800);
808
- }
809
- @media (prefers-color-scheme: dark) {
810
- color: var(--color-yellow-300);
811
- }
812
- }
813
- &.danger {
814
- border-color: var(--color-red-300);
815
- background-color: var(--color-red-50);
816
- color: var(--color-red-800);
817
- @media (prefers-color-scheme: dark) {
818
- border-color: var(--color-red-800);
819
- }
820
- @media (prefers-color-scheme: dark) {
821
- background-color: var(--color-gray-800);
822
- }
823
- @media (prefers-color-scheme: dark) {
824
- color: var(--color-red-400);
825
- }
826
- }
827
- &.success {
828
- border-color: var(--color-green-300);
829
- background-color: var(--color-green-50);
830
- color: var(--color-green-800);
831
- @media (prefers-color-scheme: dark) {
832
- border-color: var(--color-green-800);
833
- }
834
- @media (prefers-color-scheme: dark) {
835
- background-color: var(--color-gray-800);
836
- }
837
- @media (prefers-color-scheme: dark) {
838
- color: var(--color-green-400);
839
- }
840
- }
841
- &.default {
842
- border-color: var(--color-gray-300);
843
- background-color: var(--color-gray-50);
844
- color: var(--color-gray-800);
845
- @media (prefers-color-scheme: dark) {
846
- border-color: var(--color-gray-600);
847
- }
848
- @media (prefers-color-scheme: dark) {
849
- background-color: var(--color-gray-800);
850
- }
851
- @media (prefers-color-scheme: dark) {
852
- color: var(--color-gray-400);
853
- }
854
- }
855
- }
856
- .ui-button {
857
- display: inline-flex;
858
- cursor: pointer;
859
- align-items: center;
860
- border-radius: var(--radius-lg);
861
- border-style: var(--tw-border-style);
862
- border-width: 1px;
863
- --tw-border-style: solid;
864
- border-style: solid;
865
- font-family: Inter;
866
- font-size: var(--text-sm);
867
- line-height: var(--tw-leading, var(--text-sm--line-height));
868
- --tw-font-weight: var(--font-weight-medium);
869
- font-weight: var(--font-weight-medium);
870
- &:focus {
871
- z-index: 10;
872
- }
873
- &:focus {
874
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
875
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
876
- }
877
- &:disabled {
878
- border-style: var(--tw-border-style);
879
- border-width: 1px;
880
- }
881
- &:disabled {
882
- background-color: var(--color-slate-50);
883
- }
884
- &:disabled {
885
- color: var(--color-slate-500);
886
- }
887
- &.primary {
888
- border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
889
- background-color: var(--color-primary);
890
- color: var(--color-white);
891
- &:hover {
892
- @media (hover: hover) {
893
- background-color: color-mix(in oklab, var(--color-primary) 85%, transparent);
894
- }
895
- }
896
- &:focus {
897
- --tw-ring-color: var(--color-accent);
898
- }
899
- }
900
- &.secondary {
901
- border-color: var(--color-secondary);
902
- background-color: var(--color-secondary);
903
- color: var(--color-primary);
904
- &:hover {
905
- @media (hover: hover) {
906
- background-color: color-mix(in oklab, var(--color-secondary) 85%, transparent);
907
- }
908
- }
909
- &:focus {
910
- --tw-ring-color: color-mix(in oklab, var(--color-secondary) 30%, transparent);
911
- }
912
- }
913
- &.accent {
914
- border-color: var(--color-accent);
915
- background-color: var(--color-accent);
916
- color: var(--color-white);
917
- &:hover {
918
- @media (hover: hover) {
919
- background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
920
- }
921
- }
922
- &:focus {
923
- --tw-ring-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
924
- }
925
- &:focus {
926
- --tw-outline-style: none;
927
- outline-style: none;
928
- }
929
- }
930
- &.white {
931
- border-color: var(--color-white);
932
- background-color: var(--color-white);
933
- color: var(--color-primary);
934
- &:hover {
935
- @media (hover: hover) {
936
- border-color: var(--color-gray-100);
937
- }
938
- }
939
- &:hover {
940
- @media (hover: hover) {
941
- background-color: var(--color-gray-100);
942
- }
943
- }
944
- &:hover {
945
- @media (hover: hover) {
946
- color: var(--color-blue-700);
947
- }
948
- }
949
- &:focus {
950
- --tw-ring-color: var(--color-blue-700);
951
- }
952
- &:focus {
953
- --tw-outline-style: none;
954
- outline-style: none;
955
- }
956
- }
957
- &.default {
958
- border-color: var(--color-blue-500);
959
- background-color: var(--color-blue-500);
960
- color: var(--color-white);
961
- &:hover {
962
- @media (hover: hover) {
963
- background-color: var(--color-blue-700);
964
- }
965
- }
966
- &:focus {
967
- --tw-ring-color: var(--color-blue-700);
968
- }
969
- }
970
- &.sm {
971
- padding-inline: calc(var(--spacing) * 1);
972
- padding-block: calc(var(--spacing) * 1);
973
- }
974
- &.md {
975
- padding-inline: calc(var(--spacing) * 4);
976
- padding-block: calc(var(--spacing) * 2);
977
- }
978
- &.lg {
979
- padding-inline: calc(var(--spacing) * 5);
980
- padding-block: calc(var(--spacing) * 2.5);
981
- font-size: var(--text-2xl);
982
- line-height: var(--tw-leading, var(--text-2xl--line-height));
983
- }
984
- }
985
- .ui-card, .ui-card-link {
986
- max-width: var(--container-sm);
987
- border-style: var(--tw-border-style);
988
- border-width: 1px;
989
- border-color: var(--color-gray-200);
990
- background-color: var(--color-white);
991
- padding: calc(var(--spacing) * 6);
992
- }
993
- .ui-card-link {
994
- display: block;
995
- &:hover {
996
- @media (hover: hover) {
997
- background-color: var(--color-gray-100);
998
- }
999
- }
1000
- @media (prefers-color-scheme: dark) {
1001
- background-color: var(--color-gray-800);
1002
- }
1003
- }
1004
- .ui-card-header {
1005
- margin-bottom: calc(var(--spacing) * 2);
1006
- font-size: var(--text-2xl);
1007
- line-height: var(--tw-leading, var(--text-2xl--line-height));
1008
- --tw-font-weight: var(--font-weight-bold);
1009
- font-weight: var(--font-weight-bold);
1010
- --tw-tracking: var(--tracking-tight);
1011
- letter-spacing: var(--tracking-tight);
1012
- color: var(--color-gray-900);
1013
- }
1014
- .ui-card-body {
1015
- margin-bottom: calc(var(--spacing) * 3);
1016
- --tw-font-weight: var(--font-weight-normal);
1017
- font-weight: var(--font-weight-normal);
1018
- color: var(--color-gray-500);
1019
- @media (prefers-color-scheme: dark) {
1020
- color: var(--color-gray-400);
1021
- }
1022
- }
1023
- .ui-checkbox, .ui-radio {
1024
- &.primary {
1025
- accent-color: var(--color-primary);
1026
- }
1027
- &.secondary {
1028
- accent-color: var(--color-secondary);
1029
- }
1030
- &.accent {
1031
- accent-color: var(--color-accent);
1032
- }
1033
- &.pink {
1034
- accent-color: var(--color-pink-500);
1035
- }
1036
- }
1037
- .ui-text-input {
1038
- position: relative;
1039
- margin: calc(var(--spacing) * 0);
1040
- display: block;
1041
- width: 100%;
1042
- border-radius: 0.25rem;
1043
- border-style: var(--tw-border-style);
1044
- border-width: 1px;
1045
- --tw-border-style: solid;
1046
- border-style: solid;
1047
- border-color: var(--color-neutral-200);
1048
- background-color: transparent;
1049
- background-clip: padding-box;
1050
- padding-inline: calc(var(--spacing) * 3);
1051
- padding-block: 0.25rem;
1052
- font-size: var(--text-base);
1053
- line-height: var(--tw-leading, var(--text-base--line-height));
1054
- --tw-leading: 1.6;
1055
- line-height: 1.6;
1056
- --tw-font-weight: var(--font-weight-normal);
1057
- font-weight: var(--font-weight-normal);
1058
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
1059
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1060
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1061
- --tw-duration: 200ms;
1062
- transition-duration: 200ms;
1063
- --tw-ease: var(--ease-in-out);
1064
- transition-timing-function: var(--ease-in-out);
1065
- --tw-outline-style: none;
1066
- outline-style: none;
1067
- &::placeholder {
1068
- color: var(--color-neutral-500);
1069
- }
1070
- &:focus {
1071
- z-index: 3;
1072
- }
1073
- &:focus {
1074
- border-color: var(--color-blue-500);
1075
- }
1076
- &:focus {
1077
- --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, rgb(0 0 0 / 0.05));
1078
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1079
- }
1080
- &:focus {
1081
- --tw-outline-style: none;
1082
- outline-style: none;
1083
- }
1084
- @media (prefers-reduced-motion: reduce) {
1085
- transition-property: none;
1086
- }
1087
- }
1088
- .ui-container {
1089
- position: relative;
1090
- z-index: 2;
1091
- margin: auto;
1092
- display: block;
1093
- width: 100%;
1094
- max-width: 1264px;
1095
- justify-content: space-between;
1096
- background-image: none;
1097
- &.full {
1098
- max-width: 100%;
1099
- }
1100
- }
1101
- .ui-nav {
1102
- position: fixed;
1103
- inset-inline-start: calc(var(--spacing) * 0);
1104
- top: calc(var(--spacing) * 0);
1105
- z-index: 20;
1106
- width: 100%;
1107
- border-bottom-style: var(--tw-border-style);
1108
- border-bottom-width: 2px;
1109
- border-color: var(--color-secondary);
1110
- &.light {
1111
- background-color: var(--color-white);
1112
- }
1113
- &.primary {
1114
- border-color: var(--color-accent-dark);
1115
- background-color: var(--color-primary);
1116
- }
1117
- &.secondary {
1118
- background-color: var(--color-secondary);
1119
- }
1120
- &.dark {
1121
- background-color: var(--color-accent-dark);
1122
- }
1123
- }
1124
- .ui-nav-inner-container {
1125
- margin-inline: auto;
1126
- display: flex;
1127
- max-width: var(--breakpoint-xl);
1128
- flex-wrap: wrap;
1129
- align-items: center;
1130
- justify-content: space-between;
1131
- padding: calc(var(--spacing) * 2);
1132
- }
1133
- .ui-nav-brand {
1134
- display: flex;
1135
- align-items: center;
1136
- :where(& > :not(:last-child)) {
1137
- --tw-space-x-reverse: 0;
1138
- margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
1139
- margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
1140
- }
1141
- &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
1142
- :where(& > :not(:last-child)) {
1143
- --tw-space-x-reverse: 1;
1144
- }
1145
- }
1146
- }
1147
- .ui-nav-brand-label {
1148
- align-self: center;
1149
- font-size: var(--text-2xl);
1150
- line-height: var(--tw-leading, var(--text-2xl--line-height));
1151
- --tw-font-weight: var(--font-weight-semibold);
1152
- font-weight: var(--font-weight-semibold);
1153
- white-space: nowrap;
1154
- color: var(--color-white);
1155
- &.light, &.secondary {
1156
- color: var(--color-accent-dark);
1157
- }
1158
- }
1159
- .ui-nav-item-container {
1160
- display: none;
1161
- width: 100%;
1162
- align-items: center;
1163
- justify-content: space-between;
1164
- @media (width >= 48rem) {
1165
- order: 1;
1166
- }
1167
- @media (width >= 48rem) {
1168
- display: flex;
1169
- }
1170
- @media (width >= 48rem) {
1171
- width: auto;
1172
- }
1173
- }
1174
- .ui-nav-item-list {
1175
- margin-top: calc(var(--spacing) * 4);
1176
- display: flex;
1177
- flex-direction: column;
1178
- border-radius: var(--radius-lg);
1179
- border-style: var(--tw-border-style);
1180
- border-width: 1px;
1181
- padding: calc(var(--spacing) * 4);
1182
- --tw-font-weight: var(--font-weight-medium);
1183
- font-weight: var(--font-weight-medium);
1184
- @media (width >= 48rem) {
1185
- margin-top: calc(var(--spacing) * 0);
1186
- }
1187
- @media (width >= 48rem) {
1188
- flex-direction: row;
1189
- }
1190
- @media (width >= 48rem) {
1191
- :where(& > :not(:last-child)) {
1192
- --tw-space-x-reverse: 0;
1193
- margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
1194
- margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
1195
- }
1196
- }
1197
- @media (width >= 48rem) {
1198
- border-style: var(--tw-border-style);
1199
- border-width: 0px;
1200
- }
1201
- @media (width >= 48rem) {
1202
- padding: calc(var(--spacing) * 0);
1203
- }
1204
- &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
1205
- :where(& > :not(:last-child)) {
1206
- --tw-space-x-reverse: 1;
1207
- }
1208
- }
1209
- }
1210
- .ui-nav-link {
1211
- display: block;
1212
- padding-inline: calc(var(--spacing) * 3);
1213
- padding-block: calc(var(--spacing) * 2);
1214
- font-size: var(--text-lg);
1215
- line-height: var(--tw-leading, var(--text-lg--line-height));
1216
- color: var(--color-white);
1217
- &:hover {
1218
- @media (hover: hover) {
1219
- border-radius: var(--radius-sm);
1220
- }
1221
- }
1222
- &:hover {
1223
- @media (hover: hover) {
1224
- background-color: var(--color-secondary);
1225
- }
1226
- }
1227
- &:hover {
1228
- @media (hover: hover) {
1229
- color: var(--color-primary);
1230
- }
1231
- }
1232
- &.light {
1233
- color: var(--color-primary);
1234
- }
1235
- &.secondary {
1236
- color: var(--color-primary);
1237
- &:hover {
1238
- @media (hover: hover) {
1239
- color: var(--color-white);
1240
- }
1241
- }
1242
- }
1243
- }
1244
- .ui-nav-mobile {
1245
- @media (width >= 48rem) {
1246
- display: none;
1247
- }
1248
- }
1249
- .ui-nav-mobile-menu {
1250
- :where(& > :not(:last-child)) {
1251
- --tw-space-y-reverse: 0;
1252
- margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
1253
- margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
1254
- }
1255
- padding-inline: calc(var(--spacing) * 2);
1256
- padding-top: calc(var(--spacing) * 2);
1257
- padding-bottom: calc(var(--spacing) * 3);
1258
- @media (width >= 40rem) {
1259
- padding-inline: calc(var(--spacing) * 3);
1260
- }
1261
- }
1262
- .ui-slider {
1263
- height: calc(var(--spacing) * 2);
1264
- width: 100%;
1265
- cursor: pointer;
1266
- appearance: none;
1267
- border-radius: var(--radius-lg);
1268
- &.primary {
1269
- background-color: var(--color-primary);
1270
- }
1271
- &.secondary {
1272
- background-color: var(--color-secondary);
1273
- }
1274
- &.accent {
1275
- background-color: var(--color-accent);
1276
- }
1277
- &.default {
1278
- background-color: var(--color-blue-500);
1279
- }
1280
- }
1281
- .ui-slider-label {
1282
- margin-bottom: calc(var(--spacing) * 2);
1283
- display: block;
1284
- font-size: var(--text-sm);
1285
- line-height: var(--tw-leading, var(--text-sm--line-height));
1286
- --tw-font-weight: var(--font-weight-medium);
1287
- font-weight: var(--font-weight-medium);
1288
- }
1289
- .ui-slider-range-label {
1290
- position: absolute;
1291
- font-size: var(--text-sm);
1292
- line-height: var(--tw-leading, var(--text-sm--line-height));
1293
- &.start {
1294
- inset-inline-start: calc(var(--spacing) * 2);
1295
- bottom: calc(var(--spacing) * -2);
1296
- }
1297
- &.end {
1298
- inset-inline-end: calc(var(--spacing) * 2);
1299
- bottom: calc(var(--spacing) * -2);
1300
- }
1301
- }
1302
- .ui-select {
1303
- display: block;
1304
- width: 100%;
1305
- background-color: var(--color-gray-50);
1306
- padding: calc(var(--spacing) * 2.5);
1307
- font-size: var(--text-sm);
1308
- line-height: var(--tw-leading, var(--text-sm--line-height));
1309
- color: var(--color-gray-900);
1310
- &.outline {
1311
- border-radius: var(--radius-lg);
1312
- border-style: var(--tw-border-style);
1313
- border-width: 1px;
1314
- --tw-border-style: solid;
1315
- border-style: solid;
1316
- border-color: var(--color-gray-300);
1317
- &:focus {
1318
- border-color: var(--color-blue-500);
1319
- }
1320
- &:focus {
1321
- --tw-ring-color: var(--color-blue-500);
1322
- }
1323
- }
1324
- &.plain {
1325
- border-style: var(--tw-border-style);
1326
- border-width: 0px;
1327
- background-color: var(--color-white);
1328
- &:focus {
1329
- background-color: var(--color-gray-100);
1330
- }
1331
- }
1332
- &.underline {
1333
- border-top-style: var(--tw-border-style);
1334
- border-top-width: 0px;
1335
- border-right-style: var(--tw-border-style);
1336
- border-right-width: 0px;
1337
- border-bottom-style: var(--tw-border-style);
1338
- border-bottom-width: 1px;
1339
- border-left-style: var(--tw-border-style);
1340
- border-left-width: 0px;
1341
- --tw-border-style: solid;
1342
- border-style: solid;
1343
- border-color: var(--color-black);
1344
- background-color: var(--color-white);
1345
- &:focus {
1346
- border-color: var(--color-blue-500);
1347
- }
1348
- }
1349
- }
1350
- .ui-select-label {
1351
- display: block;
1352
- padding: calc(var(--spacing) * 2);
1353
- font-size: var(--text-sm);
1354
- line-height: var(--tw-leading, var(--text-sm--line-height));
1355
- --tw-font-weight: var(--font-weight-medium);
1356
- font-weight: var(--font-weight-medium);
1357
- color: var(--color-gray-900);
1358
- }
1359
- .ui-tabs-container {
1360
- position: relative;
1361
- right: calc(var(--spacing) * 0);
1362
- font-family: Open Sans;
1363
- }
1364
- .ui-tab-list {
1365
- display: flex;
1366
- list-style-type: none;
1367
- flex-wrap: wrap;
1368
- border-radius: var(--radius-md);
1369
- background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
1370
- padding-inline: calc(var(--spacing) * 1.5);
1371
- padding-block: calc(var(--spacing) * 1.5);
1372
- }
1373
- .ui-tab-list-item {
1374
- z-index: 30;
1375
- margin-inline-end: calc(var(--spacing) * 2);
1376
- .ui-tab-button {
1377
- display: inline-block;
1378
- cursor: pointer;
1379
- border-top-left-radius: var(--radius-sm);
1380
- border-top-right-radius: var(--radius-sm);
1381
- border-bottom-style: var(--tw-border-style);
1382
- border-bottom-width: 2px;
1383
- border-color: var(--color-gray-400);
1384
- padding-inline: calc(var(--spacing) * 4);
1385
- padding-block: calc(var(--spacing) * 2);
1386
- text-align: center;
1387
- --tw-font-weight: var(--font-weight-semibold);
1388
- font-weight: var(--font-weight-semibold);
1389
- color: var(--color-gray-400);
1390
- &:hover {
1391
- @media (hover: hover) {
1392
- border-color: var(--color-secondary);
1393
- }
1394
- }
1395
- &:hover {
1396
- @media (hover: hover) {
1397
- color: var(--color-primary);
1398
- }
1399
- }
1400
- &.ui-active-tab {
1401
- cursor: default;
1402
- border-color: var(--color-secondary);
1403
- background-color: color-mix(in oklab, var(--color-secondary) 30%, transparent);
1404
- color: var(--color-accent-dark);
1405
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
1406
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1407
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1408
- transition-delay: 100ms;
1409
- --tw-duration: 300ms;
1410
- transition-duration: 300ms;
1411
- --tw-ease: var(--ease-in-out);
1412
- transition-timing-function: var(--ease-in-out);
1413
- }
1414
- }
1415
- }
1416
- .ui-tab-panel {
1417
- width: 100%;
1418
- border-radius: var(--radius-lg);
1419
- padding: calc(var(--spacing) * 4);
1420
- }
1421
- @property --tw-space-y-reverse {
1422
- syntax: "*";
1423
- inherits: false;
1424
- initial-value: 0;
1425
- }
1426
- @property --tw-space-x-reverse {
1427
- syntax: "*";
1428
- inherits: false;
1429
- initial-value: 0;
1430
- }
1431
- @property --tw-divide-x-reverse {
1432
- syntax: "*";
1433
- inherits: false;
1434
- initial-value: 0;
1435
- }
1436
- @property --tw-border-style {
1437
- syntax: "*";
1438
- inherits: false;
1439
- initial-value: solid;
1440
- }
1441
- @property --tw-divide-y-reverse {
1442
- syntax: "*";
1443
- inherits: false;
1444
- initial-value: 0;
1445
- }
1446
- @property --tw-font-weight {
1447
- syntax: "*";
1448
- inherits: false;
1449
- }
1450
- @property --tw-shadow {
1451
- syntax: "*";
1452
- inherits: false;
1453
- initial-value: 0 0 #0000;
1454
- }
1455
- @property --tw-shadow-color {
1456
- syntax: "*";
1457
- inherits: false;
1458
- }
1459
- @property --tw-inset-shadow {
1460
- syntax: "*";
1461
- inherits: false;
1462
- initial-value: 0 0 #0000;
1463
- }
1464
- @property --tw-inset-shadow-color {
1465
- syntax: "*";
1466
- inherits: false;
1467
- }
1468
- @property --tw-ring-color {
1469
- syntax: "*";
1470
- inherits: false;
1471
- }
1472
- @property --tw-ring-shadow {
1473
- syntax: "*";
1474
- inherits: false;
1475
- initial-value: 0 0 #0000;
1476
- }
1477
- @property --tw-inset-ring-color {
1478
- syntax: "*";
1479
- inherits: false;
1480
- }
1481
- @property --tw-inset-ring-shadow {
1482
- syntax: "*";
1483
- inherits: false;
1484
- initial-value: 0 0 #0000;
1485
- }
1486
- @property --tw-ring-inset {
1487
- syntax: "*";
1488
- inherits: false;
1489
- }
1490
- @property --tw-ring-offset-width {
1491
- syntax: "<length>";
1492
- inherits: false;
1493
- initial-value: 0px;
1494
- }
1495
- @property --tw-ring-offset-color {
1496
- syntax: "*";
1497
- inherits: false;
1498
- initial-value: #fff;
1499
- }
1500
- @property --tw-ring-offset-shadow {
1501
- syntax: "*";
1502
- inherits: false;
1503
- initial-value: 0 0 #0000;
1504
- }
1505
- @property --tw-outline-style {
1506
- syntax: "*";
1507
- inherits: false;
1508
- initial-value: solid;
1509
- }
1510
- @property --tw-tracking {
1511
- syntax: "*";
1512
- inherits: false;
1513
- }
1514
- @property --tw-leading {
1515
- syntax: "*";
1516
- inherits: false;
1517
- }
1518
- @property --tw-duration {
1519
- syntax: "*";
1520
- inherits: false;
1521
- }
1522
- @property --tw-ease {
1523
- syntax: "*";
1524
- inherits: false;
1525
- }
1526
- @keyframes pulse {
1527
- 50% {
1528
- opacity: 0.5;
1529
- }
1530
- }
1531
-
1532
- /*# sourceMappingURL=niagads-ui.css.map */