daisyui 4.1.0 → 4.2.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 (13) hide show
  1. package/dist/full.css +47930 -4
  2. package/dist/styled.css +3665 -2088
  3. package/dist/themes.css +2118 -1
  4. package/dist/unstyled.css +862 -458
  5. package/package.json +1 -1
  6. package/src/theming/index.js +0 -2
  7. package/src/theming/themes.js +3 -3
  8. package/dist/base.js +0 -1
  9. package/dist/styled.js +0 -1
  10. package/dist/unstyled.js +0 -1
  11. package/dist/utilities-styled.js +0 -1
  12. package/dist/utilities-unstyled.js +0 -1
  13. package/dist/utilities.js +0 -1
package/dist/unstyled.css CHANGED
@@ -1,210 +1,322 @@
1
1
  .alert {
2
- @apply grid w-full grid-flow-row content-start items-center justify-items-center gap-4 text-center sm:grid-flow-col sm:grid-cols-[auto_minmax(auto,1fr)] sm:justify-items-start sm:text-start;
2
+ display: grid;
3
+ width: 100%;
4
+ grid-auto-flow: row;
5
+ align-content: flex-start;
6
+ align-items: center;
7
+ justify-items: center;
8
+ gap: 1rem;
9
+ text-align: center
10
+ }
11
+ @media (min-width: 640px) {
12
+ .alert {
13
+ grid-auto-flow: column;
14
+ grid-template-columns: auto minmax(auto,1fr);
15
+ justify-items: start;
16
+ text-align: start
17
+ }
3
18
  }
4
19
  .artboard {
5
- @apply w-full;
20
+ width: 100%
6
21
  }
7
22
  .avatar {
8
- @apply relative inline-flex;
9
- & > div {
10
- @apply block aspect-square overflow-hidden;
11
- }
12
- img {
13
- @apply h-full w-full object-cover;
14
- }
15
- &.placeholder {
16
- & > div {
17
- @apply flex items-center justify-center;
18
- }
19
- }
23
+ position: relative;
24
+ display: inline-flex
25
+ }
26
+ .avatar > div {
27
+ display: block;
28
+ aspect-ratio: 1 / 1;
29
+ overflow: hidden
30
+ }
31
+ .avatar img {
32
+ height: 100%;
33
+ width: 100%;
34
+ object-fit: cover
35
+ }
36
+ .avatar.placeholder > div {
37
+ display: flex;
38
+ align-items: center;
39
+ justify-content: center
20
40
  }
21
41
  .badge {
22
- @apply inline-flex items-center justify-center transition duration-200 ease-out;
23
- @apply h-5 text-sm leading-5;
42
+ display: inline-flex;
43
+ align-items: center;
44
+ justify-content: center;
45
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
46
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
47
+ transition-duration: 200ms;
48
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
49
+ height: 1.25rem;
50
+ font-size: 0.875rem;
51
+ line-height: 1.25rem;
24
52
  width: fit-content;
25
53
  padding-left: 0.563rem;
26
- padding-right: 0.563rem;
54
+ padding-right: 0.563rem
27
55
  }
28
56
  .btm-nav {
29
- @apply fixed bottom-0 left-0 right-0 flex w-full flex-row items-center justify-around;
30
- padding-bottom: env(safe-area-inset-bottom);
31
- & > * {
32
- @apply relative flex h-full basis-full cursor-pointer flex-col items-center justify-center gap-1;
33
- }
57
+ position: fixed;
58
+ bottom: 0px;
59
+ left: 0px;
60
+ right: 0px;
61
+ display: flex;
62
+ width: 100%;
63
+ flex-direction: row;
64
+ align-items: center;
65
+ justify-content: space-around;
66
+ padding-bottom: env(safe-area-inset-bottom)
67
+ }
68
+ .btm-nav > * {
69
+ position: relative;
70
+ display: flex;
71
+ height: 100%;
72
+ flex-basis: 100%;
73
+ cursor: pointer;
74
+ flex-direction: column;
75
+ align-items: center;
76
+ justify-content: center;
77
+ gap: 0.25rem
34
78
  }
35
79
  .breadcrumbs {
36
- @apply max-w-full overflow-x-auto;
37
- & > ul,
38
- & > ol {
39
- @apply flex items-center whitespace-nowrap;
40
- min-height: min-content;
41
- & > li {
42
- @apply flex items-center;
43
- & > a {
44
- @apply flex cursor-pointer items-center [@media(hover:hover)]:hover:underline;
45
- }
80
+ max-width: 100%;
81
+ overflow-x: auto
82
+ }
83
+ .breadcrumbs > ul,
84
+ .breadcrumbs > ol {
85
+ display: flex;
86
+ align-items: center;
87
+ white-space: nowrap;
88
+ min-height: min-content
89
+ }
90
+ .breadcrumbs > ul > li, .breadcrumbs > ol > li {
91
+ display: flex;
92
+ align-items: center
93
+ }
94
+ .breadcrumbs > ul > li > a, .breadcrumbs > ol > li > a {
95
+ display: flex;
96
+ cursor: pointer;
97
+ align-items: center
98
+ }
99
+ @media(hover:hover) {
100
+ .breadcrumbs > ul > li > a:hover, .breadcrumbs > ol > li > a:hover {
101
+ text-decoration-line: underline
46
102
  }
47
- }
48
103
  }
49
104
  .btn {
50
- @apply rounded-btn inline-flex h-12 min-h-[3rem] flex-shrink-0 cursor-pointer select-none flex-wrap items-center justify-center border-transparent px-4 text-center;
105
+ display: inline-flex;
106
+ height: 3rem;
107
+ min-height: 3rem;
108
+ flex-shrink: 0;
109
+ cursor: pointer;
110
+ user-select: none;
111
+ flex-wrap: wrap;
112
+ align-items: center;
113
+ justify-content: center;
114
+ border-radius: var(--rounded-btn, 0.5rem);
115
+ border-color: transparent;
116
+ padding-left: 1rem;
117
+ padding-right: 1rem;
118
+ text-align: center;
51
119
  font-size: 0.875rem;
52
- line-height: 1em;
120
+ line-height: 1em
121
+ }
53
122
  /* disabled */
54
- &-disabled,
55
- &[disabled],
56
- &:disabled {
57
- @apply pointer-events-none;
58
- }
59
-
123
+ .btn-disabled,
124
+ .btn[disabled],
125
+ .btn:disabled {
126
+ pointer-events: none
127
+ }
60
128
  /* shapes */
61
- &-square {
62
- @apply h-12 w-12 p-0;
63
- }
64
- &-circle {
65
- @apply h-12 w-12 rounded-full p-0;
66
- }
129
+ .btn-square {
130
+ height: 3rem;
131
+ width: 3rem;
132
+ padding: 0px
133
+ }
134
+ .btn-circle {
135
+ height: 3rem;
136
+ width: 3rem;
137
+ border-radius: 9999px;
138
+ padding: 0px
67
139
  }
68
140
 
69
141
  /* radio input and checkbox as button */
142
+
70
143
  :where(.btn:is(input[type="checkbox"])),
71
144
  :where(.btn:is(input[type="radio"])) {
72
- @apply w-auto appearance-none;
145
+ width: auto;
146
+ appearance: none
73
147
  }
148
+
74
149
  .btn:is(input[type="checkbox"]):after,
75
150
  .btn:is(input[type="radio"]):after {
76
- @apply content-[attr(aria-label)];
151
+ --tw-content: attr(aria-label);
152
+ content: var(--tw-content)
77
153
  }
78
154
  .card {
79
- @apply relative flex flex-col;
80
- &:focus {
81
- @apply outline-none;
82
- }
83
- &-body {
84
- @apply flex flex-auto flex-col;
85
- :where(p) {
86
- @apply flex-grow;
87
- }
88
- }
89
- &-actions {
90
- @apply flex flex-wrap items-start gap-2;
91
- }
92
- & figure {
93
- @apply flex items-center justify-center;
94
- }
95
- &.image-full {
96
- @apply grid;
97
- &:before {
98
- @apply relative;
99
- content: "";
100
- }
101
- &:before,
102
- & > * {
103
- @apply col-start-1 row-start-1;
104
- }
105
- & > figure img {
106
- @apply h-full object-cover;
107
- }
108
- }
109
- &.image-full > &-body {
110
- @apply relative;
111
- }
155
+ position: relative;
156
+ display: flex;
157
+ flex-direction: column
158
+ }
159
+ .card:focus {
160
+ outline: 2px solid transparent;
161
+ outline-offset: 2px
162
+ }
163
+ .card-body {
164
+ display: flex;
165
+ flex: 1 1 auto;
166
+ flex-direction: column
167
+ }
168
+ .card-body :where(p) {
169
+ flex-grow: 1
170
+ }
171
+ .card-actions {
172
+ display: flex;
173
+ flex-wrap: wrap;
174
+ align-items: flex-start;
175
+ gap: 0.5rem
176
+ }
177
+ .card figure {
178
+ display: flex;
179
+ align-items: center;
180
+ justify-content: center
181
+ }
182
+ .card.image-full {
183
+ display: grid
184
+ }
185
+ .card.image-full:before {
186
+ position: relative;
187
+ content: ""
188
+ }
189
+ .card.image-full:before,
190
+ .card.image-full > * {
191
+ grid-column-start: 1;
192
+ grid-row-start: 1
193
+ }
194
+ .card.image-full > figure img {
195
+ height: 100%;
196
+ object-fit: cover
197
+ }
198
+ .card.image-full > .card-body {
199
+ position: relative
112
200
  }
113
201
  .carousel {
114
- @apply inline-flex overflow-x-scroll;
202
+ display: inline-flex;
203
+ overflow-x: scroll;
115
204
  scroll-snap-type: x mandatory;
116
205
  scroll-behavior: smooth;
117
- &-vertical {
118
- @apply flex-col overflow-y-scroll;
206
+ }
207
+ .carousel-vertical {
208
+ flex-direction: column;
209
+ overflow-y: scroll;
119
210
  scroll-snap-type: y mandatory;
120
- }
121
- &-item {
122
- @apply box-content flex flex-none;
211
+ }
212
+ .carousel-item {
213
+ box-sizing: content-box;
214
+ display: flex;
215
+ flex: none;
123
216
  scroll-snap-align: start;
124
- }
125
- &-center .carousel-item {
217
+ }
218
+ .carousel-center .carousel-item {
126
219
  scroll-snap-align: center;
127
220
  }
128
- &-end .carousel-item {
221
+ .carousel-end .carousel-item {
129
222
  scroll-snap-align: end;
130
223
  }
131
- }
132
224
  .chat {
133
- @apply grid grid-cols-2 gap-x-3 py-1;
134
- &-image {
135
- @apply row-span-2 self-end;
136
- }
137
- &-header {
138
- @apply row-start-1 text-sm;
139
- }
140
- &-footer {
141
- @apply row-start-3 text-sm;
142
- }
143
- &-bubble {
144
- @apply relative block w-fit px-4 py-2;
225
+ display: grid;
226
+ grid-template-columns: repeat(2, minmax(0, 1fr));
227
+ column-gap: 0.75rem;
228
+ padding-top: 0.25rem;
229
+ padding-bottom: 0.25rem;
230
+ }
231
+ .chat-image {
232
+ grid-row: span 2 / span 2;
233
+ align-self: flex-end;
234
+ }
235
+ .chat-header {
236
+ grid-row-start: 1;
237
+ font-size: 0.875rem;
238
+ line-height: 1.25rem;
239
+ }
240
+ .chat-footer {
241
+ grid-row-start: 3;
242
+ font-size: 0.875rem;
243
+ line-height: 1.25rem;
244
+ }
245
+ .chat-bubble {
246
+ position: relative;
247
+ display: block;
248
+ width: fit-content;
249
+ padding-left: 1rem;
250
+ padding-right: 1rem;
251
+ padding-top: 0.5rem;
252
+ padding-bottom: 0.5rem;
145
253
  max-width: 90%;
146
- &:before {
147
- @apply absolute bottom-0 h-3 w-3;
254
+ }
255
+ .chat-bubble:before {
256
+ position: absolute;
257
+ bottom: 0px;
258
+ height: 0.75rem;
259
+ width: 0.75rem;
148
260
  background-color: inherit;
149
261
  content: "";
150
262
  mask-size: contain;
151
263
  mask-repeat: no-repeat;
152
264
  mask-position: center;
153
- }
154
- }
155
- &-start {
156
- @apply place-items-start;
265
+ }
266
+ .chat-start {
267
+ place-items: start;
157
268
  grid-template-columns: auto 1fr;
158
- .chat-header {
159
- @apply col-start-2;
160
- }
161
- .chat-footer {
162
- @apply col-start-2;
163
- }
164
- .chat-image {
165
- @apply col-start-1;
166
- }
167
- .chat-bubble {
168
- @apply col-start-2;
169
- &:before {
269
+ }
270
+ .chat-start .chat-header {
271
+ grid-column-start: 2;
272
+ }
273
+ .chat-start .chat-footer {
274
+ grid-column-start: 2;
275
+ }
276
+ .chat-start .chat-image {
277
+ grid-column-start: 1;
278
+ }
279
+ .chat-start .chat-bubble {
280
+ grid-column-start: 2;
281
+ }
282
+ .chat-start .chat-bubble:before {
170
283
  mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
171
- [dir="rtl"] & {
284
+ }
285
+ [dir="rtl"] .chat-start .chat-bubble:before {
172
286
  mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
173
287
  }
174
- }
175
- }
176
- }
177
- &-end {
178
- @apply place-items-end;
288
+ .chat-end {
289
+ place-items: end;
179
290
  grid-template-columns: 1fr auto;
180
- .chat-header {
181
- @apply col-start-1;
182
- }
183
- .chat-footer {
184
- @apply col-start-1;
185
- }
186
- .chat-image {
187
- @apply col-start-2;
188
- }
189
- .chat-bubble {
190
- @apply col-start-1;
191
- &:before {
291
+ }
292
+ .chat-end .chat-header {
293
+ grid-column-start: 1;
294
+ }
295
+ .chat-end .chat-footer {
296
+ grid-column-start: 1;
297
+ }
298
+ .chat-end .chat-image {
299
+ grid-column-start: 2;
300
+ }
301
+ .chat-end .chat-bubble {
302
+ grid-column-start: 1;
303
+ }
304
+ .chat-end .chat-bubble:before {
192
305
  mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
193
- [dir="rtl"] & {
306
+ }
307
+ [dir="rtl"] .chat-end .chat-bubble:before {
194
308
  mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
195
309
  }
196
- }
197
- }
198
- }
199
- }
200
310
  .checkbox {
201
- @apply shrink-0;
311
+ flex-shrink: 0
202
312
  }
203
313
  .collapse:not(td):not(tr):not(colgroup) {
204
- @apply visible;
314
+ visibility: visible;
205
315
  }
206
316
  .collapse {
207
- @apply relative grid overflow-hidden;
317
+ position: relative;
318
+ display: grid;
319
+ overflow: hidden;
208
320
  grid-template-rows: auto 0fr;
209
321
  transition: grid-template-rows 0.2s;
210
322
  }
@@ -212,14 +324,19 @@
212
324
  .collapse > input[type="checkbox"],
213
325
  .collapse > input[type="radio"],
214
326
  .collapse-content {
215
- @apply col-start-1 row-start-1;
327
+ grid-column-start: 1;
328
+ grid-row-start: 1;
216
329
  }
217
330
  .collapse > input[type="checkbox"],
218
331
  .collapse > input[type="radio"] {
219
- @apply appearance-none opacity-0;
332
+ appearance: none;
333
+ opacity: 0;
220
334
  }
221
335
  .collapse-content {
222
- @apply invisible col-start-1 row-start-2 min-h-0;
336
+ visibility: hidden;
337
+ grid-column-start: 1;
338
+ grid-row-start: 2;
339
+ min-height: 0px;
223
340
  transition: visibility 0.2s;
224
341
  }
225
342
  .collapse[open],
@@ -236,189 +353,294 @@
236
353
  .collapse:focus:not(.collapse-close) > .collapse-content,
237
354
  .collapse:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-content,
238
355
  .collapse:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-content {
239
- @apply visible min-h-fit;
356
+ visibility: visible;
357
+ min-height: fit-content;
240
358
  }
241
359
  :root .countdown {
242
360
  line-height: 1em;
243
361
  }
244
362
  .countdown {
245
363
  display: inline-flex;
246
- & > * {
364
+ }
365
+ .countdown > * {
247
366
  height: 1em;
248
- @apply inline-block overflow-y-hidden;
249
- &:before {
367
+ display: inline-block;
368
+ overflow-y: hidden;
369
+ }
370
+ .countdown > *:before {
250
371
  position: relative;
251
372
  content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A";
252
373
  white-space: pre;
253
374
  top: calc(var(--value) * -1em);
254
375
  }
255
- }
256
- }
257
376
  .diff {
258
- @apply relative grid w-full overflow-hidden;
377
+ position: relative;
378
+ display: grid;
379
+ width: 100%;
380
+ overflow: hidden;
259
381
  container-type: inline-size;
260
- grid-template-columns: auto 1fr;
382
+ grid-template-columns: auto 1fr
261
383
  }
262
384
  .diff-resizer {
263
- @apply relative top-1/2 z-[1] h-12 w-[25rem] min-w-[1rem] max-w-[calc(100cqi-1rem)] resize-x overflow-hidden opacity-0;
385
+ position: relative;
386
+ top: 50%;
387
+ z-index: 1;
388
+ height: 3rem;
389
+ width: 25rem;
390
+ min-width: 1rem;
391
+ max-width: calc(100cqi - 1rem);
392
+ resize: horizontal;
393
+ overflow: hidden;
394
+ opacity: 0;
264
395
  transform-origin: 100% 100%;
265
396
  scale: 4;
266
397
  translate: 1.5rem -1.5rem;
267
- clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem));
398
+ clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem))
268
399
  }
269
400
  .diff-resizer,
270
401
  .diff-item-1,
271
402
  .diff-item-2 {
272
- @apply relative col-start-1 row-start-1;
403
+ position: relative;
404
+ grid-column-start: 1;
405
+ grid-row-start: 1
273
406
  }
274
407
  .diff-item-1:after {
275
- @apply pointer-events-none absolute bottom-0 right-px top-1/2 z-[1] h-8 w-8 content-[''];
276
- translate: 50% -50%;
408
+ pointer-events: none;
409
+ position: absolute;
410
+ bottom: 0px;
411
+ right: 1px;
412
+ top: 50%;
413
+ z-index: 1;
414
+ height: 2rem;
415
+ width: 2rem;
416
+ --tw-content: '';
417
+ content: var(--tw-content);
418
+ translate: 50% -50%
277
419
  }
278
420
  .diff-item-2 {
279
- @apply overflow-hidden;
421
+ overflow: hidden
280
422
  }
281
423
  .diff-item-1 > *,
282
424
  .diff-item-2 > * {
283
- @apply pointer-events-none absolute bottom-0 left-0 top-0 h-full w-[100cqi] max-w-none object-cover object-center;
425
+ pointer-events: none;
426
+ position: absolute;
427
+ bottom: 0px;
428
+ left: 0px;
429
+ top: 0px;
430
+ height: 100%;
431
+ width: 100cqi;
432
+ max-width: none;
433
+ object-fit: cover;
434
+ object-position: center
284
435
  }
285
436
  .divider {
286
- @apply flex flex-row items-center self-stretch;
287
- &:before,
288
- &:after {
289
- @apply h-0.5 w-full flex-grow content-[''];
290
- }
291
- &-start:before {
292
- @apply hidden;
293
- }
294
- &-end:after {
295
- @apply hidden;
296
- }
437
+ display: flex;
438
+ flex-direction: row;
439
+ align-items: center;
440
+ align-self: stretch
441
+ }
442
+ .divider:before,
443
+ .divider:after {
444
+ height: 0.125rem;
445
+ width: 100%;
446
+ flex-grow: 1;
447
+ --tw-content: '';
448
+ content: var(--tw-content)
449
+ }
450
+ .divider-start:before {
451
+ display: none
452
+ }
453
+ .divider-end:after {
454
+ display: none
297
455
  }
298
456
  .drawer {
299
- @apply relative grid;
457
+ position: relative;
458
+ display: grid;
300
459
  grid-auto-columns: max-content auto;
301
- &-content {
302
- @apply col-start-2 row-start-1;
303
- }
304
- &-side {
305
- @apply pointer-events-none fixed start-0 top-0 col-start-1 row-start-1 grid w-full grid-cols-1 grid-rows-1 items-start justify-items-start overflow-y-auto overscroll-contain;
460
+ }
461
+ .drawer-content {
462
+ grid-column-start: 2;
463
+ grid-row-start: 1;
464
+ }
465
+ .drawer-side {
466
+ pointer-events: none;
467
+ position: fixed;
468
+ inset-inline-start: 0px;
469
+ top: 0px;
470
+ grid-column-start: 1;
471
+ grid-row-start: 1;
472
+ display: grid;
473
+ width: 100%;
474
+ grid-template-columns: repeat(1, minmax(0, 1fr));
475
+ grid-template-rows: repeat(1, minmax(0, 1fr));
476
+ align-items: flex-start;
477
+ justify-items: start;
478
+ overflow-y: auto;
479
+ overscroll-behavior: contain;
306
480
  height: 100vh;
307
481
  height: 100dvh;
308
482
  scrollbar-width: none;
309
- &::-webkit-scrollbar {
310
- @apply hidden;
311
- }
312
- & > .drawer-overlay {
313
- @apply sticky top-0 place-self-stretch;
314
- }
315
- & > * {
316
- @apply col-start-1 row-start-1;
317
- }
318
- & > *:not(.drawer-overlay) {
319
- @apply transition-transform duration-300 ease-out will-change-transform;
483
+ }
484
+ .drawer-side::-webkit-scrollbar {
485
+ display: none;
486
+ }
487
+ .drawer-side > .drawer-overlay {
488
+ position: sticky;
489
+ top: 0px;
490
+ place-self: stretch;
491
+ }
492
+ .drawer-side > * {
493
+ grid-column-start: 1;
494
+ grid-row-start: 1;
495
+ }
496
+ .drawer-side > *:not(.drawer-overlay) {
497
+ transition-property: transform;
498
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
499
+ transition-duration: 300ms;
500
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
501
+ will-change: transform;
320
502
  transform: translateX(-100%);
321
- [dir="rtl"] & {
503
+ }
504
+ [dir="rtl"] .drawer-side > *:not(.drawer-overlay) {
322
505
  transform: translateX(100%);
323
506
  }
324
- }
325
- }
326
- &-toggle {
327
- @apply fixed h-0 w-0 appearance-none opacity-0;
328
- &:checked {
329
- & ~ .drawer-side {
330
- @apply pointer-events-auto visible;
331
- & > *:not(.drawer-overlay) {
507
+ .drawer-toggle {
508
+ position: fixed;
509
+ height: 0px;
510
+ width: 0px;
511
+ appearance: none;
512
+ opacity: 0;
513
+ }
514
+ .drawer-toggle:checked ~ .drawer-side {
515
+ pointer-events: auto;
516
+ visibility: visible;
517
+ }
518
+ .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
332
519
  transform: translateX(0%);
333
520
  }
334
- }
335
- }
336
- }
337
- &-end {
521
+ .drawer-end {
338
522
  grid-auto-columns: auto max-content;
339
- .drawer-toggle {
340
- & ~ .drawer-content {
341
- @apply col-start-1;
342
- }
343
- & ~ .drawer-side {
344
- @apply col-start-2 justify-items-end;
345
- }
346
- & ~ .drawer-side > *:not(.drawer-overlay) {
523
+ }
524
+ .drawer-end .drawer-toggle ~ .drawer-content {
525
+ grid-column-start: 1;
526
+ }
527
+ .drawer-end .drawer-toggle ~ .drawer-side {
528
+ grid-column-start: 2;
529
+ justify-items: end;
530
+ }
531
+ .drawer-end .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) {
347
532
  transform: translateX(100%);
348
- [dir="rtl"] & {
533
+ }
534
+ [dir="rtl"] .drawer-end .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) {
349
535
  transform: translateX(-100%);
350
536
  }
351
- }
352
- &:checked ~ .drawer-side > *:not(.drawer-overlay) {
537
+ .drawer-end .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
353
538
  transform: translateX(0%);
354
539
  }
355
- }
356
- }
357
- }
358
540
  .dropdown {
359
- @apply relative inline-block;
541
+ position: relative;
542
+ display: inline-block
360
543
  }
361
544
  .dropdown > *:not(summary):focus {
362
- @apply outline-none;
545
+ outline: 2px solid transparent;
546
+ outline-offset: 2px
363
547
  }
364
548
  .dropdown .dropdown-content {
365
- @apply absolute;
549
+ position: absolute
366
550
  }
367
551
  .dropdown:is(:not(details)) .dropdown-content {
368
- @apply invisible opacity-0;
552
+ visibility: hidden;
553
+ opacity: 0
369
554
  }
370
555
  .dropdown-end .dropdown-content {
371
- @apply end-0;
556
+ inset-inline-end: 0px
372
557
  }
373
558
  .dropdown-left .dropdown-content {
374
- @apply bottom-auto end-full top-0;
559
+ bottom: auto;
560
+ inset-inline-end: 100%;
561
+ top: 0px
375
562
  }
376
563
  .dropdown-right .dropdown-content {
377
- @apply bottom-auto start-full top-0;
564
+ bottom: auto;
565
+ inset-inline-start: 100%;
566
+ top: 0px
378
567
  }
379
568
  .dropdown-bottom .dropdown-content {
380
- @apply bottom-auto top-full;
569
+ bottom: auto;
570
+ top: 100%
381
571
  }
382
572
  .dropdown-top .dropdown-content {
383
- @apply bottom-full top-auto;
573
+ bottom: 100%;
574
+ top: auto
384
575
  }
385
576
  .dropdown-end.dropdown-right .dropdown-content {
386
- @apply bottom-0 top-auto;
577
+ bottom: 0px;
578
+ top: auto
387
579
  }
388
580
  .dropdown-end.dropdown-left .dropdown-content {
389
- @apply bottom-0 top-auto;
581
+ bottom: 0px;
582
+ top: auto
390
583
  }
391
584
  .dropdown.dropdown-open .dropdown-content,
392
585
  .dropdown:not(.dropdown-hover):focus .dropdown-content,
393
586
  .dropdown:focus-within .dropdown-content {
394
- @apply visible opacity-100;
587
+ visibility: visible;
588
+ opacity: 1
395
589
  }
396
590
  @media (hover: hover) {
397
591
  .dropdown.dropdown-hover:hover .dropdown-content {
398
- @apply visible opacity-100;
592
+ visibility: visible;
593
+ opacity: 1
399
594
  }
400
595
  }
401
596
  .dropdown:is(details) summary::-webkit-details-marker {
402
- @apply hidden;
597
+ display: none
403
598
  }
404
599
  .file-input {
405
- @apply h-12 flex-shrink pe-4 text-sm leading-loose;
406
- &::file-selector-button {
407
- @apply me-4 inline-flex h-full flex-shrink-0 cursor-pointer select-none flex-wrap items-center justify-center px-4 text-center text-sm transition duration-200 ease-out;
408
- line-height: 1em;
409
- }
600
+ height: 3rem;
601
+ flex-shrink: 1;
602
+ padding-inline-end: 1rem;
603
+ font-size: 0.875rem;
604
+ line-height: 1.25rem;
605
+ line-height: 2
606
+ }
607
+ .file-input::file-selector-button {
608
+ margin-inline-end: 1rem;
609
+ display: inline-flex;
610
+ height: 100%;
611
+ flex-shrink: 0;
612
+ cursor: pointer;
613
+ user-select: none;
614
+ flex-wrap: wrap;
615
+ align-items: center;
616
+ justify-content: center;
617
+ padding-left: 1rem;
618
+ padding-right: 1rem;
619
+ text-align: center;
620
+ font-size: 0.875rem;
621
+ line-height: 1.25rem;
622
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
623
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
624
+ transition-duration: 200ms;
625
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
626
+ line-height: 1em
410
627
  }
411
628
  .footer {
412
- @apply grid w-full grid-flow-row place-items-start;
413
- & > * {
414
- @apply grid place-items-start;
415
- }
416
- &-center {
417
- @apply place-items-center text-center;
418
- & > * {
419
- @apply place-items-center;
420
- }
421
- }
629
+ display: grid;
630
+ width: 100%;
631
+ grid-auto-flow: row;
632
+ place-items: start;
633
+ }
634
+ .footer > * {
635
+ display: grid;
636
+ place-items: start;
637
+ }
638
+ .footer-center {
639
+ place-items: center;
640
+ text-align: center;
641
+ }
642
+ .footer-center > * {
643
+ place-items: center;
422
644
  }
423
645
  @media (min-width: 48rem) {
424
646
  .footer {
@@ -429,101 +651,128 @@
429
651
  }
430
652
  }
431
653
  .form-control {
432
- @apply flex flex-col;
654
+ display: flex;
655
+ flex-direction: column
433
656
  }
434
657
  .label {
435
- @apply flex select-none items-center justify-between;
658
+ display: flex;
659
+ user-select: none;
660
+ align-items: center;
661
+ justify-content: space-between
436
662
  }
437
663
  .hero {
438
- @apply grid w-full place-items-center bg-cover bg-center;
439
- & > * {
440
- @apply col-start-1 row-start-1;
441
- }
442
- &-overlay {
443
- @apply col-start-1 row-start-1 h-full w-full;
444
- }
445
- &-content {
446
- @apply z-0 flex items-center justify-center;
447
- }
664
+ display: grid;
665
+ width: 100%;
666
+ place-items: center;
667
+ background-size: cover;
668
+ background-position: center
669
+ }
670
+ .hero > * {
671
+ grid-column-start: 1;
672
+ grid-row-start: 1
673
+ }
674
+ .hero-overlay {
675
+ grid-column-start: 1;
676
+ grid-row-start: 1;
677
+ height: 100%;
678
+ width: 100%
679
+ }
680
+ .hero-content {
681
+ z-index: 0;
682
+ display: flex;
683
+ align-items: center;
684
+ justify-content: center
448
685
  }
449
686
  .indicator {
450
- @apply relative inline-flex;
687
+ position: relative;
688
+ display: inline-flex;
451
689
  width: max-content;
452
- & :where(.indicator-item) {
690
+ }
691
+ .indicator :where(.indicator-item) {
453
692
  z-index: 1;
454
- @apply absolute transform whitespace-nowrap;
693
+ position: absolute;
694
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
695
+ white-space: nowrap;
455
696
  }
456
- }
457
697
  .input {
458
- @apply flex-shrink;
459
- @apply h-12 px-4 text-sm leading-loose;
698
+ flex-shrink: 1;
699
+ height: 3rem;
700
+ padding-left: 1rem;
701
+ padding-right: 1rem;
702
+ font-size: 0.875rem;
703
+ line-height: 1.25rem;
704
+ line-height: 2
460
705
  }
461
706
  .join {
462
- @apply inline-flex items-stretch;
463
- & :where(.join-item) {
707
+ display: inline-flex;
708
+ align-items: stretch;
709
+ }
710
+ .join :where(.join-item) {
464
711
  border-start-end-radius: 0;
465
712
  border-end-end-radius: 0;
466
713
  border-end-start-radius: 0;
467
714
  border-start-start-radius: 0;
468
715
  }
469
- & .join-item:not(:first-child):not(:last-child),
470
- & *:not(:first-child):not(:last-child) .join-item {
716
+ .join .join-item:not(:first-child):not(:last-child),
717
+ .join *:not(:first-child):not(:last-child) .join-item {
471
718
  border-start-end-radius: 0;
472
719
  border-end-end-radius: 0;
473
720
  border-end-start-radius: 0;
474
721
  border-start-start-radius: 0;
475
722
  }
476
-
477
- & .join-item:first-child:not(:last-child),
478
- & *:first-child:not(:last-child) .join-item {
723
+ .join .join-item:first-child:not(:last-child),
724
+ .join *:first-child:not(:last-child) .join-item {
479
725
  border-start-end-radius: 0;
480
726
  border-end-end-radius: 0;
481
727
  }
482
-
483
- & .dropdown .join-item:first-child:not(:last-child),
484
- & *:first-child:not(:last-child) .dropdown .join-item {
728
+ .join .dropdown .join-item:first-child:not(:last-child),
729
+ .join *:first-child:not(:last-child) .dropdown .join-item {
485
730
  border-start-end-radius: inherit;
486
731
  border-end-end-radius: inherit;
487
732
  }
488
-
489
- & :where(.join-item:first-child:not(:last-child)),
490
- & :where(*:first-child:not(:last-child) .join-item) {
733
+ .join :where(.join-item:first-child:not(:last-child)),
734
+ .join :where(*:first-child:not(:last-child) .join-item) {
491
735
  border-end-start-radius: inherit;
492
736
  border-start-start-radius: inherit;
493
737
  }
494
-
495
- & .join-item:last-child:not(:first-child),
496
- & *:last-child:not(:first-child) .join-item {
738
+ .join .join-item:last-child:not(:first-child),
739
+ .join *:last-child:not(:first-child) .join-item {
497
740
  border-end-start-radius: 0;
498
741
  border-start-start-radius: 0;
499
742
  }
500
-
501
- & :where(.join-item:last-child:not(:first-child)),
502
- & :where(*:last-child:not(:first-child) .join-item) {
743
+ .join :where(.join-item:last-child:not(:first-child)),
744
+ .join :where(*:last-child:not(:first-child) .join-item) {
503
745
  border-start-end-radius: inherit;
504
746
  border-end-end-radius: inherit;
505
747
  }
506
- }
507
748
 
508
749
  @supports not selector(:has(*)) {
509
750
  :where(.join *) {
510
- @apply rounded-[inherit];
511
- }
751
+ border-radius: inherit;
752
+ }
512
753
  }
513
754
 
514
755
  @supports selector(:has(*)) {
515
756
  :where(.join *:has(.join-item)) {
516
- @apply rounded-[inherit];
517
- }
757
+ border-radius: inherit;
758
+ }
518
759
  }
519
760
  .kbd {
520
- @apply inline-flex items-center justify-center;
761
+ display: inline-flex;
762
+ align-items: center;
763
+ justify-content: center
521
764
  }
522
765
  .link {
523
- @apply cursor-pointer underline;
524
- &-hover {
525
- @apply no-underline [@media(hover:hover)]:hover:underline;
526
- }
766
+ cursor: pointer;
767
+ text-decoration-line: underline
768
+ }
769
+ .link-hover {
770
+ text-decoration-line: none
771
+ }
772
+ @media(hover:hover) {
773
+ .link-hover:hover {
774
+ text-decoration-line: underline
775
+ }
527
776
  }
528
777
  .mask {
529
778
  mask-size: contain;
@@ -533,69 +782,100 @@
533
782
  .mask-half-1 {
534
783
  mask-size: 200%;
535
784
  mask-position: left;
536
- @apply [mask-position:left] rtl:[mask-position:right];
785
+ }
786
+ :is([dir="rtl"] .mask-half-1) {
787
+ mask-position: right;
537
788
  }
538
789
  .mask-half-2 {
539
790
  mask-size: 200%;
540
791
  mask-position: right;
541
- @apply [mask-position:right] rtl:[mask-position:left];
792
+ }
793
+ :is([dir="rtl"] .mask-half-2) {
794
+ mask-position: left;
542
795
  }
543
796
  .menu {
544
- @apply flex flex-col flex-wrap text-sm;
545
- :where(li ul) {
546
- @apply relative whitespace-nowrap;
547
- }
548
- :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
549
- :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
550
- @apply grid grid-flow-col content-start items-center gap-2;
797
+ display: flex;
798
+ flex-direction: column;
799
+ flex-wrap: wrap;
800
+ font-size: 0.875rem;
801
+ line-height: 1.25rem
802
+ }
803
+ .menu :where(li ul) {
804
+ position: relative;
805
+ white-space: nowrap
806
+ }
807
+ .menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
808
+ .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
809
+ display: grid;
810
+ grid-auto-flow: column;
811
+ align-content: flex-start;
812
+ align-items: center;
813
+ gap: 0.5rem;
551
814
  grid-auto-columns: minmax(auto, max-content) auto max-content;
552
- user-select: none;
553
- }
554
- & li.disabled {
555
- @apply cursor-not-allowed select-none;
556
- }
557
- :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
558
- @apply hidden;
559
- }
815
+ user-select: none
560
816
  }
561
- :where(.menu li) {
562
- @apply relative flex shrink-0 flex-col flex-wrap items-stretch;
563
- .badge {
564
- @apply justify-self-end;
565
- }
817
+ .menu li.disabled {
818
+ cursor: not-allowed;
819
+ user-select: none
566
820
  }
567
- .mockup {
568
- &-code {
569
- @apply relative overflow-hidden overflow-x-auto;
570
- pre[data-prefix] {
571
- &:before {
821
+ .menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
822
+ display: none
823
+ }
824
+ :where(.menu li) {
825
+ position: relative;
826
+ display: flex;
827
+ flex-shrink: 0;
828
+ flex-direction: column;
829
+ flex-wrap: wrap;
830
+ align-items: stretch
831
+ }
832
+ :where(.menu li) .badge {
833
+ justify-self: end
834
+ }
835
+ .mockup-code {
836
+ position: relative;
837
+ overflow: hidden;
838
+ overflow-x: auto;
839
+ }
840
+ .mockup-code pre[data-prefix]:before {
572
841
  content: attr(data-prefix);
573
- @apply inline-block text-right;
842
+ display: inline-block;
843
+ text-align: right;
574
844
  }
575
- }
576
- }
577
- &-window {
578
- @apply relative overflow-hidden overflow-x-auto;
579
- pre[data-prefix] {
580
- &:before {
845
+ .mockup-window {
846
+ position: relative;
847
+ overflow: hidden;
848
+ overflow-x: auto;
849
+ }
850
+ .mockup-window pre[data-prefix]:before {
581
851
  content: attr(data-prefix);
582
- @apply inline-block text-right;
852
+ display: inline-block;
853
+ text-align: right;
583
854
  }
584
- }
585
- }
586
- &-browser {
587
- @apply relative overflow-hidden overflow-x-auto;
588
- pre[data-prefix] {
589
- &:before {
855
+ .mockup-browser {
856
+ position: relative;
857
+ overflow: hidden;
858
+ overflow-x: auto;
859
+ }
860
+ .mockup-browser pre[data-prefix]:before {
590
861
  content: attr(data-prefix);
591
- @apply inline-block text-right;
862
+ display: inline-block;
863
+ text-align: right;
592
864
  }
593
- }
594
- }
595
- }
596
865
  .modal {
597
866
  /* @apply pointer-events-none invisible fixed inset-0 flex justify-center opacity-0; */
598
- @apply pointer-events-none fixed inset-0 m-0 grid h-full max-h-none w-full max-w-none justify-items-center p-0 opacity-0;
867
+ pointer-events: none;
868
+ position: fixed;
869
+ inset: 0px;
870
+ margin: 0px;
871
+ display: grid;
872
+ height: 100%;
873
+ max-height: none;
874
+ width: 100%;
875
+ max-width: none;
876
+ justify-items: center;
877
+ padding: 0px;
878
+ opacity: 0;
599
879
  overscroll-behavior: contain;
600
880
  z-index: 999;
601
881
  }
@@ -603,7 +883,7 @@
603
883
  overscroll-behavior: auto;
604
884
  }
605
885
  :where(.modal) {
606
- @apply items-center;
886
+ align-items: center;
607
887
  }
608
888
  .modal-box {
609
889
  max-height: calc(100vh - 5em);
@@ -612,22 +892,30 @@
612
892
  .modal:target,
613
893
  .modal-toggle:checked + .modal,
614
894
  .modal[open] {
615
- @apply pointer-events-auto visible opacity-100;
895
+ pointer-events: auto;
896
+ visibility: visible;
897
+ opacity: 1;
616
898
  }
617
899
  .modal-action {
618
- @apply flex;
900
+ display: flex;
619
901
  }
620
902
  .modal-toggle {
621
- @apply fixed h-0 w-0 appearance-none opacity-0;
903
+ position: fixed;
904
+ height: 0px;
905
+ width: 0px;
906
+ appearance: none;
907
+ opacity: 0;
622
908
  }
623
909
  :root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
624
- @apply overflow-hidden;
910
+ overflow: hidden;
625
911
  }
626
912
  .navbar {
627
- @apply flex items-center;
913
+ display: flex;
914
+ align-items: center;
628
915
  }
629
916
  :where(.navbar > *) {
630
- @apply inline-flex items-center;
917
+ display: inline-flex;
918
+ align-items: center;
631
919
  }
632
920
  .navbar-start {
633
921
  width: 50%;
@@ -641,29 +929,42 @@
641
929
  justify-content: flex-end;
642
930
  }
643
931
  .progress {
644
- @apply relative w-full appearance-none overflow-hidden;
932
+ position: relative;
933
+ width: 100%;
934
+ appearance: none;
935
+ overflow: hidden
645
936
  }
646
937
  .radial-progress {
647
- @apply relative inline-grid h-[var(--size)] w-[var(--size)] place-content-center rounded-full bg-transparent;
938
+ position: relative;
939
+ display: inline-grid;
940
+ height: var(--size);
941
+ width: var(--size);
942
+ place-content: center;
943
+ border-radius: 9999px;
944
+ background-color: transparent;
648
945
  vertical-align: middle;
649
946
  box-sizing: content-box;
650
947
  }
651
948
  .radial-progress::-moz-progress-bar {
652
- @apply appearance-none bg-transparent;
949
+ appearance: none;
950
+ background-color: transparent;
653
951
  }
654
952
  .radial-progress::-webkit-progress-value {
655
- @apply appearance-none bg-transparent;
953
+ appearance: none;
954
+ background-color: transparent;
656
955
  }
657
956
  .radial-progress::-webkit-progress-bar {
658
- @apply appearance-none bg-transparent;
957
+ appearance: none;
958
+ background-color: transparent;
659
959
  }
660
960
  .radial-progress:before,
661
961
  .radial-progress:after {
662
- @apply absolute rounded-full;
962
+ position: absolute;
963
+ border-radius: 9999px;
663
964
  content: "";
664
965
  }
665
966
  .radial-progress:before {
666
- @apply inset-0;
967
+ inset: 0px;
667
968
  background:
668
969
  radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness)
669
970
  no-repeat,
@@ -684,23 +985,37 @@
684
985
  transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
685
986
  }
686
987
  .radio {
687
- @apply shrink-0;
988
+ flex-shrink: 0
688
989
  }
689
990
  .range {
690
- @apply h-6 w-full cursor-pointer;
691
- &:focus {
991
+ height: 1.5rem;
992
+ width: 100%;
993
+ cursor: pointer;
994
+ }
995
+ .range:focus {
692
996
  outline: none;
693
997
  }
694
- }
695
998
  .rating {
696
- @apply relative inline-flex;
697
- :where(input) {
698
- @apply cursor-pointer rounded-none;
699
- }
999
+ position: relative;
1000
+ display: inline-flex
1001
+ }
1002
+ .rating :where(input) {
1003
+ cursor: pointer;
1004
+ border-radius: 0px
700
1005
  }
701
1006
  .select {
702
- @apply inline-flex cursor-pointer select-none appearance-none;
703
- @apply h-12 min-h-[3rem] pl-4 pr-10 text-sm leading-loose;
1007
+ display: inline-flex;
1008
+ cursor: pointer;
1009
+ user-select: none;
1010
+ appearance: none;
1011
+ height: 3rem;
1012
+ min-height: 3rem;
1013
+ padding-left: 1rem;
1014
+ padding-right: 2.5rem;
1015
+ font-size: 0.875rem;
1016
+ line-height: 1.25rem;
1017
+ line-height: 2
1018
+ }
704
1019
 
705
1020
  /* disabled */
706
1021
  /* &-disabled,
@@ -708,150 +1023,220 @@
708
1023
  @apply pointer-events-none;
709
1024
  } */
710
1025
  /* multiple */
711
- &[multiple] {
712
- @apply h-auto;
713
- }
1026
+ .select[multiple] {
1027
+ height: auto
714
1028
  }
715
1029
  .stack {
716
- @apply inline-grid;
717
- & > * {
718
- @apply col-start-1 row-start-1;
719
- }
720
- & > * {
1030
+ display: inline-grid;
1031
+ }
1032
+ .stack > * {
1033
+ grid-column-start: 1;
1034
+ grid-row-start: 1;
721
1035
  transform: translateY(10%) scale(0.9);
722
1036
  z-index: 1;
723
- }
724
- & > *:nth-child(2) {
1037
+ }
1038
+ .stack > *:nth-child(2) {
725
1039
  transform: translateY(5%) scale(0.95);
726
1040
  z-index: 2;
727
1041
  }
728
- & > *:nth-child(1) {
1042
+ .stack > *:nth-child(1) {
729
1043
  transform: translateY(0) scale(1);
730
1044
  z-index: 3;
731
1045
  }
732
- }
733
1046
  .stats {
734
- @apply inline-grid;
1047
+ display: inline-grid
735
1048
  }
736
1049
  :where(.stats) {
737
- @apply grid-flow-col;
1050
+ grid-auto-flow: column
738
1051
  }
739
1052
  .stat {
740
- @apply inline-grid w-full;
741
- grid-template-columns: repeat(1, 1fr);
742
- &-figure {
743
- @apply col-start-2 row-span-3 row-start-1 place-self-center justify-self-end;
744
- }
745
- &-title {
746
- @apply col-start-1 whitespace-nowrap;
747
- }
748
- &-value {
749
- @apply col-start-1 whitespace-nowrap;
750
- }
751
- &-desc {
752
- @apply col-start-1 whitespace-nowrap;
753
- }
754
- &-actions {
755
- @apply col-start-1 whitespace-nowrap;
756
- }
1053
+ display: inline-grid;
1054
+ width: 100%;
1055
+ grid-template-columns: repeat(1, 1fr)
1056
+ }
1057
+ .stat-figure {
1058
+ grid-column-start: 2;
1059
+ grid-row: span 3 / span 3;
1060
+ grid-row-start: 1;
1061
+ place-self: center;
1062
+ justify-self: end
1063
+ }
1064
+ .stat-title {
1065
+ grid-column-start: 1;
1066
+ white-space: nowrap
1067
+ }
1068
+ .stat-value {
1069
+ grid-column-start: 1;
1070
+ white-space: nowrap
1071
+ }
1072
+ .stat-desc {
1073
+ grid-column-start: 1;
1074
+ white-space: nowrap
1075
+ }
1076
+ .stat-actions {
1077
+ grid-column-start: 1;
1078
+ white-space: nowrap
757
1079
  }
758
1080
  /* .stats.grid-flow-row {
759
1081
  @apply auto-rows-fr;
760
1082
  } */
761
1083
  .steps {
762
- @apply inline-grid grid-flow-col overflow-hidden overflow-x-auto;
1084
+ display: inline-grid;
1085
+ grid-auto-flow: column;
1086
+ overflow: hidden;
1087
+ overflow-x: auto;
763
1088
  counter-reset: step;
764
- grid-auto-columns: 1fr;
765
- .step {
766
- @apply grid grid-cols-1 grid-rows-2 place-items-center text-center;
767
- }
1089
+ grid-auto-columns: 1fr
1090
+ }
1091
+ .steps .step {
1092
+ display: grid;
1093
+ grid-template-columns: repeat(1, minmax(0, 1fr));
1094
+ grid-template-rows: repeat(2, minmax(0, 1fr));
1095
+ place-items: center;
1096
+ text-align: center
768
1097
  }
769
1098
  .swap {
770
- @apply relative inline-grid select-none place-content-center;
1099
+
1100
+ position: relative;
1101
+
1102
+ display: inline-grid;
1103
+
1104
+ user-select: none;
1105
+
1106
+ place-content: center
771
1107
  }
772
1108
 
773
1109
  .swap > * {
774
- @apply col-start-1 row-start-1;
1110
+
1111
+ grid-column-start: 1;
1112
+
1113
+ grid-row-start: 1
775
1114
  }
776
1115
 
777
1116
  .swap input {
778
- @apply appearance-none;
1117
+
1118
+ appearance: none
779
1119
  }
780
1120
 
781
1121
  .swap .swap-on,
782
1122
  .swap .swap-indeterminate,
783
1123
  .swap input:indeterminate ~ .swap-on {
784
- @apply opacity-0;
1124
+
1125
+ opacity: 0
785
1126
  }
786
1127
 
787
1128
  .swap input:checked ~ .swap-off,
788
1129
  .swap-active .swap-off,
789
1130
  .swap input:indeterminate ~ .swap-off {
790
- @apply opacity-0;
1131
+
1132
+ opacity: 0
791
1133
  }
792
1134
 
793
1135
  .swap input:checked ~ .swap-on,
794
1136
  .swap-active .swap-on,
795
1137
  .swap input:indeterminate ~ .swap-indeterminate {
796
- @apply opacity-100;
1138
+
1139
+ opacity: 1
797
1140
  }
798
1141
  .tabs {
799
- @apply grid items-end;
1142
+ display: grid;
1143
+ align-items: flex-end;
800
1144
  }
801
- .tabs-lifted {
802
- &:has(.tab-content[class^="rounded-"]) .tab:first-child:not(.tab-active),
803
- &:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(.tab-active) {
804
- @apply border-b-transparent;
805
- }
1145
+ .tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(.tab-active),
1146
+ .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(.tab-active) {
1147
+ border-bottom-color: transparent;
806
1148
  }
807
1149
  .tab {
808
- @apply relative row-start-1 inline-flex h-8 cursor-pointer select-none appearance-none flex-wrap items-center justify-center text-center text-sm leading-loose;
1150
+ position: relative;
1151
+ grid-row-start: 1;
1152
+ display: inline-flex;
1153
+ height: 2rem;
1154
+ cursor: pointer;
1155
+ user-select: none;
1156
+ appearance: none;
1157
+ flex-wrap: wrap;
1158
+ align-items: center;
1159
+ justify-content: center;
1160
+ text-align: center;
1161
+ font-size: 0.875rem;
1162
+ line-height: 1.25rem;
1163
+ line-height: 2;
809
1164
  --tab-padding: 1rem;
810
- &:is(input[type="radio"]):after {
1165
+ }
1166
+ .tab:is(input[type="radio"]):after {
811
1167
  --tw-content: attr(aria-label);
812
1168
  content: var(--tw-content);
813
1169
  }
814
- &:not(input):empty {
815
- @apply cursor-default;
1170
+ .tab:not(input):empty {
1171
+ cursor: default;
816
1172
  grid-column-start: span 9999;
817
- }
818
1173
  }
819
1174
  .tab-content {
820
- @apply col-span-full col-end-[span_9999] row-start-2 -mt-[--tab-border] hidden border-transparent;
1175
+ grid-column: 1 / -1;
1176
+ grid-column-end: span 9999;
1177
+ grid-row-start: 2;
1178
+ margin-top: calc(var(--tab-border) * -1);
1179
+ display: none;
1180
+ border-color: transparent;
821
1181
  border-width: var(--tab-border, 0);
822
- :checked + &:nth-child(2),
823
- .tab-active + &:nth-child(2) {
824
- @apply rounded-ss-none;
825
- }
1182
+ }
1183
+ :checked + .tab-content:nth-child(2),
1184
+ .tab-active + .tab-content:nth-child(2) {
1185
+ border-start-start-radius: 0px;
826
1186
  }
827
1187
  input.tab:checked + .tab-content,
828
1188
  .tab-active + .tab-content {
829
- @apply block;
1189
+ display: block;
830
1190
  }
831
1191
  .table {
832
- @apply relative w-full;
833
- :where(.table-pin-rows thead tr) {
834
- @apply bg-base-100 sticky top-0 z-[1];
835
- }
836
- :where(.table-pin-rows tfoot tr) {
837
- @apply bg-base-100 sticky bottom-0 z-[1];
838
- }
839
- :where(.table-pin-cols tr th) {
840
- @apply bg-base-100 sticky left-0 right-0;
841
- }
842
- &-zebra tbody tr:nth-child(even) :where(.table-pin-cols tr th) {
843
- @apply bg-base-200;
844
- }
1192
+ position: relative;
1193
+ width: 100%
1194
+ }
1195
+ .table :where(.table-pin-rows thead tr) {
1196
+ position: sticky;
1197
+ top: 0px;
1198
+ z-index: 1;
1199
+ --tw-bg-opacity: 1;
1200
+ background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)))
1201
+ }
1202
+ .table :where(.table-pin-rows tfoot tr) {
1203
+ position: sticky;
1204
+ bottom: 0px;
1205
+ z-index: 1;
1206
+ --tw-bg-opacity: 1;
1207
+ background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)))
1208
+ }
1209
+ .table :where(.table-pin-cols tr th) {
1210
+ position: sticky;
1211
+ left: 0px;
1212
+ right: 0px;
1213
+ --tw-bg-opacity: 1;
1214
+ background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)))
1215
+ }
1216
+ .table-zebra tbody tr:nth-child(even) :where(.table-pin-cols tr th) {
1217
+ --tw-bg-opacity: 1;
1218
+ background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)))
845
1219
  }
846
1220
  .textarea {
847
- @apply min-h-[3rem] flex-shrink;
848
- @apply px-4 py-2 text-sm leading-loose;
1221
+ min-height: 3rem;
1222
+ flex-shrink: 1;
1223
+ padding-left: 1rem;
1224
+ padding-right: 1rem;
1225
+ padding-top: 0.5rem;
1226
+ padding-bottom: 0.5rem;
1227
+ font-size: 0.875rem;
1228
+ line-height: 1.25rem;
1229
+ line-height: 2
849
1230
  }
850
1231
  .timeline {
851
- @apply relative flex;
1232
+ position: relative;
1233
+ display: flex
852
1234
  }
853
1235
  :where(.timeline > li) {
854
- @apply relative grid shrink-0 items-center;
1236
+ position: relative;
1237
+ display: grid;
1238
+ flex-shrink: 0;
1239
+ align-items: center;
855
1240
  grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(
856
1241
  --timeline-row-end,
857
1242
  minmax(0, 1fr)
@@ -859,32 +1244,51 @@ input.tab:checked + .tab-content,
859
1244
  grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(
860
1245
  --timeline-col-end,
861
1246
  minmax(0, 1fr)
862
- );
1247
+ )
863
1248
  }
864
1249
  .timeline > li > hr {
865
- @apply w-full border-0;
1250
+ width: 100%;
1251
+ border-width: 0px
866
1252
  }
867
- :where(.timeline > li > hr) {
868
- &:first-child {
869
- @apply col-start-1 row-start-2;
870
- }
871
- &:last-child {
872
- @apply col-start-3 col-end-[none] row-start-2 row-end-auto;
873
- }
1253
+ :where(.timeline > li > hr):first-child {
1254
+ grid-column-start: 1;
1255
+ grid-row-start: 2
1256
+ }
1257
+ :where(.timeline > li > hr):last-child {
1258
+ grid-column-start: 3;
1259
+ grid-column-end: none;
1260
+ grid-row-start: 2;
1261
+ grid-row-end: auto
874
1262
  }
875
-
876
1263
  .timeline-start {
877
- @apply col-start-1 col-end-4 row-start-1 row-end-2 m-1 self-end justify-self-center;
1264
+ grid-column-start: 1;
1265
+ grid-column-end: 4;
1266
+ grid-row-start: 1;
1267
+ grid-row-end: 2;
1268
+ margin: 0.25rem;
1269
+ align-self: flex-end;
1270
+ justify-self: center
878
1271
  }
879
1272
  .timeline-middle {
880
- @apply col-start-2 row-start-2;
1273
+ grid-column-start: 2;
1274
+ grid-row-start: 2
881
1275
  }
882
1276
  .timeline-end {
883
- @apply col-start-1 col-end-4 row-start-3 row-end-4 m-1 self-start justify-self-center;
1277
+ grid-column-start: 1;
1278
+ grid-column-end: 4;
1279
+ grid-row-start: 3;
1280
+ grid-row-end: 4;
1281
+ margin: 0.25rem;
1282
+ align-self: flex-start;
1283
+ justify-self: center
884
1284
  }
885
1285
  .toast {
886
- @apply fixed flex min-w-fit flex-col whitespace-nowrap;
1286
+ position: fixed;
1287
+ display: flex;
1288
+ min-width: fit-content;
1289
+ flex-direction: column;
1290
+ white-space: nowrap
887
1291
  }
888
1292
  .toggle {
889
- @apply shrink-0;
1293
+ flex-shrink: 0
890
1294
  }