@wizco/fenixds-core 1.0.20 → 1.0.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.
- package/package.json +1 -1
- package/styles/core.css +357 -43
- package/styles/scss/button.scss +2 -0
- package/styles/scss/forms.scss +167 -45
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wizco/fenixds-core",
|
|
3
3
|
"description": "Fenix design system é um produto da Wiz com ativos de design e código de front-end para ajudar as equipes na criação dos seus produtos.",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.22",
|
|
5
5
|
"private": false,
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"author": "Raul Melo Fernandez",
|
package/styles/core.css
CHANGED
|
@@ -379,6 +379,8 @@
|
|
|
379
379
|
background-repeat: no-repeat;
|
|
380
380
|
background-size: 1000px 100%; }
|
|
381
381
|
|
|
382
|
+
button.wco-btn,
|
|
383
|
+
a.wco-btn,
|
|
382
384
|
button.btn,
|
|
383
385
|
a.btn {
|
|
384
386
|
font-size: var(--btn-size, 16px);
|
|
@@ -398,13 +400,19 @@ a.btn {
|
|
|
398
400
|
cursor: pointer;
|
|
399
401
|
text-decoration: none;
|
|
400
402
|
font-family: var(--wco-font-family); }
|
|
403
|
+
button.wco-btn:focus-visible,
|
|
404
|
+
a.wco-btn:focus-visible,
|
|
401
405
|
button.btn:focus-visible,
|
|
402
406
|
a.btn:focus-visible {
|
|
403
407
|
outline: 2px solid var(--btn-focus, var(--textBtn)); }
|
|
408
|
+
button.wco-btn:not([class*=" bg-"]),
|
|
409
|
+
a.wco-btn:not([class*=" bg-"]),
|
|
404
410
|
button.btn:not([class*=" bg-"]),
|
|
405
411
|
a.btn:not([class*=" bg-"]) {
|
|
406
412
|
background-color: var(--bgBtn);
|
|
407
413
|
color: var(--textBtn); }
|
|
414
|
+
button.wco-btn:disabled:not(.btn-loading),
|
|
415
|
+
a.wco-btn:disabled:not(.btn-loading),
|
|
408
416
|
button.btn:disabled:not(.btn-loading),
|
|
409
417
|
a.btn:disabled:not(.btn-loading) {
|
|
410
418
|
text-decoration: none;
|
|
@@ -412,16 +420,26 @@ a.btn {
|
|
|
412
420
|
--textBtn: var(--wco-color-neutral-900);
|
|
413
421
|
pointer-events: none;
|
|
414
422
|
opacity: 0.4; }
|
|
415
|
-
button.btn:not(:disabled):hover, button.btn:not(.btn-loading):hover,
|
|
423
|
+
button.wco-btn:not(:disabled):hover, button.wco-btn:not(.btn-loading):hover,
|
|
424
|
+
a.wco-btn:not(:disabled):hover,
|
|
425
|
+
a.wco-btn:not(.btn-loading):hover,
|
|
426
|
+
button.btn:not(:disabled):hover,
|
|
427
|
+
button.btn:not(.btn-loading):hover,
|
|
416
428
|
a.btn:not(:disabled):hover,
|
|
417
429
|
a.btn:not(.btn-loading):hover {
|
|
418
430
|
transform: scale(1);
|
|
419
431
|
box-shadow: var(--wco-shadow-level-1); }
|
|
420
|
-
button.btn:not(:disabled):active, button.btn:not(.btn-loading):active,
|
|
432
|
+
button.wco-btn:not(:disabled):active, button.wco-btn:not(.btn-loading):active,
|
|
433
|
+
a.wco-btn:not(:disabled):active,
|
|
434
|
+
a.wco-btn:not(.btn-loading):active,
|
|
435
|
+
button.btn:not(:disabled):active,
|
|
436
|
+
button.btn:not(.btn-loading):active,
|
|
421
437
|
a.btn:not(:disabled):active,
|
|
422
438
|
a.btn:not(.btn-loading):active {
|
|
423
439
|
transform: scale(0.99) translateY(0.5px);
|
|
424
440
|
box-shadow: var(--wco-shadow-level-0); }
|
|
441
|
+
button.wco-btn:not([class*=" btn-loading"]):after,
|
|
442
|
+
a.wco-btn:not([class*=" btn-loading"]):after,
|
|
425
443
|
button.btn:not([class*=" btn-loading"]):after,
|
|
426
444
|
a.btn:not([class*=" btn-loading"]):after {
|
|
427
445
|
content: "";
|
|
@@ -434,129 +452,191 @@ a.btn {
|
|
|
434
452
|
filter: contrast(100px);
|
|
435
453
|
opacity: 0.1;
|
|
436
454
|
transition: all 300ms ease; }
|
|
455
|
+
button.wco-btn.btn-primary,
|
|
456
|
+
a.wco-btn.btn-primary,
|
|
437
457
|
button.btn.btn-primary,
|
|
438
458
|
a.btn.btn-primary {
|
|
439
459
|
--bgBtn: var(--wco-color-primary-600);
|
|
440
460
|
--textBtn: var(--wco-color-primary-text);
|
|
441
461
|
--btn-focus: var(--wco-color-primary-900); }
|
|
462
|
+
button.wco-btn.btn-primary:hover:not(.btn-outline),
|
|
463
|
+
a.wco-btn.btn-primary:hover:not(.btn-outline),
|
|
442
464
|
button.btn.btn-primary:hover:not(.btn-outline),
|
|
443
465
|
a.btn.btn-primary:hover:not(.btn-outline) {
|
|
444
466
|
--bgBtn: var(--wco-color-primary-700);
|
|
445
467
|
--textBtn: var(--wco-color-primary-50); }
|
|
468
|
+
button.wco-btn.btn-primary:active:not(.btn-outline),
|
|
469
|
+
a.wco-btn.btn-primary:active:not(.btn-outline),
|
|
446
470
|
button.btn.btn-primary:active:not(.btn-outline),
|
|
447
471
|
a.btn.btn-primary:active:not(.btn-outline) {
|
|
448
472
|
--bgBtn: var(--wco-color-primary-700);
|
|
449
473
|
--textBtn: var(--wco-color-primary-50); }
|
|
474
|
+
button.wco-btn.btn-primary.btn-outline,
|
|
475
|
+
a.wco-btn.btn-primary.btn-outline,
|
|
450
476
|
button.btn.btn-primary.btn-outline,
|
|
451
477
|
a.btn.btn-primary.btn-outline {
|
|
452
478
|
background-color: transparent;
|
|
453
479
|
--textBtn: var(--wco-color-primary-600);
|
|
454
480
|
--btn-focus: var(--wco-color-primary-600); }
|
|
481
|
+
button.wco-btn.btn-primary.btn-outline:hover,
|
|
482
|
+
a.wco-btn.btn-primary.btn-outline:hover,
|
|
455
483
|
button.btn.btn-primary.btn-outline:hover,
|
|
456
484
|
a.btn.btn-primary.btn-outline:hover {
|
|
457
485
|
background-color: var(--wco-color-primary-50);
|
|
458
486
|
--textBtn: var(--wco-color-primary-700);
|
|
459
487
|
--bgBtn: var(--wco-color-primary-700); }
|
|
488
|
+
button.wco-btn.btn-primary.btn-outline:active,
|
|
489
|
+
a.wco-btn.btn-primary.btn-outline:active,
|
|
460
490
|
button.btn.btn-primary.btn-outline:active,
|
|
461
491
|
a.btn.btn-primary.btn-outline:active {
|
|
462
492
|
background-color: var(--wco-color-primary-50); }
|
|
493
|
+
button.wco-btn.btn-primary.btn-basic,
|
|
494
|
+
a.wco-btn.btn-primary.btn-basic,
|
|
463
495
|
button.btn.btn-primary.btn-basic,
|
|
464
496
|
a.btn.btn-primary.btn-basic {
|
|
465
497
|
box-shadow: none;
|
|
466
498
|
--bgBtn: transparent;
|
|
467
499
|
--textBtn: var(--wco-color-primary-600); }
|
|
500
|
+
button.wco-btn.btn-primary.btn-basic:hover,
|
|
501
|
+
a.wco-btn.btn-primary.btn-basic:hover,
|
|
468
502
|
button.btn.btn-primary.btn-basic:hover,
|
|
469
503
|
a.btn.btn-primary.btn-basic:hover {
|
|
470
504
|
--textBtn: var(--wco-color-primary-700);
|
|
471
505
|
--bgBtn: var(--wco-color-primary-50); }
|
|
472
|
-
button.btn.btn-primary.btn-basic:focus-visible, button.btn.btn-primary.btn-basic:active,
|
|
506
|
+
button.wco-btn.btn-primary.btn-basic:focus-visible, button.wco-btn.btn-primary.btn-basic:active,
|
|
507
|
+
a.wco-btn.btn-primary.btn-basic:focus-visible,
|
|
508
|
+
a.wco-btn.btn-primary.btn-basic:active,
|
|
509
|
+
button.btn.btn-primary.btn-basic:focus-visible,
|
|
510
|
+
button.btn.btn-primary.btn-basic:active,
|
|
473
511
|
a.btn.btn-primary.btn-basic:focus-visible,
|
|
474
512
|
a.btn.btn-primary.btn-basic:active {
|
|
475
513
|
--textBtn: var(--wco-color-primary-900);
|
|
476
514
|
--bgBtn: var(--wco-color-primary-100); }
|
|
515
|
+
button.wco-btn.btn-secondary,
|
|
516
|
+
a.wco-btn.btn-secondary,
|
|
477
517
|
button.btn.btn-secondary,
|
|
478
518
|
a.btn.btn-secondary {
|
|
479
519
|
--bgBtn: var(--wco-color-secondary-100);
|
|
480
520
|
--textBtn: var(--wco-color-secondary-900);
|
|
481
521
|
--btn-focus: var(--wco-color-secondary-900); }
|
|
522
|
+
button.wco-btn.btn-secondary:hover:not(.btn-outline),
|
|
523
|
+
a.wco-btn.btn-secondary:hover:not(.btn-outline),
|
|
482
524
|
button.btn.btn-secondary:hover:not(.btn-outline),
|
|
483
525
|
a.btn.btn-secondary:hover:not(.btn-outline) {
|
|
484
526
|
--bgBtn: var(--wco-color-secondary-50);
|
|
485
527
|
--textBtn: var(--wco-color-secondary-900);
|
|
486
528
|
box-shadow: none; }
|
|
529
|
+
button.wco-btn.btn-secondary:active:not(.btn-outline),
|
|
530
|
+
a.wco-btn.btn-secondary:active:not(.btn-outline),
|
|
487
531
|
button.btn.btn-secondary:active:not(.btn-outline),
|
|
488
532
|
a.btn.btn-secondary:active:not(.btn-outline) {
|
|
489
533
|
--bgBtn: var(--wco-color-secondary-50);
|
|
490
534
|
--textBtn: var(--wco-color-secondary-900); }
|
|
535
|
+
button.wco-btn.btn-secondary.btn-outline,
|
|
536
|
+
a.wco-btn.btn-secondary.btn-outline,
|
|
491
537
|
button.btn.btn-secondary.btn-outline,
|
|
492
538
|
a.btn.btn-secondary.btn-outline {
|
|
493
539
|
background-color: transparent;
|
|
494
540
|
--textBtn: var(--wco-color-secondary-600);
|
|
495
541
|
--btn-focus: var(--wco-color-secondary-600); }
|
|
542
|
+
button.wco-btn.btn-secondary.btn-outline:hover,
|
|
543
|
+
a.wco-btn.btn-secondary.btn-outline:hover,
|
|
496
544
|
button.btn.btn-secondary.btn-outline:hover,
|
|
497
545
|
a.btn.btn-secondary.btn-outline:hover {
|
|
498
546
|
background-color: var(--wco-color-secondary-50); }
|
|
547
|
+
button.wco-btn.btn-secondary.btn-outline:active,
|
|
548
|
+
a.wco-btn.btn-secondary.btn-outline:active,
|
|
499
549
|
button.btn.btn-secondary.btn-outline:active,
|
|
500
550
|
a.btn.btn-secondary.btn-outline:active {
|
|
501
551
|
background-color: var(--wco-color-secondary-100); }
|
|
552
|
+
button.wco-btn.btn-secondary.btn-basic,
|
|
553
|
+
a.wco-btn.btn-secondary.btn-basic,
|
|
502
554
|
button.btn.btn-secondary.btn-basic,
|
|
503
555
|
a.btn.btn-secondary.btn-basic {
|
|
504
556
|
box-shadow: none;
|
|
505
557
|
--bgBtn: transparent;
|
|
506
558
|
--textBtn: var(--wco-color-secondary-600); }
|
|
559
|
+
button.wco-btn.btn-secondary.btn-basic:hover,
|
|
560
|
+
a.wco-btn.btn-secondary.btn-basic:hover,
|
|
507
561
|
button.btn.btn-secondary.btn-basic:hover,
|
|
508
562
|
a.btn.btn-secondary.btn-basic:hover {
|
|
509
563
|
--textBtn: var(--wco-color-secondary-700);
|
|
510
564
|
--bgBtn: var(--wco-color-secondary-50); }
|
|
511
|
-
button.btn.btn-secondary.btn-basic:focus-visible, button.btn.btn-secondary.btn-basic:active,
|
|
565
|
+
button.wco-btn.btn-secondary.btn-basic:focus-visible, button.wco-btn.btn-secondary.btn-basic:active,
|
|
566
|
+
a.wco-btn.btn-secondary.btn-basic:focus-visible,
|
|
567
|
+
a.wco-btn.btn-secondary.btn-basic:active,
|
|
568
|
+
button.btn.btn-secondary.btn-basic:focus-visible,
|
|
569
|
+
button.btn.btn-secondary.btn-basic:active,
|
|
512
570
|
a.btn.btn-secondary.btn-basic:focus-visible,
|
|
513
571
|
a.btn.btn-secondary.btn-basic:active {
|
|
514
572
|
--textBtn: var(--wco-color-secondary-900);
|
|
515
573
|
--bgBtn: var(--wco-color-secondary-100); }
|
|
574
|
+
button.wco-btn.btn-link,
|
|
575
|
+
a.wco-btn.btn-link,
|
|
516
576
|
button.btn.btn-link,
|
|
517
577
|
a.btn.btn-link {
|
|
518
578
|
background-color: transparent;
|
|
519
579
|
--textBtn: var(--wco-color-primary-600);
|
|
520
580
|
text-decoration: underline; }
|
|
581
|
+
button.wco-btn.btn-link:hover:not(.btn-outline),
|
|
582
|
+
a.wco-btn.btn-link:hover:not(.btn-outline),
|
|
521
583
|
button.btn.btn-link:hover:not(.btn-outline),
|
|
522
584
|
a.btn.btn-link:hover:not(.btn-outline) {
|
|
523
585
|
--textBtn: var(--wco-color-primary-700);
|
|
524
586
|
box-shadow: none; }
|
|
587
|
+
button.wco-btn.btn-link:active:not(.btn-outline),
|
|
588
|
+
a.wco-btn.btn-link:active:not(.btn-outline),
|
|
525
589
|
button.btn.btn-link:active:not(.btn-outline),
|
|
526
590
|
a.btn.btn-link:active:not(.btn-outline) {
|
|
527
591
|
background-color: var(--wco-color-primary-100);
|
|
528
592
|
--bgBtn: var(--wco-color-primary-900);
|
|
529
593
|
--textBtn: var(--wco-color-primary-900);
|
|
530
594
|
box-shadow: none; }
|
|
595
|
+
button.wco-btn.btn-link.btn-outline,
|
|
596
|
+
a.wco-btn.btn-link.btn-outline,
|
|
531
597
|
button.btn.btn-link.btn-outline,
|
|
532
598
|
a.btn.btn-link.btn-outline {
|
|
533
599
|
border: 0px solid transparent; }
|
|
600
|
+
button.wco-btn.btn-full,
|
|
601
|
+
a.wco-btn.btn-full,
|
|
534
602
|
button.btn.btn-full,
|
|
535
603
|
a.btn.btn-full {
|
|
536
604
|
width: 100%;
|
|
537
605
|
min-width: max-content; }
|
|
606
|
+
button.wco-btn.btn-md,
|
|
607
|
+
a.wco-btn.btn-md,
|
|
538
608
|
button.btn.btn-md,
|
|
539
609
|
a.btn.btn-md {
|
|
540
610
|
--btn-min-h: 40px; }
|
|
611
|
+
button.wco-btn.btn-sm,
|
|
612
|
+
a.wco-btn.btn-sm,
|
|
541
613
|
button.btn.btn-sm,
|
|
542
614
|
a.btn.btn-sm {
|
|
543
615
|
--btn-min-h: 32px;
|
|
544
616
|
--btn-size: 14px;
|
|
545
617
|
--btn-padding: 4px 16px; }
|
|
618
|
+
button.wco-btn.btn-outline,
|
|
619
|
+
a.wco-btn.btn-outline,
|
|
546
620
|
button.btn.btn-outline,
|
|
547
621
|
a.btn.btn-outline {
|
|
548
622
|
border: 2px solid var(--bgBtn); }
|
|
623
|
+
button.wco-btn.btn-outline:disabled,
|
|
624
|
+
a.wco-btn.btn-outline:disabled,
|
|
549
625
|
button.btn.btn-outline:disabled,
|
|
550
626
|
a.btn.btn-outline:disabled {
|
|
551
627
|
background-color: transparent;
|
|
552
628
|
--textBtn: var(--wco-color-neutral-50);
|
|
553
629
|
--bgBtn: var(--wco-color-neutral-700); }
|
|
630
|
+
button.wco-btn.btn-loading,
|
|
631
|
+
a.wco-btn.btn-loading,
|
|
554
632
|
button.btn.btn-loading,
|
|
555
633
|
a.btn.btn-loading {
|
|
556
634
|
position: relative;
|
|
557
635
|
overflow: hidden;
|
|
558
636
|
pointer-events: none;
|
|
559
637
|
cursor: none; }
|
|
638
|
+
button.wco-btn.btn-loading:before,
|
|
639
|
+
a.wco-btn.btn-loading:before,
|
|
560
640
|
button.btn.btn-loading:before,
|
|
561
641
|
a.btn.btn-loading:before {
|
|
562
642
|
position: absolute;
|
|
@@ -564,6 +644,8 @@ a.btn {
|
|
|
564
644
|
left: 0;
|
|
565
645
|
width: 0%;
|
|
566
646
|
height: 100%; }
|
|
647
|
+
button.wco-btn.btn-loading:before,
|
|
648
|
+
a.wco-btn.btn-loading:before,
|
|
567
649
|
button.btn.btn-loading:before,
|
|
568
650
|
a.btn.btn-loading:before {
|
|
569
651
|
content: "";
|
|
@@ -574,20 +656,28 @@ a.btn {
|
|
|
574
656
|
@keyframes loadingButton {
|
|
575
657
|
to {
|
|
576
658
|
width: 100%; } }
|
|
659
|
+
button.wco-btn.btn-icon,
|
|
660
|
+
a.wco-btn.btn-icon,
|
|
577
661
|
button.btn.btn-icon,
|
|
578
662
|
a.btn.btn-icon {
|
|
579
663
|
--btn-padding: 4px;
|
|
580
664
|
min-height: var(--btn-min-h, 48px);
|
|
581
665
|
min-width: var(--btn-min-h, 48px); }
|
|
666
|
+
button.wco-btn.btn.btn-notification,
|
|
667
|
+
a.wco-btn.btn.btn-notification,
|
|
582
668
|
button.btn.btn.btn-notification,
|
|
583
669
|
a.btn.btn.btn-notification {
|
|
584
670
|
--btn-notification-size: var(--wco-spacing-xxs);
|
|
585
671
|
--btn-notification-time: 2s;
|
|
586
672
|
--btn-notification-count: infinite;
|
|
587
673
|
--btn-notification-color: var(--bgBtn); }
|
|
674
|
+
button.wco-btn.btn.btn-notification:not(.btn-outline):before,
|
|
675
|
+
a.wco-btn.btn.btn-notification:not(.btn-outline):before,
|
|
588
676
|
button.btn.btn.btn-notification:not(.btn-outline):before,
|
|
589
677
|
a.btn.btn.btn-notification:not(.btn-outline):before {
|
|
590
678
|
outline: 2px solid var(--textBtn); }
|
|
679
|
+
button.wco-btn.btn.btn-notification:before,
|
|
680
|
+
a.wco-btn.btn.btn-notification:before,
|
|
591
681
|
button.btn.btn.btn-notification:before,
|
|
592
682
|
a.btn.btn.btn-notification:before {
|
|
593
683
|
content: "";
|
|
@@ -620,7 +710,8 @@ a.btn {
|
|
|
620
710
|
background-color: var(--wco-color-panel);
|
|
621
711
|
width: 100%; }
|
|
622
712
|
|
|
623
|
-
.form-field
|
|
713
|
+
.form-field,
|
|
714
|
+
.wco-form-field {
|
|
624
715
|
--wco-input-color-label: var(--wco-color-neutral-700, #50555a);
|
|
625
716
|
--wco-input-color-outline: var(--wco-color-neutral-500, #8d9399);
|
|
626
717
|
--wco-input-color-icon: var(--wco-color-primary-600, #bf5600);
|
|
@@ -634,24 +725,43 @@ a.btn {
|
|
|
634
725
|
--wco-input-color-required: var(--wco-color-danger-600, #e00707);
|
|
635
726
|
--wco-input-color-helptext: var(--wco-color-neutral-900, #6d747a);
|
|
636
727
|
--wco-input-font: var(--wco-font-family, 'Figtree', sans-serif);
|
|
637
|
-
--wco-input-padding: 16px;
|
|
728
|
+
--wco-input-padding: 16px;
|
|
729
|
+
--wco-input-min-height: 48px; }
|
|
638
730
|
|
|
731
|
+
.wco-form-field,
|
|
639
732
|
.form-field * {
|
|
640
733
|
box-sizing: border-box; }
|
|
641
734
|
|
|
735
|
+
.wco-form-field,
|
|
642
736
|
.form-field {
|
|
643
737
|
display: flex;
|
|
644
738
|
position: relative;
|
|
645
739
|
accent-color: var(--wco-input-color-text);
|
|
646
740
|
transition: box-shadow 300ms ease-in-out, border-color 300ms ease-in-out; }
|
|
741
|
+
.wco-form-field:has(input:required) label::after,
|
|
742
|
+
.wco-form-field:has(select:required) label::after,
|
|
743
|
+
.wco-form-field:has(textarea:required) label::after,
|
|
744
|
+
.wco-form-field input:required + label::after,
|
|
745
|
+
.wco-form-field textarea:required + label::after,
|
|
746
|
+
.wco-form-field input:invalid:not(:placeholder-shown):required + label,
|
|
747
|
+
.form-field:has(input:required) label::after,
|
|
748
|
+
.form-field:has(select:required) label::after,
|
|
749
|
+
.form-field:has(textarea:required) label::after,
|
|
647
750
|
.form-field input:required + label::after,
|
|
648
751
|
.form-field textarea:required + label::after,
|
|
649
752
|
.form-field input:invalid:not(:placeholder-shown):required + label {
|
|
650
753
|
content: " *";
|
|
651
754
|
color: var(--wco-input-color-required); }
|
|
755
|
+
.wco-form-field .form-field__input,
|
|
756
|
+
.wco-form-field .form-field__textarea,
|
|
757
|
+
.wco-form-field input,
|
|
758
|
+
.wco-form-field textarea,
|
|
759
|
+
.wco-form-field select,
|
|
652
760
|
.form-field .form-field__input,
|
|
653
761
|
.form-field .form-field__textarea,
|
|
654
|
-
.form-field
|
|
762
|
+
.form-field input,
|
|
763
|
+
.form-field textarea,
|
|
764
|
+
.form-field select {
|
|
655
765
|
border: var(--wco-input-border);
|
|
656
766
|
border-radius: var(--wco-input-radius);
|
|
657
767
|
font-size: var(--wco-input-size, 16px);
|
|
@@ -666,37 +776,64 @@ a.btn {
|
|
|
666
776
|
outline: none;
|
|
667
777
|
width: 100%;
|
|
668
778
|
background-color: var(--wco-input-color-bg); }
|
|
779
|
+
.wco-form-field .form-field__input::placeholder,
|
|
780
|
+
.wco-form-field .form-field__textarea::placeholder,
|
|
781
|
+
.wco-form-field input::placeholder,
|
|
782
|
+
.wco-form-field textarea::placeholder,
|
|
783
|
+
.wco-form-field select::placeholder,
|
|
669
784
|
.form-field .form-field__input::placeholder,
|
|
670
785
|
.form-field .form-field__textarea::placeholder,
|
|
671
|
-
.form-field
|
|
786
|
+
.form-field input::placeholder,
|
|
787
|
+
.form-field textarea::placeholder,
|
|
788
|
+
.form-field select::placeholder {
|
|
672
789
|
color: var(--wco-input-color-placeholder);
|
|
673
790
|
font-family: var(--wco-font-family); }
|
|
674
|
-
.form-field .form-field__input:invalid:not(:placeholder-shown), .form-field .form-field__input.form-field--error:not(:placeholder-shown),
|
|
791
|
+
.wco-form-field .form-field__input:invalid:not(:placeholder-shown), .wco-form-field .form-field__input.wco-form-field--error:not(:placeholder-shown), .wco-form-field .form-field__input.form-field--error:not(:placeholder-shown), .wco-form-field .form-field__input.form--error:not(:placeholder-shown),
|
|
792
|
+
.wco-form-field .form-field__textarea:invalid:not(:placeholder-shown),
|
|
793
|
+
.wco-form-field .form-field__textarea.wco-form-field--error:not(:placeholder-shown),
|
|
794
|
+
.wco-form-field .form-field__textarea.form-field--error:not(:placeholder-shown),
|
|
795
|
+
.wco-form-field .form-field__textarea.form--error:not(:placeholder-shown),
|
|
796
|
+
.wco-form-field input:invalid:not(:placeholder-shown),
|
|
797
|
+
.wco-form-field input.wco-form-field--error:not(:placeholder-shown),
|
|
798
|
+
.wco-form-field input.form-field--error:not(:placeholder-shown),
|
|
799
|
+
.wco-form-field input.form--error:not(:placeholder-shown),
|
|
800
|
+
.wco-form-field textarea:invalid:not(:placeholder-shown),
|
|
801
|
+
.wco-form-field textarea.wco-form-field--error:not(:placeholder-shown),
|
|
802
|
+
.wco-form-field textarea.form-field--error:not(:placeholder-shown),
|
|
803
|
+
.wco-form-field textarea.form--error:not(:placeholder-shown),
|
|
804
|
+
.wco-form-field select:invalid:not(:placeholder-shown),
|
|
805
|
+
.wco-form-field select.wco-form-field--error:not(:placeholder-shown),
|
|
806
|
+
.wco-form-field select.form-field--error:not(:placeholder-shown),
|
|
807
|
+
.wco-form-field select.form--error:not(:placeholder-shown),
|
|
808
|
+
.form-field .form-field__input:invalid:not(:placeholder-shown),
|
|
809
|
+
.form-field .form-field__input.wco-form-field--error:not(:placeholder-shown),
|
|
810
|
+
.form-field .form-field__input.form-field--error:not(:placeholder-shown),
|
|
811
|
+
.form-field .form-field__input.form--error:not(:placeholder-shown),
|
|
675
812
|
.form-field .form-field__textarea:invalid:not(:placeholder-shown),
|
|
813
|
+
.form-field .form-field__textarea.wco-form-field--error:not(:placeholder-shown),
|
|
676
814
|
.form-field .form-field__textarea.form-field--error:not(:placeholder-shown),
|
|
677
|
-
.form-field .form-
|
|
678
|
-
.form-field
|
|
815
|
+
.form-field .form-field__textarea.form--error:not(:placeholder-shown),
|
|
816
|
+
.form-field input:invalid:not(:placeholder-shown),
|
|
817
|
+
.form-field input.wco-form-field--error:not(:placeholder-shown),
|
|
818
|
+
.form-field input.form-field--error:not(:placeholder-shown),
|
|
819
|
+
.form-field input.form--error:not(:placeholder-shown),
|
|
820
|
+
.form-field textarea:invalid:not(:placeholder-shown),
|
|
821
|
+
.form-field textarea.wco-form-field--error:not(:placeholder-shown),
|
|
822
|
+
.form-field textarea.form-field--error:not(:placeholder-shown),
|
|
823
|
+
.form-field textarea.form--error:not(:placeholder-shown),
|
|
824
|
+
.form-field select:invalid:not(:placeholder-shown),
|
|
825
|
+
.form-field select.wco-form-field--error:not(:placeholder-shown),
|
|
826
|
+
.form-field select.form-field--error:not(:placeholder-shown),
|
|
827
|
+
.form-field select.form--error:not(:placeholder-shown) {
|
|
679
828
|
--input-border: 1px solid var(--input-color-error);
|
|
680
829
|
--input-shadow: 0px 2px 0px 1px var(--input-color-error);
|
|
681
830
|
color: var(--input-color-error); }
|
|
682
|
-
|
|
683
|
-
.form-field .form-field__textarea.input-sm,
|
|
684
|
-
.form-field .form-field__select.input-sm {
|
|
685
|
-
height: 32px; }
|
|
686
|
-
.form-field .form-field__input.input-md,
|
|
687
|
-
.form-field .form-field__textarea.input-md,
|
|
688
|
-
.form-field .form-field__select.input-md {
|
|
689
|
-
height: 40px; }
|
|
690
|
-
.form-field .form-field__input.input-lg,
|
|
691
|
-
.form-field .form-field__textarea.input-lg,
|
|
692
|
-
.form-field .form-field__select.input-lg {
|
|
693
|
-
height: 48px; }
|
|
831
|
+
.wco-form-field label,
|
|
694
832
|
.form-field label {
|
|
695
833
|
position: absolute;
|
|
696
834
|
left: 0;
|
|
697
835
|
top: 50%;
|
|
698
836
|
transform: translateY(-50%);
|
|
699
|
-
background-image: linear-gradient(0deg, var(--wco-input-color-bg, #fff) 11px, rgba(93, 118, 137, 0) 44%);
|
|
700
837
|
color: var(--wco-input-color-label);
|
|
701
838
|
font-family: var(--wco-input-font);
|
|
702
839
|
font-size: var(--wco-input-size);
|
|
@@ -706,6 +843,18 @@ a.btn {
|
|
|
706
843
|
transition: 100ms linear;
|
|
707
844
|
transform-origin: left top;
|
|
708
845
|
pointer-events: none; }
|
|
846
|
+
.wco-form-field label::before,
|
|
847
|
+
.form-field label::before {
|
|
848
|
+
content: '';
|
|
849
|
+
position: absolute;
|
|
850
|
+
top: calc(50% - -2px);
|
|
851
|
+
z-index: -1;
|
|
852
|
+
left: 0;
|
|
853
|
+
transform: translateY(-50%);
|
|
854
|
+
width: 100%;
|
|
855
|
+
height: 4px;
|
|
856
|
+
background-color: var(--wco-input-color-bg); }
|
|
857
|
+
.wco-form-field:has(input:focus, textarea:focus, select:focus),
|
|
709
858
|
.form-field:has(input:focus, textarea:focus, select:focus) {
|
|
710
859
|
--wco-input-color-label: var(--wco-color-primary-700);
|
|
711
860
|
--wco-input-color-outline: var(--wco-color-primary-600);
|
|
@@ -713,71 +862,148 @@ a.btn {
|
|
|
713
862
|
--wco-input-color-text: var(--wco-color-neutral-900);
|
|
714
863
|
--wco-input-color-placeholder: var(--wco-color-neutral-600);
|
|
715
864
|
--wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline); }
|
|
865
|
+
.wco-form-field:hover,
|
|
716
866
|
.form-field:hover {
|
|
717
867
|
--wco-input-color-label: var(--wco-color-neutral-700, #50555a);
|
|
718
868
|
--wco-input-color-outline: var(--wco-color-neutral-900, #8d9399); }
|
|
719
|
-
.form-field:has(
|
|
869
|
+
.wco-form-field:has(
|
|
870
|
+
input:disabled,
|
|
871
|
+
textarea:disabled,
|
|
872
|
+
select:disabled,
|
|
873
|
+
.form-field__input.form-field--disabled), .wco-form-field.form-disabled,
|
|
874
|
+
.form-field:has(
|
|
875
|
+
input:disabled,
|
|
876
|
+
textarea:disabled,
|
|
877
|
+
select:disabled,
|
|
878
|
+
.form-field__input.form-field--disabled),
|
|
879
|
+
.form-field.form-disabled {
|
|
720
880
|
--wco-input-color-label: var(--wco-color-neutral-500, #C3C8CC);
|
|
721
881
|
--wco-input-color-outline: var(--wco-color-neutral-300, #C3C8CC);
|
|
722
882
|
--wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
|
|
723
883
|
--wco-input-color-text: var(--wco-color-neutral-600, #C3C8CC);
|
|
724
884
|
--wco-input-color-placeholder: var(--wco-color-neutral-300, #C3C8CC);
|
|
725
885
|
--wco-input-color-bg: var(--wco-color-neutral-100, #E9EBEC); }
|
|
886
|
+
.wco-form-field:has(
|
|
887
|
+
input:read-only:not(:disabled),
|
|
888
|
+
textarea:read-only:not(:disabled)
|
|
889
|
+
),
|
|
890
|
+
.wco-form-field .form--readonly:not(.form-field--disabled),
|
|
891
|
+
.wco-form-field .form-field--readonly:not(.form-field--disabled),
|
|
726
892
|
.form-field:has(
|
|
727
893
|
input:read-only:not(:disabled),
|
|
728
|
-
textarea:read-only:not(:disabled)
|
|
729
|
-
select:read-only:not(:disabled)
|
|
894
|
+
textarea:read-only:not(:disabled)
|
|
730
895
|
),
|
|
896
|
+
.form-field .form--readonly:not(.form-field--disabled),
|
|
731
897
|
.form-field .form-field--readonly:not(.form-field--disabled) {
|
|
732
898
|
--wco-input-color-label: var(--wco-color-neutral-600, #C3C8CC);
|
|
733
899
|
--wco-input-color-outline: var(--wco-color-neutral-500, #C3C8CC);
|
|
734
900
|
--wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
|
|
735
901
|
--wco-input-color-text: var(--wco-color-neutral-900, #C3C8CC);
|
|
736
902
|
--wco-input-color-bg: var(--wco-color-neutral-50, #E9EBEC); }
|
|
737
|
-
.form-field.form-field--error:not(:placeholder-shown) ~ label,
|
|
903
|
+
.wco-form-field.form-field--error:not(:placeholder-shown) ~ label,
|
|
904
|
+
.wco-form-field.form--error:not(:placeholder-shown) ~ label, .wco-form-field.form-field--error, .wco-form-field:has(input:is(:placeholder-shown):invalid), .wco-form-field:has(.form-field--error), .wco-form-field.form--error,
|
|
905
|
+
.form-field.form-field--error:not(:placeholder-shown) ~ label,
|
|
906
|
+
.form-field.form--error:not(:placeholder-shown) ~ label,
|
|
907
|
+
.form-field.form-field--error,
|
|
908
|
+
.form-field:has(input:is(:placeholder-shown):invalid),
|
|
909
|
+
.form-field:has(.form-field--error),
|
|
910
|
+
.form-field.form--error {
|
|
738
911
|
--wco-input-color-label: var(--wco-color-danger-600, #e00707);
|
|
739
912
|
--wco-input-color-outline: var(--wco-color-danger-600, #e00707);
|
|
740
913
|
--wco-input-color-icon: var(--wco-color-danger-600, #e00707);
|
|
741
914
|
--wco-input-color-text: var(--wco-color-neutral-900, #e00707);
|
|
742
915
|
--wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline); }
|
|
743
|
-
.form-field textarea ~ label
|
|
916
|
+
.wco-form-field textarea ~ label,
|
|
917
|
+
.wco-form-field:has(textarea) label,
|
|
918
|
+
.form-field textarea ~ label,
|
|
919
|
+
.form-field:has(textarea) label {
|
|
744
920
|
top: 16px;
|
|
745
921
|
transform: translateY(0); }
|
|
746
|
-
.form-field
|
|
922
|
+
.wco-form-field:has(input:focus) label,
|
|
923
|
+
.wco-form-field:has(select) label,
|
|
924
|
+
.wco-form-field:has(textarea:focus) label,
|
|
925
|
+
.wco-form-field textarea:focus + label,
|
|
926
|
+
.wco-form-field .readonly + label,
|
|
927
|
+
.form-field:has(input:focus) label,
|
|
928
|
+
.form-field:has(select) label,
|
|
929
|
+
.form-field:has(textarea:focus) label,
|
|
747
930
|
.form-field textarea:focus + label,
|
|
748
|
-
.form-field input:focus + label,
|
|
749
931
|
.form-field .readonly + label {
|
|
750
932
|
color: var(--wco-input-color-label);
|
|
751
933
|
top: 0;
|
|
752
934
|
transform: translateY(-50%) translateX(-10px) scale(0.9) !important; }
|
|
753
|
-
.form-field
|
|
935
|
+
.wco-form-field:has(input:not(:placeholder-shown)) label,
|
|
936
|
+
.wco-form-field:has(select:not(:placeholder-shown)) label,
|
|
937
|
+
.wco-form-field:has(textarea:not(:placeholder-shown)) label,
|
|
938
|
+
.wco-form-field textarea:not(:placeholder-shown) + label,
|
|
939
|
+
.wco-form-field input:not(:placeholder-shown) + label,
|
|
940
|
+
.wco-form-field .readonly + label,
|
|
941
|
+
.form-field:has(input:not(:placeholder-shown)) label,
|
|
942
|
+
.form-field:has(select:not(:placeholder-shown)) label,
|
|
943
|
+
.form-field:has(textarea:not(:placeholder-shown)) label,
|
|
754
944
|
.form-field textarea:not(:placeholder-shown) + label,
|
|
755
945
|
.form-field input:not(:placeholder-shown) + label,
|
|
756
946
|
.form-field .readonly + label {
|
|
757
947
|
top: 0;
|
|
758
948
|
transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
|
|
759
949
|
font-weight: 500; }
|
|
950
|
+
.wco-form-field textarea:not(:focus)::placeholder,
|
|
951
|
+
.wco-form-field input:not(:focus)::placeholder,
|
|
760
952
|
.form-field textarea:not(:focus)::placeholder,
|
|
761
953
|
.form-field input:not(:focus)::placeholder {
|
|
762
954
|
opacity: 0; }
|
|
955
|
+
.wco-form-field > i:first-child,
|
|
956
|
+
.wco-form-field > span:first-child,
|
|
957
|
+
.form-field > i:first-child,
|
|
763
958
|
.form-field > span:first-child {
|
|
764
959
|
position: absolute;
|
|
765
960
|
top: 50%;
|
|
766
961
|
left: 12px;
|
|
767
962
|
transform: translateY(-50%);
|
|
768
|
-
color: var(--wco-input-color-icon);
|
|
963
|
+
color: var(--wco-input-color-icon);
|
|
964
|
+
width: fit-content; }
|
|
965
|
+
.wco-form-field:has(input):has(i:first-child) label,
|
|
966
|
+
.wco-form-field:has(input):has(span:first-child) label,
|
|
967
|
+
.wco-form-field > span ~ .form-field__input + label,
|
|
968
|
+
.wco-form-field > span ~ .form-field__select + label,
|
|
969
|
+
.form-field:has(input):has(i:first-child) label,
|
|
970
|
+
.form-field:has(input):has(span:first-child) label,
|
|
769
971
|
.form-field > span ~ .form-field__input + label,
|
|
770
972
|
.form-field > span ~ .form-field__select + label {
|
|
771
973
|
margin-left: 44px; }
|
|
974
|
+
.wco-form-field:has(input):has(i:first-child) input,
|
|
975
|
+
.wco-form-field:has(input):has(span:first-child) input,
|
|
976
|
+
.wco-form-field > span ~ .form-field__select,
|
|
977
|
+
.wco-form-field > span ~ .form-field__input,
|
|
978
|
+
.form-field:has(input):has(i:first-child) input,
|
|
979
|
+
.form-field:has(input):has(span:first-child) input,
|
|
772
980
|
.form-field > span ~ .form-field__select,
|
|
773
981
|
.form-field > span ~ .form-field__input {
|
|
774
982
|
padding-left: 44px; }
|
|
983
|
+
.wco-form-field:has(input):has(i:last-child) input,
|
|
984
|
+
.wco-form-field:has(input):has(span:last-child) input,
|
|
985
|
+
.form-field:has(input):has(i:last-child) input,
|
|
986
|
+
.form-field:has(input):has(span:last-child) input {
|
|
987
|
+
padding-right: 44px; }
|
|
988
|
+
.wco-form-field:has(input):has(i:last-child) i,
|
|
989
|
+
.wco-form-field:has(input):has(span:last-child) span,
|
|
990
|
+
.wco-form-field > .form-field__select + label + span,
|
|
991
|
+
.wco-form-field > .form-field__input + label + span,
|
|
992
|
+
.form-field:has(input):has(i:last-child) i,
|
|
993
|
+
.form-field:has(input):has(span:last-child) span,
|
|
775
994
|
.form-field > .form-field__select + label + span,
|
|
776
995
|
.form-field > .form-field__input + label + span {
|
|
996
|
+
width: fit-content;
|
|
777
997
|
position: absolute;
|
|
778
998
|
top: 50%;
|
|
779
999
|
right: 12px;
|
|
780
1000
|
transform: translateY(-50%); }
|
|
1001
|
+
.wco-form-field:has(input):has(i:last-child) i::before,
|
|
1002
|
+
.wco-form-field:has(input):has(span:last-child) span::before,
|
|
1003
|
+
.wco-form-field > .form-field__select + label + span::before,
|
|
1004
|
+
.wco-form-field > .form-field__input + label + span::before,
|
|
1005
|
+
.form-field:has(input):has(i:last-child) i::before,
|
|
1006
|
+
.form-field:has(input):has(span:last-child) span::before,
|
|
781
1007
|
.form-field > .form-field__select + label + span::before,
|
|
782
1008
|
.form-field > .form-field__input + label + span::before {
|
|
783
1009
|
content: '';
|
|
@@ -785,18 +1011,75 @@ a.btn {
|
|
|
785
1011
|
top: 2px;
|
|
786
1012
|
width: 30px;
|
|
787
1013
|
height: 30px; }
|
|
788
|
-
.form-field.form
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
.form-field.form
|
|
792
|
-
|
|
793
|
-
|
|
1014
|
+
.wco-form-field.form--sm,
|
|
1015
|
+
.form-field.form--sm {
|
|
1016
|
+
--wco-input-min-height: 32px; }
|
|
1017
|
+
.wco-form-field.form--md,
|
|
1018
|
+
.form-field.form--md {
|
|
1019
|
+
--wco-input-min-height: 40px; }
|
|
1020
|
+
.wco-form-field.form--lg,
|
|
1021
|
+
.form-field.form--lg {
|
|
1022
|
+
--wco-input-min-height: 48px; }
|
|
1023
|
+
.wco-form-field:has(input) input,
|
|
1024
|
+
.form-field:has(input) input {
|
|
1025
|
+
min-height: var(--wco-input-min-height);
|
|
1026
|
+
padding-top: 0;
|
|
1027
|
+
padding-bottom: 0; }
|
|
1028
|
+
.wco-form-field:has(select) label,
|
|
1029
|
+
.form-field:has(select) label {
|
|
1030
|
+
z-index: 1; }
|
|
1031
|
+
.wco-form-field:has(select) select,
|
|
1032
|
+
.wco-form-field:has(select) select.form-field__select,
|
|
1033
|
+
.form-field:has(select) select,
|
|
1034
|
+
.form-field:has(select) select.form-field__select {
|
|
794
1035
|
appearance: none;
|
|
795
1036
|
-webkit-appearance: none;
|
|
796
|
-
-moz-appearance: none;
|
|
797
|
-
|
|
798
|
-
|
|
1037
|
+
-moz-appearance: none;
|
|
1038
|
+
padding-right: var(--wco-spacing-md, 40px);
|
|
1039
|
+
min-height: var(--wco-input-min-height);
|
|
1040
|
+
padding-top: 0;
|
|
1041
|
+
padding-bottom: 0; }
|
|
1042
|
+
.wco-form-field:has(select).form--readonly,
|
|
1043
|
+
.form-field:has(select).form--readonly {
|
|
1044
|
+
pointer-events: none; }
|
|
1045
|
+
.wco-form-field:has(select).form--readonly::after,
|
|
1046
|
+
.form-field:has(select).form--readonly::after {
|
|
1047
|
+
display: none; }
|
|
1048
|
+
.wco-form-field:has(select)::after,
|
|
1049
|
+
.form-field:has(select)::after {
|
|
1050
|
+
content: '';
|
|
1051
|
+
position: absolute;
|
|
1052
|
+
top: 50%;
|
|
1053
|
+
right: 12px;
|
|
1054
|
+
transform: translateY(-50%);
|
|
1055
|
+
width: 30px;
|
|
1056
|
+
height: 100%;
|
|
1057
|
+
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41 8.58984L12 13.1698L16.59 8.58984L18 9.99984L12 15.9998L6 9.99984L7.41 8.58984Z' fill='var(--wco-color-primary-600, black)'/%3E%3C/svg%3E%0A");
|
|
1058
|
+
background-size: 30px;
|
|
1059
|
+
background-position: center;
|
|
1060
|
+
background-repeat: no-repeat; }
|
|
1061
|
+
.wco-form-field:has(select + i):after,
|
|
1062
|
+
.form-field:has(select + i):after {
|
|
1063
|
+
display: none; }
|
|
1064
|
+
.wco-form-field:has(select + i) select + i,
|
|
1065
|
+
.form-field:has(select + i) select + i {
|
|
1066
|
+
position: absolute;
|
|
1067
|
+
top: 50%;
|
|
1068
|
+
right: var(--wco-spacing-nano, 8px);
|
|
1069
|
+
transform: translateY(-50%);
|
|
1070
|
+
width: 30px; }
|
|
1071
|
+
.wco-form-field:has(i + label) select,
|
|
1072
|
+
.form-field:has(i + label) select {
|
|
1073
|
+
padding-left: var(--wco-spacing-md, 40px); }
|
|
1074
|
+
.wco-form-field:has(i + label) i,
|
|
1075
|
+
.form-field:has(i + label) i {
|
|
1076
|
+
position: absolute;
|
|
1077
|
+
top: 50%;
|
|
1078
|
+
left: var(--wco-spacing-nano, 8px);
|
|
1079
|
+
transform: translateY(-50%);
|
|
1080
|
+
width: 30px; }
|
|
799
1081
|
|
|
1082
|
+
label.wco-form-radio, .wco-form-radio,
|
|
800
1083
|
label.form-radio, .form-radio {
|
|
801
1084
|
--accent-color: var(--wco-color-primary-700);
|
|
802
1085
|
--radio-size: 16px;
|
|
@@ -805,13 +1088,16 @@ label.form-radio, .form-radio {
|
|
|
805
1088
|
justify-content: center;
|
|
806
1089
|
align-items: center;
|
|
807
1090
|
gap: var(--radio-gap); }
|
|
1091
|
+
label.wco-form-radio label, .wco-form-radio label,
|
|
808
1092
|
label.form-radio label, .form-radio label {
|
|
809
1093
|
display: inline-flex;
|
|
810
1094
|
justify-content: center;
|
|
811
1095
|
align-items: center;
|
|
812
1096
|
gap: var(--radio-gap); }
|
|
1097
|
+
label.wco-form-radio input[type="radio"], .wco-form-radio input[type="radio"],
|
|
813
1098
|
label.form-radio input[type="radio"], .form-radio input[type="radio"] {
|
|
814
1099
|
display: none; }
|
|
1100
|
+
label.wco-form-radio input[type="radio"] ~ .radio, .wco-form-radio input[type="radio"] ~ .radio,
|
|
815
1101
|
label.form-radio input[type="radio"] ~ .radio, .form-radio input[type="radio"] ~ .radio {
|
|
816
1102
|
height: var(--radio-size);
|
|
817
1103
|
width: var(--radio-size);
|
|
@@ -819,6 +1105,7 @@ label.form-radio, .form-radio {
|
|
|
819
1105
|
position: relative;
|
|
820
1106
|
border-radius: 50%;
|
|
821
1107
|
border: 1px solid var(--wco-color-neutral-500); }
|
|
1108
|
+
label.wco-form-radio input[type="radio"] ~ .radio::before, .wco-form-radio input[type="radio"] ~ .radio::before,
|
|
822
1109
|
label.form-radio input[type="radio"] ~ .radio::before, .form-radio input[type="radio"] ~ .radio::before {
|
|
823
1110
|
content: "";
|
|
824
1111
|
position: absolute;
|
|
@@ -830,23 +1117,30 @@ label.form-radio, .form-radio {
|
|
|
830
1117
|
border-radius: 50%;
|
|
831
1118
|
transition: box-shadow 300ms ease-in-out;
|
|
832
1119
|
box-shadow: inset 0px 0px 0px 0px var(--accent-color); }
|
|
1120
|
+
label.wco-form-radio input[type="radio"]:checked ~ .radio, .wco-form-radio input[type="radio"]:checked ~ .radio,
|
|
833
1121
|
label.form-radio input[type="radio"]:checked ~ .radio, .form-radio input[type="radio"]:checked ~ .radio {
|
|
834
1122
|
border: 1px solid var(--accent-color); }
|
|
1123
|
+
label.wco-form-radio input[type="radio"]:checked ~ .radio::before, .wco-form-radio input[type="radio"]:checked ~ .radio::before,
|
|
835
1124
|
label.form-radio input[type="radio"]:checked ~ .radio::before, .form-radio input[type="radio"]:checked ~ .radio::before {
|
|
836
1125
|
box-shadow: inset 0px 0px 12px 12px var(--accent-color); }
|
|
1126
|
+
label.wco-form-radio .label, .wco-form-radio .label,
|
|
837
1127
|
label.form-radio .label, .form-radio .label {
|
|
838
1128
|
color: var(--wco-color-primary-700);
|
|
839
1129
|
font-size: var(--wco-font-size-xs);
|
|
840
1130
|
font-weight: 400; }
|
|
1131
|
+
label.wco-form-radio input[type="radio"]:disabled ~ .radio, .wco-form-radio input[type="radio"]:disabled ~ .radio,
|
|
841
1132
|
label.form-radio input[type="radio"]:disabled ~ .radio, .form-radio input[type="radio"]:disabled ~ .radio {
|
|
842
1133
|
--accent-color: var(--wco-color-neutral-600);
|
|
843
1134
|
background-color: var(--wco-color-neutral-100est); }
|
|
1135
|
+
label.wco-form-radio input[type="radio"]:checked:disabled ~ .radio, .wco-form-radio input[type="radio"]:checked:disabled ~ .radio,
|
|
844
1136
|
label.form-radio input[type="radio"]:checked:disabled ~ .radio, .form-radio input[type="radio"]:checked:disabled ~ .radio {
|
|
845
1137
|
--accent-color: var(--wco-color-neutral-600);
|
|
846
1138
|
border: 1px solid var(--wco-color-neutral-600); }
|
|
1139
|
+
label.wco-form-radio input[type="radio"]:checked:disabled ~ .radio::before, .wco-form-radio input[type="radio"]:checked:disabled ~ .radio::before,
|
|
847
1140
|
label.form-radio input[type="radio"]:checked:disabled ~ .radio::before, .form-radio input[type="radio"]:checked:disabled ~ .radio::before {
|
|
848
1141
|
box-shadow: inset 0px 0px 12px 12px var(--wco-color-neutral-600); }
|
|
849
1142
|
|
|
1143
|
+
label.wco-form-check, .wco-form-check,
|
|
850
1144
|
label.form-check, .form-check {
|
|
851
1145
|
--wco-checkbox-default-color-label: var(--wco-color-neutral-900);
|
|
852
1146
|
--wco-checkbox-default-color-iconunchecked: var(--wco-color-neutral-500);
|
|
@@ -866,13 +1160,19 @@ label.form-check, .form-check {
|
|
|
866
1160
|
justify-content: center;
|
|
867
1161
|
align-items: center;
|
|
868
1162
|
gap: var(--wco-checkbox-checkbox-gap); }
|
|
1163
|
+
label.wco-form-check.form--readonly, .wco-form-check.form--readonly,
|
|
1164
|
+
label.form-check.form--readonly, .form-check.form--readonly {
|
|
1165
|
+
pointer-events: none; }
|
|
1166
|
+
label.wco-form-check label, .wco-form-check label,
|
|
869
1167
|
label.form-check label, .form-check label {
|
|
870
1168
|
display: inline-flex;
|
|
871
1169
|
justify-content: center;
|
|
872
1170
|
align-items: center;
|
|
873
1171
|
gap: var(--wco-checkbox-checkbox-gap); }
|
|
1172
|
+
label.wco-form-check input[type="checkbox"], .wco-form-check input[type="checkbox"],
|
|
874
1173
|
label.form-check input[type="checkbox"], .form-check input[type="checkbox"] {
|
|
875
1174
|
display: none; }
|
|
1175
|
+
label.wco-form-check input[type="checkbox"] ~ .check, .wco-form-check input[type="checkbox"] ~ .check,
|
|
876
1176
|
label.form-check input[type="checkbox"] ~ .check, .form-check input[type="checkbox"] ~ .check {
|
|
877
1177
|
height: var(--wco-checkbox-checkbox-size);
|
|
878
1178
|
width: var(--wco-checkbox-checkbox-size);
|
|
@@ -880,6 +1180,7 @@ label.form-check, .form-check {
|
|
|
880
1180
|
position: relative;
|
|
881
1181
|
border-radius: var(--wco-checkbox-checkbox-radius);
|
|
882
1182
|
border: 2px solid var(--wco-checkbox-default-color-iconunchecked); }
|
|
1183
|
+
label.wco-form-check input[type="checkbox"] ~ .check::before, .wco-form-check input[type="checkbox"] ~ .check::before,
|
|
883
1184
|
label.form-check input[type="checkbox"] ~ .check::before, .form-check input[type="checkbox"] ~ .check::before {
|
|
884
1185
|
content: "";
|
|
885
1186
|
position: absolute;
|
|
@@ -894,20 +1195,25 @@ label.form-check, .form-check {
|
|
|
894
1195
|
opacity: 0;
|
|
895
1196
|
transition: background-size 100ms linear;
|
|
896
1197
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 -3 12 15' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00009 6.77988L1.68676 4.46655C1.42676 4.20655 1.00676 4.20655 0.746758 4.46655C0.486758 4.72655 0.486758 5.14655 0.746758 5.40655L3.53342 8.19322C3.79342 8.45322 4.21342 8.45322 4.47342 8.19322L11.5268 1.13988C11.7868 0.879883 11.7868 0.459883 11.5268 0.199883C11.2668 -0.0601172 10.8468 -0.0601172 10.5868 0.199883L4.00009 6.77988Z' fill='%23F9F7F7'/%3E%3C/svg%3E%0A"); }
|
|
1198
|
+
label.wco-form-check input[type="checkbox"]:checked ~ .check, .wco-form-check input[type="checkbox"]:checked ~ .check,
|
|
897
1199
|
label.form-check input[type="checkbox"]:checked ~ .check, .form-check input[type="checkbox"]:checked ~ .check {
|
|
898
1200
|
border: 2px solid var(--wco-checkbox-default-color-iconchecked);
|
|
899
1201
|
background-color: var(--wco-checkbox-default-color-iconchecked); }
|
|
1202
|
+
label.wco-form-check input[type="checkbox"]:checked ~ .check::before, .wco-form-check input[type="checkbox"]:checked ~ .check::before,
|
|
900
1203
|
label.form-check input[type="checkbox"]:checked ~ .check::before, .form-check input[type="checkbox"]:checked ~ .check::before {
|
|
901
1204
|
opacity: 1;
|
|
902
1205
|
background-size: 100%; }
|
|
1206
|
+
label.wco-form-check .label, .wco-form-check .label,
|
|
903
1207
|
label.form-check .label, .form-check .label {
|
|
904
1208
|
color: var(--wco-checkbox-default-color-label);
|
|
905
1209
|
font-size: var(--wco-font-size-xs);
|
|
906
1210
|
font-family: var(--wco-font-family);
|
|
907
1211
|
font-weight: 400;
|
|
908
1212
|
letter-spacing: 0.4px; }
|
|
1213
|
+
label.wco-form-check:hover:has(input[type="checkbox"]:not(:checked):not(:disabled)) .check, .wco-form-check:hover:has(input[type="checkbox"]:not(:checked):not(:disabled)) .check,
|
|
909
1214
|
label.form-check:hover:has(input[type="checkbox"]:not(:checked):not(:disabled)) .check, .form-check:hover:has(input[type="checkbox"]:not(:checked):not(:disabled)) .check {
|
|
910
1215
|
border: 2px solid var(--wco-checkbox-default-color-iconchecked); }
|
|
1216
|
+
label.wco-form-check:hover:has(input[type="checkbox"]:not(:disabled)) .check::after, .wco-form-check:hover:has(input[type="checkbox"]:not(:disabled)) .check::after,
|
|
911
1217
|
label.form-check:hover:has(input[type="checkbox"]:not(:disabled)) .check::after, .form-check:hover:has(input[type="checkbox"]:not(:disabled)) .check::after {
|
|
912
1218
|
background-color: var(--wco-checkbox-hover-color-bg);
|
|
913
1219
|
content: '';
|
|
@@ -921,6 +1227,7 @@ label.form-check, .form-check {
|
|
|
921
1227
|
z-index: -1;
|
|
922
1228
|
transition: transform 300ms ease-in-out;
|
|
923
1229
|
animation: introScaleCheckboxWco 300ms ease-in-out forwards; }
|
|
1230
|
+
label.wco-form-check:hover:has(input[type="checkbox"]:not(:disabled)) .label, .wco-form-check:hover:has(input[type="checkbox"]:not(:disabled)) .label,
|
|
924
1231
|
label.form-check:hover:has(input[type="checkbox"]:not(:disabled)) .label, .form-check:hover:has(input[type="checkbox"]:not(:disabled)) .label {
|
|
925
1232
|
cursor: pointer; }
|
|
926
1233
|
|
|
@@ -931,20 +1238,27 @@ label.form-check, .form-check {
|
|
|
931
1238
|
transform: translate(-50%, -50%) scale(1.1); }
|
|
932
1239
|
100% {
|
|
933
1240
|
transform: translate(-50%, -50%) scale(1); } }
|
|
1241
|
+
label.wco-form-check:has(input[type="checkbox"]:disabled), .wco-form-check:has(input[type="checkbox"]:disabled),
|
|
934
1242
|
label.form-check:has(input[type="checkbox"]:disabled), .form-check:has(input[type="checkbox"]:disabled) {
|
|
935
1243
|
opacity: 0.3; }
|
|
1244
|
+
label.wco-form-check input[type="checkbox"]:disabled ~ .check, .wco-form-check input[type="checkbox"]:disabled ~ .check,
|
|
936
1245
|
label.form-check input[type="checkbox"]:disabled ~ .check, .form-check input[type="checkbox"]:disabled ~ .check {
|
|
937
1246
|
border: 2px solid var(--wco-checkbox-disabled-color-iconchecked);
|
|
938
1247
|
background-color: var(--wco-color-neutral-50); }
|
|
1248
|
+
label.wco-form-check input[type="checkbox"]:disabled ~ .label, .wco-form-check input[type="checkbox"]:disabled ~ .label,
|
|
939
1249
|
label.form-check input[type="checkbox"]:disabled ~ .label, .form-check input[type="checkbox"]:disabled ~ .label {
|
|
940
1250
|
color: var(--wco-checkbox-disabled-color-label); }
|
|
1251
|
+
label.wco-form-check input[type="checkbox"]:checked:disabled ~ .check, .wco-form-check input[type="checkbox"]:checked:disabled ~ .check,
|
|
941
1252
|
label.form-check input[type="checkbox"]:checked:disabled ~ .check, .form-check input[type="checkbox"]:checked:disabled ~ .check {
|
|
942
1253
|
--accent-color: var(--wco-color-neutral-600);
|
|
943
1254
|
border: 2px solid var(--wco-color-neutral-600);
|
|
944
1255
|
background-color: var(--wco-checkbox-disabled-color-iconchecked); }
|
|
1256
|
+
label.wco-form-check input[type="checkbox"]:checked:disabled ~ .label, .wco-form-check input[type="checkbox"]:checked:disabled ~ .label,
|
|
945
1257
|
label.form-check input[type="checkbox"]:checked:disabled ~ .label, .form-check input[type="checkbox"]:checked:disabled ~ .label {
|
|
946
1258
|
color: var(--wco-checkbox-disabled-color-label); }
|
|
947
|
-
label.form-check.form-field--error, .form-check.form-field--error
|
|
1259
|
+
label.wco-form-check.form--error, label.wco-form-check.form-field--error, .wco-form-check.form--error, .wco-form-check.form-field--error,
|
|
1260
|
+
label.form-check.form--error,
|
|
1261
|
+
label.form-check.form-field--error, .form-check.form--error, .form-check.form-field--error {
|
|
948
1262
|
--wco-checkbox-default-color-label: var(--wco-color-danger-900);
|
|
949
1263
|
--wco-checkbox-default-color-iconunchecked: var(--wco-color-danger-600);
|
|
950
1264
|
--wco-checkbox-default-color-iconchecked: var(--wco-color-danger-600); }
|
package/styles/scss/button.scss
CHANGED
package/styles/scss/forms.scss
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
.form-field
|
|
1
|
+
.form-field,
|
|
2
|
+
.wco-form-field
|
|
3
|
+
{
|
|
2
4
|
--wco-input-color-label: var(--wco-color-neutral-700, #50555a);
|
|
3
5
|
--wco-input-color-outline: var(--wco-color-neutral-500, #8d9399);
|
|
4
6
|
--wco-input-color-icon: var(--wco-color-primary-600, #bf5600);
|
|
@@ -13,18 +15,23 @@
|
|
|
13
15
|
--wco-input-color-helptext: var(--wco-color-neutral-900, #6d747a);
|
|
14
16
|
--wco-input-font: var(--wco-font-family, 'Figtree', sans-serif);
|
|
15
17
|
--wco-input-padding: 16px;
|
|
18
|
+
--wco-input-min-height: 48px;
|
|
16
19
|
}
|
|
17
20
|
|
|
21
|
+
.wco-form-field,
|
|
18
22
|
.form-field * {
|
|
19
23
|
box-sizing: border-box;
|
|
20
24
|
}
|
|
21
|
-
|
|
25
|
+
.wco-form-field,
|
|
22
26
|
.form-field {
|
|
23
27
|
display: flex;
|
|
24
28
|
position: relative;
|
|
25
29
|
accent-color: var(--wco-input-color-text);
|
|
26
30
|
transition: box-shadow 300ms ease-in-out, border-color 300ms ease-in-out;
|
|
27
31
|
// input Invalid
|
|
32
|
+
&:has(input:required) label::after,
|
|
33
|
+
&:has(select:required) label::after,
|
|
34
|
+
&:has(textarea:required) label::after,
|
|
28
35
|
input:required+label::after,
|
|
29
36
|
textarea:required+label::after,
|
|
30
37
|
input:invalid:not(:placeholder-shown):required+label{
|
|
@@ -35,7 +42,10 @@
|
|
|
35
42
|
// input custom
|
|
36
43
|
.form-field__input,
|
|
37
44
|
.form-field__textarea,
|
|
38
|
-
|
|
45
|
+
input,
|
|
46
|
+
textarea,
|
|
47
|
+
select
|
|
48
|
+
{
|
|
39
49
|
border: var(--wco-input-border);
|
|
40
50
|
border-radius: var(--wco-input-radius);
|
|
41
51
|
font-size: var(--wco-input-size, 16px);
|
|
@@ -55,23 +65,15 @@
|
|
|
55
65
|
font-family: var(--wco-font-family);
|
|
56
66
|
}
|
|
57
67
|
// native effects
|
|
58
|
-
&:invalid:not(:placeholder-shown),
|
|
68
|
+
&:invalid:not(:placeholder-shown),
|
|
69
|
+
&.wco-form-field--error:not(:placeholder-shown),
|
|
70
|
+
&.form-field--error:not(:placeholder-shown),
|
|
71
|
+
&.form--error:not(:placeholder-shown)
|
|
72
|
+
{
|
|
59
73
|
--input-border: 1px solid var(--input-color-error);
|
|
60
74
|
--input-shadow: 0px 2px 0px 1px var(--input-color-error);
|
|
61
75
|
color: var(--input-color-error);
|
|
62
76
|
}
|
|
63
|
-
|
|
64
|
-
// sizes
|
|
65
|
-
&.input-sm {
|
|
66
|
-
height: 32px;
|
|
67
|
-
}
|
|
68
|
-
&.input-md {
|
|
69
|
-
height: 40px;
|
|
70
|
-
}
|
|
71
|
-
&.input-lg {
|
|
72
|
-
height: 48px;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
77
|
}
|
|
76
78
|
|
|
77
79
|
label {
|
|
@@ -79,7 +81,6 @@
|
|
|
79
81
|
left: 0;
|
|
80
82
|
top: 50%;
|
|
81
83
|
transform: translateY(-50%);
|
|
82
|
-
background-image: linear-gradient(0deg, var(--wco-input-color-bg, #fff) 11px, rgba(93,118,137,0) 44%);
|
|
83
84
|
color: var(--wco-input-color-label);
|
|
84
85
|
font-family: var(--wco-input-font);
|
|
85
86
|
font-size: var(--wco-input-size);
|
|
@@ -89,6 +90,17 @@
|
|
|
89
90
|
transition: 100ms linear;
|
|
90
91
|
transform-origin: left top;
|
|
91
92
|
pointer-events: none;
|
|
93
|
+
&::before {
|
|
94
|
+
content: '';
|
|
95
|
+
position: absolute;
|
|
96
|
+
top: calc(50% - -2px);
|
|
97
|
+
z-index: -1;
|
|
98
|
+
left: 0;
|
|
99
|
+
transform: translateY(-50%);
|
|
100
|
+
width: 100%;
|
|
101
|
+
height: 4px;
|
|
102
|
+
background-color: var(--wco-input-color-bg);
|
|
103
|
+
}
|
|
92
104
|
}
|
|
93
105
|
|
|
94
106
|
//// States ////
|
|
@@ -101,6 +113,7 @@
|
|
|
101
113
|
--wco-input-color-placeholder: var(--wco-color-neutral-600);
|
|
102
114
|
--wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline);
|
|
103
115
|
}
|
|
116
|
+
|
|
104
117
|
/// Hover
|
|
105
118
|
&:hover {
|
|
106
119
|
--wco-input-color-label: var(--wco-color-neutral-700, #50555a);
|
|
@@ -108,7 +121,12 @@
|
|
|
108
121
|
}
|
|
109
122
|
|
|
110
123
|
/// Disabled
|
|
111
|
-
&:has(
|
|
124
|
+
&:has(
|
|
125
|
+
input:disabled,
|
|
126
|
+
textarea:disabled,
|
|
127
|
+
select:disabled,
|
|
128
|
+
.form-field__input.form-field--disabled), &.form-disabled
|
|
129
|
+
{
|
|
112
130
|
--wco-input-color-label: var(--wco-color-neutral-500, #C3C8CC);
|
|
113
131
|
--wco-input-color-outline: var(--wco-color-neutral-300, #C3C8CC);
|
|
114
132
|
--wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
|
|
@@ -120,9 +138,9 @@
|
|
|
120
138
|
/// View Only
|
|
121
139
|
&:has(
|
|
122
140
|
input:read-only:not(:disabled),
|
|
123
|
-
textarea:read-only:not(:disabled)
|
|
124
|
-
select:read-only:not(:disabled)
|
|
141
|
+
textarea:read-only:not(:disabled)
|
|
125
142
|
),
|
|
143
|
+
.form--readonly:not(.form-field--disabled),
|
|
126
144
|
.form-field--readonly:not(.form-field--disabled) {
|
|
127
145
|
--wco-input-color-label: var(--wco-color-neutral-600, #C3C8CC);
|
|
128
146
|
--wco-input-color-outline: var(--wco-color-neutral-500, #C3C8CC);
|
|
@@ -133,8 +151,11 @@
|
|
|
133
151
|
|
|
134
152
|
/// Error
|
|
135
153
|
&.form-field--error:not(:placeholder-shown) ~ label,
|
|
136
|
-
&.form
|
|
137
|
-
|
|
154
|
+
&.form--error:not(:placeholder-shown) ~ label,
|
|
155
|
+
&.form-field--error,
|
|
156
|
+
&:has(input:is(:placeholder-shown):invalid),
|
|
157
|
+
&:has(.form-field--error),
|
|
158
|
+
&.form--error {
|
|
138
159
|
--wco-input-color-label: var(--wco-color-danger-600, #e00707);
|
|
139
160
|
--wco-input-color-outline: var(--wco-color-danger-600, #e00707);
|
|
140
161
|
--wco-input-color-icon: var(--wco-color-danger-600, #e00707);
|
|
@@ -143,14 +164,18 @@
|
|
|
143
164
|
}
|
|
144
165
|
|
|
145
166
|
|
|
146
|
-
textarea~label
|
|
167
|
+
textarea ~ label,
|
|
168
|
+
&:has(textarea) label
|
|
169
|
+
{
|
|
147
170
|
top: 16px;
|
|
148
171
|
transform: translateY(0);
|
|
149
172
|
}
|
|
150
173
|
|
|
151
|
-
|
|
174
|
+
|
|
175
|
+
&:has(input:focus) label,
|
|
176
|
+
&:has(select) label,
|
|
177
|
+
&:has(textarea:focus) label,
|
|
152
178
|
textarea:focus+label,
|
|
153
|
-
input:focus+label,
|
|
154
179
|
.readonly+label
|
|
155
180
|
{
|
|
156
181
|
color: var(--wco-input-color-label);
|
|
@@ -158,9 +183,11 @@
|
|
|
158
183
|
transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
|
|
159
184
|
}
|
|
160
185
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
186
|
+
&:has(input:not(:placeholder-shown)) label,
|
|
187
|
+
&:has(select:not(:placeholder-shown)) label,
|
|
188
|
+
&:has(textarea:not(:placeholder-shown)) label,
|
|
189
|
+
textarea:not(:placeholder-shown)+ label,
|
|
190
|
+
input:not(:placeholder-shown)+ label,
|
|
164
191
|
.readonly+label
|
|
165
192
|
{
|
|
166
193
|
top: 0;
|
|
@@ -168,6 +195,7 @@
|
|
|
168
195
|
font-weight: 500;
|
|
169
196
|
}
|
|
170
197
|
|
|
198
|
+
|
|
171
199
|
textarea:not(:focus)::placeholder,
|
|
172
200
|
input:not(:focus)::placeholder {
|
|
173
201
|
opacity: 0;
|
|
@@ -175,24 +203,39 @@
|
|
|
175
203
|
|
|
176
204
|
|
|
177
205
|
/// Input com ícone no inicio
|
|
206
|
+
> i:first-child,
|
|
178
207
|
> span:first-child {
|
|
179
208
|
position: absolute;
|
|
180
209
|
top: 50%;
|
|
181
210
|
left: 12px;
|
|
182
211
|
transform: translateY(-50%);
|
|
183
212
|
color: var(--wco-input-color-icon);
|
|
213
|
+
width: fit-content;
|
|
184
214
|
}
|
|
215
|
+
|
|
216
|
+
&:has(input):has(i:first-child) label,
|
|
217
|
+
&:has(input):has(span:first-child) label,
|
|
185
218
|
> span ~ .form-field__input + label,
|
|
186
219
|
> span ~ .form-field__select + label {
|
|
187
220
|
margin-left: 44px;
|
|
188
221
|
}
|
|
222
|
+
&:has(input):has(i:first-child) input,
|
|
223
|
+
&:has(input):has(span:first-child) input,
|
|
189
224
|
> span ~ .form-field__select,
|
|
190
225
|
> span ~ .form-field__input {
|
|
191
226
|
padding-left: 44px;
|
|
192
227
|
}
|
|
193
228
|
|
|
229
|
+
&:has(input):has(i:last-child) input,
|
|
230
|
+
&:has(input):has(span:last-child) input {
|
|
231
|
+
padding-right: 44px;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
&:has(input):has(i:last-child) i,
|
|
235
|
+
&:has(input):has(span:last-child) span,
|
|
194
236
|
> .form-field__select + label + span,
|
|
195
237
|
> .form-field__input + label + span {
|
|
238
|
+
width: fit-content;
|
|
196
239
|
position: absolute;
|
|
197
240
|
top: 50%;
|
|
198
241
|
right: 12px;
|
|
@@ -206,32 +249,107 @@
|
|
|
206
249
|
}
|
|
207
250
|
}
|
|
208
251
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
252
|
+
|
|
253
|
+
//////////////
|
|
254
|
+
/// Tamanhos
|
|
255
|
+
//////////////
|
|
256
|
+
&.form--sm {
|
|
257
|
+
--wco-input-min-height: 32px;
|
|
258
|
+
}
|
|
259
|
+
&.form--md {
|
|
260
|
+
--wco-input-min-height: 40px;
|
|
261
|
+
}
|
|
262
|
+
&.form--lg {
|
|
263
|
+
--wco-input-min-height: 48px;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
///////////////////
|
|
267
|
+
/// Input text ////
|
|
268
|
+
///////////////////
|
|
269
|
+
&:has(input) {
|
|
270
|
+
input {
|
|
271
|
+
min-height: var(--wco-input-min-height);
|
|
272
|
+
padding-top: 0;
|
|
273
|
+
padding-bottom: 0;
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
///////////
|
|
278
|
+
/// Select
|
|
279
|
+
///////////
|
|
280
|
+
&:has(select) {
|
|
281
|
+
label {
|
|
282
|
+
z-index: 1;
|
|
213
283
|
}
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
284
|
+
|
|
285
|
+
select,
|
|
286
|
+
select.form-field__select {
|
|
287
|
+
appearance: none;
|
|
288
|
+
-webkit-appearance: none;
|
|
289
|
+
-moz-appearance: none;
|
|
290
|
+
padding-right: var(--wco-spacing-md, 40px);
|
|
291
|
+
min-height: var(--wco-input-min-height);
|
|
292
|
+
padding-top: 0;
|
|
293
|
+
padding-bottom: 0;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
&.form--readonly {
|
|
297
|
+
pointer-events: none;
|
|
298
|
+
&::after {
|
|
299
|
+
display: none;
|
|
300
|
+
}
|
|
301
|
+
}
|
|
302
|
+
&::after {
|
|
303
|
+
content: '';
|
|
304
|
+
position: absolute;
|
|
305
|
+
top: 50%;
|
|
306
|
+
right: 12px;
|
|
307
|
+
transform: translateY(-50%);
|
|
308
|
+
width: 30px;
|
|
309
|
+
height: 100%;
|
|
310
|
+
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41 8.58984L12 13.1698L16.59 8.58984L18 9.99984L12 15.9998L6 9.99984L7.41 8.58984Z' fill='var(--wco-color-primary-600, black)'/%3E%3C/svg%3E%0A");
|
|
311
|
+
background-size: 30px;
|
|
312
|
+
background-position: center;
|
|
313
|
+
background-repeat: no-repeat;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
}
|
|
317
|
+
// ícone sufixo
|
|
318
|
+
&:has(select + i) {
|
|
319
|
+
&:after {
|
|
320
|
+
display: none;
|
|
321
|
+
}
|
|
322
|
+
select + i {
|
|
323
|
+
position: absolute;
|
|
324
|
+
top: 50%;
|
|
325
|
+
right: var(--wco-spacing-nano, 8px);
|
|
326
|
+
transform: translateY(-50%);
|
|
327
|
+
width: 30px;
|
|
217
328
|
}
|
|
218
329
|
}
|
|
219
330
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
331
|
+
// ícone prefixo
|
|
332
|
+
&:has(i + label) {
|
|
333
|
+
select {
|
|
334
|
+
padding-left: var(--wco-spacing-md, 40px);
|
|
335
|
+
}
|
|
336
|
+
i {
|
|
337
|
+
position: absolute;
|
|
338
|
+
top: 50%;
|
|
339
|
+
left: var(--wco-spacing-nano, 8px);
|
|
340
|
+
transform: translateY(-50%);
|
|
341
|
+
width: 30px;
|
|
227
342
|
}
|
|
228
343
|
}
|
|
344
|
+
|
|
229
345
|
}
|
|
230
346
|
|
|
231
347
|
///////////
|
|
232
348
|
/// RADIO
|
|
233
349
|
///////////
|
|
234
|
-
label.form-radio, .form-radio
|
|
350
|
+
label.wco-form-radio, .wco-form-radio,
|
|
351
|
+
label.form-radio, .form-radio
|
|
352
|
+
{
|
|
235
353
|
--accent-color: var(--wco-color-primary-700);
|
|
236
354
|
--radio-size: 16px;
|
|
237
355
|
--radio-gap: 8px;
|
|
@@ -304,6 +422,7 @@ label.form-radio, .form-radio {
|
|
|
304
422
|
|
|
305
423
|
/// Checkbox
|
|
306
424
|
///////////
|
|
425
|
+
label.wco-form-check, .wco-form-check,
|
|
307
426
|
label.form-check, .form-check {
|
|
308
427
|
--wco-checkbox-default-color-label: var(--wco-color-neutral-900);
|
|
309
428
|
--wco-checkbox-default-color-iconunchecked: var(--wco-color-neutral-500);
|
|
@@ -322,8 +441,7 @@ label.form-check, .form-check {
|
|
|
322
441
|
--wco-checkbox-checkbox-size: 18px;
|
|
323
442
|
--wco-checkbox-checkbox-gap: 12px;
|
|
324
443
|
--wco-checkbox-checkbox-radius: 4px;
|
|
325
|
-
|
|
326
|
-
|
|
444
|
+
|
|
327
445
|
|
|
328
446
|
|
|
329
447
|
display: inline-flex;
|
|
@@ -331,6 +449,9 @@ label.form-check, .form-check {
|
|
|
331
449
|
align-items: center;
|
|
332
450
|
gap: var(--wco-checkbox-checkbox-gap);
|
|
333
451
|
|
|
452
|
+
&.form--readonly {
|
|
453
|
+
pointer-events: none;
|
|
454
|
+
}
|
|
334
455
|
|
|
335
456
|
|
|
336
457
|
|
|
@@ -451,6 +572,7 @@ label.form-check, .form-check {
|
|
|
451
572
|
input[type="checkbox"]:checked:disabled ~ .label {
|
|
452
573
|
color: var(--wco-checkbox-disabled-color-label);
|
|
453
574
|
}
|
|
575
|
+
&.form--error,
|
|
454
576
|
&.form-field--error {
|
|
455
577
|
--wco-checkbox-default-color-label: var(--wco-color-danger-900);
|
|
456
578
|
--wco-checkbox-default-color-iconunchecked: var(--wco-color-danger-600);
|