@sigx/zero-daisyui 0.12.0 → 0.14.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.
@@ -109,60 +109,108 @@
109
109
  inline-size: var(--toast-mark);
110
110
  block-size: var(--toast-mark);
111
111
  box-sizing: border-box;
112
+ position: absolute;
113
+ left: var(--space-lg);
114
+ top: var(--space-md);
115
+ width: var(--toast-mark);
116
+ height: var(--toast-mark);
112
117
  }
113
118
 
114
119
  .zx-toast__indicator.zx-s-loading {
115
120
  border-radius: 50%;
121
+ border: 0 solid transparent;
116
122
  border-block-start-color: var(--toast-ink);
117
123
  animation: zero-daisyui-toast-spin 0.75s linear infinite;
124
+ border-style: solid;
125
+ border-top-width: calc(var(--border) * 2);
126
+ border-right-width: calc(var(--border) * 2);
127
+ border-bottom-width: calc(var(--border) * 2);
128
+ border-left-width: calc(var(--border) * 2);
129
+ border-top-color: var(--toast-ink);
130
+ }
131
+
132
+ .zx-root .zx-toast__indicator.zx-s-loading {
133
+ border-right-color: #18181b40;
134
+ border-bottom-color: #18181b40;
135
+ border-left-color: #18181b40;
136
+ }
137
+
138
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-s-loading {
139
+ border-right-color: #ecf9ff40;
140
+ border-bottom-color: #ecf9ff40;
141
+ border-left-color: #ecf9ff40;
142
+ }
143
+
144
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-s-loading {
145
+ border-right-color: #b2ccd640;
146
+ border-bottom-color: #b2ccd640;
147
+ border-left-color: #b2ccd640;
148
+ }
149
+
150
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-s-loading {
151
+ border-right-color: #2e344040;
152
+ border-bottom-color: #2e344040;
153
+ border-left-color: #2e344040;
154
+ }
155
+
156
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-s-loading {
157
+ border-right-color: #9fb9d040;
158
+ border-bottom-color: #9fb9d040;
159
+ border-left-color: #9fb9d040;
118
160
  }
119
161
 
120
162
  .zx-toast__indicator.zx-s-complete {
121
- clip-path: polygon(15.1% 41.3%, 1% 55%, 37.6% 92.8%, 99% 19.8%, 83.9% 7.2%, 36.6% 63.5%);
163
+ background: transparent;
164
+ box-sizing: border-box;
165
+ width: calc(var(--toast-mark) * 0.375);
166
+ height: calc(var(--toast-mark) * 0.75);
167
+ margin-left: calc(var(--toast-mark) * 0.3125);
168
+ border-style: solid;
169
+ border-top-width: 0;
170
+ border-left-width: 0;
171
+ border-right-width: calc(var(--border) * 2);
172
+ border-bottom-width: calc(var(--border) * 2);
173
+ transform: rotate(45deg);
122
174
  }
123
175
 
124
176
  .zx-root .zx-toast__indicator.zx-s-complete {
125
- background: #2a7858;
177
+ border-color: #2a7858;
126
178
  }
127
179
 
128
180
  .zx-root.zx-theme-dark .zx-toast__indicator.zx-s-complete {
129
- background: #92e5c2;
181
+ border-color: #92e5c2;
130
182
  }
131
183
 
132
184
  .zx-root.zx-theme-dim .zx-toast__indicator.zx-s-complete {
133
- background: #8ee0c9;
185
+ border-color: #8ee0c9;
134
186
  }
135
187
 
136
188
  .zx-root.zx-theme-nord .zx-toast__indicator.zx-s-complete {
137
- background: #6b7d6a;
189
+ border-color: #6b7d6a;
138
190
  }
139
191
 
140
192
  .zx-root.zx-theme-sunset .zx-toast__indicator.zx-s-complete {
141
- background: #a6cebe;
142
- }
143
-
144
- .zx-toast__indicator.zx-s-error {
145
- clip-path: polygon(20% 8%, 50% 38%, 80% 8%, 92% 20%, 62% 50%, 92% 80%, 80% 92%, 50% 62%, 20% 92%, 8% 80%, 38% 50%, 8% 20%);
193
+ border-color: #a6cebe;
146
194
  }
147
195
 
148
196
  .zx-root .zx-toast__indicator.zx-s-error {
149
- background: #8f424e;
197
+ background: linear-gradient(45deg, transparent 41%, #8f424e 41%, #8f424e 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, #8f424e 41%, #8f424e 59%, transparent 59%);
150
198
  }
151
199
 
152
200
  .zx-root.zx-theme-dark .zx-toast__indicator.zx-s-error {
153
- background: #ffabb6;
201
+ background: linear-gradient(45deg, transparent 41%, #ffabb6 41%, #ffabb6 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, #ffabb6 41%, #ffabb6 59%, transparent 59%);
154
202
  }
155
203
 
156
204
  .zx-root.zx-theme-dim .zx-toast__indicator.zx-s-error {
157
- background: #e0bdb6;
205
+ background: linear-gradient(45deg, transparent 41%, #e0bdb6 41%, #e0bdb6 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, #e0bdb6 41%, #e0bdb6 59%, transparent 59%);
158
206
  }
159
207
 
160
208
  .zx-root.zx-theme-nord .zx-toast__indicator.zx-s-error {
161
- background: #7c4e57;
209
+ background: linear-gradient(45deg, transparent 41%, #7c4e57 41%, #7c4e57 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, #7c4e57 41%, #7c4e57 59%, transparent 59%);
162
210
  }
163
211
 
164
212
  .zx-root.zx-theme-sunset .zx-toast__indicator.zx-s-error {
165
- background: #d6bbc6;
213
+ background: linear-gradient(45deg, transparent 41%, #d6bbc6 41%, #d6bbc6 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, #d6bbc6 41%, #d6bbc6 59%, transparent 59%);
166
214
  }
167
215
 
168
216
  .zx-toast__title {
@@ -235,51 +283,301 @@
235
283
  --toast-ink: var(--color-primary);
236
284
  }
237
285
 
286
+ .zx-root .zx-toast__indicator.zx-a-color-primary.zx-s-loading {
287
+ border-right-color: #422ad540;
288
+ border-bottom-color: #422ad540;
289
+ border-left-color: #422ad540;
290
+ }
291
+
292
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-primary.zx-s-loading {
293
+ border-right-color: #605dff40;
294
+ border-bottom-color: #605dff40;
295
+ border-left-color: #605dff40;
296
+ }
297
+
298
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-primary.zx-s-loading {
299
+ border-right-color: #9fe88d40;
300
+ border-bottom-color: #9fe88d40;
301
+ border-left-color: #9fe88d40;
302
+ }
303
+
304
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-primary.zx-s-loading {
305
+ border-right-color: #5e81ac40;
306
+ border-bottom-color: #5e81ac40;
307
+ border-left-color: #5e81ac40;
308
+ }
309
+
310
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-primary.zx-s-loading {
311
+ border-right-color: #ff865b40;
312
+ border-bottom-color: #ff865b40;
313
+ border-left-color: #ff865b40;
314
+ }
315
+
238
316
  .zx-toast__root.zx-a-color-secondary {
239
317
  --toast-bg: var(--color-secondary-soft);
240
318
  --toast-ink: var(--color-secondary);
241
319
  }
242
320
 
321
+ .zx-root .zx-toast__indicator.zx-a-color-secondary.zx-s-loading {
322
+ border-right-color: #f4309840;
323
+ border-bottom-color: #f4309840;
324
+ border-left-color: #f4309840;
325
+ }
326
+
327
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-secondary.zx-s-loading {
328
+ border-right-color: #f4309840;
329
+ border-bottom-color: #f4309840;
330
+ border-left-color: #f4309840;
331
+ }
332
+
333
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-secondary.zx-s-loading {
334
+ border-right-color: #ff7d5d40;
335
+ border-bottom-color: #ff7d5d40;
336
+ border-left-color: #ff7d5d40;
337
+ }
338
+
339
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-secondary.zx-s-loading {
340
+ border-right-color: #81a1c140;
341
+ border-bottom-color: #81a1c140;
342
+ border-left-color: #81a1c140;
343
+ }
344
+
345
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-secondary.zx-s-loading {
346
+ border-right-color: #fd6f9c40;
347
+ border-bottom-color: #fd6f9c40;
348
+ border-left-color: #fd6f9c40;
349
+ }
350
+
243
351
  .zx-toast__root.zx-a-color-accent {
244
352
  --toast-bg: var(--color-accent-soft);
245
353
  --toast-ink: var(--color-accent);
246
354
  }
247
355
 
356
+ .zx-root .zx-toast__indicator.zx-a-color-accent.zx-s-loading {
357
+ border-right-color: #00d3bb40;
358
+ border-bottom-color: #00d3bb40;
359
+ border-left-color: #00d3bb40;
360
+ }
361
+
362
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-accent.zx-s-loading {
363
+ border-right-color: #00d3bb40;
364
+ border-bottom-color: #00d3bb40;
365
+ border-left-color: #00d3bb40;
366
+ }
367
+
368
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-accent.zx-s-loading {
369
+ border-right-color: #c792e940;
370
+ border-bottom-color: #c792e940;
371
+ border-left-color: #c792e940;
372
+ }
373
+
374
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-accent.zx-s-loading {
375
+ border-right-color: #88c0d040;
376
+ border-bottom-color: #88c0d040;
377
+ border-left-color: #88c0d040;
378
+ }
379
+
380
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-accent.zx-s-loading {
381
+ border-right-color: #b387fa40;
382
+ border-bottom-color: #b387fa40;
383
+ border-left-color: #b387fa40;
384
+ }
385
+
248
386
  .zx-toast__root.zx-a-color-neutral {
249
387
  --toast-bg: var(--color-neutral-soft);
250
388
  --toast-ink: var(--color-neutral);
251
389
  }
252
390
 
391
+ .zx-root .zx-toast__indicator.zx-a-color-neutral.zx-s-loading {
392
+ border-right-color: #09090b40;
393
+ border-bottom-color: #09090b40;
394
+ border-left-color: #09090b40;
395
+ }
396
+
397
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-neutral.zx-s-loading {
398
+ border-right-color: #09090b40;
399
+ border-bottom-color: #09090b40;
400
+ border-left-color: #09090b40;
401
+ }
402
+
403
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-neutral.zx-s-loading {
404
+ border-right-color: #1c212b40;
405
+ border-bottom-color: #1c212b40;
406
+ border-left-color: #1c212b40;
407
+ }
408
+
409
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-neutral.zx-s-loading {
410
+ border-right-color: #4c566a40;
411
+ border-bottom-color: #4c566a40;
412
+ border-left-color: #4c566a40;
413
+ }
414
+
415
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-neutral.zx-s-loading {
416
+ border-right-color: #1b262c40;
417
+ border-bottom-color: #1b262c40;
418
+ border-left-color: #1b262c40;
419
+ }
420
+
253
421
  .zx-toast__root.zx-a-color-info {
254
422
  --toast-bg: var(--color-info-soft);
255
423
  --toast-ink: var(--color-info);
256
424
  }
257
425
 
426
+ .zx-root .zx-toast__indicator.zx-a-color-info.zx-s-loading {
427
+ border-right-color: #00bafe40;
428
+ border-bottom-color: #00bafe40;
429
+ border-left-color: #00bafe40;
430
+ }
431
+
432
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-info.zx-s-loading {
433
+ border-right-color: #00bafe40;
434
+ border-bottom-color: #00bafe40;
435
+ border-left-color: #00bafe40;
436
+ }
437
+
438
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-info.zx-s-loading {
439
+ border-right-color: #28ebff40;
440
+ border-bottom-color: #28ebff40;
441
+ border-left-color: #28ebff40;
442
+ }
443
+
444
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-info.zx-s-loading {
445
+ border-right-color: #b48ead40;
446
+ border-bottom-color: #b48ead40;
447
+ border-left-color: #b48ead40;
448
+ }
449
+
450
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-info.zx-s-loading {
451
+ border-right-color: #89e0eb40;
452
+ border-bottom-color: #89e0eb40;
453
+ border-left-color: #89e0eb40;
454
+ }
455
+
258
456
  .zx-toast__root.zx-a-color-success {
259
457
  --toast-bg: var(--color-success-soft);
260
458
  --toast-ink: var(--color-success);
261
459
  }
262
460
 
461
+ .zx-root .zx-toast__indicator.zx-a-color-success.zx-s-loading {
462
+ border-right-color: #00d39040;
463
+ border-bottom-color: #00d39040;
464
+ border-left-color: #00d39040;
465
+ }
466
+
467
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-success.zx-s-loading {
468
+ border-right-color: #00d39040;
469
+ border-bottom-color: #00d39040;
470
+ border-left-color: #00d39040;
471
+ }
472
+
473
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-success.zx-s-loading {
474
+ border-right-color: #62efbd40;
475
+ border-bottom-color: #62efbd40;
476
+ border-left-color: #62efbd40;
477
+ }
478
+
479
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-success.zx-s-loading {
480
+ border-right-color: #a3be8d40;
481
+ border-bottom-color: #a3be8d40;
482
+ border-left-color: #a3be8d40;
483
+ }
484
+
485
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-success.zx-s-loading {
486
+ border-right-color: #addfad40;
487
+ border-bottom-color: #addfad40;
488
+ border-left-color: #addfad40;
489
+ }
490
+
263
491
  .zx-toast__root.zx-a-color-warning {
264
492
  --toast-bg: var(--color-warning-soft);
265
493
  --toast-ink: var(--color-warning);
266
494
  }
267
495
 
496
+ .zx-root .zx-toast__indicator.zx-a-color-warning.zx-s-loading {
497
+ border-right-color: #fcb70040;
498
+ border-bottom-color: #fcb70040;
499
+ border-left-color: #fcb70040;
500
+ }
501
+
502
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-warning.zx-s-loading {
503
+ border-right-color: #fcb70040;
504
+ border-bottom-color: #fcb70040;
505
+ border-left-color: #fcb70040;
506
+ }
507
+
508
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-warning.zx-s-loading {
509
+ border-right-color: #efd05740;
510
+ border-bottom-color: #efd05740;
511
+ border-left-color: #efd05740;
512
+ }
513
+
514
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-warning.zx-s-loading {
515
+ border-right-color: #ebcb8b40;
516
+ border-bottom-color: #ebcb8b40;
517
+ border-left-color: #ebcb8b40;
518
+ }
519
+
520
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-warning.zx-s-loading {
521
+ border-right-color: #f1c89240;
522
+ border-bottom-color: #f1c89240;
523
+ border-left-color: #f1c89240;
524
+ }
525
+
268
526
  .zx-toast__root.zx-a-color-error {
269
527
  --toast-bg: var(--color-error-soft);
270
528
  --toast-ink: var(--color-error);
271
529
  }
272
530
 
531
+ .zx-root .zx-toast__indicator.zx-a-color-error.zx-s-loading {
532
+ border-right-color: #ff627d40;
533
+ border-bottom-color: #ff627d40;
534
+ border-left-color: #ff627d40;
535
+ }
536
+
537
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-error.zx-s-loading {
538
+ border-right-color: #ff627d40;
539
+ border-bottom-color: #ff627d40;
540
+ border-left-color: #ff627d40;
541
+ }
542
+
543
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-error.zx-s-loading {
544
+ border-right-color: #ffae9b40;
545
+ border-bottom-color: #ffae9b40;
546
+ border-left-color: #ffae9b40;
547
+ }
548
+
549
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-error.zx-s-loading {
550
+ border-right-color: #bf616a40;
551
+ border-bottom-color: #bf616a40;
552
+ border-left-color: #bf616a40;
553
+ }
554
+
555
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-error.zx-s-loading {
556
+ border-right-color: #ffbbbd40;
557
+ border-bottom-color: #ffbbbd40;
558
+ border-left-color: #ffbbbd40;
559
+ }
560
+
273
561
  .zx-toast__root.zx-a-size-xs {
274
562
  padding: var(--space-xs) var(--space-md);
275
563
  font-size: var(--text-xs);
276
564
  }
277
565
 
566
+ .zx-toast__indicator.zx-a-size-xs {
567
+ left: var(--space-md);
568
+ top: var(--space-xs);
569
+ }
570
+
278
571
  .zx-toast__root.zx-a-size-sm {
279
572
  padding: var(--space-sm) var(--space-md);
280
573
  font-size: var(--text-sm);
281
574
  }
282
575
 
576
+ .zx-toast__indicator.zx-a-size-sm {
577
+ left: var(--space-md);
578
+ top: var(--space-sm);
579
+ }
580
+
283
581
  .zx-toast__root.zx-a-size-lg {
284
582
  padding: var(--space-lg) var(--space-xl);
285
583
  font-size: var(--text-md);
@@ -289,6 +587,11 @@
289
587
  font-size: var(--text-sm);
290
588
  }
291
589
 
590
+ .zx-toast__indicator.zx-a-size-lg {
591
+ left: var(--space-xl);
592
+ top: var(--space-lg);
593
+ }
594
+
292
595
  .zx-toast__root.zx-a-size-xl {
293
596
  padding: var(--space-xl) var(--space-2xl);
294
597
  font-size: var(--text-lg);
@@ -297,6 +600,16 @@
297
600
  .zx-toast__description.zx-a-size-xl {
298
601
  font-size: var(--text-md);
299
602
  }
603
+
604
+ .zx-toast__indicator.zx-a-size-xl {
605
+ left: var(--space-2xl);
606
+ top: var(--space-xl);
607
+ }
608
+ .zx-toast__title.zx-m-marked,
609
+ .zx-toast__description.zx-m-marked,
610
+ .zx-toast__action.zx-m-marked {
611
+ margin-left: calc(var(--toast-mark) + var(--space-md));
612
+ }
300
613
  @keyframes zero-daisyui-toast-spin {
301
614
  to { transform: rotate(360deg); }
302
615
  }
@@ -29,11 +29,6 @@
29
29
 
30
30
  .zx-toggle-group__root.zx-o-vertical {
31
31
  flex-direction: column;
32
- border-top-width: 0;
33
- }
34
-
35
- .zx-toggle-group__root.zx-o-horizontal {
36
- border-left-width: 0;
37
32
  }
38
33
 
39
34
  .zx-toggle-group__item {
@@ -151,3 +146,21 @@
151
146
  --toggle-group-accent: var(--color-error);
152
147
  --toggle-group-on-accent: var(--color-error-content);
153
148
  }
149
+ .zx-toggle-group__item.zx-m-first.zx-o-horizontal {
150
+ border-left-width: calc(var(--border) * 0);
151
+ border-top-left-radius: calc(var(--radius-field) - var(--border));
152
+ border-bottom-left-radius: calc(var(--radius-field) - var(--border));
153
+ }
154
+ .zx-toggle-group__item.zx-m-first.zx-o-vertical {
155
+ border-top-width: calc(var(--border) * 0);
156
+ border-top-left-radius: calc(var(--radius-field) - var(--border));
157
+ border-top-right-radius: calc(var(--radius-field) - var(--border));
158
+ }
159
+ .zx-toggle-group__item.zx-m-last.zx-o-horizontal {
160
+ border-top-right-radius: calc(var(--radius-field) - var(--border));
161
+ border-bottom-right-radius: calc(var(--radius-field) - var(--border));
162
+ }
163
+ .zx-toggle-group__item.zx-m-last.zx-o-vertical {
164
+ border-bottom-left-radius: calc(var(--radius-field) - var(--border));
165
+ border-bottom-right-radius: calc(var(--radius-field) - var(--border));
166
+ }