daisyui 5.0.0-alpha.21 → 5.0.0-alpha.22

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 (75) hide show
  1. package/base/properties.css +49 -1
  2. package/base/rootcolor.css +43 -1
  3. package/base/scrollbar.css +37 -1
  4. package/colors/properties.css +500 -1
  5. package/colors/responsive.css +2510 -1
  6. package/colors/states.css +1840 -1
  7. package/components/alert/object.js +1 -1
  8. package/components/alert.css +433 -1
  9. package/components/avatar/object.js +1 -1
  10. package/components/avatar.css +385 -1
  11. package/components/badge/object.js +1 -1
  12. package/components/badge.css +589 -1
  13. package/components/button/object.js +1 -1
  14. package/components/button.css +1795 -1
  15. package/components/card/object.js +1 -1
  16. package/components/card.css +955 -1
  17. package/components/chat/object.js +1 -1
  18. package/components/chat.css +775 -1
  19. package/components/checkbox/object.js +1 -1
  20. package/components/checkbox.css +853 -1
  21. package/components/collapse.css +1039 -1
  22. package/components/countdown.css +121 -1
  23. package/components/divider/object.js +1 -1
  24. package/components/divider.css +643 -1
  25. package/components/dropdown/object.js +1 -1
  26. package/components/dropdown.css +1123 -1
  27. package/components/footer/object.js +1 -1
  28. package/components/footer.css +265 -1
  29. package/components/hero.css +181 -1
  30. package/components/input/class.json +1 -1
  31. package/components/input/object.js +1 -1
  32. package/components/input.css +1147 -1
  33. package/components/kbd/object.js +1 -1
  34. package/components/kbd.css +295 -1
  35. package/components/link.css +427 -1
  36. package/components/loading.css +271 -1
  37. package/components/mask.css +499 -1
  38. package/components/menu/object.js +1 -1
  39. package/components/menu.css +1411 -1
  40. package/components/navbar.css +151 -1
  41. package/components/progress.css +967 -1
  42. package/components/radialprogress.css +223 -1
  43. package/components/radio/object.js +1 -1
  44. package/components/radio.css +601 -1
  45. package/components/range/object.js +1 -1
  46. package/components/range.css +973 -1
  47. package/components/rating/object.js +1 -1
  48. package/components/rating.css +613 -1
  49. package/components/select/class.json +1 -1
  50. package/components/select/object.js +1 -1
  51. package/components/select.css +925 -1
  52. package/components/skeleton/object.js +1 -1
  53. package/components/skeleton.css +145 -1
  54. package/components/stack.css +157 -1
  55. package/components/status.css +385 -1
  56. package/components/steps/object.js +1 -1
  57. package/components/steps.css +853 -1
  58. package/components/swap/object.js +1 -1
  59. package/components/swap.css +553 -1
  60. package/components/tab/class.json +4 -4
  61. package/components/tab/object.js +1 -1
  62. package/components/tab.css +1333 -1
  63. package/components/table/object.js +1 -1
  64. package/components/table.css +781 -1
  65. package/components/timeline/object.js +1 -1
  66. package/components/timeline.css +1735 -1
  67. package/components/toggle/object.js +1 -1
  68. package/components/toggle.css +811 -1
  69. package/components/tooltip/object.js +1 -1
  70. package/components/tooltip.css +823 -1
  71. package/full.css +1 -1
  72. package/index.js +1 -1
  73. package/package.json +79 -78
  74. package/themes.css +1 -1
  75. package/utilities/join.css +757 -1
package/components/skeleton/object.js CHANGED
@@ -1 +1 @@
1
- export default {".skeleton":{"@apply bg-base-300 rounded-box motion-reduce:duration-[15s]":{},"willChange":"background-position","animation":"skeleton 1.8s ease-in-out infinite","backgroundImage":"linear-gradient(105deg,\n transparent 0% 40%,\n var(--color-base-100) 50%,\n transparent 60% 100%)","backgroundSize":"200% auto","backgroundRepeat":"no-repeat","backgroundPositionX":"-50%"},"@keyframes skeleton":{"from":{"backgroundPosition":"150%"},"to":{"backgroundPosition":"-50%"}}};
1
+ export default {".skeleton":{"@apply bg-base-300 rounded-box motion-reduce:[transition-duration:15s]":{},"willChange":"background-position","animation":"skeleton 1.8s ease-in-out infinite","backgroundImage":"linear-gradient(105deg,\n transparent 0% 40%,\n var(--color-base-100) 50%,\n transparent 60% 100%)","backgroundSize":"200% auto","backgroundRepeat":"no-repeat","backgroundPositionX":"-50%"},"@keyframes skeleton":{"from":{"backgroundPosition":"150%"},"to":{"backgroundPosition":"-50%"}}};
package/components/skeleton.css CHANGED
@@ -1 +1,145 @@
1
- /*! 🌼 daisyUI 5.0.0-alpha.21 – MIT License */ .skeleton{border-radius:var(--radius-box,var(--radius-box));background-color:var(--color-base-300,var(--color-base-300));will-change:background-position;background-image:linear-gradient(105deg,transparent 0% 40%,var(--color-base-100)50%,transparent 60% 100%);background-position-x:-50%;background-repeat:no-repeat;background-size:200%;animation:1.8s ease-in-out infinite skeleton;@media (prefers-reduced-motion:reduce){&{--tw-duration:15s;transition-duration:15s}}}@keyframes skeleton{0%{background-position:150%}to{background-position:-50%}}
1
+ .skeleton {
2
+ border-radius: var(--radius-box, );
3
+ background-color: var(--color-base-300, );
4
+ @media (prefers-reduced-motion: reduce) {
5
+ transition-duration: 15s;
6
+ }
7
+ will-change: background-position;
8
+ animation: skeleton 1.8s ease-in-out infinite;
9
+ background-image: linear-gradient(105deg, transparent 0% 40%, var(--color-base-100) 50%, transparent 60% 100%);
10
+ background-size: 200% auto;
11
+ background-repeat: no-repeat;
12
+ background-position-x: -50%;
13
+ }
14
+ @keyframes skeleton {
15
+ from {
16
+ background-position: 150%;
17
+ }
18
+ to {
19
+ background-position: -50%;
20
+ }
21
+ }
22
+ @media (min-width: 640px) {
23
+ .sm\:skeleton {
24
+ border-radius: var(--radius-box, );
25
+ background-color: var(--color-base-300, );
26
+ @media (prefers-reduced-motion: reduce) {
27
+ transition-duration: 15s;
28
+ }
29
+ will-change: background-position;
30
+ animation: skeleton 1.8s ease-in-out infinite;
31
+ background-image: linear-gradient(105deg, transparent 0% 40%, var(--color-base-100) 50%, transparent 60% 100%);
32
+ background-size: 200% auto;
33
+ background-repeat: no-repeat;
34
+ background-position-x: -50%;
35
+ }
36
+ @keyframes skeleton {
37
+ from {
38
+ background-position: 150%;
39
+ }
40
+ to {
41
+ background-position: -50%;
42
+ }
43
+ }
44
+ }
45
+
46
+
47
+ @media (min-width: 768px) {
48
+ .md\:skeleton {
49
+ border-radius: var(--radius-box, );
50
+ background-color: var(--color-base-300, );
51
+ @media (prefers-reduced-motion: reduce) {
52
+ transition-duration: 15s;
53
+ }
54
+ will-change: background-position;
55
+ animation: skeleton 1.8s ease-in-out infinite;
56
+ background-image: linear-gradient(105deg, transparent 0% 40%, var(--color-base-100) 50%, transparent 60% 100%);
57
+ background-size: 200% auto;
58
+ background-repeat: no-repeat;
59
+ background-position-x: -50%;
60
+ }
61
+ @keyframes skeleton {
62
+ from {
63
+ background-position: 150%;
64
+ }
65
+ to {
66
+ background-position: -50%;
67
+ }
68
+ }
69
+ }
70
+
71
+
72
+ @media (min-width: 1024px) {
73
+ .lg\:skeleton {
74
+ border-radius: var(--radius-box, );
75
+ background-color: var(--color-base-300, );
76
+ @media (prefers-reduced-motion: reduce) {
77
+ transition-duration: 15s;
78
+ }
79
+ will-change: background-position;
80
+ animation: skeleton 1.8s ease-in-out infinite;
81
+ background-image: linear-gradient(105deg, transparent 0% 40%, var(--color-base-100) 50%, transparent 60% 100%);
82
+ background-size: 200% auto;
83
+ background-repeat: no-repeat;
84
+ background-position-x: -50%;
85
+ }
86
+ @keyframes skeleton {
87
+ from {
88
+ background-position: 150%;
89
+ }
90
+ to {
91
+ background-position: -50%;
92
+ }
93
+ }
94
+ }
95
+
96
+
97
+ @media (min-width: 1280px) {
98
+ .xl\:skeleton {
99
+ border-radius: var(--radius-box, );
100
+ background-color: var(--color-base-300, );
101
+ @media (prefers-reduced-motion: reduce) {
102
+ transition-duration: 15s;
103
+ }
104
+ will-change: background-position;
105
+ animation: skeleton 1.8s ease-in-out infinite;
106
+ background-image: linear-gradient(105deg, transparent 0% 40%, var(--color-base-100) 50%, transparent 60% 100%);
107
+ background-size: 200% auto;
108
+ background-repeat: no-repeat;
109
+ background-position-x: -50%;
110
+ }
111
+ @keyframes skeleton {
112
+ from {
113
+ background-position: 150%;
114
+ }
115
+ to {
116
+ background-position: -50%;
117
+ }
118
+ }
119
+ }
120
+
121
+
122
+ @media (min-width: 1536px) {
123
+ .\32xl\:skeleton {
124
+ border-radius: var(--radius-box, );
125
+ background-color: var(--color-base-300, );
126
+ @media (prefers-reduced-motion: reduce) {
127
+ transition-duration: 15s;
128
+ }
129
+ will-change: background-position;
130
+ animation: skeleton 1.8s ease-in-out infinite;
131
+ background-image: linear-gradient(105deg, transparent 0% 40%, var(--color-base-100) 50%, transparent 60% 100%);
132
+ background-size: 200% auto;
133
+ background-repeat: no-repeat;
134
+ background-position-x: -50%;
135
+ }
136
+ @keyframes skeleton {
137
+ from {
138
+ background-position: 150%;
139
+ }
140
+ to {
141
+ background-position: -50%;
142
+ }
143
+ }
144
+ }
145
+
package/components/stack.css CHANGED
@@ -1 +1,157 @@
1
- /*! 🌼 daisyUI 5.0.0-alpha.21 – MIT License */ .stack{place-items:flex-end center;display:inline-grid;&>*{opacity:.6;z-index:1;grid-row-start:1;grid-column-start:1;width:100%;transform:translateY(10%)scale(.9)}&>:nth-child(2){opacity:.8;z-index:2;transform:translateY(5%)scale(.95)}&>:first-child{opacity:1;z-index:3;transform:translateY(0)scale(1)}}
1
+ .stack {
2
+ display: inline-grid;
3
+ place-items: center;
4
+ align-items: flex-end;
5
+ &>* {
6
+ grid-column-start: 1;
7
+ grid-row-start: 1;
8
+ width: 100%;
9
+ opacity: 60%;
10
+ transform: translateY(10%) scale(0.9);
11
+ z-index: 1;
12
+ }
13
+ &>*:nth-child(2) {
14
+ opacity: 80%;
15
+ transform: translateY(5%) scale(0.95);
16
+ z-index: 2;
17
+ }
18
+ &>*:nth-child(1) {
19
+ opacity: 100%;
20
+ transform: translateY(0) scale(1);
21
+ z-index: 3;
22
+ }
23
+ }
24
+ @media (min-width: 640px) {
25
+ .sm\:stack {
26
+ display: inline-grid;
27
+ place-items: center;
28
+ align-items: flex-end;
29
+ &>* {
30
+ grid-column-start: 1;
31
+ grid-row-start: 1;
32
+ width: 100%;
33
+ opacity: 60%;
34
+ transform: translateY(10%) scale(0.9);
35
+ z-index: 1;
36
+ }
37
+ &>*:nth-child(2) {
38
+ opacity: 80%;
39
+ transform: translateY(5%) scale(0.95);
40
+ z-index: 2;
41
+ }
42
+ &>*:nth-child(1) {
43
+ opacity: 100%;
44
+ transform: translateY(0) scale(1);
45
+ z-index: 3;
46
+ }
47
+ }
48
+ }
49
+
50
+
51
+ @media (min-width: 768px) {
52
+ .md\:stack {
53
+ display: inline-grid;
54
+ place-items: center;
55
+ align-items: flex-end;
56
+ &>* {
57
+ grid-column-start: 1;
58
+ grid-row-start: 1;
59
+ width: 100%;
60
+ opacity: 60%;
61
+ transform: translateY(10%) scale(0.9);
62
+ z-index: 1;
63
+ }
64
+ &>*:nth-child(2) {
65
+ opacity: 80%;
66
+ transform: translateY(5%) scale(0.95);
67
+ z-index: 2;
68
+ }
69
+ &>*:nth-child(1) {
70
+ opacity: 100%;
71
+ transform: translateY(0) scale(1);
72
+ z-index: 3;
73
+ }
74
+ }
75
+ }
76
+
77
+
78
+ @media (min-width: 1024px) {
79
+ .lg\:stack {
80
+ display: inline-grid;
81
+ place-items: center;
82
+ align-items: flex-end;
83
+ &>* {
84
+ grid-column-start: 1;
85
+ grid-row-start: 1;
86
+ width: 100%;
87
+ opacity: 60%;
88
+ transform: translateY(10%) scale(0.9);
89
+ z-index: 1;
90
+ }
91
+ &>*:nth-child(2) {
92
+ opacity: 80%;
93
+ transform: translateY(5%) scale(0.95);
94
+ z-index: 2;
95
+ }
96
+ &>*:nth-child(1) {
97
+ opacity: 100%;
98
+ transform: translateY(0) scale(1);
99
+ z-index: 3;
100
+ }
101
+ }
102
+ }
103
+
104
+
105
+ @media (min-width: 1280px) {
106
+ .xl\:stack {
107
+ display: inline-grid;
108
+ place-items: center;
109
+ align-items: flex-end;
110
+ &>* {
111
+ grid-column-start: 1;
112
+ grid-row-start: 1;
113
+ width: 100%;
114
+ opacity: 60%;
115
+ transform: translateY(10%) scale(0.9);
116
+ z-index: 1;
117
+ }
118
+ &>*:nth-child(2) {
119
+ opacity: 80%;
120
+ transform: translateY(5%) scale(0.95);
121
+ z-index: 2;
122
+ }
123
+ &>*:nth-child(1) {
124
+ opacity: 100%;
125
+ transform: translateY(0) scale(1);
126
+ z-index: 3;
127
+ }
128
+ }
129
+ }
130
+
131
+
132
+ @media (min-width: 1536px) {
133
+ .\32xl\:stack {
134
+ display: inline-grid;
135
+ place-items: center;
136
+ align-items: flex-end;
137
+ &>* {
138
+ grid-column-start: 1;
139
+ grid-row-start: 1;
140
+ width: 100%;
141
+ opacity: 60%;
142
+ transform: translateY(10%) scale(0.9);
143
+ z-index: 1;
144
+ }
145
+ &>*:nth-child(2) {
146
+ opacity: 80%;
147
+ transform: translateY(5%) scale(0.95);
148
+ z-index: 2;
149
+ }
150
+ &>*:nth-child(1) {
151
+ opacity: 100%;
152
+ transform: translateY(0) scale(1);
153
+ z-index: 3;
154
+ }
155
+ }
156
+ }
157
+