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