@entur/form 7.0.33 → 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 +231 -230
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -404,6 +404,58 @@
404
404
  }
405
405
  /* DO NOT CHANGE!*/
406
406
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
407
+ .eds-feedback-text {
408
+ display: flex;
409
+ align-items: center;
410
+ margin-top: 0.25rem;
411
+ }
412
+ .eds-feedback-text--info {
413
+ padding-left: calc(1rem + 0.125rem);
414
+ }
415
+ .eds-feedback-text__text {
416
+ color: #181c56;
417
+ }
418
+ .eds-contrast .eds-feedback-text__text {
419
+ color: #ffffff;
420
+ }
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;
427
+ position: relative;
428
+ top: -0.1rem;
429
+ }
430
+ .eds-feedback-text__icon--success {
431
+ color: #1a8e60;
432
+ }
433
+ .eds-contrast .eds-feedback-text__icon--success {
434
+ color: #5ac39a;
435
+ }
436
+ .eds-feedback-text__icon--error {
437
+ color: #d31b1b;
438
+ }
439
+ .eds-contrast .eds-feedback-text__icon--error {
440
+ color: #ff9494;
441
+ }
442
+ .eds-feedback-text__icon--info {
443
+ color: #0082b9;
444
+ }
445
+ .eds-contrast .eds-feedback-text__icon--info {
446
+ color: #64b3e7;
447
+ }
448
+ .eds-feedback-text__icon--warning {
449
+ color: #ffca28;
450
+ }
451
+ .eds-feedback-text__icon--warning circle {
452
+ fill: #181c56;
453
+ }
454
+ .eds-contrast .eds-feedback-text__icon--warning {
455
+ color: #ffe082;
456
+ }
457
+ /* DO NOT CHANGE!*/
458
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
407
459
  .eds-input-group {
408
460
  color: inherit;
409
461
  display: block;
@@ -455,6 +507,7 @@
455
507
  font-size: 1.5rem;
456
508
  line-height: 2.25rem;
457
509
  height: 4rem;
510
+ top: -0.25rem;
458
511
  }
459
512
  .eds-input-group__label--filled {
460
513
  top: 0.375rem;
@@ -533,6 +586,173 @@
533
586
  padding: 0;
534
587
  margin-left: 1rem;
535
588
  }
589
+ .eds-fieldset {
590
+ margin: 0;
591
+ padding: 0;
592
+ border: 0;
593
+ }
594
+ /* DO NOT CHANGE!*/
595
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
596
+ .eds-input-panel[focus-within] .eds-input-panel__container {
597
+ border-color: #181c56;
598
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
599
+ }
600
+ .eds-input-panel:focus-within .eds-input-panel__container {
601
+ border-color: #181c56;
602
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
603
+ }
604
+ .eds-contrast .eds-input-panel[focus-within] .eds-input-panel__container {
605
+ border-color: #ffffff;
606
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
607
+ }
608
+ .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
609
+ border-color: #ffffff;
610
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
611
+ }
612
+ .eds-input-panel > input {
613
+ position: absolute;
614
+ opacity: 0;
615
+ cursor: pointer;
616
+ height: 0;
617
+ width: 0;
618
+ }
619
+ .eds-input-panel > input:checked + .eds-input-panel__container {
620
+ border-color: #181c56;
621
+ background: #f5f5f8;
622
+ }
623
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
624
+ border-color: #aeb7e2;
625
+ background: #393d79;
626
+ }
627
+ .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
628
+ width: 0.75rem;
629
+ height: 0.75rem;
630
+ }
631
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
632
+ background-color: #ffffff;
633
+ }
634
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover {
635
+ background-color: #ebebf1;
636
+ border: 0.125rem solid #babbcf;
637
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
638
+ hover state styling with the inputPanel container */
639
+ }
640
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
641
+ background: #54568c;
642
+ }
643
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
644
+ background-color: #d1d4e3;
645
+ border-color: #292b6a;
646
+ }
647
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
648
+ background-color: rgba(174, 183, 226, 0.2);
649
+ border-color: #b6bee5;
650
+ }
651
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio .eds-form-component--radio__circle {
652
+ background-color: #292b6a;
653
+ }
654
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio .eds-form-component--radio__circle {
655
+ background-color: #ffffff;
656
+ }
657
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
658
+ background-color: #292b6a;
659
+ border-color: transparent;
660
+ }
661
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
662
+ background-color: #b6bee5;
663
+ }
664
+ .eds-input-panel__container {
665
+ background: #ffffff;
666
+ border: 0.125rem solid #babbcf;
667
+ border-radius: 0.25rem;
668
+ display: flex;
669
+ flex-direction: column;
670
+ justify-content: flex-start;
671
+ min-width: 20rem;
672
+ position: relative;
673
+ padding: 1rem;
674
+ -webkit-user-select: none;
675
+ -moz-user-select: none;
676
+ user-select: none;
677
+ width: -moz-fit-content;
678
+ width: fit-content;
679
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
680
+ }
681
+ .eds-contrast .eds-input-panel__container {
682
+ background-color: transparent;
683
+ border-color: #aeb7e2;
684
+ }
685
+ .eds-input-panel__container:hover {
686
+ background-color: #ebebf1;
687
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
688
+ hover state styling with the inputPanel container */
689
+ }
690
+ .eds-contrast .eds-input-panel__container:hover {
691
+ background-color: #54568c;
692
+ }
693
+ .eds-input-panel__container:hover .eds-checkbox__icon,
694
+ .eds-input-panel__container:hover .eds-form-component--radio__radio {
695
+ border-color: #292b6a;
696
+ background-color: #d1d4e3;
697
+ }
698
+ .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
699
+ .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
700
+ border-color: #b6bee5;
701
+ background-color: rgba(174, 183, 226, 0.2);
702
+ }
703
+ input:disabled + .eds-input-panel__container {
704
+ background: #f3f3f3;
705
+ border-color: #f3f3f3;
706
+ color: #656782;
707
+ pointer-events: none;
708
+ }
709
+ .eds-contrast input:disabled + .eds-input-panel__container {
710
+ background: #181c56;
711
+ border-style: dashed;
712
+ border-color: #54568c;
713
+ color: #babbcf;
714
+ }
715
+ .eds-input-panel__container .eds-checkbox__icon,
716
+ .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
717
+ .eds-input-panel__container .eds-form-component--radio__radio {
718
+ width: 1.5rem;
719
+ height: 1.5rem;
720
+ margin-right: 0;
721
+ }
722
+ .eds-input-panel--medium .eds-input-panel__title {
723
+ font-size: 1rem;
724
+ font-weight: 500;
725
+ }
726
+ .eds-input-panel--medium.eds-input-panel__container {
727
+ padding-bottom: 1rem;
728
+ min-height: 3.75rem;
729
+ }
730
+ .eds-input-panel--large.eds-input-panel__container {
731
+ min-height: 6rem;
732
+ }
733
+ .eds-input-panel--large .eds-input-panel__title {
734
+ font-size: 1.25rem;
735
+ font-weight: 500;
736
+ line-height: 1.875rem;
737
+ }
738
+ .eds-input-panel__title-wrapper {
739
+ display: flex;
740
+ justify-content: space-between;
741
+ align-items: center;
742
+ }
743
+ .eds-input-panel__secondary-label-and-icon-wrapper {
744
+ display: flex;
745
+ justify-content: center;
746
+ align-items: center;
747
+ gap: 0.75rem;
748
+ }
749
+ .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
750
+ margin: 0;
751
+ }
752
+ .eds-input-panel__additional-content {
753
+ margin-top: 0.25rem;
754
+ word-wrap: break-word;
755
+ }
536
756
  /* DO NOT CHANGE!*/
537
757
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
538
758
  .eds-form-component--radio__container {
@@ -623,58 +843,6 @@
623
843
  }
624
844
  /* DO NOT CHANGE!*/
625
845
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
626
- .eds-feedback-text {
627
- display: flex;
628
- align-items: center;
629
- margin-top: 0.25rem;
630
- }
631
- .eds-feedback-text--info {
632
- padding-left: calc(1rem + 0.125rem);
633
- }
634
- .eds-feedback-text__text {
635
- color: #181c56;
636
- }
637
- .eds-contrast .eds-feedback-text__text {
638
- color: #ffffff;
639
- }
640
-
641
- .eds-feedback-text__icon {
642
- font-size: 1.5rem;
643
- min-height: 1.5rem;
644
- min-width: 1.5rem;
645
- padding-right: 0.5rem;
646
- position: relative;
647
- top: -0.1rem;
648
- }
649
- .eds-feedback-text__icon--success {
650
- color: #1a8e60;
651
- }
652
- .eds-contrast .eds-feedback-text__icon--success {
653
- color: #5ac39a;
654
- }
655
- .eds-feedback-text__icon--error {
656
- color: #d31b1b;
657
- }
658
- .eds-contrast .eds-feedback-text__icon--error {
659
- color: #ff9494;
660
- }
661
- .eds-feedback-text__icon--info {
662
- color: #0082b9;
663
- }
664
- .eds-contrast .eds-feedback-text__icon--info {
665
- color: #64b3e7;
666
- }
667
- .eds-feedback-text__icon--warning {
668
- color: #ffca28;
669
- }
670
- .eds-feedback-text__icon--warning circle {
671
- fill: #181c56;
672
- }
673
- .eds-contrast .eds-feedback-text__icon--warning {
674
- color: #ffe082;
675
- }
676
- /* DO NOT CHANGE!*/
677
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
678
846
  .eds-switch {
679
847
  cursor: pointer;
680
848
  -webkit-user-select: none;
@@ -792,173 +960,6 @@
792
960
  .eds-switch__label--medium--bottom {
793
961
  font-size: 0.75rem;
794
962
  }
795
- .eds-fieldset {
796
- margin: 0;
797
- padding: 0;
798
- border: 0;
799
- }
800
- /* DO NOT CHANGE!*/
801
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
802
- .eds-input-panel[focus-within] .eds-input-panel__container {
803
- border-color: #181c56;
804
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
805
- }
806
- .eds-input-panel:focus-within .eds-input-panel__container {
807
- border-color: #181c56;
808
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
809
- }
810
- .eds-contrast .eds-input-panel[focus-within] .eds-input-panel__container {
811
- border-color: #ffffff;
812
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
813
- }
814
- .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
815
- border-color: #ffffff;
816
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
817
- }
818
- .eds-input-panel > input {
819
- position: absolute;
820
- opacity: 0;
821
- cursor: pointer;
822
- height: 0;
823
- width: 0;
824
- }
825
- .eds-input-panel > input:checked + .eds-input-panel__container {
826
- border-color: #181c56;
827
- background: #f5f5f8;
828
- }
829
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
830
- border-color: #aeb7e2;
831
- background: #393d79;
832
- }
833
- .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
834
- width: 0.75rem;
835
- height: 0.75rem;
836
- }
837
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
838
- background-color: #ffffff;
839
- }
840
- .eds-input-panel > input:checked + .eds-input-panel__container:hover {
841
- background-color: #ebebf1;
842
- border: 0.125rem solid #babbcf;
843
- /* The following styling is needed to sync the inner checkbox/radiobutton's
844
- hover state styling with the inputPanel container */
845
- }
846
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
847
- background: #54568c;
848
- }
849
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
850
- background-color: #d1d4e3;
851
- border-color: #292b6a;
852
- }
853
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
854
- background-color: rgba(174, 183, 226, 0.2);
855
- border-color: #b6bee5;
856
- }
857
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio .eds-form-component--radio__circle {
858
- background-color: #292b6a;
859
- }
860
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio .eds-form-component--radio__circle {
861
- background-color: #ffffff;
862
- }
863
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
864
- background-color: #292b6a;
865
- border-color: transparent;
866
- }
867
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
868
- background-color: #b6bee5;
869
- }
870
- .eds-input-panel__container {
871
- background: #ffffff;
872
- border: 0.125rem solid #babbcf;
873
- border-radius: 0.25rem;
874
- display: flex;
875
- flex-direction: column;
876
- justify-content: flex-start;
877
- min-width: 20rem;
878
- position: relative;
879
- padding: 1rem;
880
- -webkit-user-select: none;
881
- -moz-user-select: none;
882
- user-select: none;
883
- width: -moz-fit-content;
884
- width: fit-content;
885
- transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
886
- }
887
- .eds-contrast .eds-input-panel__container {
888
- background-color: transparent;
889
- border-color: #aeb7e2;
890
- }
891
- .eds-input-panel__container:hover {
892
- background-color: #ebebf1;
893
- /* The following styling is needed to sync the inner checkbox/radiobutton's
894
- hover state styling with the inputPanel container */
895
- }
896
- .eds-contrast .eds-input-panel__container:hover {
897
- background-color: #54568c;
898
- }
899
- .eds-input-panel__container:hover .eds-checkbox__icon,
900
- .eds-input-panel__container:hover .eds-form-component--radio__radio {
901
- border-color: #292b6a;
902
- background-color: #d1d4e3;
903
- }
904
- .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
905
- .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
906
- border-color: #b6bee5;
907
- background-color: rgba(174, 183, 226, 0.2);
908
- }
909
- input:disabled + .eds-input-panel__container {
910
- background: #f3f3f3;
911
- border-color: #f3f3f3;
912
- color: #656782;
913
- pointer-events: none;
914
- }
915
- .eds-contrast input:disabled + .eds-input-panel__container {
916
- background: #181c56;
917
- border-style: dashed;
918
- border-color: #54568c;
919
- color: #babbcf;
920
- }
921
- .eds-input-panel__container .eds-checkbox__icon,
922
- .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
923
- .eds-input-panel__container .eds-form-component--radio__radio {
924
- width: 1.5rem;
925
- height: 1.5rem;
926
- margin-right: 0;
927
- }
928
- .eds-input-panel--medium .eds-input-panel__title {
929
- font-size: 1rem;
930
- font-weight: 500;
931
- }
932
- .eds-input-panel--medium.eds-input-panel__container {
933
- padding-bottom: 1rem;
934
- min-height: 3.75rem;
935
- }
936
- .eds-input-panel--large.eds-input-panel__container {
937
- min-height: 6rem;
938
- }
939
- .eds-input-panel--large .eds-input-panel__title {
940
- font-size: 1.25rem;
941
- font-weight: 500;
942
- line-height: 1.875rem;
943
- }
944
- .eds-input-panel__title-wrapper {
945
- display: flex;
946
- justify-content: space-between;
947
- align-items: center;
948
- }
949
- .eds-input-panel__secondary-label-and-icon-wrapper {
950
- display: flex;
951
- justify-content: center;
952
- align-items: center;
953
- gap: 0.75rem;
954
- }
955
- .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
956
- margin: 0;
957
- }
958
- .eds-input-panel__additional-content {
959
- margin-top: 0.25rem;
960
- word-wrap: break-word;
961
- }
962
963
  /* DO NOT CHANGE!*/
963
964
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
964
965
  textarea.eds-form-control.eds-textarea {
@@ -1005,6 +1006,17 @@ textarea.eds-form-control.eds-textarea {
1005
1006
  }
1006
1007
  /* DO NOT CHANGE!*/
1007
1008
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1009
+ .eds-segmented-control {
1010
+ margin-top: 0.25rem;
1011
+ display: flex;
1012
+ background: #d1d4e3;
1013
+ border-radius: 0.5rem;
1014
+ }
1015
+ .eds-contrast .eds-segmented-control {
1016
+ background: #393d79;
1017
+ }
1018
+ /* DO NOT CHANGE!*/
1019
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1008
1020
  .eds-segmented-choice {
1009
1021
  display: block;
1010
1022
  flex: 1 1 0px;
@@ -1074,17 +1086,6 @@ textarea.eds-form-control.eds-textarea {
1074
1086
  .eds-contrast .eds-segmented-choice input:focus:checked + .eds-base-segmented {
1075
1087
  box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121), inset 0 0 0 0.0625rem #ffffff, inset 0 0 0 calc(0.125rem + 0.0625rem) #181c56;
1076
1088
  }
1077
- /* DO NOT CHANGE!*/
1078
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1079
- .eds-segmented-control {
1080
- margin-top: 0.25rem;
1081
- display: flex;
1082
- background: #d1d4e3;
1083
- border-radius: 0.5rem;
1084
- }
1085
- .eds-contrast .eds-segmented-control {
1086
- background: #393d79;
1087
- }
1088
1089
  :root {
1089
1090
  --eds-form: 1;
1090
1091
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.0.33",
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.42",
33
- "@entur/typography": "^1.8.20",
34
- "@entur/utils": "^0.9.5",
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": "05cb986bc4373b1fe20d51c298c4395dd2500843"
37
+ "gitHead": "55899d49a6bab285199abb7c6709da8088e5a2e3"
38
38
  }