daisyui 1.24.1 → 1.24.2

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/CHANGELOG.md CHANGED
@@ -2,6 +2,13 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ ### [1.24.2](https://github.com/saadeghi/daisyui/compare/v1.24.1...v1.24.2) (2022-01-17)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * [#351](https://github.com/saadeghi/daisyui/issues/351) (apply menu item style to `button` like `a` and `span`) ([87f079f](https://github.com/saadeghi/daisyui/commit/87f079fc925092d39a177154b2d8d5529787b9dd))
11
+
5
12
  ### [1.24.1](https://github.com/saadeghi/daisyui/compare/v1.24.0...v1.24.1) (2022-01-17)
6
13
 
7
14
  ## [1.24.0](https://github.com/saadeghi/daisyui/compare/v1.23.1...v1.24.0) (2022-01-17)
package/README.md CHANGED
@@ -79,7 +79,7 @@ Loading CSS files from CDN is not recommended for production. It's better to ins
79
79
 
80
80
 
81
81
  ```html
82
- <link href="https://cdn.jsdelivr.net/npm/daisyui@1.24.0/dist/full.css" rel="stylesheet" type="text/css" />
82
+ <link href="https://cdn.jsdelivr.net/npm/daisyui@1.24.1/dist/full.css" rel="stylesheet" type="text/css" />
83
83
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
84
84
  ```
85
85
 
package/dist/full.css CHANGED
@@ -2100,9 +2100,11 @@ html{
2100
2100
  align-items:stretch;
2101
2101
  }
2102
2102
 
2103
- .menu :where(li)>a,.menu :where(li)>span{
2103
+ .menu :where(li)>a,.menu :where(li)>button,.menu :where(li)>span{
2104
2104
  display:flex;
2105
2105
  align-items:center;
2106
+ outline:2px solid transparent;
2107
+ outline-offset:2px;
2106
2108
  transition-property:background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
2107
2109
  transition-duration:.15s;
2108
2110
  transition-duration:.2s;
@@ -2122,7 +2124,7 @@ html{
2122
2124
  outline-offset:2px;
2123
2125
  }
2124
2126
 
2125
- .menu :where(li).disabled>a,.menu :where(li).disabled>span{
2127
+ .menu :where(li).disabled>a,.menu :where(li).disabled>button,.menu :where(li).disabled>span{
2126
2128
  cursor:auto;
2127
2129
  }
2128
2130
 
@@ -3817,7 +3819,7 @@ html{
3817
3819
  mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE3NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjYzMSA4Ny4xMDdMLjQ0Ni41MDVsNzQuMjM5IDQzLjQ2MiA3NC40MjIgNDMuMTQtNzQuNDIyIDQzLjE0TC40NDYgMTczLjcxeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
3818
3820
  }
3819
3821
 
3820
- .menu.horizontal li.bordered>a,.menu.horizontal li.bordered>span{
3822
+ .menu.horizontal li.bordered>a,.menu.horizontal li.bordered>button,.menu.horizontal li.bordered>span{
3821
3823
  --tw-border-opacity:1;
3822
3824
  border-color:hsla(var(--p) / var(--tw-border-opacity, 1));
3823
3825
  border-left-width:0;
@@ -3828,18 +3830,18 @@ html{
3828
3830
  border-radius:var(--rounded-btn, .5rem);
3829
3831
  }
3830
3832
 
3831
- .menu :where(li.bordered>a),.menu :where(li.bordered>span){
3833
+ .menu :where(li.bordered>a),.menu :where(li.bordered>button),.menu :where(li.bordered>span){
3832
3834
  --tw-border-opacity:1;
3833
3835
  border-color:hsla(var(--p) / var(--tw-border-opacity, 1));
3834
3836
  border-left-width:4px;
3835
3837
  }
3836
3838
 
3837
- .menu li>:where(a),.menu li>:where(span){
3839
+ .menu li>:where(a),.menu li>:where(button),.menu li>:where(span){
3838
3840
  padding:.75rem 1.25rem;
3839
3841
  color:currentColor;
3840
3842
  }
3841
3843
 
3842
- .menu li>:where(a:focus),.menu li>:where(a:hover){
3844
+ .menu li>:where(a:focus),.menu li>:where(a:hover),.menu li>:where(button:focus),.menu li>:where(button:hover){
3843
3845
  --tw-bg-opacity:1;
3844
3846
  --tw-bg-opacity:0.1;
3845
3847
  background-color:hsla(var(--bc) / var(--tw-bg-opacity, 1));
@@ -3852,18 +3854,18 @@ html{
3852
3854
  color:hsla(var(--pc) / var(--tw-text-opacity, 1));
3853
3855
  }
3854
3856
 
3855
- .menu li>:where(a:active){
3857
+ .menu li>:where(a:active),.menu li>:where(button:active){
3856
3858
  --tw-bg-opacity:1;
3857
3859
  background-color:hsla(var(--pf) / var(--tw-bg-opacity, 1));
3858
3860
  --tw-text-opacity:1;
3859
3861
  color:hsla(var(--pc) / var(--tw-text-opacity, 1));
3860
3862
  }
3861
3863
 
3862
- .menu li.disabled>a:hover,.menu li.disabled>span:hover{
3864
+ .menu li.disabled>a:hover,.menu li.disabled>button:hover,.menu li.disabled>span:hover{
3863
3865
  background-color:transparent;
3864
3866
  }
3865
3867
 
3866
- .menu li.disabled>a,.menu li.disabled>span{
3868
+ .menu li.disabled>a,.menu li.disabled>button,.menu li.disabled>span{
3867
3869
  --tw-text-opacity:1;
3868
3870
  --tw-text-opacity:0.2;
3869
3871
  color:hsla(var(--bc) / var(--tw-text-opacity, 1));
@@ -9866,24 +9868,24 @@ html{
9866
9868
  margin-top:1rem;
9867
9869
  }
9868
9870
 
9869
- .menu-vertical :where(li.bordered>a),.menu-vertical :where(li.bordered>span){
9871
+ .menu-vertical :where(li.bordered>a),.menu-vertical :where(li.bordered>button),.menu-vertical :where(li.bordered>span){
9870
9872
  border-bottom-width:0;
9871
9873
  border-left-width:4px;
9872
9874
  }
9873
9875
 
9874
- .menu-horizontal :where(li.bordered>a),.menu-horizontal :where(li.bordered>span){
9876
+ .menu-horizontal :where(li.bordered>a),.menu-horizontal :where(li.bordered>button),.menu-horizontal :where(li.bordered>span){
9875
9877
  border-left-width:0;
9876
9878
  border-bottom-width:4px;
9877
9879
  }
9878
9880
 
9879
- .menu-normal :where(li>a),.menu-normal :where(li>span){
9881
+ .menu-normal :where(li>a),.menu-normal :where(li>button),.menu-normal :where(li>span){
9880
9882
  font-size:1rem;
9881
9883
  line-height:1.5rem;
9882
9884
  padding-top:.75rem;
9883
9885
  padding-bottom:.75rem;
9884
9886
  }
9885
9887
 
9886
- .menu-compact :where(li>a),.menu-compact :where(li>span){
9888
+ .menu-compact :where(li>a),.menu-compact :where(li>button),.menu-compact :where(li>span){
9887
9889
  font-size:.875rem;
9888
9890
  line-height:1.25rem;
9889
9891
  padding-top:.5rem;
@@ -14652,24 +14654,24 @@ html{
14652
14654
  margin-top:1rem;
14653
14655
  }
14654
14656
 
14655
- .sm\:menu-vertical :where(li.bordered>a),.sm\:menu-vertical :where(li.bordered>span){
14657
+ .sm\:menu-vertical :where(li.bordered>a),.sm\:menu-vertical :where(li.bordered>button),.sm\:menu-vertical :where(li.bordered>span){
14656
14658
  border-bottom-width:0;
14657
14659
  border-left-width:4px;
14658
14660
  }
14659
14661
 
14660
- .sm\:menu-horizontal :where(li.bordered>a),.sm\:menu-horizontal :where(li.bordered>span){
14662
+ .sm\:menu-horizontal :where(li.bordered>a),.sm\:menu-horizontal :where(li.bordered>button),.sm\:menu-horizontal :where(li.bordered>span){
14661
14663
  border-left-width:0;
14662
14664
  border-bottom-width:4px;
14663
14665
  }
14664
14666
 
14665
- .sm\:menu-normal :where(li>a),.sm\:menu-normal :where(li>span){
14667
+ .sm\:menu-normal :where(li>a),.sm\:menu-normal :where(li>button),.sm\:menu-normal :where(li>span){
14666
14668
  font-size:1rem;
14667
14669
  line-height:1.5rem;
14668
14670
  padding-top:.75rem;
14669
14671
  padding-bottom:.75rem;
14670
14672
  }
14671
14673
 
14672
- .sm\:menu-compact :where(li>a),.sm\:menu-compact :where(li>span){
14674
+ .sm\:menu-compact :where(li>a),.sm\:menu-compact :where(li>button),.sm\:menu-compact :where(li>span){
14673
14675
  font-size:.875rem;
14674
14676
  line-height:1.25rem;
14675
14677
  padding-top:.5rem;
@@ -19439,24 +19441,24 @@ html{
19439
19441
  margin-top:1rem;
19440
19442
  }
19441
19443
 
19442
- .md\:menu-vertical :where(li.bordered>a),.md\:menu-vertical :where(li.bordered>span){
19444
+ .md\:menu-vertical :where(li.bordered>a),.md\:menu-vertical :where(li.bordered>button),.md\:menu-vertical :where(li.bordered>span){
19443
19445
  border-bottom-width:0;
19444
19446
  border-left-width:4px;
19445
19447
  }
19446
19448
 
19447
- .md\:menu-horizontal :where(li.bordered>a),.md\:menu-horizontal :where(li.bordered>span){
19449
+ .md\:menu-horizontal :where(li.bordered>a),.md\:menu-horizontal :where(li.bordered>button),.md\:menu-horizontal :where(li.bordered>span){
19448
19450
  border-left-width:0;
19449
19451
  border-bottom-width:4px;
19450
19452
  }
19451
19453
 
19452
- .md\:menu-normal :where(li>a),.md\:menu-normal :where(li>span){
19454
+ .md\:menu-normal :where(li>a),.md\:menu-normal :where(li>button),.md\:menu-normal :where(li>span){
19453
19455
  font-size:1rem;
19454
19456
  line-height:1.5rem;
19455
19457
  padding-top:.75rem;
19456
19458
  padding-bottom:.75rem;
19457
19459
  }
19458
19460
 
19459
- .md\:menu-compact :where(li>a),.md\:menu-compact :where(li>span){
19461
+ .md\:menu-compact :where(li>a),.md\:menu-compact :where(li>button),.md\:menu-compact :where(li>span){
19460
19462
  font-size:.875rem;
19461
19463
  line-height:1.25rem;
19462
19464
  padding-top:.5rem;
@@ -24226,24 +24228,24 @@ html{
24226
24228
  margin-top:1rem;
24227
24229
  }
24228
24230
 
24229
- .lg\:menu-vertical :where(li.bordered>a),.lg\:menu-vertical :where(li.bordered>span){
24231
+ .lg\:menu-vertical :where(li.bordered>a),.lg\:menu-vertical :where(li.bordered>button),.lg\:menu-vertical :where(li.bordered>span){
24230
24232
  border-bottom-width:0;
24231
24233
  border-left-width:4px;
24232
24234
  }
24233
24235
 
24234
- .lg\:menu-horizontal :where(li.bordered>a),.lg\:menu-horizontal :where(li.bordered>span){
24236
+ .lg\:menu-horizontal :where(li.bordered>a),.lg\:menu-horizontal :where(li.bordered>button),.lg\:menu-horizontal :where(li.bordered>span){
24235
24237
  border-left-width:0;
24236
24238
  border-bottom-width:4px;
24237
24239
  }
24238
24240
 
24239
- .lg\:menu-normal :where(li>a),.lg\:menu-normal :where(li>span){
24241
+ .lg\:menu-normal :where(li>a),.lg\:menu-normal :where(li>button),.lg\:menu-normal :where(li>span){
24240
24242
  font-size:1rem;
24241
24243
  line-height:1.5rem;
24242
24244
  padding-top:.75rem;
24243
24245
  padding-bottom:.75rem;
24244
24246
  }
24245
24247
 
24246
- .lg\:menu-compact :where(li>a),.lg\:menu-compact :where(li>span){
24248
+ .lg\:menu-compact :where(li>a),.lg\:menu-compact :where(li>button),.lg\:menu-compact :where(li>span){
24247
24249
  font-size:.875rem;
24248
24250
  line-height:1.25rem;
24249
24251
  padding-top:.5rem;
@@ -29013,24 +29015,24 @@ html{
29013
29015
  margin-top:1rem;
29014
29016
  }
29015
29017
 
29016
- .xl\:menu-vertical :where(li.bordered>a),.xl\:menu-vertical :where(li.bordered>span){
29018
+ .xl\:menu-vertical :where(li.bordered>a),.xl\:menu-vertical :where(li.bordered>button),.xl\:menu-vertical :where(li.bordered>span){
29017
29019
  border-bottom-width:0;
29018
29020
  border-left-width:4px;
29019
29021
  }
29020
29022
 
29021
- .xl\:menu-horizontal :where(li.bordered>a),.xl\:menu-horizontal :where(li.bordered>span){
29023
+ .xl\:menu-horizontal :where(li.bordered>a),.xl\:menu-horizontal :where(li.bordered>button),.xl\:menu-horizontal :where(li.bordered>span){
29022
29024
  border-left-width:0;
29023
29025
  border-bottom-width:4px;
29024
29026
  }
29025
29027
 
29026
- .xl\:menu-normal :where(li>a),.xl\:menu-normal :where(li>span){
29028
+ .xl\:menu-normal :where(li>a),.xl\:menu-normal :where(li>button),.xl\:menu-normal :where(li>span){
29027
29029
  font-size:1rem;
29028
29030
  line-height:1.5rem;
29029
29031
  padding-top:.75rem;
29030
29032
  padding-bottom:.75rem;
29031
29033
  }
29032
29034
 
29033
- .xl\:menu-compact :where(li>a),.xl\:menu-compact :where(li>span){
29035
+ .xl\:menu-compact :where(li>a),.xl\:menu-compact :where(li>button),.xl\:menu-compact :where(li>span){
29034
29036
  font-size:.875rem;
29035
29037
  line-height:1.25rem;
29036
29038
  padding-top:.5rem;
@@ -33800,24 +33802,24 @@ html{
33800
33802
  margin-top:1rem;
33801
33803
  }
33802
33804
 
33803
- .\32xl\:menu-vertical :where(li.bordered>a),.\32xl\:menu-vertical :where(li.bordered>span){
33805
+ .\32xl\:menu-vertical :where(li.bordered>a),.\32xl\:menu-vertical :where(li.bordered>button),.\32xl\:menu-vertical :where(li.bordered>span){
33804
33806
  border-bottom-width:0;
33805
33807
  border-left-width:4px;
33806
33808
  }
33807
33809
 
33808
- .\32xl\:menu-horizontal :where(li.bordered>a),.\32xl\:menu-horizontal :where(li.bordered>span){
33810
+ .\32xl\:menu-horizontal :where(li.bordered>a),.\32xl\:menu-horizontal :where(li.bordered>button),.\32xl\:menu-horizontal :where(li.bordered>span){
33809
33811
  border-left-width:0;
33810
33812
  border-bottom-width:4px;
33811
33813
  }
33812
33814
 
33813
- .\32xl\:menu-normal :where(li>a),.\32xl\:menu-normal :where(li>span){
33815
+ .\32xl\:menu-normal :where(li>a),.\32xl\:menu-normal :where(li>button),.\32xl\:menu-normal :where(li>span){
33814
33816
  font-size:1rem;
33815
33817
  line-height:1.5rem;
33816
33818
  padding-top:.75rem;
33817
33819
  padding-bottom:.75rem;
33818
33820
  }
33819
33821
 
33820
- .\32xl\:menu-compact :where(li>a),.\32xl\:menu-compact :where(li>span){
33822
+ .\32xl\:menu-compact :where(li>a),.\32xl\:menu-compact :where(li>button),.\32xl\:menu-compact :where(li>span){
33821
33823
  font-size:.875rem;
33822
33824
  line-height:1.25rem;
33823
33825
  padding-top:.5rem;
package/dist/styled.css CHANGED
@@ -757,9 +757,11 @@
757
757
  flex-direction:column;
758
758
  align-items:stretch;
759
759
  }
760
- .menu :where(li)>a,.menu :where(li)>span{
760
+ .menu :where(li)>a,.menu :where(li)>button,.menu :where(li)>span{
761
761
  display:flex;
762
762
  align-items:center;
763
+ outline:2px solid transparent;
764
+ outline-offset:2px;
763
765
  transition-property:background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
764
766
  transition-duration:.15s;
765
767
  transition-timing-function:cubic-bezier(.4, 0, .2, 1);
@@ -776,7 +778,7 @@
776
778
  outline:2px solid transparent;
777
779
  outline-offset:2px;
778
780
  }
779
- .menu :where(li).disabled>a,.menu :where(li).disabled>span{
781
+ .menu :where(li).disabled>a,.menu :where(li).disabled>button,.menu :where(li).disabled>span{
780
782
  cursor:auto;
781
783
  }
782
784
  .mockup-code{
@@ -2339,7 +2341,7 @@
2339
2341
  .mask-triangle-4{
2340
2342
  -webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE3NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNLjYzMSA4Ny4xMDdMLjQ0Ni41MDVsNzQuMjM5IDQzLjQ2MiA3NC40MjIgNDMuMTQtNzQuNDIyIDQzLjE0TC40NDYgMTczLjcxeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
2341
2343
  mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE3NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNLjYzMSA4Ny4xMDdMLjQ0Ni41MDVsNzQuMjM5IDQzLjQ2MiA3NC40MjIgNDMuMTQtNzQuNDIyIDQzLjE0TC40NDYgMTczLjcxeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
2342
- }.menu.horizontal li.bordered>a,.menu.horizontal li.bordered>span{
2344
+ }.menu.horizontal li.bordered>a,.menu.horizontal li.bordered>button,.menu.horizontal li.bordered>span{
2343
2345
  --tw-border-opacity:1;
2344
2346
  border-color:hsla(var(--p) / var(--tw-border-opacity, 1));
2345
2347
  border-left-width:0;
@@ -2348,16 +2350,16 @@
2348
2350
  .menu[class*=p-] li a{
2349
2351
  border-radius:var(--rounded-btn, .5rem);
2350
2352
  }
2351
- .menu :where(li.bordered>a),.menu :where(li.bordered>span){
2353
+ .menu :where(li.bordered>a),.menu :where(li.bordered>button),.menu :where(li.bordered>span){
2352
2354
  --tw-border-opacity:1;
2353
2355
  border-color:hsla(var(--p) / var(--tw-border-opacity, 1));
2354
2356
  border-left-width:4px;
2355
2357
  }
2356
- .menu li>:where(a),.menu li>:where(span){
2358
+ .menu li>:where(a),.menu li>:where(button),.menu li>:where(span){
2357
2359
  padding:.75rem 1.25rem;
2358
2360
  color:currentColor;
2359
2361
  }
2360
- .menu li>:where(a:focus),.menu li>:where(a:hover){
2362
+ .menu li>:where(a:focus),.menu li>:where(a:hover),.menu li>:where(button:focus),.menu li>:where(button:hover){
2361
2363
  --tw-bg-opacity:1;
2362
2364
  background-color:hsla(var(--bc) / var(--tw-bg-opacity, 1));
2363
2365
  --tw-bg-opacity:0.1;
@@ -2368,16 +2370,16 @@
2368
2370
  --tw-text-opacity:1;
2369
2371
  color:hsla(var(--pc) / var(--tw-text-opacity, 1));
2370
2372
  }
2371
- .menu li>:where(a:active){
2373
+ .menu li>:where(a:active),.menu li>:where(button:active){
2372
2374
  --tw-bg-opacity:1;
2373
2375
  background-color:hsla(var(--pf) / var(--tw-bg-opacity, 1));
2374
2376
  --tw-text-opacity:1;
2375
2377
  color:hsla(var(--pc) / var(--tw-text-opacity, 1));
2376
2378
  }
2377
- .menu li.disabled>a:hover,.menu li.disabled>span:hover{
2379
+ .menu li.disabled>a:hover,.menu li.disabled>button:hover,.menu li.disabled>span:hover{
2378
2380
  background-color:transparent;
2379
2381
  }
2380
- .menu li.disabled>a,.menu li.disabled>span{
2382
+ .menu li.disabled>a,.menu li.disabled>button,.menu li.disabled>span{
2381
2383
  --tw-text-opacity:1;
2382
2384
  color:hsla(var(--bc) / var(--tw-text-opacity, 1));
2383
2385
  --tw-text-opacity:0.2;