daisyui 3.0.5 → 3.0.6

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 (6) hide show
  1. package/README.md +1 -1
  2. package/dist/full.css +63 -62
  3. package/dist/styled.css +97 -84
  4. package/dist/styled.js +1 -1
  5. package/dist/styled.rtl.js +1 -1
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -54,7 +54,7 @@ Loading CSS files from CDN is not recommended for production. It's better to ins
54
54
 
55
55
  ```html
56
56
  <link
57
- href="https://cdn.jsdelivr.net/npm/daisyui@3.0.4/dist/full.css"
57
+ href="https://cdn.jsdelivr.net/npm/daisyui@3.0.5/dist/full.css"
58
58
  rel="stylesheet"
59
59
  type="text/css" />
60
60
  <script src="https://cdn.tailwindcss.com"></script>
package/dist/full.css CHANGED
@@ -2598,7 +2598,6 @@ html {
2598
2598
  overscroll-behavior: contain;
2599
2599
  z-index: 999;
2600
2600
  background-color: transparent;
2601
- background-color: rgba(0, 0, 0, 0.3);
2602
2601
  transition-duration: 200ms;
2603
2602
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2604
2603
  transition-property: transform, opacity, visibility;
@@ -4242,8 +4241,10 @@ details.collapse summary::-webkit-details-marker {
4242
4241
  overflow: hidden;
4243
4242
  border-radius: 40px;
4244
4243
  margin-top: -25px}
4245
- .modal::backdrop {
4246
- background: transparent}
4244
+ .modal:not(dialog),
4245
+ .modal::backdrop {
4246
+ background-color: rgba(0, 0, 0, 0.3);
4247
+ animation: modal-pop 0.2s ease-out}
4247
4248
  .modal-backdrop {
4248
4249
  z-index: -1;
4249
4250
  grid-column-start: 1;
@@ -4264,6 +4265,9 @@ details.collapse summary::-webkit-details-marker {
4264
4265
  --tw-space-x-reverse: 0;
4265
4266
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
4266
4267
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}
4268
+ @keyframes modal-pop {
4269
+ 0% {
4270
+ opacity: 0}}
4267
4271
  .progress::-moz-progress-bar {
4268
4272
  --tw-bg-opacity: 1;
4269
4273
  background-color: hsl(var(--n) / var(--tw-bg-opacity))}
@@ -4288,41 +4292,34 @@ details.collapse summary::-webkit-details-marker {
4288
4292
  .progress-error::-moz-progress-bar {
4289
4293
  --tw-bg-opacity: 1;
4290
4294
  background-color: hsl(var(--er) / var(--tw-bg-opacity))}
4291
- .progress:indeterminate::after {
4292
- --tw-bg-opacity: 1;
4293
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
4294
- content: "";
4295
- position: absolute;
4296
- top: 0px;
4297
- bottom: 0px;
4298
- left: -40%;
4299
- width: 33.333333%;
4300
- border-radius: var(--rounded-box, 1rem);
4301
- animation: progress-loading 5s infinite ease-in-out}
4302
- .progress-primary:indeterminate::after {
4303
- --tw-bg-opacity: 1;
4304
- background-color: hsl(var(--p) / var(--tw-bg-opacity))}
4305
- .progress-secondary:indeterminate::after {
4306
- --tw-bg-opacity: 1;
4307
- background-color: hsl(var(--s) / var(--tw-bg-opacity))}
4308
- .progress-accent:indeterminate::after {
4309
- --tw-bg-opacity: 1;
4310
- background-color: hsl(var(--a) / var(--tw-bg-opacity))}
4311
- .progress-info:indeterminate::after {
4312
- --tw-bg-opacity: 1;
4313
- background-color: hsl(var(--in) / var(--tw-bg-opacity))}
4314
- .progress-success:indeterminate::after {
4315
- --tw-bg-opacity: 1;
4316
- background-color: hsl(var(--su) / var(--tw-bg-opacity))}
4317
- .progress-warning:indeterminate::after {
4318
- --tw-bg-opacity: 1;
4319
- background-color: hsl(var(--wa) / var(--tw-bg-opacity))}
4320
- .progress-error:indeterminate::after {
4321
- --tw-bg-opacity: 1;
4322
- background-color: hsl(var(--er) / var(--tw-bg-opacity))}
4295
+ .progress:indeterminate {
4296
+ --progress-color: hsl(var(--n));
4297
+ background-image: repeating-linear-gradient(
4298
+ 90deg,
4299
+ var(--progress-color) -1%,
4300
+ var(--progress-color) 10%,
4301
+ transparent 10%,
4302
+ transparent 90%
4303
+ );
4304
+ background-size: 200%;
4305
+ background-position-x: 15%;
4306
+ animation: progress-loading 5s ease-in-out infinite}
4307
+ .progress-primary:indeterminate {
4308
+ --progress-color: hsl(var(--p))}
4309
+ .progress-secondary:indeterminate {
4310
+ --progress-color: hsl(var(--s))}
4311
+ .progress-accent:indeterminate {
4312
+ --progress-color: hsl(var(--a))}
4313
+ .progress-info:indeterminate {
4314
+ --progress-color: hsl(var(--in))}
4315
+ .progress-success:indeterminate {
4316
+ --progress-color: hsl(var(--su))}
4317
+ .progress-warning:indeterminate {
4318
+ --progress-color: hsl(var(--wa))}
4319
+ .progress-error:indeterminate {
4320
+ --progress-color: hsl(var(--er))}
4323
4321
  .progress::-webkit-progress-bar {
4324
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
4325
- --tw-bg-opacity: 0.2;
4322
+ background-color: hsl(var(--n) / 0.2);
4326
4323
  border-radius: var(--rounded-box, 1rem)}
4327
4324
  .progress::-webkit-progress-value {
4328
4325
  --tw-bg-opacity: 1;
@@ -4349,9 +4346,21 @@ details.collapse summary::-webkit-details-marker {
4349
4346
  .progress-error::-webkit-progress-value {
4350
4347
  --tw-bg-opacity: 1;
4351
4348
  background-color: hsl(var(--er) / var(--tw-bg-opacity))}
4349
+ .progress:indeterminate::-moz-progress-bar {
4350
+ background-color: hsl(var(--n) / 0.2);
4351
+ background-image: repeating-linear-gradient(
4352
+ 90deg,
4353
+ var(--progress-color) -1%,
4354
+ var(--progress-color) 10%,
4355
+ transparent 10%,
4356
+ transparent 90%
4357
+ );
4358
+ background-size: 200%;
4359
+ background-position-x: 15%;
4360
+ animation: progress-loading 5s ease-in-out infinite}
4352
4361
  @keyframes progress-loading {
4353
4362
  50% {
4354
- left: 107%}}
4363
+ background-position-x: -115%}}
4355
4364
  .radio:focus-visible {
4356
4365
  outline-style: solid;
4357
4366
  outline-width: 2px;
@@ -23366,18 +23375,14 @@ details.collapse summary::-webkit-details-marker {
23366
23375
  .hover\:progress-error:hover::-moz-progress-bar {
23367
23376
  --tw-bg-opacity: 1;
23368
23377
  background-color: hsl(var(--er) / var(--tw-bg-opacity))}
23369
- .hover\:progress-info:hover:indeterminate::after {
23370
- --tw-bg-opacity: 1;
23371
- background-color: hsl(var(--in) / var(--tw-bg-opacity))}
23372
- .hover\:progress-success:hover:indeterminate::after {
23373
- --tw-bg-opacity: 1;
23374
- background-color: hsl(var(--su) / var(--tw-bg-opacity))}
23375
- .hover\:progress-warning:hover:indeterminate::after {
23376
- --tw-bg-opacity: 1;
23377
- background-color: hsl(var(--wa) / var(--tw-bg-opacity))}
23378
- .hover\:progress-error:hover:indeterminate::after {
23379
- --tw-bg-opacity: 1;
23380
- background-color: hsl(var(--er) / var(--tw-bg-opacity))}
23378
+ .hover\:progress-info:hover:indeterminate {
23379
+ --progress-color: hsl(var(--in))}
23380
+ .hover\:progress-success:hover:indeterminate {
23381
+ --progress-color: hsl(var(--su))}
23382
+ .hover\:progress-warning:hover:indeterminate {
23383
+ --progress-color: hsl(var(--wa))}
23384
+ .hover\:progress-error:hover:indeterminate {
23385
+ --progress-color: hsl(var(--er))}
23381
23386
  .hover\:progress-info:hover::-webkit-progress-value {
23382
23387
  --tw-bg-opacity: 1;
23383
23388
  background-color: hsl(var(--in) / var(--tw-bg-opacity))}
@@ -23976,18 +23981,14 @@ details.collapse summary::-webkit-details-marker {
23976
23981
  .focus\:progress-error:focus::-moz-progress-bar {
23977
23982
  --tw-bg-opacity: 1;
23978
23983
  background-color: hsl(var(--er) / var(--tw-bg-opacity))}
23979
- .focus\:progress-info:focus:indeterminate::after {
23980
- --tw-bg-opacity: 1;
23981
- background-color: hsl(var(--in) / var(--tw-bg-opacity))}
23982
- .focus\:progress-success:focus:indeterminate::after {
23983
- --tw-bg-opacity: 1;
23984
- background-color: hsl(var(--su) / var(--tw-bg-opacity))}
23985
- .focus\:progress-warning:focus:indeterminate::after {
23986
- --tw-bg-opacity: 1;
23987
- background-color: hsl(var(--wa) / var(--tw-bg-opacity))}
23988
- .focus\:progress-error:focus:indeterminate::after {
23989
- --tw-bg-opacity: 1;
23990
- background-color: hsl(var(--er) / var(--tw-bg-opacity))}
23984
+ .focus\:progress-info:focus:indeterminate {
23985
+ --progress-color: hsl(var(--in))}
23986
+ .focus\:progress-success:focus:indeterminate {
23987
+ --progress-color: hsl(var(--su))}
23988
+ .focus\:progress-warning:focus:indeterminate {
23989
+ --progress-color: hsl(var(--wa))}
23990
+ .focus\:progress-error:focus:indeterminate {
23991
+ --progress-color: hsl(var(--er))}
23991
23992
  .focus\:progress-info:focus::-webkit-progress-value {
23992
23993
  --tw-bg-opacity: 1;
23993
23994
  background-color: hsl(var(--in) / var(--tw-bg-opacity))}
package/dist/styled.css CHANGED
@@ -3330,11 +3330,12 @@ details.collapse summary {
3330
3330
  transition-property: transform, opacity, visibility;
3331
3331
  overflow-y: hidden;
3332
3332
  overscroll-behavior: contain;
3333
- background-color: rgba(0, 0, 0, 0.3);
3334
- }
3335
- .modal::backdrop {
3336
- background: transparent;
3337
3333
  }
3334
+ .modal:not(dialog),
3335
+ .modal::backdrop {
3336
+ background-color: rgba(0, 0, 0, 0.3);
3337
+ animation: modal-pop 0.2s ease-out;
3338
+ }
3338
3339
  .modal-backdrop {
3339
3340
  z-index: -1;
3340
3341
  grid-column-start: 1;
@@ -3384,132 +3385,144 @@ details.collapse summary {
3384
3385
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3385
3386
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
3386
3387
  }
3388
+ @keyframes modal-pop {
3389
+ 0% {
3390
+ opacity: 0;
3391
+ }
3392
+ }
3387
3393
  .navbar {
3388
3394
  padding: var(--navbar-padding, 0.5rem);
3389
3395
  min-height: 4rem;
3390
3396
  width: 100%;
3391
3397
  }
3392
3398
  .progress {
3393
- height: 0.5rem;
3394
- border-radius: var(--rounded-box, 1rem);
3399
+ height: 0.5rem;
3400
+ border-radius: var(--rounded-box, 1rem);
3395
3401
  }
3396
3402
  .progress::-moz-progress-bar {
3397
- --tw-bg-opacity: 1;
3398
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
3403
+ --tw-bg-opacity: 1;
3404
+ background-color: hsl(var(--n) / var(--tw-bg-opacity));
3399
3405
  }
3400
3406
  .progress-primary::-moz-progress-bar {
3401
- --tw-bg-opacity: 1;
3402
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
3407
+ --tw-bg-opacity: 1;
3408
+ background-color: hsl(var(--p) / var(--tw-bg-opacity));
3403
3409
  }
3404
3410
  .progress-secondary::-moz-progress-bar {
3405
- --tw-bg-opacity: 1;
3406
- background-color: hsl(var(--s) / var(--tw-bg-opacity));
3411
+ --tw-bg-opacity: 1;
3412
+ background-color: hsl(var(--s) / var(--tw-bg-opacity));
3407
3413
  }
3408
3414
  .progress-accent::-moz-progress-bar {
3409
- --tw-bg-opacity: 1;
3410
- background-color: hsl(var(--a) / var(--tw-bg-opacity));
3415
+ --tw-bg-opacity: 1;
3416
+ background-color: hsl(var(--a) / var(--tw-bg-opacity));
3411
3417
  }
3412
3418
  .progress-info::-moz-progress-bar {
3413
- --tw-bg-opacity: 1;
3414
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
3419
+ --tw-bg-opacity: 1;
3420
+ background-color: hsl(var(--in) / var(--tw-bg-opacity));
3415
3421
  }
3416
3422
  .progress-success::-moz-progress-bar {
3417
- --tw-bg-opacity: 1;
3418
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
3423
+ --tw-bg-opacity: 1;
3424
+ background-color: hsl(var(--su) / var(--tw-bg-opacity));
3419
3425
  }
3420
3426
  .progress-warning::-moz-progress-bar {
3421
- --tw-bg-opacity: 1;
3422
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
3427
+ --tw-bg-opacity: 1;
3428
+ background-color: hsl(var(--wa) / var(--tw-bg-opacity));
3423
3429
  }
3424
3430
  .progress-error::-moz-progress-bar {
3425
- --tw-bg-opacity: 1;
3426
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
3427
- }
3428
- .progress:indeterminate::after {
3429
- --tw-bg-opacity: 1;
3430
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
3431
- }
3432
- .progress-primary:indeterminate::after {
3433
- --tw-bg-opacity: 1;
3434
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
3435
- }
3436
- .progress-secondary:indeterminate::after {
3437
- --tw-bg-opacity: 1;
3438
- background-color: hsl(var(--s) / var(--tw-bg-opacity));
3439
- }
3440
- .progress-accent:indeterminate::after {
3441
- --tw-bg-opacity: 1;
3442
- background-color: hsl(var(--a) / var(--tw-bg-opacity));
3443
- }
3444
- .progress-info:indeterminate::after {
3445
- --tw-bg-opacity: 1;
3446
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
3447
- }
3448
- .progress-success:indeterminate::after {
3449
- --tw-bg-opacity: 1;
3450
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
3451
- }
3452
- .progress-warning:indeterminate::after {
3453
- --tw-bg-opacity: 1;
3454
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
3455
- }
3456
- .progress-error:indeterminate::after {
3457
- --tw-bg-opacity: 1;
3458
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
3431
+ --tw-bg-opacity: 1;
3432
+ background-color: hsl(var(--er) / var(--tw-bg-opacity));
3459
3433
  }
3434
+ .progress:indeterminate {
3435
+ --progress-color: hsl(var(--n));
3436
+ }
3437
+ .progress-primary:indeterminate {
3438
+ --progress-color: hsl(var(--p));
3439
+ }
3440
+ .progress-secondary:indeterminate {
3441
+ --progress-color: hsl(var(--s));
3442
+ }
3443
+ .progress-accent:indeterminate {
3444
+ --progress-color: hsl(var(--a));
3445
+ }
3446
+ .progress-info:indeterminate {
3447
+ --progress-color: hsl(var(--in));
3448
+ }
3449
+ .progress-success:indeterminate {
3450
+ --progress-color: hsl(var(--su));
3451
+ }
3452
+ .progress-warning:indeterminate {
3453
+ --progress-color: hsl(var(--wa));
3454
+ }
3455
+ .progress-error:indeterminate {
3456
+ --progress-color: hsl(var(--er));
3457
+ }
3460
3458
  .progress::-webkit-progress-bar {
3461
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
3462
- --tw-bg-opacity: 0.2;
3463
- border-radius: var(--rounded-box, 1rem);
3459
+ background-color: hsl(var(--n) / 0.2);
3460
+ border-radius: var(--rounded-box, 1rem);
3464
3461
  }
3465
3462
  .progress::-webkit-progress-value {
3466
- --tw-bg-opacity: 1;
3467
- background-color: hsl(var(--nf) / var(--tw-bg-opacity));
3468
- border-radius: var(--rounded-box, 1rem);
3463
+ --tw-bg-opacity: 1;
3464
+ background-color: hsl(var(--nf) / var(--tw-bg-opacity));
3465
+ border-radius: var(--rounded-box, 1rem);
3469
3466
  }
3470
3467
  .progress-primary::-webkit-progress-value {
3471
- --tw-bg-opacity: 1;
3472
- background-color: hsl(var(--p) / var(--tw-bg-opacity));
3468
+ --tw-bg-opacity: 1;
3469
+ background-color: hsl(var(--p) / var(--tw-bg-opacity));
3473
3470
  }
3474
3471
  .progress-secondary::-webkit-progress-value {
3475
- --tw-bg-opacity: 1;
3476
- background-color: hsl(var(--s) / var(--tw-bg-opacity));
3472
+ --tw-bg-opacity: 1;
3473
+ background-color: hsl(var(--s) / var(--tw-bg-opacity));
3477
3474
  }
3478
3475
  .progress-accent::-webkit-progress-value {
3479
- --tw-bg-opacity: 1;
3480
- background-color: hsl(var(--a) / var(--tw-bg-opacity));
3476
+ --tw-bg-opacity: 1;
3477
+ background-color: hsl(var(--a) / var(--tw-bg-opacity));
3481
3478
  }
3482
3479
  .progress-info::-webkit-progress-value {
3483
- --tw-bg-opacity: 1;
3484
- background-color: hsl(var(--in) / var(--tw-bg-opacity));
3480
+ --tw-bg-opacity: 1;
3481
+ background-color: hsl(var(--in) / var(--tw-bg-opacity));
3485
3482
  }
3486
3483
  .progress-success::-webkit-progress-value {
3487
- --tw-bg-opacity: 1;
3488
- background-color: hsl(var(--su) / var(--tw-bg-opacity));
3484
+ --tw-bg-opacity: 1;
3485
+ background-color: hsl(var(--su) / var(--tw-bg-opacity));
3489
3486
  }
3490
3487
  .progress-warning::-webkit-progress-value {
3491
- --tw-bg-opacity: 1;
3492
- background-color: hsl(var(--wa) / var(--tw-bg-opacity));
3488
+ --tw-bg-opacity: 1;
3489
+ background-color: hsl(var(--wa) / var(--tw-bg-opacity));
3493
3490
  }
3494
3491
  .progress-error::-webkit-progress-value {
3495
- --tw-bg-opacity: 1;
3496
- background-color: hsl(var(--er) / var(--tw-bg-opacity));
3492
+ --tw-bg-opacity: 1;
3493
+ background-color: hsl(var(--er) / var(--tw-bg-opacity));
3497
3494
  }
3498
3495
 
3499
- .progress:indeterminate::after {
3500
- content: "";
3501
- position: absolute;
3502
- top: 0px;
3503
- bottom: 0px;
3504
- left: -40%;
3505
- width: 33.333333%;
3506
- border-radius: var(--rounded-box, 1rem);
3507
- animation: progress-loading 5s infinite ease-in-out;
3496
+ .progress:indeterminate {
3497
+ background-image: repeating-linear-gradient(
3498
+ 90deg,
3499
+ var(--progress-color) -1%,
3500
+ var(--progress-color) 10%,
3501
+ transparent 10%,
3502
+ transparent 90%
3503
+ );
3504
+ background-size: 200%;
3505
+ background-position-x: 15%;
3506
+ animation: progress-loading 5s ease-in-out infinite;
3507
+ }
3508
+
3509
+ .progress:indeterminate::-moz-progress-bar {
3510
+ background-color: hsl(var(--n) / 0.2);
3511
+ background-image: repeating-linear-gradient(
3512
+ 90deg,
3513
+ var(--progress-color) -1%,
3514
+ var(--progress-color) 10%,
3515
+ transparent 10%,
3516
+ transparent 90%
3517
+ );
3518
+ background-size: 200%;
3519
+ background-position-x: 15%;
3520
+ animation: progress-loading 5s ease-in-out infinite;
3508
3521
  }
3509
3522
 
3510
3523
  @keyframes progress-loading {
3511
3524
  50% {
3512
- left: 107%;
3525
+ background-position-x: -115%;
3513
3526
  }
3514
3527
  }
3515
3528
  .radial-progress {