frutjam 0.3.0-alpha.1 → 0.3.0-alpha.3
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/package.json +3 -3
- package/src/components/button.css +333 -106
- package/src/components/drawer.css +1 -1
- package/src/themes/animation/wiggle.css +14 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "frutjam",
|
|
3
|
-
"version": "0.3.0-alpha.
|
|
3
|
+
"version": "0.3.0-alpha.3",
|
|
4
4
|
"description": "A utility-first CSS framework UI Library",
|
|
5
5
|
"main": "./dist/frutjam.css",
|
|
6
6
|
"browser": "dist/frutjam.css",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"url": "https://github.com/nezanuha/frutjam/issues"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@tailwindcss/postcss": "^4.0.
|
|
41
|
-
"tailwindcss": "^4.0.
|
|
40
|
+
"@tailwindcss/postcss": "^4.0.15",
|
|
41
|
+
"tailwindcss": "^4.0.15"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"css-loader": "^7.1.2",
|
|
@@ -1,92 +1,299 @@
|
|
|
1
|
-
@import
|
|
1
|
+
@import "../themes/colors/base.css";
|
|
2
|
+
@import "../themes/animation/wiggle.css";
|
|
3
|
+
|
|
4
|
+
/* default button */
|
|
2
5
|
@utility btn {
|
|
3
6
|
@layer components {
|
|
4
|
-
@apply text-[buttonFace] flex items-center text-center rounded-lg font-medium cursor-pointer relative overflow-hidden text-xs transition duration-300
|
|
7
|
+
@apply text-[buttonFace] bg-neutral-200 text-black relative inline-flex shrink-0 cursor-pointer flex-nowrap items-center justify-center gap-1.5 text-center align-middle rounded-lg font-medium cursor-pointer relative overflow-hidden text-xs transition duration-300 text-center leading-4;
|
|
5
8
|
|
|
6
|
-
&:
|
|
7
|
-
@apply
|
|
8
|
-
}
|
|
9
|
+
&:not(.btn-dashed, .btn-outline, .btn-soft) {
|
|
10
|
+
@apply bg-gradient-to-br from-neutral-200 via-neutral-200/95 to-neutral-200 ring-[0.5px] ring-neutral-300;
|
|
9
11
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
+
@media (hover: hover) {
|
|
13
|
+
&:hover {
|
|
14
|
+
@apply ring-2 bg-gradient-to-tr via-neutral-200/90;
|
|
15
|
+
&::before {
|
|
16
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
12
20
|
}
|
|
13
21
|
}
|
|
14
22
|
}
|
|
15
23
|
|
|
16
24
|
@utility btn-dashed {
|
|
17
25
|
@layer components {
|
|
18
|
-
|
|
26
|
+
&:is(.btn-primary) {
|
|
27
|
+
@apply text-primary bg-transparent border border-dashed border-primary;
|
|
28
|
+
|
|
29
|
+
@media (hover: hover) {
|
|
30
|
+
&:hover {
|
|
31
|
+
@apply ring-2 text-surface bg-primary bg-gradient-to-br from-primary via-primary/95 to-primary;
|
|
32
|
+
&::before {
|
|
33
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
&:is(.btn-secondary) {
|
|
39
|
+
@apply text-secondary bg-transparent border border-dashed border-secondary;
|
|
40
|
+
|
|
41
|
+
@media (hover: hover) {
|
|
42
|
+
&:hover {
|
|
43
|
+
@apply ring-2 text-surface bg-secondary bg-gradient-to-br from-secondary via-secondary/95 to-secondary;
|
|
44
|
+
&::before {
|
|
45
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
&:is(.btn-success) {
|
|
51
|
+
@apply text-success bg-transparent border border-dashed border-success;
|
|
52
|
+
|
|
53
|
+
@media (hover: hover) {
|
|
54
|
+
&:hover {
|
|
55
|
+
@apply ring-2 text-surface bg-success bg-gradient-to-br from-success via-success/95 to-success;
|
|
56
|
+
&::before {
|
|
57
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
&:is(.btn-error) {
|
|
63
|
+
@apply text-error bg-transparent border border-dashed border-error;
|
|
64
|
+
|
|
65
|
+
@media (hover: hover) {
|
|
66
|
+
&:hover {
|
|
67
|
+
@apply ring-2 text-surface bg-error bg-gradient-to-br from-error via-error/95 to-error;
|
|
68
|
+
&::before {
|
|
69
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&:is(.btn-warning) {
|
|
76
|
+
@apply text-warning bg-transparent border border-dashed border-warning;
|
|
77
|
+
|
|
78
|
+
@media (hover: hover) {
|
|
79
|
+
&:hover {
|
|
80
|
+
@apply ring-2 text-surface bg-warning bg-gradient-to-br from-warning via-warning/95 to-warning;
|
|
81
|
+
&::before {
|
|
82
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
&:is(.btn-info) {
|
|
89
|
+
@apply text-info bg-transparent border border-dashed border-info;
|
|
90
|
+
|
|
91
|
+
@media (hover: hover) {
|
|
92
|
+
&:hover {
|
|
93
|
+
@apply ring-2 text-surface bg-info bg-gradient-to-br from-info via-info/95 to-info;
|
|
94
|
+
&::before {
|
|
95
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&:is(.btn-accent) {
|
|
102
|
+
@apply text-accent bg-transparent border border-dashed border-accent;
|
|
103
|
+
|
|
104
|
+
@media (hover: hover) {
|
|
105
|
+
&:hover {
|
|
106
|
+
@apply ring-2 text-surface bg-accent bg-gradient-to-br from-accent via-accent/95 to-accent;
|
|
107
|
+
&::before {
|
|
108
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
19
113
|
}
|
|
20
114
|
}
|
|
21
115
|
|
|
22
116
|
@utility btn-outline {
|
|
23
117
|
@layer components {
|
|
24
|
-
|
|
118
|
+
&:is(.btn-primary) {
|
|
119
|
+
@apply text-primary bg-transparent ring-1 ring-primary;
|
|
120
|
+
|
|
121
|
+
@media (hover: hover) {
|
|
122
|
+
&:hover {
|
|
123
|
+
@apply ring-2 text-surface bg-primary bg-gradient-to-br from-primary via-primary/95 to-primary;
|
|
124
|
+
&::before {
|
|
125
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
&:is(.btn-secondary) {
|
|
131
|
+
@apply text-secondary bg-transparent ring-1 ring-secondary;
|
|
132
|
+
|
|
133
|
+
@media (hover: hover) {
|
|
134
|
+
&:hover {
|
|
135
|
+
@apply ring-2 text-surface bg-secondary bg-gradient-to-br from-secondary via-secondary/95 to-secondary;
|
|
136
|
+
&::before {
|
|
137
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
&:is(.btn-success) {
|
|
143
|
+
@apply text-success bg-transparent ring-1 ring-success;
|
|
144
|
+
|
|
145
|
+
@media (hover: hover) {
|
|
146
|
+
&:hover {
|
|
147
|
+
@apply ring-2 text-surface bg-success bg-gradient-to-br from-success via-success/95 to-success;
|
|
148
|
+
&::before {
|
|
149
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
&:is(.btn-error) {
|
|
155
|
+
@apply text-error bg-transparent ring-1 ring-error;
|
|
156
|
+
|
|
157
|
+
@media (hover: hover) {
|
|
158
|
+
&:hover {
|
|
159
|
+
@apply ring-2 text-surface bg-error bg-gradient-to-br from-error via-error/95 to-error;
|
|
160
|
+
&::before {
|
|
161
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
&:is(.btn-warning) {
|
|
168
|
+
@apply text-warning bg-transparent ring-1 ring-warning;
|
|
169
|
+
|
|
170
|
+
@media (hover: hover) {
|
|
171
|
+
&:hover {
|
|
172
|
+
@apply ring-2 text-surface bg-warning bg-gradient-to-br from-warning via-warning/95 to-warning;
|
|
173
|
+
&::before {
|
|
174
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
&:is(.btn-info) {
|
|
181
|
+
@apply text-info bg-transparent ring-1 ring-info;
|
|
182
|
+
|
|
183
|
+
@media (hover: hover) {
|
|
184
|
+
&:hover {
|
|
185
|
+
@apply ring-2 text-surface bg-info bg-gradient-to-br from-info via-info/95 to-info;
|
|
186
|
+
&::before {
|
|
187
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
&:is(.btn-accent) {
|
|
194
|
+
@apply text-accent bg-transparent ring-1 ring-accent;
|
|
195
|
+
|
|
196
|
+
@media (hover: hover) {
|
|
197
|
+
&:hover {
|
|
198
|
+
@apply ring-2 text-surface bg-accent bg-gradient-to-br from-accent via-accent/95 to-accent;
|
|
199
|
+
&::before {
|
|
200
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
}
|
|
25
205
|
}
|
|
26
206
|
}
|
|
27
207
|
|
|
28
208
|
@utility btn-soft {
|
|
29
209
|
@layer components {
|
|
210
|
+
&:is(.btn-primary) {
|
|
211
|
+
@apply text-primary bg-primary/20 ring-[0.5px] ring-primary/20;
|
|
30
212
|
|
|
31
|
-
|
|
32
|
-
@apply bg-primary/10 text-primary;
|
|
33
|
-
@media (hover: hover){
|
|
213
|
+
@media (hover: hover) {
|
|
34
214
|
&:hover {
|
|
35
|
-
@apply
|
|
215
|
+
@apply ring-2;
|
|
216
|
+
&::before {
|
|
217
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
218
|
+
}
|
|
36
219
|
}
|
|
37
220
|
}
|
|
38
221
|
}
|
|
39
222
|
|
|
40
|
-
&:is(.btn-secondary){
|
|
41
|
-
@apply bg-secondary/
|
|
42
|
-
|
|
223
|
+
&:is(.btn-secondary) {
|
|
224
|
+
@apply text-secondary bg-secondary/20 ring-[0.5px] ring-secondary/20;
|
|
225
|
+
|
|
226
|
+
@media (hover: hover) {
|
|
43
227
|
&:hover {
|
|
44
|
-
@apply
|
|
228
|
+
@apply ring-2;
|
|
229
|
+
&::before {
|
|
230
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
231
|
+
}
|
|
45
232
|
}
|
|
46
233
|
}
|
|
47
234
|
}
|
|
48
235
|
|
|
49
|
-
&:is(.btn-
|
|
50
|
-
@apply bg-
|
|
51
|
-
|
|
236
|
+
&:is(.btn-success) {
|
|
237
|
+
@apply text-success bg-success/20 ring-[0.5px] ring-success/20;
|
|
238
|
+
|
|
239
|
+
@media (hover: hover) {
|
|
52
240
|
&:hover {
|
|
53
|
-
@apply
|
|
241
|
+
@apply ring-2;
|
|
242
|
+
&::before {
|
|
243
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
244
|
+
}
|
|
54
245
|
}
|
|
55
246
|
}
|
|
56
247
|
}
|
|
57
248
|
|
|
58
|
-
&:is(.btn-
|
|
59
|
-
@apply bg-
|
|
60
|
-
|
|
249
|
+
&:is(.btn-error) {
|
|
250
|
+
@apply text-error bg-error/20 ring-[0.5px] ring-error/20;
|
|
251
|
+
|
|
252
|
+
@media (hover: hover) {
|
|
61
253
|
&:hover {
|
|
62
|
-
@apply
|
|
254
|
+
@apply ring-2;
|
|
255
|
+
&::before {
|
|
256
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
257
|
+
}
|
|
63
258
|
}
|
|
64
259
|
}
|
|
65
260
|
}
|
|
66
261
|
|
|
67
|
-
&:is(.btn-
|
|
68
|
-
@apply bg-
|
|
69
|
-
|
|
262
|
+
&:is(.btn-warning) {
|
|
263
|
+
@apply text-warning bg-warning/20 ring-[0.5px] ring-warning/20;
|
|
264
|
+
|
|
265
|
+
@media (hover: hover) {
|
|
70
266
|
&:hover {
|
|
71
|
-
@apply
|
|
267
|
+
@apply ring-2;
|
|
268
|
+
&::before {
|
|
269
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
270
|
+
}
|
|
72
271
|
}
|
|
73
272
|
}
|
|
74
273
|
}
|
|
75
274
|
|
|
76
|
-
&:is(.btn-
|
|
77
|
-
@apply bg-
|
|
78
|
-
|
|
275
|
+
&:is(.btn-info) {
|
|
276
|
+
@apply text-info bg-info/20 ring-[0.5px] ring-info/20;
|
|
277
|
+
|
|
278
|
+
@media (hover: hover) {
|
|
79
279
|
&:hover {
|
|
80
|
-
@apply
|
|
280
|
+
@apply ring-2;
|
|
281
|
+
&::before {
|
|
282
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
283
|
+
}
|
|
81
284
|
}
|
|
82
285
|
}
|
|
83
286
|
}
|
|
84
287
|
|
|
85
|
-
&:is(.btn-
|
|
86
|
-
@apply bg-
|
|
87
|
-
|
|
288
|
+
&:is(.btn-accent) {
|
|
289
|
+
@apply text-accent bg-accent/20 ring-[0.5px] ring-accent/20;
|
|
290
|
+
|
|
291
|
+
@media (hover: hover) {
|
|
88
292
|
&:hover {
|
|
89
|
-
@apply
|
|
293
|
+
@apply ring-2;
|
|
294
|
+
&::before {
|
|
295
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
296
|
+
}
|
|
90
297
|
}
|
|
91
298
|
}
|
|
92
299
|
}
|
|
@@ -95,51 +302,65 @@
|
|
|
95
302
|
|
|
96
303
|
@utility btn-xs {
|
|
97
304
|
@layer components {
|
|
98
|
-
@apply px-2.5 py-1.5 text-xs
|
|
305
|
+
@apply px-2.5 py-1.5 text-xs;
|
|
99
306
|
}
|
|
100
307
|
}
|
|
101
308
|
|
|
102
309
|
@utility btn-sm {
|
|
103
310
|
@layer components {
|
|
104
|
-
@apply px-3 py-2 text-sm
|
|
311
|
+
@apply px-3 py-2 text-sm;
|
|
105
312
|
}
|
|
106
313
|
}
|
|
107
314
|
|
|
108
315
|
@utility btn-md {
|
|
109
316
|
@layer components {
|
|
110
|
-
@apply px-
|
|
317
|
+
@apply px-3.5 py-2.5 text-sm;
|
|
111
318
|
}
|
|
112
319
|
}
|
|
113
320
|
|
|
114
321
|
@utility btn-lg {
|
|
115
322
|
@layer components {
|
|
116
|
-
@apply px-4 py-
|
|
323
|
+
@apply px-4 py-3 text-base;
|
|
117
324
|
}
|
|
118
325
|
}
|
|
119
326
|
|
|
120
327
|
@utility btn-xl {
|
|
121
328
|
@layer components {
|
|
122
|
-
@apply px-
|
|
329
|
+
@apply px-4.5 py-3.5 text-base;
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
@utility btn-2xl {
|
|
334
|
+
@layer components {
|
|
335
|
+
@apply px-5 py-4 text-base;
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
@utility btn-circle {
|
|
340
|
+
@layer components {
|
|
341
|
+
@apply rounded-full size-auto aspect-square;
|
|
123
342
|
}
|
|
124
343
|
}
|
|
125
344
|
|
|
126
|
-
@utility btn-
|
|
345
|
+
@utility btn-square {
|
|
127
346
|
@layer components {
|
|
128
|
-
@apply
|
|
347
|
+
@apply size-auto aspect-square;
|
|
129
348
|
}
|
|
130
349
|
}
|
|
131
350
|
|
|
351
|
+
/* buttons colors */
|
|
132
352
|
@utility btn-primary {
|
|
133
353
|
@layer components {
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
&:is(.btn-dashed, .btn-outline):not(.btn-soft){
|
|
137
|
-
@apply bg-white text-primary border-primary;
|
|
138
|
-
}
|
|
354
|
+
&:not(.btn-dashed, .btn-outline, .btn-soft) {
|
|
355
|
+
@apply text-primary-content bg-gradient-to-br from-primary via-primary/95 to-primary ring-[0.5px] ring-primary/50;
|
|
139
356
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
357
|
+
@media (hover: hover) {
|
|
358
|
+
&:hover {
|
|
359
|
+
@apply ring-2 bg-gradient-to-tr via-primary/90;
|
|
360
|
+
&::before {
|
|
361
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
362
|
+
}
|
|
363
|
+
}
|
|
143
364
|
}
|
|
144
365
|
}
|
|
145
366
|
}
|
|
@@ -147,96 +368,102 @@
|
|
|
147
368
|
|
|
148
369
|
@utility btn-secondary {
|
|
149
370
|
@layer components {
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
&:is(.btn-dashed, .btn-outline){
|
|
153
|
-
@apply bg-white text-secondary border-secondary;
|
|
154
|
-
}
|
|
371
|
+
&:not(.btn-dashed, .btn-outline, .btn-soft) {
|
|
372
|
+
@apply text-secondary-content bg-gradient-to-br from-secondary via-secondary/95 to-secondary ring-[0.5px] ring-secondary/50;
|
|
155
373
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
374
|
+
@media (hover: hover) {
|
|
375
|
+
&:hover {
|
|
376
|
+
@apply ring-2 bg-gradient-to-tr via-secondary/90;
|
|
377
|
+
&::before {
|
|
378
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
379
|
+
}
|
|
380
|
+
}
|
|
159
381
|
}
|
|
160
382
|
}
|
|
161
383
|
}
|
|
162
384
|
}
|
|
163
385
|
|
|
164
|
-
@utility btn-
|
|
386
|
+
@utility btn-success {
|
|
165
387
|
@layer components {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
&:is(.btn-dashed, .btn-outline){
|
|
169
|
-
@apply bg-white text-accent border-accent;
|
|
170
|
-
}
|
|
388
|
+
&:not(.btn-dashed, .btn-outline, .btn-soft) {
|
|
389
|
+
@apply text-success-content bg-gradient-to-br from-success via-success/95 to-success ring-[0.5px] ring-success/50;
|
|
171
390
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
391
|
+
@media (hover: hover) {
|
|
392
|
+
&:hover {
|
|
393
|
+
@apply ring-2 bg-gradient-to-tr via-success/90;
|
|
394
|
+
&::before {
|
|
395
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
396
|
+
}
|
|
397
|
+
}
|
|
175
398
|
}
|
|
176
399
|
}
|
|
177
400
|
}
|
|
178
401
|
}
|
|
179
402
|
|
|
180
|
-
@utility btn-
|
|
403
|
+
@utility btn-error {
|
|
181
404
|
@layer components {
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
&:is(.btn-dashed, .btn-outline){
|
|
185
|
-
@apply bg-white text-info border-info;
|
|
186
|
-
}
|
|
405
|
+
&:not(.btn-dashed, .btn-outline, .btn-soft) {
|
|
406
|
+
@apply text-error-content bg-gradient-to-br from-error via-error/95 to-error ring-[0.5px] ring-error/50;
|
|
187
407
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
408
|
+
@media (hover: hover) {
|
|
409
|
+
&:hover {
|
|
410
|
+
@apply ring-2 bg-gradient-to-tr via-error/90;
|
|
411
|
+
&::before {
|
|
412
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
413
|
+
}
|
|
414
|
+
}
|
|
191
415
|
}
|
|
192
416
|
}
|
|
193
417
|
}
|
|
194
418
|
}
|
|
195
419
|
|
|
196
|
-
@utility btn-
|
|
420
|
+
@utility btn-warning {
|
|
197
421
|
@layer components {
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
&:is(.btn-dashed, .btn-outline){
|
|
201
|
-
@apply bg-white text-success border-success;
|
|
202
|
-
}
|
|
422
|
+
&:not(.btn-dashed, .btn-outline, .btn-soft) {
|
|
423
|
+
@apply text-warning-content bg-gradient-to-br from-warning via-warning/95 to-warning ring-[0.5px] ring-warning/50;
|
|
203
424
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
425
|
+
@media (hover: hover) {
|
|
426
|
+
&:hover {
|
|
427
|
+
@apply ring-2 bg-gradient-to-tr via-warning/90;
|
|
428
|
+
&::before {
|
|
429
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
430
|
+
}
|
|
431
|
+
}
|
|
207
432
|
}
|
|
208
433
|
}
|
|
209
434
|
}
|
|
210
435
|
}
|
|
211
436
|
|
|
212
|
-
@utility btn-
|
|
437
|
+
@utility btn-info {
|
|
213
438
|
@layer components {
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
&:is(.btn-dashed, .btn-outline){
|
|
217
|
-
@apply bg-white text-warning border-warning;
|
|
218
|
-
}
|
|
439
|
+
&:not(.btn-dashed, .btn-outline, .btn-soft) {
|
|
440
|
+
@apply text-info-content bg-gradient-to-br from-info via-info/95 to-info ring-[0.5px] ring-info/50;
|
|
219
441
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
442
|
+
@media (hover: hover) {
|
|
443
|
+
&:hover {
|
|
444
|
+
@apply ring-2 bg-gradient-to-tr via-info/90;
|
|
445
|
+
&::before {
|
|
446
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
447
|
+
}
|
|
448
|
+
}
|
|
223
449
|
}
|
|
224
450
|
}
|
|
225
451
|
}
|
|
226
452
|
}
|
|
227
453
|
|
|
228
|
-
@utility btn-
|
|
454
|
+
@utility btn-accent {
|
|
229
455
|
@layer components {
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
&:is(.btn-dashed, .btn-outline){
|
|
233
|
-
@apply bg-white text-error border-error;
|
|
234
|
-
}
|
|
456
|
+
&:not(.btn-dashed, .btn-outline, .btn-soft) {
|
|
457
|
+
@apply text-accent-content bg-gradient-to-br from-accent via-accent/95 to-accent ring-[0.5px] ring-accent/50;
|
|
235
458
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
459
|
+
@media (hover: hover) {
|
|
460
|
+
&:hover {
|
|
461
|
+
@apply ring-2 bg-gradient-to-tr via-accent/90;
|
|
462
|
+
&::before {
|
|
463
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
464
|
+
}
|
|
465
|
+
}
|
|
239
466
|
}
|
|
240
467
|
}
|
|
241
468
|
}
|
|
242
|
-
}
|
|
469
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@import "../themes/colors/base.css";
|
|
2
2
|
@utility drawer {
|
|
3
3
|
@layer components {
|
|
4
|
-
@apply pointer-events-none invisible
|
|
4
|
+
@apply pointer-events-none invisible absolute inset-0 m-0 grid h-full max-h-none w-full max-w-none place-items-start bg-transparent p-0 text-inherit z-999 overflow-hidden overscroll-contain;
|
|
5
5
|
|
|
6
6
|
&:not(drawer:not([open]):not(.drawer-open)),
|
|
7
7
|
&::backdrop {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
@theme {
|
|
2
|
+
--animate-wiggle: wiggle 1s linear infinite;
|
|
3
|
+
@keyframes wiggle {
|
|
4
|
+
0% {
|
|
5
|
+
transform: rotate(345deg) translateY(-100%);
|
|
6
|
+
}
|
|
7
|
+
50% {
|
|
8
|
+
transform: rotate(325deg) translateY(100%);
|
|
9
|
+
}
|
|
10
|
+
100% {
|
|
11
|
+
transform: rotate(345deg) translateY(200%);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|