@entur/form 7.0.34-beta.0 → 7.0.34

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 (2) hide show
  1. package/dist/styles.css +245 -244
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -1,60 +1,3 @@
1
- .eds-fieldset {
2
- margin: 0;
3
- padding: 0;
4
- border: 0;
5
- }
6
- /* DO NOT CHANGE!*/
7
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
8
- .eds-feedback-text {
9
- display: flex;
10
- align-items: center;
11
- margin-top: 0.25rem;
12
- }
13
- .eds-feedback-text--info {
14
- padding-left: calc(1rem + 0.125rem);
15
- }
16
- .eds-feedback-text__text {
17
- color: #181c56;
18
- }
19
- .eds-contrast .eds-feedback-text__text {
20
- color: #ffffff;
21
- }
22
-
23
- .eds-feedback-text__icon {
24
- font-size: 1.5rem;
25
- min-height: 1.5rem;
26
- min-width: 1.5rem;
27
- padding-right: 0.5rem;
28
- position: relative;
29
- top: -0.1rem;
30
- }
31
- .eds-feedback-text__icon--success {
32
- color: #1a8e60;
33
- }
34
- .eds-contrast .eds-feedback-text__icon--success {
35
- color: #5ac39a;
36
- }
37
- .eds-feedback-text__icon--error {
38
- color: #d31b1b;
39
- }
40
- .eds-contrast .eds-feedback-text__icon--error {
41
- color: #ff9494;
42
- }
43
- .eds-feedback-text__icon--info {
44
- color: #0082b9;
45
- }
46
- .eds-contrast .eds-feedback-text__icon--info {
47
- color: #64b3e7;
48
- }
49
- .eds-feedback-text__icon--warning {
50
- color: #ffca28;
51
- }
52
- .eds-feedback-text__icon--warning circle {
53
- fill: #181c56;
54
- }
55
- .eds-contrast .eds-feedback-text__icon--warning {
56
- color: #ffe082;
57
- }
58
1
  /* DO NOT CHANGE!*/
59
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
60
3
  .eds-form-control-wrapper {
@@ -461,210 +404,55 @@
461
404
  }
462
405
  /* DO NOT CHANGE!*/
463
406
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
464
- .eds-form-component--radio__container {
407
+ .eds-feedback-text {
465
408
  display: flex;
466
- justify-content: center;
467
409
  align-items: center;
468
- position: relative;
469
- cursor: pointer;
470
- height: 2rem;
471
- width: -moz-fit-content;
472
- width: fit-content;
473
- -webkit-user-select: none;
474
- -moz-user-select: none;
475
- user-select: none;
476
- }
477
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
478
- border-color: #54568c;
479
- }
480
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
481
- background-color: #54568c;
482
- }
483
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
484
- border-color: #8285a8;
485
- }
486
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
487
- background-color: #8285a8;
488
- }
489
- .eds-form-component--radio__container input {
490
- position: absolute;
491
- opacity: 0;
492
- cursor: pointer;
493
- height: 0;
494
- width: 0;
410
+ margin-top: 0.25rem;
495
411
  }
496
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
497
- height: 0.625rem;
498
- width: 0.625rem;
412
+ .eds-feedback-text--info {
413
+ padding-left: calc(1rem + 0.125rem);
499
414
  }
500
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
501
- outline: none;
502
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
503
- outline-offset: 0.125rem;
415
+ .eds-feedback-text__text {
416
+ color: #181c56;
504
417
  }
505
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
506
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
418
+ .eds-contrast .eds-feedback-text__text {
419
+ color: #ffffff;
507
420
  }
508
- .eds-form-component--radio__container .eds-form-component--radio__radio {
421
+
422
+ .eds-feedback-text__icon {
423
+ font-size: 1.5rem;
424
+ min-height: 1.5rem;
425
+ min-width: 1.5rem;
426
+ padding-right: 0.5rem;
509
427
  position: relative;
510
- height: 1.25rem;
511
- width: 1.25rem;
512
- margin-right: 1rem;
513
- background-color: #ffffff;
514
- border: 0.125rem solid #181c56;
515
- border-radius: 50%;
516
- display: flex;
517
- align-items: center;
518
- justify-content: center;
519
- }
520
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
521
- background-color: #181c56;
522
- border-color: #aeb7e2;
523
- }
524
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
525
- background: #d1d3d3;
526
- border-color: #d1d3d3;
527
- cursor: not-allowed;
528
- }
529
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
530
- border-color: #d1d3d3;
531
- }
532
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
533
- background: #d1d3d3;
534
- border-color: #d1d3d3;
535
- }
536
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
537
- color: #656782;
538
- }
539
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
540
- display: block;
541
- width: 0;
542
- height: 0;
543
- border-radius: 50%;
544
- background-color: #181c56;
545
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
546
- }
547
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
548
- background-color: #aeb7e2;
549
- }
550
- /* DO NOT CHANGE!*/
551
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
552
- .eds-switch {
553
- cursor: pointer;
554
- -webkit-user-select: none;
555
- -moz-user-select: none;
556
- user-select: none;
557
- padding: 0.5rem 0;
558
- width: -moz-fit-content;
559
- width: fit-content;
560
- }
561
- .eds-switch input {
562
- opacity: 0;
563
- pointer-events: none;
564
- position: absolute;
565
- }
566
- .eds-switch--right {
567
- display: flex;
568
- flex-direction: row;
569
- align-items: center;
570
- }
571
- .eds-switch--bottom {
572
- display: flex;
573
- flex-direction: column;
574
- align-items: center;
428
+ top: -0.1rem;
575
429
  }
576
- .eds-switch__circle {
577
- border-radius: 50%;
578
- height: 1.25rem;
579
- width: 1.25rem;
580
- content: "";
581
- display: flex;
582
- align-items: center;
583
- justify-content: center;
584
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
585
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
586
- background-color: #ffffff;
587
- top: 0.125rem;
588
- left: 0.125rem;
589
- position: relative;
430
+ .eds-feedback-text__icon--success {
431
+ color: #1a8e60;
590
432
  }
591
- .eds-switch__switch--large .eds-switch__circle {
592
- height: 1.75rem;
593
- width: 1.75rem;
433
+ .eds-contrast .eds-feedback-text__icon--success {
434
+ color: #5ac39a;
594
435
  }
595
- .eds-contrast .eds-switch__circle {
596
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
436
+ .eds-feedback-text__icon--error {
437
+ color: #d31b1b;
597
438
  }
598
- .eds-switch__switch {
599
- position: relative;
600
- background-color: #949494;
601
- content: "";
602
- display: block;
603
- transition: background-color 0.1s ease-in-out;
604
- height: 1.5rem;
605
- width: 3rem;
606
- border-radius: 1.5rem;
607
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
439
+ .eds-contrast .eds-feedback-text__icon--error {
440
+ color: #ff9494;
608
441
  }
609
- .eds-contrast .eds-switch__switch {
610
- background-color: #8285a8;
442
+ .eds-feedback-text__icon--info {
443
+ color: #0082b9;
611
444
  }
612
- .eds-switch--right .eds-switch__switch {
613
- margin-right: 0.75rem;
445
+ .eds-contrast .eds-feedback-text__icon--info {
446
+ color: #64b3e7;
614
447
  }
615
- .eds-switch__switch svg g,
616
- .eds-switch__switch path {
617
- fill: #646464;
618
- transition: fill ease-in-out 0.1s;
448
+ .eds-feedback-text__icon--warning {
449
+ color: #ffca28;
619
450
  }
620
- .eds-contrast .eds-switch__switch svg g,
621
- .eds-contrast .eds-switch__switch path {
451
+ .eds-feedback-text__icon--warning circle {
622
452
  fill: #181c56;
623
453
  }
624
- :checked + .eds-switch__switch {
625
- background-color: var(--eds-switch-color);
626
- }
627
- :checked + .eds-switch__switch .eds-switch__circle {
628
- left: 1.625rem;
629
- }
630
- :checked + .eds-switch__switch .eds-switch__circle svg g,
631
- :checked + .eds-switch__switch .eds-switch__circle path {
632
- fill: var(--eds-switch-color);
633
- }
634
- .eds-contrast :checked + .eds-switch__switch {
635
- background-color: var(--eds-switch-contrast-color);
636
- }
637
- :focus + .eds-switch__switch {
638
- outline: none;
639
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
640
- outline-offset: 0.125rem;
641
- }
642
- .eds-contrast :focus + .eds-switch__switch {
643
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
644
- }
645
- .eds-switch__switch--large {
646
- width: 3.75rem;
647
- height: 2rem;
648
- border-radius: 3.75rem;
649
- }
650
- :checked + .eds-switch__switch--large .eds-switch__circle {
651
- left: 1.875rem;
652
- }
653
- .eds-switch__switch--large svg {
654
- position: relative;
655
- right: 0.05rem;
656
- }
657
- .eds-switch__label--large--right {
658
- font-size: 1rem;
659
- }
660
- .eds-switch__label--large--bottom {
661
- font-size: 0.875rem;
662
- }
663
- .eds-switch__label--medium--right {
664
- font-size: 0.875rem;
665
- }
666
- .eds-switch__label--medium--bottom {
667
- font-size: 0.75rem;
454
+ .eds-contrast .eds-feedback-text__icon--warning {
455
+ color: #ffe082;
668
456
  }
669
457
  /* DO NOT CHANGE!*/
670
458
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -719,6 +507,7 @@
719
507
  font-size: 1.5rem;
720
508
  line-height: 2.25rem;
721
509
  height: 4rem;
510
+ top: -0.25rem;
722
511
  }
723
512
  .eds-input-group__label--filled {
724
513
  top: 0.375rem;
@@ -797,6 +586,11 @@
797
586
  padding: 0;
798
587
  margin-left: 1rem;
799
588
  }
589
+ .eds-fieldset {
590
+ margin: 0;
591
+ padding: 0;
592
+ border: 0;
593
+ }
800
594
  /* DO NOT CHANGE!*/
801
595
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
802
596
  .eds-input-panel[focus-within] .eds-input-panel__container {
@@ -961,6 +755,213 @@ input:disabled + .eds-input-panel__container {
961
755
  }
962
756
  /* DO NOT CHANGE!*/
963
757
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
758
+ .eds-form-component--radio__container {
759
+ display: flex;
760
+ justify-content: center;
761
+ align-items: center;
762
+ position: relative;
763
+ cursor: pointer;
764
+ height: 2rem;
765
+ width: -moz-fit-content;
766
+ width: fit-content;
767
+ -webkit-user-select: none;
768
+ -moz-user-select: none;
769
+ user-select: none;
770
+ }
771
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
772
+ border-color: #54568c;
773
+ }
774
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
775
+ background-color: #54568c;
776
+ }
777
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
778
+ border-color: #8285a8;
779
+ }
780
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
781
+ background-color: #8285a8;
782
+ }
783
+ .eds-form-component--radio__container input {
784
+ position: absolute;
785
+ opacity: 0;
786
+ cursor: pointer;
787
+ height: 0;
788
+ width: 0;
789
+ }
790
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
791
+ height: 0.625rem;
792
+ width: 0.625rem;
793
+ }
794
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
795
+ outline: none;
796
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
797
+ outline-offset: 0.125rem;
798
+ }
799
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
800
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
801
+ }
802
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
803
+ position: relative;
804
+ height: 1.25rem;
805
+ width: 1.25rem;
806
+ margin-right: 1rem;
807
+ background-color: #ffffff;
808
+ border: 0.125rem solid #181c56;
809
+ border-radius: 50%;
810
+ display: flex;
811
+ align-items: center;
812
+ justify-content: center;
813
+ }
814
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
815
+ background-color: #181c56;
816
+ border-color: #aeb7e2;
817
+ }
818
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
819
+ background: #d1d3d3;
820
+ border-color: #d1d3d3;
821
+ cursor: not-allowed;
822
+ }
823
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
824
+ border-color: #d1d3d3;
825
+ }
826
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
827
+ background: #d1d3d3;
828
+ border-color: #d1d3d3;
829
+ }
830
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
831
+ color: #656782;
832
+ }
833
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
834
+ display: block;
835
+ width: 0;
836
+ height: 0;
837
+ border-radius: 50%;
838
+ background-color: #181c56;
839
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
840
+ }
841
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
842
+ background-color: #aeb7e2;
843
+ }
844
+ /* DO NOT CHANGE!*/
845
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
846
+ .eds-switch {
847
+ cursor: pointer;
848
+ -webkit-user-select: none;
849
+ -moz-user-select: none;
850
+ user-select: none;
851
+ padding: 0.5rem 0;
852
+ width: -moz-fit-content;
853
+ width: fit-content;
854
+ }
855
+ .eds-switch input {
856
+ opacity: 0;
857
+ pointer-events: none;
858
+ position: absolute;
859
+ }
860
+ .eds-switch--right {
861
+ display: flex;
862
+ flex-direction: row;
863
+ align-items: center;
864
+ }
865
+ .eds-switch--bottom {
866
+ display: flex;
867
+ flex-direction: column;
868
+ align-items: center;
869
+ }
870
+ .eds-switch__circle {
871
+ border-radius: 50%;
872
+ height: 1.25rem;
873
+ width: 1.25rem;
874
+ content: "";
875
+ display: flex;
876
+ align-items: center;
877
+ justify-content: center;
878
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
879
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
880
+ background-color: #ffffff;
881
+ top: 0.125rem;
882
+ left: 0.125rem;
883
+ position: relative;
884
+ }
885
+ .eds-switch__switch--large .eds-switch__circle {
886
+ height: 1.75rem;
887
+ width: 1.75rem;
888
+ }
889
+ .eds-contrast .eds-switch__circle {
890
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
891
+ }
892
+ .eds-switch__switch {
893
+ position: relative;
894
+ background-color: #949494;
895
+ content: "";
896
+ display: block;
897
+ transition: background-color 0.1s ease-in-out;
898
+ height: 1.5rem;
899
+ width: 3rem;
900
+ border-radius: 1.5rem;
901
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
902
+ }
903
+ .eds-contrast .eds-switch__switch {
904
+ background-color: #8285a8;
905
+ }
906
+ .eds-switch--right .eds-switch__switch {
907
+ margin-right: 0.75rem;
908
+ }
909
+ .eds-switch__switch svg g,
910
+ .eds-switch__switch path {
911
+ fill: #646464;
912
+ transition: fill ease-in-out 0.1s;
913
+ }
914
+ .eds-contrast .eds-switch__switch svg g,
915
+ .eds-contrast .eds-switch__switch path {
916
+ fill: #181c56;
917
+ }
918
+ :checked + .eds-switch__switch {
919
+ background-color: var(--eds-switch-color);
920
+ }
921
+ :checked + .eds-switch__switch .eds-switch__circle {
922
+ left: 1.625rem;
923
+ }
924
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
925
+ :checked + .eds-switch__switch .eds-switch__circle path {
926
+ fill: var(--eds-switch-color);
927
+ }
928
+ .eds-contrast :checked + .eds-switch__switch {
929
+ background-color: var(--eds-switch-contrast-color);
930
+ }
931
+ :focus + .eds-switch__switch {
932
+ outline: none;
933
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
934
+ outline-offset: 0.125rem;
935
+ }
936
+ .eds-contrast :focus + .eds-switch__switch {
937
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
938
+ }
939
+ .eds-switch__switch--large {
940
+ width: 3.75rem;
941
+ height: 2rem;
942
+ border-radius: 3.75rem;
943
+ }
944
+ :checked + .eds-switch__switch--large .eds-switch__circle {
945
+ left: 1.875rem;
946
+ }
947
+ .eds-switch__switch--large svg {
948
+ position: relative;
949
+ right: 0.05rem;
950
+ }
951
+ .eds-switch__label--large--right {
952
+ font-size: 1rem;
953
+ }
954
+ .eds-switch__label--large--bottom {
955
+ font-size: 0.875rem;
956
+ }
957
+ .eds-switch__label--medium--right {
958
+ font-size: 0.875rem;
959
+ }
960
+ .eds-switch__label--medium--bottom {
961
+ font-size: 0.75rem;
962
+ }
963
+ /* DO NOT CHANGE!*/
964
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
964
965
  textarea.eds-form-control.eds-textarea {
965
966
  min-height: 7.75rem;
966
967
  resize: vertical;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.0.34-beta.0",
3
+ "version": "7.0.34",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -29,10 +29,10 @@
29
29
  "dependencies": {
30
30
  "@entur/icons": "^6.13.2",
31
31
  "@entur/tokens": "^3.12.0",
32
- "@entur/tooltip": "^2.6.43-beta.0",
33
- "@entur/typography": "^1.8.21-beta.0",
34
- "@entur/utils": "^1.0.0-beta.0",
32
+ "@entur/tooltip": "^2.6.43",
33
+ "@entur/typography": "^1.8.21",
34
+ "@entur/utils": "^0.10.0",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "4e2a54a5b8402cf439cd91487f569e775bf53691"
37
+ "gitHead": "55899d49a6bab285199abb7c6709da8088e5a2e3"
38
38
  }