@shuriken-ui/tailwind 4.0.0-alpha.6 → 4.0.0-alpha.7

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 (59) hide show
  1. package/lib/css/focus.css +2 -9
  2. package/lib/css/mark.css +0 -2
  3. package/lib/css/mask.css +0 -2
  4. package/lib/css/slimscroll.css +4 -2
  5. package/lib/index.css +5 -53
  6. package/lib/theme.css +37 -28
  7. package/package.json +2 -2
  8. package/lib/css/accordion.css +0 -175
  9. package/lib/css/autocomplete.css +0 -520
  10. package/lib/css/avatar-group.css +0 -137
  11. package/lib/css/avatar.css +0 -737
  12. package/lib/css/breadcrumb.css +0 -62
  13. package/lib/css/button-action.css +0 -107
  14. package/lib/css/button-close.css +0 -116
  15. package/lib/css/button-group.css +0 -235
  16. package/lib/css/button-icon.css +0 -96
  17. package/lib/css/button.css +0 -564
  18. package/lib/css/card.css +0 -68
  19. package/lib/css/checkbox.css +0 -98
  20. package/lib/css/dropdown-divider.css +0 -5
  21. package/lib/css/dropdown-item.css +0 -61
  22. package/lib/css/dropdown.css +0 -101
  23. package/lib/css/fullscreen-dropfile.css +0 -62
  24. package/lib/css/heading.css +0 -77
  25. package/lib/css/icon-box.css +0 -304
  26. package/lib/css/input-file-regular.css +0 -254
  27. package/lib/css/input-file.css +0 -223
  28. package/lib/css/input-help-text.css +0 -6
  29. package/lib/css/input-number.css +0 -479
  30. package/lib/css/input.css +0 -408
  31. package/lib/css/kbd.css +0 -93
  32. package/lib/css/label.css +0 -5
  33. package/lib/css/link.css +0 -7
  34. package/lib/css/list.css +0 -23
  35. package/lib/css/listbox.css +0 -528
  36. package/lib/css/message-text.css +0 -71
  37. package/lib/css/message.css +0 -243
  38. package/lib/css/modal.css +0 -50
  39. package/lib/css/pagination.css +0 -92
  40. package/lib/css/paragraph.css +0 -77
  41. package/lib/css/placeholder-page.css +0 -43
  42. package/lib/css/placeload.css +0 -11
  43. package/lib/css/progress-circle.css +0 -17
  44. package/lib/css/progress.css +0 -89
  45. package/lib/css/prose.css +0 -22
  46. package/lib/css/radio.css +0 -72
  47. package/lib/css/select.css +0 -407
  48. package/lib/css/snack.css +0 -100
  49. package/lib/css/switch-ball.css +0 -93
  50. package/lib/css/switch-thin.css +0 -75
  51. package/lib/css/tab-slider.css +0 -189
  52. package/lib/css/tabs.css +0 -173
  53. package/lib/css/tag.css +0 -311
  54. package/lib/css/text.css +0 -77
  55. package/lib/css/textarea.css +0 -239
  56. package/lib/css/theme-switch.css +0 -64
  57. package/lib/css/theme-toggle.css +0 -61
  58. package/lib/css/toast.css +0 -131
  59. package/lib/css/tooltip.css +0 -98
package/lib/css/radio.css DELETED
@@ -1,72 +0,0 @@
1
- /* @utility nui-radio */
2
-
3
- @utility nui-radio {
4
- @apply relative inline-flex items-start gap-1;
5
- }
6
- @utility nui-radio-outer {
7
- @apply nui-focus relative flex items-center justify-center shrink-0 cursor-pointer overflow-hidden rounded-full;
8
- @apply h-5 w-5;
9
- }
10
- @utility nui-radio-inner {
11
- @apply absolute start-0 top-0 z-0 rounded-full;
12
- @apply h-full w-full;
13
- @apply bg-white dark:bg-muted-700;
14
- @apply border-2 border-muted-400 dark:border-muted-600;
15
- }
16
- @utility nui-radio-dot {
17
- @apply pointer-events-none z-10 block scale-0 rounded-full;
18
- @apply h-1 w-1;
19
- @apply bg-current dark:bg-current;
20
- @apply transition-all duration-300;
21
- }
22
- @utility nui-radio-input {
23
- @apply absolute z-20 h-5 w-5 cursor-pointer opacity-0;
24
-
25
- &:checked ~ .nui-radio-inner {
26
- @apply border-current;
27
- }
28
-
29
- &:checked ~ .nui-radio-dot {
30
- @apply scale-100;
31
- }
32
- }
33
- @utility nui-radio-label-wrapper {
34
- @apply inline-flex flex-col;
35
- }
36
- @utility nui-radio-label-text {
37
- @apply ms-1 cursor-pointer select-none;
38
- @apply font-sans text-sm text-muted-400 dark:text-muted-400;
39
- }
40
- @utility nui-radio-error {
41
- @apply ms-1 inline-block;
42
- }
43
- @utility nui-radio-default {
44
- @apply text-muted-600 dark:text-muted-200;
45
- }
46
- @utility nui-radio-muted {
47
- @apply text-muted-400 dark:text-muted-400;
48
- }
49
- @utility nui-radio-light {
50
- @apply text-muted-100 dark:text-muted-100;
51
- }
52
- @utility nui-radio-dark {
53
- @apply text-muted-900 dark:text-muted-100;
54
- }
55
- @utility nui-radio-black {
56
- @apply text-black dark:text-white;
57
- }
58
- @utility nui-radio-primary {
59
- @apply text-primary-500 dark:text-primary-500;
60
- }
61
- @utility nui-radio-info {
62
- @apply text-info-500 dark:text-info-500;
63
- }
64
- @utility nui-radio-success {
65
- @apply text-success-500 dark:text-muted-200;
66
- }
67
- @utility nui-radio-warning {
68
- @apply text-warning-500 dark:text-warning-500;
69
- }
70
- @utility nui-radio-danger {
71
- @apply text-danger-500 dark:text-danger-500;
72
- }
@@ -1,407 +0,0 @@
1
- /* @utility nui-select */
2
-
3
- @utility nui-select-wrapper {
4
- @apply relative;
5
-
6
- .nui-select-label, .nui-select-label-float-label {
7
- @apply nui-label;
8
- }
9
-
10
- &:not(.nui-select-loading) {
11
- .nui-select ~ .nui-select-label-float-label {
12
- @apply text-transparent;
13
- }
14
- }
15
-
16
- &:not(.nui-select-has-icon).nui-select-sm {
17
- .nui-select {
18
- @apply h-8 py-1 text-xs leading-4 ps-2 pe-7;
19
- }
20
- }
21
-
22
- &:not(.nui-select-has-icon).nui-select-md {
23
- .nui-select {
24
- @apply h-10 py-2 text-sm leading-5 ps-3 pe-8;
25
- }
26
- }
27
-
28
- &:not(.nui-select-has-icon).nui-select-lg {
29
- .nui-select {
30
- @apply h-12 py-2 text-sm leading-5 ps-4 pe-9;
31
- }
32
- }
33
-
34
- &:not(.nui-select-has-icon).nui-select-xl {
35
- .nui-select {
36
- @apply h-14 py-2 text-base leading-5 ps-4 pe-9;
37
- }
38
- }
39
- }
40
- @utility nui-select-label-float-label {
41
- @apply h-5 absolute inline-flex items-center select-none pointer-events-none;
42
- @apply font-sans text-primary-500 leading-none;
43
- @apply transition-all duration-300;
44
- }
45
- @utility nui-select-outer {
46
- @apply relative;
47
- }
48
- @utility nui-select-icon {
49
- @apply absolute start-0 top-0 z-10 flex items-center justify-center;
50
- @apply text-muted-400 dark:text-muted-400;
51
- @apply transition-colors duration-300;
52
- }
53
- @utility nui-select {
54
- @apply nui-focus appearance-none w-full font-sans disabled:cursor-not-allowed disabled:opacity-75;
55
- @apply transition-all duration-300;
56
-
57
- &:focus-visible ~ .nui-select-label-float-label {
58
- @apply !text-primary-500 dark:!text-primary-500;
59
- }
60
-
61
- &:focus-visible ~ .nui-select-icon {
62
- @apply !text-primary-500 dark:!text-primary-500;
63
- }
64
-
65
- &:focus-visible ~ .nui-select-chevron {
66
- @apply rotate-180;
67
- }
68
-
69
- &:disabled ~ .nui-select-icon {
70
- @apply cursor-not-allowed opacity-75;
71
- }
72
- }
73
- @utility nui-select-placeload-wrapper {
74
- @apply absolute start-0 top-0 flex w-full items-center px-4;
75
-
76
- .nui-select-placeload {
77
- @apply h-3 w-full max-w-[75%] rounded;
78
- }
79
- }
80
- @utility nui-select-chevron {
81
- @apply pointer-events-none;
82
- @apply absolute end-0 top-0 z-10 flex items-center justify-center;
83
- @apply text-muted-400 dark:text-muted-400;
84
- @apply transition-transform duration-300;
85
- }
86
- @utility nui-select-multiple {
87
- .nui-select {
88
- @apply p-2 h-32;
89
- }
90
- }
91
- @utility nui-select-rounded-sm {
92
- .nui-select {
93
- @apply rounded-md;
94
- }
95
- }
96
- @utility nui-select-rounded-md {
97
- .nui-select {
98
- @apply rounded-lg;
99
- }
100
- }
101
- @utility nui-select-rounded-lg {
102
- .nui-select {
103
- @apply rounded-xl;
104
- }
105
- }
106
- @utility nui-select-rounded-full {
107
- .nui-select {
108
- @apply rounded-full;
109
- }
110
- }
111
- @utility nui-select-sm {
112
- .nui-select {
113
- @apply pe-8;
114
- }
115
-
116
- .nui-select-label {
117
- @apply pb-1 text-xs;
118
- }
119
-
120
- .nui-select-label-float-label {
121
- @apply top-1.5;
122
- }
123
-
124
- .nui-select-icon, .nui-select-chevron {
125
- @apply h-8 w-8;
126
-
127
- .nui-select-icon-inner, .nui-select-chevron-inner {
128
- @apply h-4 w-4;
129
- }
130
- }
131
-
132
- .nui-select-placeload-wrapper {
133
- @apply h-8;
134
- }
135
- }
136
- @utility nui-select-md {
137
- .nui-select {
138
- @apply pe-10;
139
- }
140
-
141
- .nui-select-label {
142
- @apply pb-1 text-[0.825rem];
143
- }
144
-
145
- .nui-select-label-float-label {
146
- @apply top-2.5;
147
- }
148
-
149
- .nui-select-icon, .nui-select-chevron {
150
- @apply h-10 w-10;
151
-
152
- .nui-select-icon-inner, .nui-select-chevron-inner {
153
- @apply h-[1.15rem] w-[1.15rem];
154
- }
155
- }
156
-
157
- .nui-select-placeload-wrapper {
158
- @apply h-10;
159
- }
160
- }
161
- @utility nui-select-lg {
162
- .nui-select {
163
- @apply pe-12;
164
- }
165
-
166
- .nui-select-label {
167
- @apply pb-1 text-sm;
168
- }
169
-
170
- .nui-select-label-float-label {
171
- @apply top-3.5;
172
- }
173
-
174
- .nui-select-icon, .nui-select-chevron {
175
- @apply h-12 w-12;
176
-
177
- .nui-select-icon-inner, .nui-select-chevron-inner {
178
- @apply h-5 w-5;
179
- }
180
- }
181
-
182
- .nui-select-placeload-wrapper {
183
- @apply h-12;
184
- }
185
- }
186
- @utility nui-select-xl {
187
- .nui-select {
188
- @apply pe-14;
189
- }
190
-
191
- .nui-select-label {
192
- @apply pb-1 text-sm;
193
- }
194
-
195
- .nui-select-label-float-label {
196
- @apply top-[1.1rem];
197
- }
198
-
199
- .nui-select-icon, .nui-select-chevron {
200
- @apply h-14 w-14;
201
-
202
- .nui-select-icon-inner, .nui-select-chevron-inner {
203
- @apply h-5 w-5;
204
- }
205
- }
206
-
207
- .nui-select-placeload-wrapper {
208
- @apply h-14;
209
- }
210
- }
211
- @utility nui-select-default {
212
- .nui-select {
213
- @apply text-muted-600 dark:text-muted-200;
214
- @apply bg-white dark:bg-muted-900;
215
- @apply border border-muted-300 dark:border-muted-700;
216
- @apply hover:border-muted-300 dark:hover:border-muted-700;
217
- }
218
- }
219
- @utility nui-select-default-contrast {
220
- .nui-select {
221
- @apply text-muted-600 dark:text-muted-200;
222
- @apply bg-white dark:bg-muted-950;
223
- @apply border border-muted-300 dark:border-muted-800;
224
- @apply hover:border-muted-300 dark:hover:border-muted-800;
225
- }
226
- }
227
- @utility nui-select-muted {
228
- .nui-select {
229
- @apply text-muted-600 dark:text-muted-200;
230
- @apply bg-muted-100 dark:bg-muted-900;
231
- @apply border border-muted-100 dark:border-muted-700;
232
- @apply hover:border-muted-100 dark:hover:border-muted-700;
233
- }
234
- }
235
- @utility nui-select-muted-contrast {
236
- .nui-select {
237
- @apply text-muted-600 dark:text-muted-200;
238
- @apply bg-muted-100 dark:bg-muted-950;
239
- @apply border border-muted-100 dark:border-muted-800;
240
- @apply hover:border-muted-100 dark:hover:border-muted-800;
241
- }
242
- }
243
- @utility nui-select-focus {
244
- .nui-select {
245
- @apply focus:!border-primary-500 dark:focus:!border-primary-500;
246
- @apply focus:hover:!border-primary-500 dark:focus:hover:!border-primary-500;
247
- }
248
- }
249
- @utility nui-select-loading {
250
- .nui-select {
251
- @apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent;
252
- }
253
-
254
- .nui-select ~ .nui-select-label-float-label {
255
- @apply text-transparent;
256
- }
257
-
258
- .nui-select-icon {
259
- @apply opacity-0;
260
- }
261
- }
262
- @utility nui-select-label-float {
263
- .nui-select {
264
- @apply placeholder:text-transparent dark:placeholder:text-transparent;
265
- }
266
- }
267
- @utility nui-select-error {
268
- .nui-select {
269
- @apply !border-danger-500 dark:!border-danger-500;
270
- }
271
-
272
- .nui-select-icon {
273
- @apply !text-danger-500 dark:!text-danger-500;
274
- }
275
- }
276
- @utility nui-select-has-icon {
277
- &.nui-select-sm {
278
- .nui-select {
279
- @apply h-8 py-1 text-xs leading-4 pe-7 ps-8;
280
- }
281
- }
282
- &.nui-select-md {
283
- .nui-select {
284
- @apply h-10 py-2 text-sm leading-5 pe-8 ps-10;
285
- }
286
- }
287
- &.nui-select-lg {
288
- .nui-select {
289
- @apply h-12 py-2 text-sm leading-5 pe-9 ps-11;
290
- }
291
- }
292
- &.nui-select-xl {
293
- .nui-select {
294
- @apply h-14 py-2 text-base leading-5 pe-9 ps-12;
295
- }
296
- }
297
- }
298
- @utility nui-select-label-float {
299
- &.nui-select-has-icon.nui-select-sm {
300
- .nui-select-label-float-label {
301
- @apply start-8 -ms-8 -mt-6 text-xs;
302
- }
303
-
304
- .nui-select:focus-visible ~ .nui-select-label-float-label {
305
- @apply !-ms-8 !-mt-6;
306
- }
307
-
308
- .nui-select ~ .nui-select-label-float-label {
309
- @apply ms-0 mt-1;
310
- }
311
- }
312
- &.nui-select-has-icon.nui-select-md {
313
- .nui-select-label-float-label {
314
- @apply start-10 -ms-10 -mt-7 text-xs;
315
- }
316
-
317
- .nui-select:focus-visible ~ .nui-select-label-float-label {
318
- @apply !-ms-10 !-mt-7 !text-xs;
319
- }
320
-
321
- .nui-select ~ .nui-select-label-float-label {
322
- @apply ms-0 mt-1 text-[0.825rem];
323
- }
324
- }
325
- &.nui-select-has-icon.nui-select-lg {
326
- .nui-select-label-float-label {
327
- @apply start-11 -ms-10 -mt-8 text-xs;
328
- }
329
-
330
- .nui-select:focus-visible ~ .nui-select-label-float-label {
331
- @apply !-ms-10 !-mt-8 !text-xs;
332
- }
333
-
334
- .nui-select ~ .nui-select-label-float-label {
335
- @apply ms-0 mt-1 text-[0.825rem];
336
- }
337
- }
338
- &.nui-select-has-icon.nui-select-xl {
339
- .nui-select-label-float-label {
340
- @apply start-[3.25rem] -ms-[3.25rem] -mt-9 text-xs;
341
- }
342
-
343
- .nui-select:focus-visible ~ .nui-select-label-float-label {
344
- @apply !-ms-[3.25rem] !-mt-9 !text-xs;
345
- }
346
-
347
- .nui-select ~ .nui-select-label-float-label {
348
- @apply ms-0 mt-1 text-[0.825rem];
349
- }
350
- }
351
-
352
- &:not(.nui-select-has-icon).nui-select-sm {
353
- .nui-select-label-float-label {
354
- @apply start-3 -ms-3 -mt-6 text-xs;
355
- }
356
-
357
- .nui-select:focus-visible ~ .nui-select-label-float-label {
358
- @apply !-ms-3 !-mt-6;
359
- }
360
-
361
- .nui-select ~ .nui-select-label-float-label {
362
- @apply ms-0 mt-1;
363
- }
364
- }
365
-
366
- &:not(.nui-select-has-icon).nui-select-md {
367
- .nui-select-label-float-label {
368
- @apply start-3 -ms-3 -mt-7 text-xs;
369
- }
370
-
371
- .nui-select:focus-visible ~ .nui-select-label-float-label {
372
- @apply !-ms-3 !-mt-7 !text-xs;
373
- }
374
-
375
- .nui-select ~ .nui-select-label-float-label {
376
- @apply ms-0 mt-1 text-[0.825rem];
377
- }
378
- }
379
-
380
- &:not(.nui-select-has-icon).nui-select-lg {
381
- .nui-select-label-float-label {
382
- @apply start-3 -ms-3 -mt-8 text-xs;
383
- }
384
-
385
- .nui-select:focus-visible ~ .nui-select-label-float-label {
386
- @apply !-ms-3 !-mt-8 !text-xs;
387
- }
388
-
389
- .nui-select ~ .nui-select-label-float-label {
390
- @apply ms-0 mt-1 text-[0.825rem];
391
- }
392
- }
393
-
394
- &:not(.nui-select-has-icon).nui-select-xl {
395
- .nui-select-label-float-label {
396
- @apply start-3 -ms-3 -mt-9 text-xs;
397
- }
398
-
399
- .nui-select:focus-visible ~ .nui-select-label-float-label {
400
- @apply !-ms-3 !-mt-9 !text-xs;
401
- }
402
-
403
- .nui-select ~ .nui-select-label-float-label {
404
- @apply ms-0 mt-1 text-[0.825rem];
405
- }
406
- }
407
- }
package/lib/css/snack.css DELETED
@@ -1,100 +0,0 @@
1
- /* @utility nui-snack */
2
-
3
- @utility nui-snack {
4
- @apply inline-flex items-center gap-1 rounded-full outline-transparent;
5
- }
6
- @utility nui-snack-icon {
7
- @apply -ms-0.5 flex items-center justify-center rounded-full;
8
- @apply bg-white dark:bg-muted-950;
9
- @apply border border-muted-200 dark:border-muted-700;
10
- }
11
- @utility nui-snack-image {
12
- @apply -ms-0.5 flex items-center justify-center rounded-full shrink-0;
13
- }
14
- @utility nui-snack-image-inner {
15
- @apply rounded-full;
16
- }
17
- @utility nui-snack-text {
18
- @apply font-sans;
19
- @apply text-muted-600 dark:text-muted-300;
20
- }
21
- @utility nui-snack-xs {
22
- &:not(.nui-snack-has-media) {
23
- @apply !ps-2;
24
- }
25
-
26
- .nui-snack-text {
27
- @apply text-xs;
28
- }
29
- @apply h-6;
30
-
31
- .nui-snack-icon {
32
- @apply w-6 h-6;
33
- }
34
-
35
- .nui-snack-icon-inner {
36
- @apply h-3 w-3;
37
- }
38
-
39
- .nui-snack-image, .nui-snack-image-inner {
40
- @apply w-6 h-6;
41
- }
42
- }
43
- @utility nui-snack-sm {
44
- &:not(.nui-snack-has-media) {
45
- @apply !ps-3;
46
- }
47
-
48
- .nui-snack-text {
49
- @apply text-sm;
50
- }
51
- @apply h-8;
52
-
53
- .nui-snack-icon {
54
- @apply w-8 h-8;
55
- }
56
-
57
- .nui-snack-icon-inner {
58
- @apply h-4 w-4;
59
- }
60
-
61
- .nui-snack-image, .nui-snack-image-inner {
62
- @apply w-8 h-8;
63
- }
64
- }
65
- @utility nui-snack-md {
66
- &:not(.nui-snack-has-media) {
67
- @apply !ps-4;
68
- }
69
-
70
- .nui-snack-text {
71
- @apply text-sm;
72
- }
73
- @apply h-10;
74
-
75
- .nui-snack-icon {
76
- @apply w-10 h-10;
77
- }
78
-
79
- .nui-snack-icon-inner {
80
- @apply h-5 w-5;
81
- }
82
-
83
- .nui-snack-image, .nui-snack-image-inner {
84
- @apply w-10 h-10;
85
- }
86
- }
87
- @utility nui-snack-default {
88
- @apply bg-white dark:bg-muted-700;
89
- @apply border border-muted-300 dark:border-muted-600;
90
- }
91
- @utility nui-snack-default-contrast {
92
- @apply bg-white dark:bg-muted-950;
93
- @apply border border-muted-300 dark:border-muted-800;
94
- }
95
- @utility nui-snack-muted {
96
- @apply bg-muted-200 dark:bg-muted-700;
97
- }
98
- @utility nui-snack-muted-contrast {
99
- @apply bg-muted-200 dark:bg-muted-950;
100
- }
@@ -1,93 +0,0 @@
1
- /* @utility nui-switch-ball */
2
-
3
- @utility nui-switch-ball {
4
- @apply flex cursor-pointer items-center;
5
-
6
- &.nui-switch-ball-primary .nui-switch-ball-input:checked ~ .nui-switch-ball-track {
7
- @apply bg-primary-400 dark:bg-primary-400;
8
- }
9
-
10
- &.nui-switch-ball-info .nui-switch-ball-input:checked ~ .nui-switch-ball-track {
11
- @apply bg-info-400 dark:bg-info-400;
12
- }
13
-
14
- &.nui-switch-ball-success .nui-switch-ball-input:checked ~ .nui-switch-ball-track {
15
- @apply bg-success-400 dark:bg-success-400;
16
- }
17
-
18
- &.nui-switch-ball-warning .nui-switch-ball-input:checked ~ .nui-switch-ball-track {
19
- @apply bg-warning-400 dark:bg-warning-400;
20
- }
21
-
22
- &.nui-switch-ball-danger .nui-switch-ball-input:checked ~ .nui-switch-ball-track {
23
- @apply bg-danger-400 dark:bg-danger-400;
24
- }
25
-
26
- &.nui-switch-ball-dark .nui-switch-ball-input:checked ~ .nui-switch-ball-track {
27
- @apply bg-muted-900 dark:bg-muted-100;
28
- }
29
-
30
- &.nui-switch-ball-dark .nui-switch-ball-icon {
31
- @apply text-muted-100 dark:text-muted-900;
32
- }
33
-
34
- &.nui-switch-ball-black .nui-switch-ball-input:checked ~ .nui-switch-ball-track {
35
- @apply bg-black dark:bg-white;
36
- }
37
-
38
- &.nui-switch-ball-black .nui-switch-ball-icon {
39
- @apply text-white dark:text-black;
40
- }
41
- }
42
- @utility nui-switch-ball-outer {
43
- @apply nui-focus relative block rounded-full;
44
- }
45
- @utility nui-switch-ball-handle {
46
- @apply absolute start-0.5 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-full shadow focus:w-6;
47
- @apply h-5 w-5;
48
- @apply bg-white dark:bg-muted-700;
49
- @apply border border-muted-300 dark:border-muted-600;
50
- @apply transition-all duration-300;
51
- }
52
- @utility nui-switch-ball-track {
53
- @apply block h-6 w-11 rounded-full;
54
- @apply bg-muted-300 dark:bg-muted-600;
55
- @apply transition-all duration-300;
56
- }
57
- @utility nui-switch-ball-icon {
58
- @apply pointer-events-none absolute start-2 top-1/2 z-10 translate-y-0 fill-current opacity-0;
59
- @apply text-white dark:text-white;
60
- @apply h-2.5 w-2.5;
61
- @apply transition-all duration-300;
62
- }
63
- @utility nui-switch-ball-single-label {
64
- @apply relative ms-3 cursor-pointer select-none;
65
- @apply font-sans text-sm;
66
- @apply text-muted-400 dark:text-muted-400;
67
- }
68
- @utility nui-switch-ball-dual-label {
69
- @apply ms-3;
70
-
71
- .nui-switch-ball-label {
72
- @apply block;
73
- @apply font-sans text-sm;
74
- @apply text-muted-800 dark:text-white;
75
- }
76
-
77
- .nui-switch-ball-sublabel {
78
- @apply block;
79
- @apply font-sans text-xs;
80
- @apply text-muted-400 dark:text-muted-400;
81
- }
82
- }
83
- @utility nui-switch-ball-input {
84
- @apply absolute z-0 h-full w-full cursor-pointer opacity-0;
85
-
86
- &:checked ~ .nui-switch-ball-handle {
87
- @apply -translate-y-1/2 translate-x-full rtl:-translate-x-full;
88
- }
89
-
90
- &:checked ~ .nui-switch-ball-icon {
91
- @apply -translate-y-1/2 opacity-100;
92
- }
93
- }