@sigx/zero-daisyui 0.13.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,52 +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;
160
+ }
161
+
162
+ .zx-toast__indicator.zx-s-complete {
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);
118
174
  }
119
175
 
120
176
  .zx-root .zx-toast__indicator.zx-s-complete {
121
- background: #2a7858;
177
+ border-color: #2a7858;
122
178
  }
123
179
 
124
180
  .zx-root.zx-theme-dark .zx-toast__indicator.zx-s-complete {
125
- background: #92e5c2;
181
+ border-color: #92e5c2;
126
182
  }
127
183
 
128
184
  .zx-root.zx-theme-dim .zx-toast__indicator.zx-s-complete {
129
- background: #8ee0c9;
185
+ border-color: #8ee0c9;
130
186
  }
131
187
 
132
188
  .zx-root.zx-theme-nord .zx-toast__indicator.zx-s-complete {
133
- background: #6b7d6a;
189
+ border-color: #6b7d6a;
134
190
  }
135
191
 
136
192
  .zx-root.zx-theme-sunset .zx-toast__indicator.zx-s-complete {
137
- background: #a6cebe;
193
+ border-color: #a6cebe;
138
194
  }
139
195
 
140
196
  .zx-root .zx-toast__indicator.zx-s-error {
141
- 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%);
142
198
  }
143
199
 
144
200
  .zx-root.zx-theme-dark .zx-toast__indicator.zx-s-error {
145
- 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%);
146
202
  }
147
203
 
148
204
  .zx-root.zx-theme-dim .zx-toast__indicator.zx-s-error {
149
- 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%);
150
206
  }
151
207
 
152
208
  .zx-root.zx-theme-nord .zx-toast__indicator.zx-s-error {
153
- 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%);
154
210
  }
155
211
 
156
212
  .zx-root.zx-theme-sunset .zx-toast__indicator.zx-s-error {
157
- 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%);
158
214
  }
159
215
 
160
216
  .zx-toast__title {
@@ -227,51 +283,301 @@
227
283
  --toast-ink: var(--color-primary);
228
284
  }
229
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
+
230
316
  .zx-toast__root.zx-a-color-secondary {
231
317
  --toast-bg: var(--color-secondary-soft);
232
318
  --toast-ink: var(--color-secondary);
233
319
  }
234
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
+
235
351
  .zx-toast__root.zx-a-color-accent {
236
352
  --toast-bg: var(--color-accent-soft);
237
353
  --toast-ink: var(--color-accent);
238
354
  }
239
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
+
240
386
  .zx-toast__root.zx-a-color-neutral {
241
387
  --toast-bg: var(--color-neutral-soft);
242
388
  --toast-ink: var(--color-neutral);
243
389
  }
244
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
+
245
421
  .zx-toast__root.zx-a-color-info {
246
422
  --toast-bg: var(--color-info-soft);
247
423
  --toast-ink: var(--color-info);
248
424
  }
249
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
+
250
456
  .zx-toast__root.zx-a-color-success {
251
457
  --toast-bg: var(--color-success-soft);
252
458
  --toast-ink: var(--color-success);
253
459
  }
254
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
+
255
491
  .zx-toast__root.zx-a-color-warning {
256
492
  --toast-bg: var(--color-warning-soft);
257
493
  --toast-ink: var(--color-warning);
258
494
  }
259
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
+
260
526
  .zx-toast__root.zx-a-color-error {
261
527
  --toast-bg: var(--color-error-soft);
262
528
  --toast-ink: var(--color-error);
263
529
  }
264
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
+
265
561
  .zx-toast__root.zx-a-size-xs {
266
562
  padding: var(--space-xs) var(--space-md);
267
563
  font-size: var(--text-xs);
268
564
  }
269
565
 
566
+ .zx-toast__indicator.zx-a-size-xs {
567
+ left: var(--space-md);
568
+ top: var(--space-xs);
569
+ }
570
+
270
571
  .zx-toast__root.zx-a-size-sm {
271
572
  padding: var(--space-sm) var(--space-md);
272
573
  font-size: var(--text-sm);
273
574
  }
274
575
 
576
+ .zx-toast__indicator.zx-a-size-sm {
577
+ left: var(--space-md);
578
+ top: var(--space-sm);
579
+ }
580
+
275
581
  .zx-toast__root.zx-a-size-lg {
276
582
  padding: var(--space-lg) var(--space-xl);
277
583
  font-size: var(--text-md);
@@ -281,6 +587,11 @@
281
587
  font-size: var(--text-sm);
282
588
  }
283
589
 
590
+ .zx-toast__indicator.zx-a-size-lg {
591
+ left: var(--space-xl);
592
+ top: var(--space-lg);
593
+ }
594
+
284
595
  .zx-toast__root.zx-a-size-xl {
285
596
  padding: var(--space-xl) var(--space-2xl);
286
597
  font-size: var(--text-lg);
@@ -289,6 +600,16 @@
289
600
  .zx-toast__description.zx-a-size-xl {
290
601
  font-size: var(--text-md);
291
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
+ }
292
613
  @keyframes zero-daisyui-toast-spin {
293
614
  to { transform: rotate(360deg); }
294
615
  }