daisyui 3.2.1 → 3.3.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.
package/README.md CHANGED
@@ -138,7 +138,7 @@ Tweet about daisyUI: [![][tweet]][tweet-url]
138
138
  - [x] Tab
139
139
 
140
140
  - Mockup
141
- - [ ] Browser
141
+ - [x] Browser
142
142
  - [x] Code
143
143
  - [x] Phone
144
144
  - [x] Window
package/dist/full.css CHANGED
@@ -1150,7 +1150,7 @@
1150
1150
  --er: 0 63% 72%
1151
1151
  }
1152
1152
  /*
1153
- ! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
1153
+ ! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
1154
1154
  */
1155
1155
  /*
1156
1156
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -1288,6 +1288,8 @@ optgroup,
1288
1288
  select,
1289
1289
  textarea {
1290
1290
  font-family: inherit; /* 1 */
1291
+ font-feature-settings: inherit; /* 1 */
1292
+ font-variation-settings: inherit; /* 1 */
1291
1293
  font-size: 100%; /* 1 */
1292
1294
  font-weight: inherit; /* 1 */
1293
1295
  line-height: inherit; /* 1 */
@@ -1400,6 +1402,12 @@ menu {
1400
1402
  padding: 0;
1401
1403
  }
1402
1404
  /*
1405
+ Reset default styling for dialogs.
1406
+ */
1407
+ dialog {
1408
+ padding: 0;
1409
+ }
1410
+ /*
1403
1411
  Prevent resizing textareas horizontally by default.
1404
1412
  */
1405
1413
  textarea {
@@ -1741,6 +1749,7 @@ html {
1741
1749
  content: attr(data-title)}
1742
1750
  .btn:is(input[type="checkbox"]),
1743
1751
  .btn:is(input[type="radio"]) {
1752
+ width: auto;
1744
1753
  appearance: none}
1745
1754
  .btn:is(input[type="checkbox"]):after,
1746
1755
  .btn:is(input[type="radio"]):after {
@@ -2571,6 +2580,15 @@ html {
2571
2580
  content: attr(data-prefix);
2572
2581
  display: inline-block;
2573
2582
  text-align: right}
2583
+ .mockup-browser {
2584
+ position: relative;
2585
+ overflow: hidden;
2586
+ overflow-x: auto;
2587
+ border-radius: var(--rounded-box, 1rem)}
2588
+ .mockup-browser pre[data-prefix]:before {
2589
+ content: attr(data-prefix);
2590
+ display: inline-block;
2591
+ text-align: right}
2574
2592
  .modal {
2575
2593
  pointer-events: none;
2576
2594
  position: fixed;
@@ -4205,8 +4223,8 @@ details.collapse summary::-webkit-details-marker {
4205
4223
  content: "";
4206
4224
  margin-bottom: 1rem;
4207
4225
  display: block;
4226
+ aspect-ratio: 1 / 1;
4208
4227
  height: 0.75rem;
4209
- width: 0.75rem;
4210
4228
  border-radius: 9999px;
4211
4229
  opacity: 0.3;
4212
4230
  box-shadow: 1.4em 0, 2.8em 0, 4.2em 0}
@@ -4252,6 +4270,61 @@ details.collapse summary::-webkit-details-marker {
4252
4270
  overflow: hidden;
4253
4271
  border-radius: 40px;
4254
4272
  margin-top: -25px}
4273
+ .mockup-browser .toolbar {
4274
+ margin-top: 0.75rem;
4275
+ margin-bottom: 0.75rem;
4276
+ display: inline-flex;
4277
+ width: 100%;
4278
+ align-items: center;
4279
+ padding-right: 1.4em}
4280
+ .mockup-browser .toolbar:before {
4281
+ content: "";
4282
+ margin-right: 4.8rem;
4283
+ display: inline-block;
4284
+ aspect-ratio: 1 / 1;
4285
+ height: 0.75rem;
4286
+ border-radius: 9999px;
4287
+ opacity: 0.3;
4288
+ box-shadow: 1.4em 0, 2.8em 0, 4.2em 0}
4289
+ .mockup-browser .toolbar .input {
4290
+ position: relative;
4291
+ margin-left: auto;
4292
+ margin-right: auto;
4293
+ display: block;
4294
+ height: 1.75rem;
4295
+ width: 24rem;
4296
+ overflow: hidden;
4297
+ text-overflow: ellipsis;
4298
+ white-space: nowrap;
4299
+ --tw-bg-opacity: 1;
4300
+ background-color: hsl(var(--b2) / var(--tw-bg-opacity));
4301
+ padding-left: 2rem}
4302
+ .mockup-browser .toolbar .input:before {
4303
+ content: "";
4304
+ position: absolute;
4305
+ top: 50%;
4306
+ left: 0.5rem;
4307
+ aspect-ratio: 1 / 1;
4308
+ height: 0.75rem;
4309
+ --tw-translate-y: -50%;
4310
+ 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));
4311
+ border-radius: 9999px;
4312
+ border-width: 2px;
4313
+ border-color: currentColor;
4314
+ opacity: 0.6}
4315
+ .mockup-browser .toolbar .input:after {
4316
+ content: "";
4317
+ position: absolute;
4318
+ top: 50%;
4319
+ left: 1.25rem;
4320
+ height: 0.5rem;
4321
+ --tw-translate-y: 25%;
4322
+ --tw-rotate: -45deg;
4323
+ 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));
4324
+ border-radius: 9999px;
4325
+ border-width: 1px;
4326
+ border-color: currentColor;
4327
+ opacity: 0.6}
4255
4328
  .modal:not(dialog:not(.modal-open)),
4256
4329
  .modal::backdrop {
4257
4330
  background-color: rgba(0, 0, 0, 0.3);
package/dist/styled.css CHANGED
@@ -95,7 +95,7 @@
95
95
  cursor: pointer;
96
96
  align-items: center
97
97
  }
98
- @media (hover:hover) {
98
+ @media(hover:hover) {
99
99
  .breadcrumbs > ul > li > a:hover, .breadcrumbs > ol > li > a:hover {
100
100
  text-decoration-line: underline
101
101
  }
@@ -160,6 +160,7 @@
160
160
 
161
161
  .btn:is(input[type="checkbox"]),
162
162
  .btn:is(input[type="radio"]) {
163
+ width: auto;
163
164
  appearance: none;
164
165
  }
165
166
 
@@ -767,7 +768,7 @@
767
768
  .link-hover {
768
769
  text-decoration-line: none
769
770
  }
770
- @media (hover:hover) {
771
+ @media(hover:hover) {
771
772
  .link-hover:hover {
772
773
  text-decoration-line: underline
773
774
  }
@@ -844,6 +845,16 @@
844
845
  display: inline-block;
845
846
  text-align: right;
846
847
  }
848
+ .mockup-browser {
849
+ position: relative;
850
+ overflow: hidden;
851
+ overflow-x: auto;
852
+ }
853
+ .mockup-browser pre[data-prefix]:before {
854
+ content: attr(data-prefix);
855
+ display: inline-block;
856
+ text-align: right;
857
+ }
847
858
  .modal {
848
859
  /* @apply pointer-events-none invisible fixed inset-0 flex justify-center opacity-0; */
849
860
  pointer-events: none;
@@ -2175,7 +2186,7 @@
2175
2186
  --tw-border-opacity: 1;
2176
2187
  border-color: hsl(var(--p) / var(--tw-border-opacity));
2177
2188
  }
2178
- @media (hover:hover) {
2189
+ @media(hover:hover) {
2179
2190
  .checkbox-primary:hover {
2180
2191
  --tw-border-opacity: 1;
2181
2192
  border-color: hsl(var(--p) / var(--tw-border-opacity));
@@ -2200,7 +2211,7 @@
2200
2211
  --tw-border-opacity: 1;
2201
2212
  border-color: hsl(var(--s) / var(--tw-border-opacity));
2202
2213
  }
2203
- @media (hover:hover) {
2214
+ @media(hover:hover) {
2204
2215
  .checkbox-secondary:hover {
2205
2216
  --tw-border-opacity: 1;
2206
2217
  border-color: hsl(var(--s) / var(--tw-border-opacity));
@@ -2225,7 +2236,7 @@
2225
2236
  --tw-border-opacity: 1;
2226
2237
  border-color: hsl(var(--a) / var(--tw-border-opacity));
2227
2238
  }
2228
- @media (hover:hover) {
2239
+ @media(hover:hover) {
2229
2240
  .checkbox-accent:hover {
2230
2241
  --tw-border-opacity: 1;
2231
2242
  border-color: hsl(var(--a) / var(--tw-border-opacity));
@@ -2250,7 +2261,7 @@
2250
2261
  --tw-border-opacity: 1;
2251
2262
  border-color: hsl(var(--su) / var(--tw-border-opacity));
2252
2263
  }
2253
- @media (hover:hover) {
2264
+ @media(hover:hover) {
2254
2265
  .checkbox-success:hover {
2255
2266
  --tw-border-opacity: 1;
2256
2267
  border-color: hsl(var(--su) / var(--tw-border-opacity));
@@ -2275,7 +2286,7 @@
2275
2286
  --tw-border-opacity: 1;
2276
2287
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
2277
2288
  }
2278
- @media (hover:hover) {
2289
+ @media(hover:hover) {
2279
2290
  .checkbox-warning:hover {
2280
2291
  --tw-border-opacity: 1;
2281
2292
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
@@ -2300,7 +2311,7 @@
2300
2311
  --tw-border-opacity: 1;
2301
2312
  border-color: hsl(var(--in) / var(--tw-border-opacity));
2302
2313
  }
2303
- @media (hover:hover) {
2314
+ @media(hover:hover) {
2304
2315
  .checkbox-info:hover {
2305
2316
  --tw-border-opacity: 1;
2306
2317
  border-color: hsl(var(--in) / var(--tw-border-opacity));
@@ -2325,7 +2336,7 @@
2325
2336
  --tw-border-opacity: 1;
2326
2337
  border-color: hsl(var(--er) / var(--tw-border-opacity));
2327
2338
  }
2328
- @media (hover:hover) {
2339
+ @media(hover:hover) {
2329
2340
  .checkbox-error:hover {
2330
2341
  --tw-border-opacity: 1;
2331
2342
  border-color: hsl(var(--er) / var(--tw-border-opacity));
@@ -2796,7 +2807,7 @@ details.collapse summary {
2796
2807
  --tw-text-opacity: 1;
2797
2808
  color: hsl(var(--bc) / var(--tw-text-opacity))
2798
2809
  }
2799
- @media (hover:hover) {
2810
+ @media(hover:hover) {
2800
2811
  .label a:hover {
2801
2812
  --tw-text-opacity: 1;
2802
2813
  color: hsl(var(--bc) / var(--tw-text-opacity))
@@ -2938,7 +2949,7 @@ details.collapse summary {
2938
2949
  --tw-text-opacity: 1;
2939
2950
  color: hsl(var(--p) / var(--tw-text-opacity));
2940
2951
  }
2941
- @media (hover:hover) {
2952
+ @media(hover:hover) {
2942
2953
  .link-primary:hover {
2943
2954
  --tw-text-opacity: 1;
2944
2955
  color: hsl(var(--pf) / var(--tw-text-opacity));
@@ -2948,7 +2959,7 @@ details.collapse summary {
2948
2959
  --tw-text-opacity: 1;
2949
2960
  color: hsl(var(--s) / var(--tw-text-opacity));
2950
2961
  }
2951
- @media (hover:hover) {
2962
+ @media(hover:hover) {
2952
2963
  .link-secondary:hover {
2953
2964
  --tw-text-opacity: 1;
2954
2965
  color: hsl(var(--sf) / var(--tw-text-opacity));
@@ -2958,7 +2969,7 @@ details.collapse summary {
2958
2969
  --tw-text-opacity: 1;
2959
2970
  color: hsl(var(--a) / var(--tw-text-opacity));
2960
2971
  }
2961
- @media (hover:hover) {
2972
+ @media(hover:hover) {
2962
2973
  .link-accent:hover {
2963
2974
  --tw-text-opacity: 1;
2964
2975
  color: hsl(var(--af) / var(--tw-text-opacity));
@@ -2968,7 +2979,7 @@ details.collapse summary {
2968
2979
  --tw-text-opacity: 1;
2969
2980
  color: hsl(var(--n) / var(--tw-text-opacity));
2970
2981
  }
2971
- @media (hover:hover) {
2982
+ @media(hover:hover) {
2972
2983
  .link-neutral:hover {
2973
2984
  --tw-text-opacity: 1;
2974
2985
  color: hsl(var(--nf) / var(--tw-text-opacity));
@@ -2978,7 +2989,7 @@ details.collapse summary {
2978
2989
  --tw-text-opacity: 1;
2979
2990
  color: hsl(var(--su) / var(--tw-text-opacity));
2980
2991
  }
2981
- @media (hover:hover) {
2992
+ @media(hover:hover) {
2982
2993
  .link-success:hover {
2983
2994
  --tw-text-opacity: 1;
2984
2995
  color: hsl(var(--su) / var(--tw-text-opacity));
@@ -2988,7 +2999,7 @@ details.collapse summary {
2988
2999
  --tw-text-opacity: 1;
2989
3000
  color: hsl(var(--in) / var(--tw-text-opacity));
2990
3001
  }
2991
- @media (hover:hover) {
3002
+ @media(hover:hover) {
2992
3003
  .link-info:hover {
2993
3004
  --tw-text-opacity: 1;
2994
3005
  color: hsl(var(--in) / var(--tw-text-opacity));
@@ -2998,7 +3009,7 @@ details.collapse summary {
2998
3009
  --tw-text-opacity: 1;
2999
3010
  color: hsl(var(--wa) / var(--tw-text-opacity));
3000
3011
  }
3001
- @media (hover:hover) {
3012
+ @media(hover:hover) {
3002
3013
  .link-warning:hover {
3003
3014
  --tw-text-opacity: 1;
3004
3015
  color: hsl(var(--wa) / var(--tw-text-opacity));
@@ -3008,7 +3019,7 @@ details.collapse summary {
3008
3019
  --tw-text-opacity: 1;
3009
3020
  color: hsl(var(--er) / var(--tw-text-opacity));
3010
3021
  }
3011
- @media (hover:hover) {
3022
+ @media(hover:hover) {
3012
3023
  .link-error:hover {
3013
3024
  --tw-text-opacity: 1;
3014
3025
  color: hsl(var(--er) / var(--tw-text-opacity));
@@ -3184,7 +3195,7 @@ details.collapse summary {
3184
3195
  --tw-text-opacity: 1;
3185
3196
  color: hsl(var(--nc) / var(--tw-text-opacity));
3186
3197
  }
3187
- @media (hover:hover) {
3198
+ @media(hover:hover) {
3188
3199
  .menu li > *:not(ul):not(details):active,
3189
3200
  .menu li > *:not(ul):not(details).active,
3190
3201
  .menu li > details > summary:active {
@@ -3271,8 +3282,8 @@ details.collapse summary {
3271
3282
  content: "";
3272
3283
  margin-bottom: 1rem;
3273
3284
  display: block;
3285
+ aspect-ratio: 1 / 1;
3274
3286
  height: 0.75rem;
3275
- width: 0.75rem;
3276
3287
  border-radius: 9999px;
3277
3288
  opacity: 0.3;
3278
3289
  box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
@@ -3324,6 +3335,69 @@ details.collapse summary {
3324
3335
  border-radius: 40px;
3325
3336
  margin-top: -25px;
3326
3337
  }
3338
+ .mockup-browser {
3339
+ border-radius: var(--rounded-box, 1rem);
3340
+ }
3341
+ .mockup-browser .toolbar {
3342
+ margin-top: 0.75rem;
3343
+ margin-bottom: 0.75rem;
3344
+ display: inline-flex;
3345
+ width: 100%;
3346
+ align-items: center;
3347
+ padding-right: 1.4em;
3348
+ }
3349
+ .mockup-browser .toolbar:before {
3350
+ content: "";
3351
+ margin-right: 4.8rem;
3352
+ display: inline-block;
3353
+ aspect-ratio: 1 / 1;
3354
+ height: 0.75rem;
3355
+ border-radius: 9999px;
3356
+ opacity: 0.3;
3357
+ box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
3358
+ }
3359
+ .mockup-browser .toolbar .input {
3360
+ position: relative;
3361
+ margin-left: auto;
3362
+ margin-right: auto;
3363
+ display: block;
3364
+ height: 1.75rem;
3365
+ width: 24rem;
3366
+ overflow: hidden;
3367
+ text-overflow: ellipsis;
3368
+ white-space: nowrap;
3369
+ --tw-bg-opacity: 1;
3370
+ background-color: hsl(var(--b2) / var(--tw-bg-opacity));
3371
+ padding-left: 2rem;
3372
+ }
3373
+ .mockup-browser .toolbar .input:before {
3374
+ content: "";
3375
+ position: absolute;
3376
+ top: 50%;
3377
+ left: 0.5rem;
3378
+ aspect-ratio: 1 / 1;
3379
+ height: 0.75rem;
3380
+ --tw-translate-y: -50%;
3381
+ 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));
3382
+ border-radius: 9999px;
3383
+ border-width: 2px;
3384
+ border-color: currentColor;
3385
+ opacity: 0.6;
3386
+ }
3387
+ .mockup-browser .toolbar .input:after {
3388
+ content: "";
3389
+ position: absolute;
3390
+ top: 50%;
3391
+ left: 1.25rem;
3392
+ height: 0.5rem;
3393
+ --tw-translate-y: 25%;
3394
+ --tw-rotate: -45deg;
3395
+ 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));
3396
+ border-radius: 9999px;
3397
+ border-width: 1px;
3398
+ border-color: currentColor;
3399
+ opacity: 0.6;
3400
+ }
3327
3401
  .modal {
3328
3402
  background-color: transparent;
3329
3403
  color: inherit;
@@ -3565,7 +3639,7 @@ details.collapse summary {
3565
3639
  --tw-border-opacity: 1;
3566
3640
  border-color: hsl(var(--p) / var(--tw-border-opacity));
3567
3641
  }
3568
- @media (hover:hover) {
3642
+ @media(hover:hover) {
3569
3643
  .radio-primary:hover {
3570
3644
  --tw-border-opacity: 1;
3571
3645
  border-color: hsl(var(--p) / var(--tw-border-opacity));
@@ -3588,7 +3662,7 @@ details.collapse summary {
3588
3662
  --tw-border-opacity: 1;
3589
3663
  border-color: hsl(var(--s) / var(--tw-border-opacity));
3590
3664
  }
3591
- @media (hover:hover) {
3665
+ @media(hover:hover) {
3592
3666
  .radio-secondary:hover {
3593
3667
  --tw-border-opacity: 1;
3594
3668
  border-color: hsl(var(--s) / var(--tw-border-opacity));
@@ -3611,7 +3685,7 @@ details.collapse summary {
3611
3685
  --tw-border-opacity: 1;
3612
3686
  border-color: hsl(var(--a) / var(--tw-border-opacity));
3613
3687
  }
3614
- @media (hover:hover) {
3688
+ @media(hover:hover) {
3615
3689
  .radio-accent:hover {
3616
3690
  --tw-border-opacity: 1;
3617
3691
  border-color: hsl(var(--a) / var(--tw-border-opacity));
@@ -3634,7 +3708,7 @@ details.collapse summary {
3634
3708
  --tw-border-opacity: 1;
3635
3709
  border-color: hsl(var(--su) / var(--tw-border-opacity));
3636
3710
  }
3637
- @media (hover:hover) {
3711
+ @media(hover:hover) {
3638
3712
  .radio-success:hover {
3639
3713
  --tw-border-opacity: 1;
3640
3714
  border-color: hsl(var(--su) / var(--tw-border-opacity));
@@ -3657,7 +3731,7 @@ details.collapse summary {
3657
3731
  --tw-border-opacity: 1;
3658
3732
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
3659
3733
  }
3660
- @media (hover:hover) {
3734
+ @media(hover:hover) {
3661
3735
  .radio-warning:hover {
3662
3736
  --tw-border-opacity: 1;
3663
3737
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
@@ -3680,7 +3754,7 @@ details.collapse summary {
3680
3754
  --tw-border-opacity: 1;
3681
3755
  border-color: hsl(var(--in) / var(--tw-border-opacity));
3682
3756
  }
3683
- @media (hover:hover) {
3757
+ @media(hover:hover) {
3684
3758
  .radio-info:hover {
3685
3759
  --tw-border-opacity: 1;
3686
3760
  border-color: hsl(var(--in) / var(--tw-border-opacity));
@@ -3703,7 +3777,7 @@ details.collapse summary {
3703
3777
  --tw-border-opacity: 1;
3704
3778
  border-color: hsl(var(--er) / var(--tw-border-opacity));
3705
3779
  }
3706
- @media (hover:hover) {
3780
+ @media(hover:hover) {
3707
3781
  .radio-error:hover {
3708
3782
  --tw-border-opacity: 1;
3709
3783
  border-color: hsl(var(--er) / var(--tw-border-opacity));
@@ -4228,7 +4302,7 @@ details.collapse summary {
4228
4302
  }
4229
4303
  .tab {
4230
4304
  --tw-text-opacity: 0.5;
4231
- }@media (hover:hover) {.tab:hover {
4305
+ }@media(hover:hover) {.tab:hover {
4232
4306
  --tw-text-opacity: 1;
4233
4307
  }
4234
4308
  }.tab {
@@ -4359,7 +4433,7 @@ details.collapse summary {
4359
4433
  --tw-text-opacity: 1;
4360
4434
  color: hsl(var(--pc) / var(--tw-text-opacity));
4361
4435
  }
4362
- @media (hover:hover) {.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]):hover {
4436
+ @media(hover:hover) {.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]):hover {
4363
4437
  --tw-text-opacity: 1;
4364
4438
  color: hsl(var(--pc) / var(--tw-text-opacity));
4365
4439
  }
@@ -4383,7 +4457,7 @@ details.collapse summary {
4383
4457
  --tw-bg-opacity: 1;
4384
4458
  background-color: hsl(var(--b2) / var(--tw-bg-opacity))
4385
4459
  }
4386
- @media (hover:hover) {
4460
+ @media(hover:hover) {
4387
4461
  .table tr.hover:hover,
4388
4462
  .table tr.hover:nth-child(even):hover {
4389
4463
  --tw-bg-opacity: 1;
@@ -4396,7 +4470,7 @@ details.collapse summary {
4396
4470
  --tw-bg-opacity: 1;
4397
4471
  background-color: hsl(var(--b3) / var(--tw-bg-opacity))
4398
4472
  }
4399
- @media (hover:hover) {
4473
+ @media(hover:hover) {
4400
4474
  .table-zebra tr.hover:hover,
4401
4475
  .table-zebra tr.hover:nth-child(even):hover {
4402
4476
  --tw-bg-opacity: 1;