@datafluxgrid/fluxgrid-css 1.0.13 → 1.0.14
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/css/forms.css +30 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@datafluxgrid/fluxgrid-css",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.14",
|
|
4
4
|
"description": "A utility-first CSS framework with zero build step — dark mode, animations, forms, and a full design token system built in.",
|
|
5
5
|
"main": "src/index.css",
|
|
6
6
|
"files": [
|
package/src/css/forms.css
CHANGED
|
@@ -146,6 +146,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
146
146
|
font-size: 0.75rem;
|
|
147
147
|
border-radius: 6px;
|
|
148
148
|
}
|
|
149
|
+
|
|
149
150
|
.c-input-lg {
|
|
150
151
|
padding: 14px 18px;
|
|
151
152
|
font-size: 1rem;
|
|
@@ -155,6 +156,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
155
156
|
.c-input-error {
|
|
156
157
|
border-color: var(--c-error-500);
|
|
157
158
|
}
|
|
159
|
+
|
|
158
160
|
.c-input-error:focus {
|
|
159
161
|
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
|
|
160
162
|
}
|
|
@@ -162,6 +164,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
162
164
|
.c-input-success {
|
|
163
165
|
border-color: var(--c-success-500);
|
|
164
166
|
}
|
|
167
|
+
|
|
165
168
|
.c-input-success:focus {
|
|
166
169
|
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
|
|
167
170
|
}
|
|
@@ -249,6 +252,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
249
252
|
font-size: 0.75rem;
|
|
250
253
|
border-radius: 6px;
|
|
251
254
|
}
|
|
255
|
+
|
|
252
256
|
.c-select-lg {
|
|
253
257
|
padding: 14px 44px 14px 18px;
|
|
254
258
|
font-size: 1rem;
|
|
@@ -258,6 +262,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
258
262
|
.c-select-error {
|
|
259
263
|
border-color: var(--c-error-500);
|
|
260
264
|
}
|
|
265
|
+
|
|
261
266
|
.c-select-error:focus {
|
|
262
267
|
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
|
|
263
268
|
}
|
|
@@ -265,6 +270,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
265
270
|
.c-select-success {
|
|
266
271
|
border-color: var(--c-success-500);
|
|
267
272
|
}
|
|
273
|
+
|
|
268
274
|
.c-select-success:focus {
|
|
269
275
|
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
|
|
270
276
|
}
|
|
@@ -275,8 +281,12 @@ input[type="range"]::-moz-range-thumb {
|
|
|
275
281
|
user-select: none;
|
|
276
282
|
}
|
|
277
283
|
|
|
278
|
-
.c-select-toggle {
|
|
279
|
-
|
|
284
|
+
input.c-select-toggle {
|
|
285
|
+
position: absolute;
|
|
286
|
+
opacity: 0;
|
|
287
|
+
width: 0;
|
|
288
|
+
height: 0;
|
|
289
|
+
pointer-events: none;
|
|
280
290
|
}
|
|
281
291
|
|
|
282
292
|
.c-select-trigger {
|
|
@@ -439,6 +449,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
439
449
|
font-size: 0.75rem;
|
|
440
450
|
border-radius: 6px;
|
|
441
451
|
}
|
|
452
|
+
|
|
442
453
|
.c-select-wrap-lg .c-select-trigger {
|
|
443
454
|
padding: 14px 18px;
|
|
444
455
|
font-size: 1rem;
|
|
@@ -448,6 +459,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
448
459
|
.c-select-wrap-error .c-select-trigger {
|
|
449
460
|
border-color: var(--c-error-500);
|
|
450
461
|
}
|
|
462
|
+
|
|
451
463
|
.c-select-wrap-error .c-select-toggle:checked ~ .c-select-trigger {
|
|
452
464
|
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
|
|
453
465
|
}
|
|
@@ -455,6 +467,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
455
467
|
.c-select-wrap-success .c-select-trigger {
|
|
456
468
|
border-color: var(--c-success-500);
|
|
457
469
|
}
|
|
470
|
+
|
|
458
471
|
.c-select-wrap-success .c-select-toggle:checked ~ .c-select-trigger {
|
|
459
472
|
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
|
|
460
473
|
}
|
|
@@ -462,9 +475,11 @@ input[type="range"]::-moz-range-thumb {
|
|
|
462
475
|
.c-select-dropdown::-webkit-scrollbar {
|
|
463
476
|
width: 4px;
|
|
464
477
|
}
|
|
478
|
+
|
|
465
479
|
.c-select-dropdown::-webkit-scrollbar-track {
|
|
466
480
|
background: transparent;
|
|
467
481
|
}
|
|
482
|
+
|
|
468
483
|
.c-select-dropdown::-webkit-scrollbar-thumb {
|
|
469
484
|
background: var(--c-gray-200);
|
|
470
485
|
border-radius: 999px;
|
|
@@ -521,6 +536,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
521
536
|
.c-input-group > :first-child {
|
|
522
537
|
border-radius: 8px 0 0 8px;
|
|
523
538
|
}
|
|
539
|
+
|
|
524
540
|
.c-input-group > :last-child {
|
|
525
541
|
border-radius: 0 8px 8px 0;
|
|
526
542
|
}
|
|
@@ -564,6 +580,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
564
580
|
background: var(--c-primary-600);
|
|
565
581
|
color: white;
|
|
566
582
|
}
|
|
583
|
+
|
|
567
584
|
.c-btn-primary:hover {
|
|
568
585
|
background: var(--c-primary-700);
|
|
569
586
|
}
|
|
@@ -573,6 +590,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
573
590
|
color: var(--c-gray-800);
|
|
574
591
|
border-color: var(--c-gray-200);
|
|
575
592
|
}
|
|
593
|
+
|
|
576
594
|
.c-btn-secondary:hover {
|
|
577
595
|
background: var(--c-gray-200);
|
|
578
596
|
}
|
|
@@ -582,6 +600,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
582
600
|
color: var(--c-primary-600);
|
|
583
601
|
border-color: var(--c-primary-600);
|
|
584
602
|
}
|
|
603
|
+
|
|
585
604
|
.c-btn-outline:hover {
|
|
586
605
|
background: var(--c-primary-50);
|
|
587
606
|
}
|
|
@@ -590,6 +609,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
590
609
|
background: transparent;
|
|
591
610
|
color: var(--c-gray-700);
|
|
592
611
|
}
|
|
612
|
+
|
|
593
613
|
.c-btn-ghost:hover {
|
|
594
614
|
background: var(--c-gray-100);
|
|
595
615
|
}
|
|
@@ -598,6 +618,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
598
618
|
background: var(--c-error-600);
|
|
599
619
|
color: white;
|
|
600
620
|
}
|
|
621
|
+
|
|
601
622
|
.c-btn-danger:hover {
|
|
602
623
|
background: var(--c-error-700);
|
|
603
624
|
}
|
|
@@ -606,6 +627,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
606
627
|
background: var(--c-success-600);
|
|
607
628
|
color: white;
|
|
608
629
|
}
|
|
630
|
+
|
|
609
631
|
.c-btn-success:hover {
|
|
610
632
|
background: var(--c-success-700);
|
|
611
633
|
}
|
|
@@ -615,28 +637,34 @@ input[type="range"]::-moz-range-thumb {
|
|
|
615
637
|
font-size: 0.7rem;
|
|
616
638
|
border-radius: 6px;
|
|
617
639
|
}
|
|
640
|
+
|
|
618
641
|
.c-btn-sm {
|
|
619
642
|
padding: 6px 14px;
|
|
620
643
|
font-size: 0.8rem;
|
|
621
644
|
border-radius: 6px;
|
|
622
645
|
}
|
|
646
|
+
|
|
623
647
|
.c-btn-lg {
|
|
624
648
|
padding: 14px 28px;
|
|
625
649
|
font-size: 1rem;
|
|
626
650
|
border-radius: 10px;
|
|
627
651
|
}
|
|
652
|
+
|
|
628
653
|
.c-btn-xl {
|
|
629
654
|
padding: 18px 36px;
|
|
630
655
|
font-size: 1.1rem;
|
|
631
656
|
border-radius: 12px;
|
|
632
657
|
}
|
|
658
|
+
|
|
633
659
|
.c-btn-full {
|
|
634
660
|
width: 100%;
|
|
635
661
|
}
|
|
662
|
+
|
|
636
663
|
.c-btn-icon {
|
|
637
664
|
padding: 10px;
|
|
638
665
|
border-radius: 8px;
|
|
639
666
|
}
|
|
667
|
+
|
|
640
668
|
.c-btn-icon-sm {
|
|
641
669
|
padding: 6px;
|
|
642
670
|
border-radius: 6px;
|