@entur/form 7.0.26 → 7.0.27-alpha.0

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 +263 -263
  2. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -1,57 +1,5 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-feedback-text {
4
- display: flex;
5
- align-items: center;
6
- margin-top: 0.25rem;
7
- }
8
- .eds-feedback-text--info {
9
- padding-left: calc(1rem + 0.125rem);
10
- }
11
- .eds-feedback-text__text {
12
- color: #181c56;
13
- }
14
- .eds-contrast .eds-feedback-text__text {
15
- color: #ffffff;
16
- }
17
-
18
- .eds-feedback-text__icon {
19
- font-size: 1.5rem;
20
- min-height: 1.5rem;
21
- min-width: 1.5rem;
22
- padding-right: 0.5rem;
23
- position: relative;
24
- top: -0.1rem;
25
- }
26
- .eds-feedback-text__icon--success {
27
- color: #1a8e60;
28
- }
29
- .eds-contrast .eds-feedback-text__icon--success {
30
- color: #5ac39a;
31
- }
32
- .eds-feedback-text__icon--error {
33
- color: #d31b1b;
34
- }
35
- .eds-contrast .eds-feedback-text__icon--error {
36
- color: #ff9494;
37
- }
38
- .eds-feedback-text__icon--info {
39
- color: #0082b9;
40
- }
41
- .eds-contrast .eds-feedback-text__icon--info {
42
- color: #64b3e7;
43
- }
44
- .eds-feedback-text__icon--warning {
45
- color: #ffca28;
46
- }
47
- .eds-feedback-text__icon--warning circle {
48
- fill: #181c56;
49
- }
50
- .eds-contrast .eds-feedback-text__icon--warning {
51
- color: #ffe082;
52
- }
53
- /* DO NOT CHANGE!*/
54
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
55
3
  .eds-form-control-wrapper {
56
4
  --border-color: #7C7F9F;
57
5
  --border-color-hover: #aeb7e2;
@@ -292,141 +240,62 @@
292
240
  .eds-form-control__append {
293
241
  margin-left: 0;
294
242
  }
295
- .eds-fieldset {
296
- margin: 0;
297
- padding: 0;
298
- border: 0;
299
- }
300
243
  /* DO NOT CHANGE!*/
301
244
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
302
- .eds-input-group {
303
- color: inherit;
304
- display: block;
305
- position: relative;
306
- }
307
- .eds-input-group__label {
308
- color: #656782;
245
+ .eds-feedback-text {
309
246
  display: flex;
310
- font-size: 1rem;
311
- position: absolute;
312
- line-height: 1rem;
313
- height: 3rem;
314
- padding: 1rem;
315
- padding-left: 0;
316
- margin-left: 1rem;
317
- top: -0.125rem;
318
- 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;
319
- -webkit-user-select: none;
320
- -moz-user-select: none;
321
- user-select: none;
322
- pointer-events: none;
323
- }
324
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
325
- top: 0.375rem;
326
- font-size: 0.75rem;
327
- line-height: 0.75rem;
328
- height: 10px;
329
- padding: 0;
330
- margin-left: 1rem;
247
+ align-items: center;
248
+ margin-top: 0.25rem;
331
249
  }
332
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
333
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
334
- background: var(--textarea-label-background);
335
- width: calc(
336
- 100% - 1rem - 1rem - 4px
337
- );
250
+ .eds-feedback-text--info {
251
+ padding-left: calc(1rem + 0.125rem);
338
252
  }
339
- .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
340
- top: 0.5rem;
341
- font-size: 0.875rem;
342
- line-height: 1rem;
343
- padding: 0;
344
- margin-left: 1rem;
253
+ .eds-feedback-text__text {
254
+ color: #181c56;
345
255
  }
346
- .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
347
- color: #aeb7e2;
256
+ .eds-contrast .eds-feedback-text__text {
257
+ color: #ffffff;
348
258
  }
349
- .eds-form-control-wrapper--size-large .eds-input-group__label {
259
+
260
+ .eds-feedback-text__icon {
350
261
  font-size: 1.5rem;
351
- line-height: 2.25rem;
352
- height: 4rem;
262
+ min-height: 1.5rem;
263
+ min-width: 1.5rem;
264
+ padding-right: 0.5rem;
265
+ position: relative;
266
+ top: -0.1rem;
353
267
  }
354
- .eds-input-group__label--filled {
355
- top: 0.375rem;
356
- font-size: 0.75rem;
357
- line-height: 0.75rem;
358
- height: 10px;
359
- padding: 0;
360
- margin-left: 1rem;
268
+ .eds-feedback-text__icon--success {
269
+ color: #1a8e60;
361
270
  }
362
- .eds-textarea__label .eds-input-group__label--filled {
363
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
364
- background: var(--textarea-label-background);
365
- width: calc(
366
- 100% - 1rem - 1rem - 4px
367
- );
271
+ .eds-contrast .eds-feedback-text__icon--success {
272
+ color: #5ac39a;
368
273
  }
369
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
370
- top: 0.5rem;
371
- font-size: 0.875rem;
372
- line-height: 1rem;
373
- padding: 0;
374
- margin-left: 1rem;
274
+ .eds-feedback-text__icon--error {
275
+ color: #d31b1b;
375
276
  }
376
- .eds-input-group__label-tooltip-icon {
377
- color: #0082b9;
378
- padding-left: 0.25rem;
379
- padding-right: 0.25rem;
380
- display: flex;
381
- align-items: center;
382
- cursor: help;
383
- font-size: 1rem;
277
+ .eds-contrast .eds-feedback-text__icon--error {
278
+ color: #ff9494;
384
279
  }
385
-
386
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
387
- top: 0.375rem;
388
- font-size: 0.75rem;
389
- line-height: 0.75rem;
390
- height: 10px;
391
- padding: 0;
392
- margin-left: 1rem;
280
+ .eds-feedback-text__icon--info {
281
+ color: #0082b9;
393
282
  }
394
-
395
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
396
- top: 0.375rem;
397
- font-size: 0.75rem;
398
- line-height: 0.75rem;
399
- height: 10px;
400
- padding: 0;
401
- margin-left: 1rem;
283
+ .eds-contrast .eds-feedback-text__icon--info {
284
+ color: #64b3e7;
402
285
  }
403
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
404
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
405
- background: var(--textarea-label-background);
406
- width: calc(
407
- 100% - 1rem - 1rem - 4px
408
- );
286
+ .eds-feedback-text__icon--warning {
287
+ color: #ffca28;
409
288
  }
410
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
411
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
412
- background: var(--textarea-label-background);
413
- width: calc(
414
- 100% - 1rem - 1rem - 4px
415
- );
289
+ .eds-feedback-text__icon--warning circle {
290
+ fill: #181c56;
416
291
  }
417
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
418
- top: 0.5rem;
419
- font-size: 0.875rem;
420
- line-height: 1rem;
421
- padding: 0;
422
- margin-left: 1rem;
292
+ .eds-contrast .eds-feedback-text__icon--warning {
293
+ color: #ffe082;
423
294
  }
424
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
425
- top: 0.5rem;
426
- font-size: 0.875rem;
427
- line-height: 1rem;
295
+ .eds-fieldset {
296
+ margin: 0;
428
297
  padding: 0;
429
- margin-left: 1rem;
298
+ border: 0;
430
299
  }
431
300
  /* DO NOT CHANGE!*/
432
301
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -680,122 +549,134 @@
680
549
  }
681
550
  /* DO NOT CHANGE!*/
682
551
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
683
- .eds-switch {
684
- cursor: pointer;
552
+ .eds-input-group {
553
+ color: inherit;
554
+ display: block;
555
+ position: relative;
556
+ }
557
+ .eds-input-group__label {
558
+ color: #656782;
559
+ display: flex;
560
+ font-size: 1rem;
561
+ position: absolute;
562
+ line-height: 1rem;
563
+ height: 3rem;
564
+ padding: 1rem;
565
+ padding-left: 0;
566
+ margin-left: 1rem;
567
+ top: -0.125rem;
568
+ 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;
685
569
  -webkit-user-select: none;
686
570
  -moz-user-select: none;
687
571
  user-select: none;
688
- padding: 0.5rem 0;
689
- width: -moz-fit-content;
690
- width: fit-content;
691
- }
692
- .eds-switch input {
693
- opacity: 0;
694
572
  pointer-events: none;
695
- position: absolute;
696
573
  }
697
- .eds-switch--right {
698
- display: flex;
699
- flex-direction: row;
700
- align-items: center;
574
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
575
+ top: 0.375rem;
576
+ font-size: 0.75rem;
577
+ line-height: 0.75rem;
578
+ height: 10px;
579
+ padding: 0;
580
+ margin-left: 1rem;
701
581
  }
702
- .eds-switch--bottom {
703
- display: flex;
704
- flex-direction: column;
705
- align-items: center;
582
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
583
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
584
+ background: var(--textarea-label-background);
585
+ width: calc(
586
+ 100% - 1rem - 1rem - 4px
587
+ );
706
588
  }
707
- .eds-switch__circle {
708
- border-radius: 50%;
709
- height: 1.25rem;
710
- width: 1.25rem;
711
- content: "";
712
- display: flex;
713
- align-items: center;
714
- justify-content: center;
715
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
716
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
717
- background-color: #ffffff;
718
- top: 0.125rem;
719
- left: 0.125rem;
720
- position: relative;
721
- }
722
- .eds-switch__switch--large .eds-switch__circle {
723
- height: 1.75rem;
724
- width: 1.75rem;
725
- }
726
- .eds-contrast .eds-switch__circle {
727
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
728
- }
729
- .eds-switch__switch {
730
- position: relative;
731
- background-color: #949494;
732
- content: "";
733
- display: block;
734
- transition: background-color 0.1s ease-in-out;
735
- height: 1.5rem;
736
- width: 3rem;
737
- border-radius: 1.5rem;
738
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
739
- }
740
- .eds-contrast .eds-switch__switch {
741
- background-color: #8285a8;
742
- }
743
- .eds-switch--right .eds-switch__switch {
744
- margin-right: 0.75rem;
745
- }
746
- .eds-switch__switch svg g,
747
- .eds-switch__switch path {
748
- fill: #646464;
749
- transition: fill ease-in-out 0.1s;
750
- }
751
- .eds-contrast .eds-switch__switch svg g,
752
- .eds-contrast .eds-switch__switch path {
753
- fill: #181c56;
589
+ .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
590
+ top: 0.5rem;
591
+ font-size: 0.875rem;
592
+ line-height: 1rem;
593
+ padding: 0;
594
+ margin-left: 1rem;
754
595
  }
755
- :checked + .eds-switch__switch {
756
- background-color: var(--eds-switch-color);
596
+ .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
597
+ color: #aeb7e2;
757
598
  }
758
- :checked + .eds-switch__switch .eds-switch__circle {
759
- left: 1.625rem;
599
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
600
+ font-size: 1.5rem;
601
+ line-height: 2.25rem;
602
+ height: 4rem;
760
603
  }
761
- :checked + .eds-switch__switch .eds-switch__circle svg g,
762
- :checked + .eds-switch__switch .eds-switch__circle path {
763
- fill: var(--eds-switch-color);
604
+ .eds-input-group__label--filled {
605
+ top: 0.375rem;
606
+ font-size: 0.75rem;
607
+ line-height: 0.75rem;
608
+ height: 10px;
609
+ padding: 0;
610
+ margin-left: 1rem;
764
611
  }
765
- .eds-contrast :checked + .eds-switch__switch {
766
- background-color: var(--eds-switch-contrast-color);
612
+ .eds-textarea__label .eds-input-group__label--filled {
613
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
614
+ background: var(--textarea-label-background);
615
+ width: calc(
616
+ 100% - 1rem - 1rem - 4px
617
+ );
767
618
  }
768
- :focus + .eds-switch__switch {
769
- outline: none;
770
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
771
- outline-offset: 0.125rem;
619
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
620
+ top: 0.5rem;
621
+ font-size: 0.875rem;
622
+ line-height: 1rem;
623
+ padding: 0;
624
+ margin-left: 1rem;
772
625
  }
773
- .eds-contrast :focus + .eds-switch__switch {
774
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
626
+ .eds-input-group__label-tooltip-icon {
627
+ color: #0082b9;
628
+ padding-left: 0.25rem;
629
+ padding-right: 0.25rem;
630
+ display: flex;
631
+ align-items: center;
632
+ cursor: help;
633
+ font-size: 1rem;
775
634
  }
776
- .eds-switch__switch--large {
777
- width: 3.75rem;
778
- height: 2rem;
779
- border-radius: 3.75rem;
635
+
636
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
637
+ top: 0.375rem;
638
+ font-size: 0.75rem;
639
+ line-height: 0.75rem;
640
+ height: 10px;
641
+ padding: 0;
642
+ margin-left: 1rem;
780
643
  }
781
- :checked + .eds-switch__switch--large .eds-switch__circle {
782
- left: 1.875rem;
644
+
645
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
646
+ top: 0.375rem;
647
+ font-size: 0.75rem;
648
+ line-height: 0.75rem;
649
+ height: 10px;
650
+ padding: 0;
651
+ margin-left: 1rem;
783
652
  }
784
- .eds-switch__switch--large svg {
785
- position: relative;
786
- right: 0.05rem;
653
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
654
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
655
+ background: var(--textarea-label-background);
656
+ width: calc(
657
+ 100% - 1rem - 1rem - 4px
658
+ );
787
659
  }
788
- .eds-switch__label--large--right {
789
- font-size: 1rem;
660
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
661
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
662
+ background: var(--textarea-label-background);
663
+ width: calc(
664
+ 100% - 1rem - 1rem - 4px
665
+ );
790
666
  }
791
- .eds-switch__label--large--bottom {
667
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
668
+ top: 0.5rem;
792
669
  font-size: 0.875rem;
670
+ line-height: 1rem;
671
+ padding: 0;
672
+ margin-left: 1rem;
793
673
  }
794
- .eds-switch__label--medium--right {
674
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
675
+ top: 0.5rem;
795
676
  font-size: 0.875rem;
796
- }
797
- .eds-switch__label--medium--bottom {
798
- font-size: 0.75rem;
677
+ line-height: 1rem;
678
+ padding: 0;
679
+ margin-left: 1rem;
799
680
  }
800
681
  /* DO NOT CHANGE!*/
801
682
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -964,6 +845,125 @@ input:disabled + .eds-input-panel__container {
964
845
  }
965
846
  /* DO NOT CHANGE!*/
966
847
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
848
+ .eds-switch {
849
+ cursor: pointer;
850
+ -webkit-user-select: none;
851
+ -moz-user-select: none;
852
+ user-select: none;
853
+ padding: 0.5rem 0;
854
+ width: -moz-fit-content;
855
+ width: fit-content;
856
+ }
857
+ .eds-switch input {
858
+ opacity: 0;
859
+ pointer-events: none;
860
+ position: absolute;
861
+ }
862
+ .eds-switch--right {
863
+ display: flex;
864
+ flex-direction: row;
865
+ align-items: center;
866
+ }
867
+ .eds-switch--bottom {
868
+ display: flex;
869
+ flex-direction: column;
870
+ align-items: center;
871
+ }
872
+ .eds-switch__circle {
873
+ border-radius: 50%;
874
+ height: 1.25rem;
875
+ width: 1.25rem;
876
+ content: "";
877
+ display: flex;
878
+ align-items: center;
879
+ justify-content: center;
880
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
881
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
882
+ background-color: #ffffff;
883
+ top: 0.125rem;
884
+ left: 0.125rem;
885
+ position: relative;
886
+ }
887
+ .eds-switch__switch--large .eds-switch__circle {
888
+ height: 1.75rem;
889
+ width: 1.75rem;
890
+ }
891
+ .eds-contrast .eds-switch__circle {
892
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
893
+ }
894
+ .eds-switch__switch {
895
+ position: relative;
896
+ background-color: #949494;
897
+ content: "";
898
+ display: block;
899
+ transition: background-color 0.1s ease-in-out;
900
+ height: 1.5rem;
901
+ width: 3rem;
902
+ border-radius: 1.5rem;
903
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
904
+ }
905
+ .eds-contrast .eds-switch__switch {
906
+ background-color: #8285a8;
907
+ }
908
+ .eds-switch--right .eds-switch__switch {
909
+ margin-right: 0.75rem;
910
+ }
911
+ .eds-switch__switch svg g,
912
+ .eds-switch__switch path {
913
+ fill: #646464;
914
+ transition: fill ease-in-out 0.1s;
915
+ }
916
+ .eds-contrast .eds-switch__switch svg g,
917
+ .eds-contrast .eds-switch__switch path {
918
+ fill: #181c56;
919
+ }
920
+ :checked + .eds-switch__switch {
921
+ background-color: var(--eds-switch-color);
922
+ }
923
+ :checked + .eds-switch__switch .eds-switch__circle {
924
+ left: 1.625rem;
925
+ }
926
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
927
+ :checked + .eds-switch__switch .eds-switch__circle path {
928
+ fill: var(--eds-switch-color);
929
+ }
930
+ .eds-contrast :checked + .eds-switch__switch {
931
+ background-color: var(--eds-switch-contrast-color);
932
+ }
933
+ :focus + .eds-switch__switch {
934
+ outline: none;
935
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
936
+ outline-offset: 0.125rem;
937
+ }
938
+ .eds-contrast :focus + .eds-switch__switch {
939
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
940
+ }
941
+ .eds-switch__switch--large {
942
+ width: 3.75rem;
943
+ height: 2rem;
944
+ border-radius: 3.75rem;
945
+ }
946
+ :checked + .eds-switch__switch--large .eds-switch__circle {
947
+ left: 1.875rem;
948
+ }
949
+ .eds-switch__switch--large svg {
950
+ position: relative;
951
+ right: 0.05rem;
952
+ }
953
+ .eds-switch__label--large--right {
954
+ font-size: 1rem;
955
+ }
956
+ .eds-switch__label--large--bottom {
957
+ font-size: 0.875rem;
958
+ }
959
+ .eds-switch__label--medium--right {
960
+ font-size: 0.875rem;
961
+ }
962
+ .eds-switch__label--medium--bottom {
963
+ font-size: 0.75rem;
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.26",
3
+ "version": "7.0.27-alpha.0",
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": "^6.12.0",
31
- "@entur/tokens": "^3.11.0",
32
- "@entur/tooltip": "^2.6.35",
33
- "@entur/typography": "^1.8.16",
30
+ "@entur/icons": "^6.12.1-alpha.0",
31
+ "@entur/tokens": "^3.11.1-alpha.0",
32
+ "@entur/tooltip": "^2.6.36-alpha.0",
33
+ "@entur/typography": "^1.8.17-alpha.0",
34
34
  "@entur/utils": "^0.9.5",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "6e557eb43d533d387713194d8b302ccc101bad20"
37
+ "gitHead": "957d432b3633e7f973ea9ffb0219d21f6b598980"
38
38
  }