@sigx/zero-daisyui 0.15.0 → 0.16.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.
@@ -16,6 +16,9 @@
16
16
  transition: background var(--duration-normal) var(--ease-standard);
17
17
  padding-left: calc(var(--size-field) * 4);
18
18
  padding-right: calc(var(--size-field) * 4);
19
+ width: max-content;
20
+ flex-shrink: 0;
21
+ flex-wrap: nowrap;
19
22
  }
20
23
 
21
24
  .zx-drawer__trigger.zx-f-disabled {
@@ -24,8 +27,15 @@
24
27
  }
25
28
 
26
29
  .zx-drawer__trigger.zx-f-focus-visible {
27
- outline: 2px solid var(--color-base-content);
30
+ outline: none;
28
31
  outline-offset: 2px;
32
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
33
+ }
34
+
35
+ .zx-drawer__trigger.zx-f-pressed {
36
+ background: var(--color-base-300);
37
+ transform: translateY(1px);
38
+ box-shadow: none;
29
39
  }
30
40
 
31
41
  .zx-drawer__panel {
@@ -40,6 +50,7 @@
40
50
  border-radius: var(--radius-box);
41
51
  box-shadow: var(--shadow-xl);
42
52
  box-sizing: border-box;
53
+ --l-measure: 320px;
43
54
  width: 100%;
44
55
  max-width: var(--l-measure);
45
56
  }
@@ -55,18 +66,20 @@
55
66
 
56
67
  .zx-drawer__panel.zx-p-top {
57
68
  --drawer-travel: 0 -100%;
69
+ --l-measure: none;
58
70
  }
59
71
 
60
72
  .zx-drawer__panel.zx-p-bottom {
61
73
  --drawer-travel: 0 100%;
74
+ --l-measure: none;
62
75
  }
63
76
 
64
77
  .zx-drawer__panel.zx-l-dock-sheet {
65
78
  opacity: 1;
66
79
  transition: translate var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
67
- position: fixed;
68
- height: 100dvh;
69
- max-height: 100dvh;
80
+ position: relative;
81
+ height: auto;
82
+ max-height: none;
70
83
  margin: 0;
71
84
  border-radius: 0;
72
85
  }
@@ -77,16 +90,36 @@
77
90
 
78
91
  .zx-drawer__panel.zx-p-top.zx-l-dock-sheet {
79
92
  height: auto;
80
- max-height: 85dvh;
93
+ max-height: 85%;
81
94
  border-end-start-radius: var(--radius-box);
82
95
  border-end-end-radius: var(--radius-box);
96
+ border-bottom-left-radius: var(--radius-box);
97
+ border-bottom-right-radius: var(--radius-box);
83
98
  }
84
99
 
85
100
  .zx-drawer__panel.zx-p-bottom.zx-l-dock-sheet {
86
101
  height: auto;
87
- max-height: 85dvh;
102
+ max-height: 85%;
88
103
  border-start-start-radius: var(--radius-box);
89
104
  border-start-end-radius: var(--radius-box);
105
+ border-top-left-radius: var(--radius-box);
106
+ border-top-right-radius: var(--radius-box);
107
+ }
108
+
109
+ .zx-drawer__panel.zx-p-start.zx-l-dock-sheet.zx-s-open {
110
+ animation: zero-daisy-drawer-in-start var(--duration-slow) var(--ease-standard);
111
+ }
112
+
113
+ .zx-drawer__panel.zx-p-end.zx-l-dock-sheet.zx-s-open {
114
+ animation: zero-daisy-drawer-in-end var(--duration-slow) var(--ease-standard);
115
+ }
116
+
117
+ .zx-drawer__panel.zx-p-top.zx-l-dock-sheet.zx-s-open {
118
+ animation: zero-daisy-drawer-in-top var(--duration-slow) var(--ease-standard);
119
+ }
120
+
121
+ .zx-drawer__panel.zx-p-bottom.zx-l-dock-sheet.zx-s-open {
122
+ animation: zero-daisy-drawer-in-bottom var(--duration-slow) var(--ease-standard);
90
123
  }
91
124
 
92
125
  .zx-drawer__backdrop {
@@ -117,6 +150,9 @@
117
150
  transition: background var(--duration-normal) var(--ease-standard);
118
151
  padding-left: calc(var(--size-field) * 4);
119
152
  padding-right: calc(var(--size-field) * 4);
153
+ width: max-content;
154
+ flex-shrink: 0;
155
+ flex-wrap: nowrap;
120
156
  }
121
157
 
122
158
  .zx-drawer__close.zx-f-disabled {
@@ -124,8 +160,15 @@
124
160
  }
125
161
 
126
162
  .zx-drawer__close.zx-f-focus-visible {
127
- outline: 2px solid var(--color-base-content);
163
+ outline: none;
128
164
  outline-offset: 2px;
165
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
166
+ }
167
+
168
+ .zx-drawer__close.zx-f-pressed {
169
+ background: var(--color-base-300);
170
+ transform: translateY(1px);
171
+ box-shadow: none;
129
172
  }
130
173
 
131
174
  .zx-drawer__trigger.zx-a-color-primary {
@@ -243,3 +286,15 @@
243
286
  padding-left: calc(var(--size-field) * 6);
244
287
  padding-right: calc(var(--size-field) * 6);
245
288
  }
289
+ @keyframes zero-daisy-drawer-in-start {
290
+ from { transform: translateX(-100%); } to { transform: translateX(0); }
291
+ }
292
+ @keyframes zero-daisy-drawer-in-end {
293
+ from { transform: translateX(100%); } to { transform: translateX(0); }
294
+ }
295
+ @keyframes zero-daisy-drawer-in-top {
296
+ from { transform: translateY(-100%); } to { transform: translateY(0); }
297
+ }
298
+ @keyframes zero-daisy-drawer-in-bottom {
299
+ from { transform: translateY(100%); } to { transform: translateY(0); }
300
+ }
@@ -4,9 +4,11 @@
4
4
  }
5
5
 
6
6
  .zx-file-upload__root {
7
- display: grid;
7
+ display: flex;
8
8
  gap: var(--space-sm);
9
9
  justify-items: start;
10
+ flex-direction: column;
11
+ align-items: flex-start;
10
12
  }
11
13
 
12
14
  .zx-file-upload__label {
@@ -32,6 +34,7 @@
32
34
  border: var(--border) solid var(--color-base-300);
33
35
  border-radius: var(--radius-field);
34
36
  cursor: pointer;
37
+ flex-direction: row;
35
38
  }
36
39
 
37
40
  .zx-file-upload__trigger.zx-f-disabled {
@@ -44,8 +47,15 @@
44
47
  }
45
48
 
46
49
  .zx-file-upload__trigger.zx-f-focus-visible {
47
- outline: 2px solid var(--color-base-content);
50
+ outline: none;
48
51
  outline-offset: 2px;
52
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
53
+ }
54
+
55
+ .zx-file-upload__trigger.zx-f-pressed {
56
+ background: var(--color-base-300);
57
+ transform: translateY(1px);
58
+ box-shadow: none;
49
59
  }
50
60
 
51
61
  .zx-file-upload__dropzone {
@@ -57,6 +67,10 @@
57
67
  border-radius: var(--radius-box);
58
68
  background: var(--color-base-100);
59
69
  cursor: pointer;
70
+ align-self: stretch;
71
+ display: flex;
72
+ flex-direction: column;
73
+ align-items: center;
60
74
  }
61
75
 
62
76
  .zx-file-upload__dropzone.zx-a-size-xs {
@@ -100,6 +114,26 @@
100
114
  color: var(--color-base-content);
101
115
  }
102
116
 
117
+ .zx-root .zx-file-upload__dropzone.zx-f-highlighted {
118
+ background: #edf0fe;
119
+ }
120
+
121
+ .zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-f-highlighted {
122
+ background: #212839;
123
+ }
124
+
125
+ .zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-f-highlighted {
126
+ background: #323d43;
127
+ }
128
+
129
+ .zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-f-highlighted {
130
+ background: #e0e6ee;
131
+ }
132
+
133
+ .zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-f-highlighted {
134
+ background: #232427;
135
+ }
136
+
103
137
  .zx-file-upload__dropzone.zx-f-disabled {
104
138
  opacity: var(--disabled-opacity);
105
139
  cursor: not-allowed;
@@ -110,8 +144,10 @@
110
144
  list-style: none;
111
145
  margin: 0;
112
146
  padding: 0;
113
- display: grid;
147
+ display: flex;
114
148
  gap: var(--space-xs);
149
+ align-self: stretch;
150
+ flex-direction: column;
115
151
  }
116
152
 
117
153
  .zx-file-upload__item {
@@ -122,6 +158,7 @@
122
158
  border: var(--border) solid var(--color-base-200);
123
159
  border-radius: var(--radius-field);
124
160
  background: var(--color-base-100);
161
+ flex-direction: row;
125
162
  }
126
163
 
127
164
  .zx-file-upload__item.zx-f-disabled {
@@ -203,8 +240,13 @@
203
240
  }
204
241
 
205
242
  .zx-file-upload__item-remove.zx-f-focus-visible {
206
- outline: 2px solid var(--color-base-content);
243
+ outline: none;
207
244
  outline-offset: 2px;
245
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
246
+ }
247
+
248
+ .zx-file-upload__item-remove.zx-f-pressed {
249
+ background: var(--color-base-200);
208
250
  }
209
251
 
210
252
  .zx-file-upload__clear-trigger {
@@ -226,8 +268,13 @@
226
268
  }
227
269
 
228
270
  .zx-file-upload__clear-trigger.zx-f-focus-visible {
229
- outline: 2px solid var(--color-base-content);
271
+ outline: none;
230
272
  outline-offset: 2px;
273
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
274
+ }
275
+
276
+ .zx-file-upload__clear-trigger.zx-f-pressed {
277
+ background: var(--color-base-200);
231
278
  }
232
279
 
233
280
  .zx-root .zx-file-upload__root.zx-a-color-primary {
@@ -250,6 +297,26 @@
250
297
  --fu-accent: #fb8a62;
251
298
  }
252
299
 
300
+ .zx-root .zx-file-upload__dropzone.zx-a-color-primary.zx-f-highlighted {
301
+ background: #edf0fe;
302
+ }
303
+
304
+ .zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-a-color-primary.zx-f-highlighted {
305
+ background: #212839;
306
+ }
307
+
308
+ .zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-a-color-primary.zx-f-highlighted {
309
+ background: #323d43;
310
+ }
311
+
312
+ .zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-a-color-primary.zx-f-highlighted {
313
+ background: #e0e6ee;
314
+ }
315
+
316
+ .zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-a-color-primary.zx-f-highlighted {
317
+ background: #232427;
318
+ }
319
+
253
320
  .zx-root .zx-file-upload__root.zx-a-color-secondary {
254
321
  --fu-accent: #ad316f;
255
322
  }
@@ -270,6 +337,26 @@
270
337
  --fu-accent: #e68aac;
271
338
  }
272
339
 
340
+ .zx-root .zx-file-upload__dropzone.zx-a-color-secondary.zx-f-highlighted {
341
+ background: #fff1f6;
342
+ }
343
+
344
+ .zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-a-color-secondary.zx-f-highlighted {
345
+ background: #2e2732;
346
+ }
347
+
348
+ .zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-a-color-secondary.zx-f-highlighted {
349
+ background: #3a3740;
350
+ }
351
+
352
+ .zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-a-color-secondary.zx-f-highlighted {
353
+ background: #e3e9f0;
354
+ }
355
+
356
+ .zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-a-color-secondary.zx-f-highlighted {
357
+ background: #24232b;
358
+ }
359
+
273
360
  .zx-root .zx-file-upload__root.zx-a-color-accent {
274
361
  --fu-accent: #2b786d;
275
362
  }
@@ -290,6 +377,26 @@
290
377
  --fu-accent: #ab9fe8;
291
378
  }
292
379
 
380
+ .zx-root .zx-file-upload__dropzone.zx-a-color-accent.zx-f-highlighted {
381
+ background: #f2fcf9;
382
+ }
383
+
384
+ .zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-a-color-accent.zx-f-highlighted {
385
+ background: #212f34;
386
+ }
387
+
388
+ .zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-a-color-accent.zx-f-highlighted {
389
+ background: #353748;
390
+ }
391
+
392
+ .zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-a-color-accent.zx-f-highlighted {
393
+ background: #e4ebf1;
394
+ }
395
+
396
+ .zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-a-color-accent.zx-f-highlighted {
397
+ background: #1d2431;
398
+ }
399
+
293
400
  .zx-root .zx-file-upload__root.zx-a-color-neutral {
294
401
  --fu-accent: #121214;
295
402
  }
@@ -310,6 +417,26 @@
310
417
  --fu-accent: #667a8a;
311
418
  }
312
419
 
420
+ .zx-root .zx-file-upload__dropzone.zx-a-color-neutral.zx-f-highlighted {
421
+ background: #e8e8e8;
422
+ }
423
+
424
+ .zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-a-color-neutral.zx-f-highlighted {
425
+ background: #1b2127;
426
+ }
427
+
428
+ .zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-a-color-neutral.zx-f-highlighted {
429
+ background: #292f3b;
430
+ }
431
+
432
+ .zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-a-color-neutral.zx-f-highlighted {
433
+ background: #dee2e8;
434
+ }
435
+
436
+ .zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-a-color-neutral.zx-f-highlighted {
437
+ background: #131d23;
438
+ }
439
+
313
440
  .zx-root .zx-file-upload__root.zx-a-color-info {
314
441
  --fu-accent: #2685b3;
315
442
  }
@@ -330,6 +457,26 @@
330
457
  --fu-accent: #91d4e3;
331
458
  }
332
459
 
460
+ .zx-root .zx-file-upload__dropzone.zx-a-color-info.zx-f-highlighted {
461
+ background: #f1faff;
462
+ }
463
+
464
+ .zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-a-color-info.zx-f-highlighted {
465
+ background: #202e38;
466
+ }
467
+
468
+ .zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-a-color-info.zx-f-highlighted {
469
+ background: #2f3d4a;
470
+ }
471
+
472
+ .zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-a-color-info.zx-f-highlighted {
473
+ background: #e8e7ee;
474
+ }
475
+
476
+ .zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-a-color-info.zx-f-highlighted {
477
+ background: #1a292f;
478
+ }
479
+
333
480
  .zx-root .zx-file-upload__root.zx-a-color-success {
334
481
  --fu-accent: #2a7858;
335
482
  }
@@ -350,6 +497,26 @@
350
497
  --fu-accent: #a6cebe;
351
498
  }
352
499
 
500
+ .zx-root .zx-file-upload__dropzone.zx-a-color-success.zx-f-highlighted {
501
+ background: #f1fcf6;
502
+ }
503
+
504
+ .zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-a-color-success.zx-f-highlighted {
505
+ background: #212f32;
506
+ }
507
+
508
+ .zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-a-color-success.zx-f-highlighted {
509
+ background: #303d46;
510
+ }
511
+
512
+ .zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-a-color-success.zx-f-highlighted {
513
+ background: #e6ebec;
514
+ }
515
+
516
+ .zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-a-color-success.zx-f-highlighted {
517
+ background: #1c292c;
518
+ }
519
+
353
520
  .zx-root .zx-file-upload__root.zx-a-color-warning {
354
521
  --fu-accent: #755a2b;
355
522
  }
@@ -370,6 +537,26 @@
370
537
  --fu-accent: #c5c1b7;
371
538
  }
372
539
 
540
+ .zx-root .zx-file-upload__dropzone.zx-a-color-warning.zx-f-highlighted {
541
+ background: #fffaf0;
542
+ }
543
+
544
+ .zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-a-color-warning.zx-f-highlighted {
545
+ background: #2c2e2e;
546
+ }
547
+
548
+ .zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-a-color-warning.zx-f-highlighted {
549
+ background: #373c41;
550
+ }
551
+
552
+ .zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-a-color-warning.zx-f-highlighted {
553
+ background: #ececec;
554
+ }
555
+
556
+ .zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-a-color-warning.zx-f-highlighted {
557
+ background: #21282b;
558
+ }
559
+
373
560
  .zx-root .zx-file-upload__root.zx-a-color-error {
374
561
  --fu-accent: #d9576d;
375
562
  }
@@ -390,6 +577,26 @@
390
577
  --fu-accent: #f2bbc0;
391
578
  }
392
579
 
580
+ .zx-root .zx-file-upload__dropzone.zx-a-color-error.zx-f-highlighted {
581
+ background: #fff3f4;
582
+ }
583
+
584
+ .zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-a-color-error.zx-f-highlighted {
585
+ background: #2e2930;
586
+ }
587
+
588
+ .zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-a-color-error.zx-f-highlighted {
589
+ background: #393943;
590
+ }
591
+
592
+ .zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-a-color-error.zx-f-highlighted {
593
+ background: #eae4e8;
594
+ }
595
+
596
+ .zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-a-color-error.zx-f-highlighted {
597
+ background: #22272d;
598
+ }
599
+
393
600
  .zx-file-upload__root.zx-a-size-xs {
394
601
  --fu-font: var(--text-xs);
395
602
  }
@@ -16,6 +16,8 @@
16
16
  flex: 1 1 0%;
17
17
  justify-content: flex-start;
18
18
  flex-direction: row;
19
+ flex-basis: auto;
20
+ flex-shrink: 0;
19
21
  }
20
22
 
21
23
  .zx-navbar__center {
@@ -24,6 +26,7 @@
24
26
  gap: var(--space-sm);
25
27
  justify-content: center;
26
28
  flex-direction: row;
29
+ flex-shrink: 0;
27
30
  }
28
31
 
29
32
  .zx-navbar__end {
@@ -33,6 +36,8 @@
33
36
  flex: 1 1 0%;
34
37
  justify-content: flex-end;
35
38
  flex-direction: row;
39
+ flex-basis: auto;
40
+ flex-shrink: 0;
36
41
  }
37
42
 
38
43
  .zx-navbar__root.zx-a-color-primary {