@entur/form 7.0.17 → 7.0.18

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/dist/styles.css CHANGED
@@ -162,6 +162,63 @@
162
162
  }
163
163
  /* DO NOT CHANGE!*/
164
164
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
165
+ .eds-feedback-text {
166
+ display: flex;
167
+ align-items: center;
168
+ margin-top: 0.25rem;
169
+ }
170
+ .eds-feedback-text--info {
171
+ padding-left: calc(1rem + 0.125rem);
172
+ }
173
+ .eds-feedback-text__text {
174
+ color: #181c56;
175
+ }
176
+ .eds-contrast .eds-feedback-text__text {
177
+ color: #ffffff;
178
+ }
179
+
180
+ .eds-feedback-text__icon {
181
+ font-size: 1.5rem;
182
+ min-height: 1.5rem;
183
+ min-width: 1.5rem;
184
+ padding-right: 0.5rem;
185
+ position: relative;
186
+ top: -0.1rem;
187
+ }
188
+ .eds-feedback-text__icon--success {
189
+ color: #1a8e60;
190
+ }
191
+ .eds-contrast .eds-feedback-text__icon--success {
192
+ color: #5ac39a;
193
+ }
194
+ .eds-feedback-text__icon--error {
195
+ color: #d31b1b;
196
+ }
197
+ .eds-contrast .eds-feedback-text__icon--error {
198
+ color: #ff9494;
199
+ }
200
+ .eds-feedback-text__icon--info {
201
+ color: #0082b9;
202
+ }
203
+ .eds-contrast .eds-feedback-text__icon--info {
204
+ color: #64b3e7;
205
+ }
206
+ .eds-feedback-text__icon--warning {
207
+ color: #ffca28;
208
+ }
209
+ .eds-feedback-text__icon--warning circle {
210
+ fill: #181c56;
211
+ }
212
+ .eds-contrast .eds-feedback-text__icon--warning {
213
+ color: #ffe082;
214
+ }
215
+ .eds-fieldset {
216
+ margin: 0;
217
+ padding: 0;
218
+ border: 0;
219
+ }
220
+ /* DO NOT CHANGE!*/
221
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
165
222
  .eds-form-control-wrapper {
166
223
  --border-color: #7C7F9F;
167
224
  --border-color-hover: #aeb7e2;
@@ -404,63 +461,6 @@
404
461
  }
405
462
  /* DO NOT CHANGE!*/
406
463
  /* 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
- .eds-fieldset {
458
- margin: 0;
459
- padding: 0;
460
- border: 0;
461
- }
462
- /* DO NOT CHANGE!*/
463
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
464
464
  .eds-switch {
465
465
  cursor: pointer;
466
466
  -webkit-user-select: none;
@@ -580,6 +580,171 @@
580
580
  }
581
581
  /* DO NOT CHANGE!*/
582
582
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
583
+ .eds-input-panel[focus-within] .eds-input-panel__container {
584
+ border-color: #181c56;
585
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
586
+ }
587
+ .eds-input-panel:focus-within .eds-input-panel__container {
588
+ border-color: #181c56;
589
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
590
+ }
591
+ .eds-contrast .eds-input-panel[focus-within] .eds-input-panel__container {
592
+ border-color: #ffffff;
593
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
594
+ }
595
+ .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
596
+ border-color: #ffffff;
597
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
598
+ }
599
+ .eds-input-panel > input {
600
+ position: absolute;
601
+ opacity: 0;
602
+ cursor: pointer;
603
+ height: 0;
604
+ width: 0;
605
+ }
606
+ .eds-input-panel > input:checked + .eds-input-panel__container {
607
+ border-color: #181c56;
608
+ background: #f5f5f8;
609
+ }
610
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
611
+ border-color: #aeb7e2;
612
+ background: #393d79;
613
+ }
614
+ .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
615
+ width: 0.75rem;
616
+ height: 0.75rem;
617
+ }
618
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
619
+ background-color: #ffffff;
620
+ }
621
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover {
622
+ background-color: #ebebf1;
623
+ border: 0.125rem solid #babbcf;
624
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
625
+ hover state styling with the inputPanel container */
626
+ }
627
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
628
+ background: #54568c;
629
+ }
630
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
631
+ background-color: #d1d4e3;
632
+ border-color: #292b6a;
633
+ }
634
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
635
+ background-color: rgba(174, 183, 226, 0.2);
636
+ border-color: #b6bee5;
637
+ }
638
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio .eds-form-component--radio__circle {
639
+ background-color: #292b6a;
640
+ }
641
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio .eds-form-component--radio__circle {
642
+ background-color: #ffffff;
643
+ }
644
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
645
+ background-color: #292b6a;
646
+ border-color: transparent;
647
+ }
648
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
649
+ background-color: #b6bee5;
650
+ }
651
+ .eds-input-panel__container {
652
+ background: #ffffff;
653
+ border: 0.125rem solid #babbcf;
654
+ border-radius: 0.25rem;
655
+ display: flex;
656
+ flex-direction: column;
657
+ justify-content: flex-start;
658
+ min-width: 20rem;
659
+ position: relative;
660
+ padding: 1rem;
661
+ -webkit-user-select: none;
662
+ -moz-user-select: none;
663
+ user-select: none;
664
+ width: -moz-fit-content;
665
+ width: fit-content;
666
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
667
+ }
668
+ .eds-contrast .eds-input-panel__container {
669
+ background-color: transparent;
670
+ border-color: #aeb7e2;
671
+ }
672
+ .eds-input-panel__container:hover {
673
+ background-color: #ebebf1;
674
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
675
+ hover state styling with the inputPanel container */
676
+ }
677
+ .eds-contrast .eds-input-panel__container:hover {
678
+ background-color: #54568c;
679
+ }
680
+ .eds-input-panel__container:hover .eds-checkbox__icon,
681
+ .eds-input-panel__container:hover .eds-form-component--radio__radio {
682
+ border-color: #292b6a;
683
+ background-color: #d1d4e3;
684
+ }
685
+ .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
686
+ .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
687
+ border-color: #b6bee5;
688
+ background-color: rgba(174, 183, 226, 0.2);
689
+ }
690
+ input:disabled + .eds-input-panel__container {
691
+ background: #f3f3f3;
692
+ border-color: #f3f3f3;
693
+ color: #656782;
694
+ pointer-events: none;
695
+ }
696
+ .eds-contrast input:disabled + .eds-input-panel__container {
697
+ background: #181c56;
698
+ border-style: dashed;
699
+ border-color: #54568c;
700
+ color: #babbcf;
701
+ }
702
+ .eds-input-panel__container .eds-checkbox__icon,
703
+ .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
704
+ .eds-input-panel__container .eds-form-component--radio__radio {
705
+ width: 1.5rem;
706
+ height: 1.5rem;
707
+ margin-right: 0;
708
+ }
709
+ .eds-input-panel--medium .eds-input-panel__title {
710
+ font-size: 1rem;
711
+ font-weight: 500;
712
+ }
713
+ .eds-input-panel--medium.eds-input-panel__container {
714
+ padding-bottom: 1rem;
715
+ min-height: 3.75rem;
716
+ }
717
+ .eds-input-panel--large.eds-input-panel__container {
718
+ min-height: 6rem;
719
+ }
720
+ .eds-input-panel--large .eds-input-panel__title-wrapper {
721
+ height: 2rem;
722
+ }
723
+ .eds-input-panel--large .eds-input-panel__title {
724
+ font-size: 1.25rem;
725
+ font-weight: 500;
726
+ line-height: 1.875rem;
727
+ }
728
+ .eds-input-panel__title-wrapper {
729
+ display: flex;
730
+ justify-content: space-between;
731
+ align-items: center;
732
+ }
733
+ .eds-input-panel__secondary-label-and-icon-wrapper {
734
+ display: flex;
735
+ justify-content: center;
736
+ align-items: center;
737
+ gap: 0.75rem;
738
+ }
739
+ .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
740
+ margin: 0;
741
+ }
742
+ .eds-input-panel__additional-content {
743
+ margin-top: 0.25rem;
744
+ word-wrap: break-word;
745
+ }
746
+ /* DO NOT CHANGE!*/
747
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
583
748
  .eds-input-group {
584
749
  color: inherit;
585
750
  display: block;
@@ -799,171 +964,6 @@
799
964
  }
800
965
  /* DO NOT CHANGE!*/
801
966
  /* 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-wrapper {
940
- height: 2rem;
941
- }
942
- .eds-input-panel--large .eds-input-panel__title {
943
- font-size: 1.25rem;
944
- font-weight: 500;
945
- line-height: 1.875rem;
946
- }
947
- .eds-input-panel__title-wrapper {
948
- display: flex;
949
- justify-content: space-between;
950
- align-items: center;
951
- }
952
- .eds-input-panel__secondary-label-and-icon-wrapper {
953
- display: flex;
954
- justify-content: center;
955
- align-items: center;
956
- gap: 0.75rem;
957
- }
958
- .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
959
- margin: 0;
960
- }
961
- .eds-input-panel__additional-content {
962
- margin-top: 0.25rem;
963
- word-wrap: break-word;
964
- }
965
- /* DO NOT CHANGE!*/
966
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
967
967
  textarea.eds-form-control.eds-textarea {
968
968
  min-height: 7.75rem;
969
969
  resize: vertical;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.0.17",
3
+ "version": "7.0.18",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -34,5 +34,5 @@
34
34
  "@entur/utils": "^0.9.5",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "9b8d4e5d2e6f7a74256371e30ebef43e046c9338"
37
+ "gitHead": "72e76df00ea0a7313bd2c55e23aa96ad1e291ef1"
38
38
  }