@entur/form 5.3.3 → 5.3.6

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
@@ -2,6 +2,15 @@
2
2
  --eds-form: 1;
3
3
  }/* DO NOT CHANGE!*/
4
4
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
+ .eds-fieldset {
6
+ margin: 0;
7
+ padding: 0;
8
+ border: 0;
9
+ }
10
+ .eds-fieldset .eds-legend {
11
+ margin: 0 0 0.5rem;
12
+ }/* DO NOT CHANGE!*/
13
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
14
  .eds-form-control-wrapper {
6
15
  --border-color: #181c56;
7
16
  --border-color-hover: #aeb7e2;
@@ -258,63 +267,6 @@
258
267
  margin-left: 0;
259
268
  }/* DO NOT CHANGE!*/
260
269
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
261
- .eds-fieldset {
262
- margin: 0;
263
- padding: 0;
264
- border: 0;
265
- }
266
- .eds-fieldset .eds-legend {
267
- margin: 0 0 0.5rem;
268
- }/* DO NOT CHANGE!*/
269
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
270
- .eds-feedback-text {
271
- display: flex;
272
- align-items: center;
273
- margin-top: 0.25rem;
274
- }
275
- .eds-feedback-text--info {
276
- padding-left: calc(1rem + 0.125rem);
277
- }
278
- .eds-feedback-text__text {
279
- color: #181c56;
280
- }
281
- .eds-contrast .eds-feedback-text__text {
282
- color: #ffffff;
283
- }
284
-
285
- .eds-feedback-text__icon {
286
- font-size: 1.5rem;
287
- min-height: 1.5rem;
288
- min-width: 1.5rem;
289
- padding-right: 0.5rem;
290
- position: relative;
291
- top: -0.1rem;
292
- }
293
- .eds-feedback-text__icon--success {
294
- color: #1a8e60;
295
- }
296
- .eds-contrast .eds-feedback-text__icon--success {
297
- color: #5ac39a;
298
- }
299
- .eds-feedback-text__icon--error {
300
- color: #d31b1b;
301
- }
302
- .eds-contrast .eds-feedback-text__icon--error {
303
- color: #ff9494;
304
- }
305
- .eds-feedback-text__icon--info {
306
- color: #0082b9;
307
- }
308
- .eds-contrast .eds-feedback-text__icon--info {
309
- color: #64b3e7;
310
- }
311
- .eds-feedback-text__icon--warning {
312
- color: #0082b9;
313
- }
314
- .eds-contrast .eds-feedback-text__icon--warning {
315
- color: #64b3e7;
316
- }/* DO NOT CHANGE!*/
317
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
318
270
  .eds-checkbox__container {
319
271
  display: flex;
320
272
  align-items: center;
@@ -453,132 +405,6 @@
453
405
  }
454
406
  }/* DO NOT CHANGE!*/
455
407
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
456
- .eds-input-group {
457
- color: inherit;
458
- display: block;
459
- position: relative;
460
- }
461
- .eds-input-group__label {
462
- color: #656782;
463
- display: flex;
464
- font-size: 1rem;
465
- position: absolute;
466
- line-height: 1rem;
467
- height: 3rem;
468
- padding: 1rem;
469
- padding-left: 0;
470
- margin-left: 1rem;
471
- top: -0.125rem;
472
- transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
473
- -webkit-user-select: none;
474
- -moz-user-select: none;
475
- -ms-user-select: none;
476
- user-select: none;
477
- pointer-events: none;
478
- }
479
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
480
- top: calc(0.5rem - 0.125rem);
481
- font-size: 0.75rem;
482
- line-height: 0.75rem;
483
- height: 10px;
484
- padding: 0;
485
- margin-left: 1rem;
486
- }
487
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
488
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
489
- background: var(--textarea-label-background);
490
- width: calc( 100% - 1rem - 1rem - 4px );
491
- }
492
- .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
493
- top: 0.5rem;
494
- font-size: 0.875rem;
495
- line-height: 1rem;
496
- padding: 0;
497
- margin-left: 1rem;
498
- }
499
- .eds-contrast .eds-input-group__label {
500
- color: #8285a8;
501
- }
502
- .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
503
- color: #aeb7e2;
504
- }
505
- .eds-form-control-wrapper--size-large .eds-input-group__label {
506
- font-size: 1.5rem;
507
- line-height: 2.25rem;
508
- height: 4rem;
509
- }
510
- .eds-input-group__label--filled {
511
- top: calc(0.5rem - 0.125rem);
512
- font-size: 0.75rem;
513
- line-height: 0.75rem;
514
- height: 10px;
515
- padding: 0;
516
- margin-left: 1rem;
517
- }
518
- .eds-textarea__label .eds-input-group__label--filled {
519
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
520
- background: var(--textarea-label-background);
521
- width: calc( 100% - 1rem - 1rem - 4px );
522
- }
523
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
524
- top: 0.5rem;
525
- font-size: 0.875rem;
526
- line-height: 1rem;
527
- padding: 0;
528
- margin-left: 1rem;
529
- }
530
- .eds-input-group__label-tooltip-icon {
531
- color: #0082b9;
532
- padding-left: 0.25rem;
533
- padding-right: 0.25rem;
534
- display: flex;
535
- align-items: center;
536
- cursor: help;
537
- font-size: 1rem;
538
- }
539
-
540
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
541
- top: calc(0.5rem - 0.125rem);
542
- font-size: 0.75rem;
543
- line-height: 0.75rem;
544
- height: 10px;
545
- padding: 0;
546
- margin-left: 1rem;
547
- }
548
-
549
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
550
- top: calc(0.5rem - 0.125rem);
551
- font-size: 0.75rem;
552
- line-height: 0.75rem;
553
- height: 10px;
554
- padding: 0;
555
- margin-left: 1rem;
556
- }
557
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
558
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
559
- background: var(--textarea-label-background);
560
- width: calc( 100% - 1rem - 1rem - 4px );
561
- }
562
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
563
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
564
- background: var(--textarea-label-background);
565
- width: calc( 100% - 1rem - 1rem - 4px );
566
- }
567
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
568
- top: 0.5rem;
569
- font-size: 0.875rem;
570
- line-height: 1rem;
571
- padding: 0;
572
- margin-left: 1rem;
573
- }
574
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
575
- top: 0.5rem;
576
- font-size: 0.875rem;
577
- line-height: 1rem;
578
- padding: 0;
579
- margin-left: 1rem;
580
- }/* DO NOT CHANGE!*/
581
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
582
408
  textarea.eds-form-control.eds-textarea {
583
409
  min-height: 7.75rem;
584
410
  resize: vertical;
@@ -621,6 +447,61 @@ textarea.eds-form-control.eds-textarea {
621
447
  background-color: #8285a8;
622
448
  }/* DO NOT CHANGE!*/
623
449
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
450
+ .eds-feedback-text {
451
+ display: flex;
452
+ align-items: center;
453
+ margin-top: 0.25rem;
454
+ }
455
+ .eds-feedback-text--info {
456
+ padding-left: calc(1rem + 0.125rem);
457
+ }
458
+ .eds-feedback-text__text {
459
+ color: #181c56;
460
+ }
461
+ .eds-contrast .eds-feedback-text__text {
462
+ color: #ffffff;
463
+ }
464
+
465
+ .eds-feedback-text__icon {
466
+ font-size: 1.5rem;
467
+ min-height: 1.5rem;
468
+ min-width: 1.5rem;
469
+ padding-right: 0.5rem;
470
+ position: relative;
471
+ top: -0.1rem;
472
+ }
473
+ .eds-feedback-text__icon--success {
474
+ color: #1a8e60;
475
+ }
476
+ .eds-contrast .eds-feedback-text__icon--success {
477
+ color: #5ac39a;
478
+ }
479
+ .eds-feedback-text__icon--error {
480
+ color: #d31b1b;
481
+ }
482
+ .eds-contrast .eds-feedback-text__icon--error {
483
+ color: #ff9494;
484
+ }
485
+ .eds-feedback-text__icon--info {
486
+ color: #0082b9;
487
+ }
488
+ .eds-contrast .eds-feedback-text__icon--info {
489
+ color: #64b3e7;
490
+ }
491
+ .eds-feedback-text__icon--warning.eds-icon__ValidationExclamationIcon {
492
+ color: #ffca28;
493
+ }
494
+ .eds-feedback-text__icon--warning.eds-icon__ValidationExclamationIcon circle {
495
+ color: #181c56;
496
+ fill-opacity: 1;
497
+ }
498
+ .eds-contrast .eds-feedback-text__icon--warning.eds-icon__ValidationExclamationIcon {
499
+ color: #ffe082;
500
+ }
501
+ .eds-contrast .eds-feedback-text__icon--warning.eds-icon__ValidationExclamationIcon circle {
502
+ fill-opacity: 0;
503
+ }/* DO NOT CHANGE!*/
504
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
624
505
  .eds-form-component--radio__container {
625
506
  display: flex;
626
507
  justify-content: center;
@@ -964,6 +845,142 @@ textarea.eds-form-control.eds-textarea {
964
845
  stroke-width: 0.375rem;
965
846
  }/* DO NOT CHANGE!*/
966
847
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
848
+ .eds-input-group {
849
+ color: inherit;
850
+ display: block;
851
+ position: relative;
852
+ }
853
+ .eds-input-group__label {
854
+ color: #656782;
855
+ display: flex;
856
+ font-size: 1rem;
857
+ position: absolute;
858
+ line-height: 1rem;
859
+ height: 3rem;
860
+ padding: 1rem;
861
+ padding-left: 0;
862
+ margin-left: 1rem;
863
+ top: -0.125rem;
864
+ transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
865
+ -webkit-user-select: none;
866
+ -moz-user-select: none;
867
+ -ms-user-select: none;
868
+ user-select: none;
869
+ pointer-events: none;
870
+ }
871
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
872
+ top: calc(0.5rem - 0.125rem);
873
+ font-size: 0.75rem;
874
+ line-height: 0.75rem;
875
+ height: 10px;
876
+ padding: 0;
877
+ margin-left: 1rem;
878
+ }
879
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
880
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
881
+ background: var(--textarea-label-background);
882
+ width: calc( 100% - 1rem - 1rem - 4px );
883
+ }
884
+ .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
885
+ top: 0.5rem;
886
+ font-size: 0.875rem;
887
+ line-height: 1rem;
888
+ padding: 0;
889
+ margin-left: 1rem;
890
+ }
891
+ .eds-contrast .eds-input-group__label {
892
+ color: #8285a8;
893
+ }
894
+ .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
895
+ color: #aeb7e2;
896
+ }
897
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
898
+ font-size: 1.5rem;
899
+ line-height: 2.25rem;
900
+ height: 4rem;
901
+ }
902
+ .eds-input-group__label--filled {
903
+ top: calc(0.5rem - 0.125rem);
904
+ font-size: 0.75rem;
905
+ line-height: 0.75rem;
906
+ height: 10px;
907
+ padding: 0;
908
+ margin-left: 1rem;
909
+ }
910
+ .eds-textarea__label .eds-input-group__label--filled {
911
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
912
+ background: var(--textarea-label-background);
913
+ width: calc( 100% - 1rem - 1rem - 4px );
914
+ }
915
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
916
+ top: 0.5rem;
917
+ font-size: 0.875rem;
918
+ line-height: 1rem;
919
+ padding: 0;
920
+ margin-left: 1rem;
921
+ }
922
+ .eds-input-group__label-tooltip-icon {
923
+ color: #0082b9;
924
+ padding-left: 0.25rem;
925
+ padding-right: 0.25rem;
926
+ display: flex;
927
+ align-items: center;
928
+ cursor: help;
929
+ font-size: 1rem;
930
+ }
931
+
932
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
933
+ top: calc(0.5rem - 0.125rem);
934
+ font-size: 0.75rem;
935
+ line-height: 0.75rem;
936
+ height: 10px;
937
+ padding: 0;
938
+ margin-left: 1rem;
939
+ }
940
+
941
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
942
+ top: calc(0.5rem - 0.125rem);
943
+ font-size: 0.75rem;
944
+ line-height: 0.75rem;
945
+ height: 10px;
946
+ padding: 0;
947
+ margin-left: 1rem;
948
+ }
949
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
950
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
951
+ background: var(--textarea-label-background);
952
+ width: calc( 100% - 1rem - 1rem - 4px );
953
+ }
954
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
955
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
956
+ background: var(--textarea-label-background);
957
+ width: calc( 100% - 1rem - 1rem - 4px );
958
+ }
959
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
960
+ top: 0.5rem;
961
+ font-size: 0.875rem;
962
+ line-height: 1rem;
963
+ padding: 0;
964
+ margin-left: 1rem;
965
+ }
966
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
967
+ top: 0.5rem;
968
+ font-size: 0.875rem;
969
+ line-height: 1rem;
970
+ padding: 0;
971
+ margin-left: 1rem;
972
+ }/* DO NOT CHANGE!*/
973
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
974
+ .eds-segmented-control {
975
+ margin-top: 0.25rem;
976
+ display: flex;
977
+ background: #d1d4e3;
978
+ border-radius: 0.25rem;
979
+ }
980
+ .eds-contrast .eds-segmented-control {
981
+ background: #393d79;
982
+ }/* DO NOT CHANGE!*/
983
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
967
984
  .eds-segmented-choice {
968
985
  display: block;
969
986
  flex: 1 1 0px;
@@ -1031,14 +1048,4 @@ textarea.eds-form-control.eds-textarea {
1031
1048
  }
1032
1049
  .eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1033
1050
  --background-color: #d1d4e3;
1034
- }/* DO NOT CHANGE!*/
1035
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1036
- .eds-segmented-control {
1037
- margin-top: 0.25rem;
1038
- display: flex;
1039
- background: #d1d4e3;
1040
- border-radius: 0.25rem;
1041
- }
1042
- .eds-contrast .eds-segmented-control {
1043
- background: #393d79;
1044
1051
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "5.3.3",
3
+ "version": "5.3.6",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -27,12 +27,12 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/icons": "^4.1.1",
30
+ "@entur/icons": "^4.1.2",
31
31
  "@entur/tokens": "^3.3.2",
32
- "@entur/tooltip": "^2.5.6",
33
- "@entur/typography": "^1.6.12",
32
+ "@entur/tooltip": "^2.5.9",
33
+ "@entur/typography": "^1.6.14",
34
34
  "@entur/utils": "^0.4.3",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "7b557782d62c07bdce744f9b084d57177e2202e9"
37
+ "gitHead": "02c1bc4caad8480d21d8560188ba21b972e3370e"
38
38
  }