@entur/form 7.0.27 → 7.0.29

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 +236 -236
  2. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -242,134 +242,60 @@
242
242
  }
243
243
  /* DO NOT CHANGE!*/
244
244
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
245
- .eds-input-group {
246
- color: inherit;
247
- display: block;
248
- position: relative;
249
- }
250
- .eds-input-group__label {
251
- color: #656782;
245
+ .eds-feedback-text {
252
246
  display: flex;
253
- font-size: 1rem;
254
- position: absolute;
255
- line-height: 1rem;
256
- height: 3rem;
257
- padding: 1rem;
258
- padding-left: 0;
259
- margin-left: 1rem;
260
- top: -0.125rem;
261
- 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;
262
- -webkit-user-select: none;
263
- -moz-user-select: none;
264
- user-select: none;
265
- pointer-events: none;
266
- }
267
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
268
- top: 0.375rem;
269
- font-size: 0.75rem;
270
- line-height: 0.75rem;
271
- height: 10px;
272
- padding: 0;
273
- margin-left: 1rem;
247
+ align-items: center;
248
+ margin-top: 0.25rem;
274
249
  }
275
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
276
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
277
- background: var(--textarea-label-background);
278
- width: calc(
279
- 100% - 1rem - 1rem - 4px
280
- );
250
+ .eds-feedback-text--info {
251
+ padding-left: calc(1rem + 0.125rem);
281
252
  }
282
- .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
283
- top: 0.5rem;
284
- font-size: 0.875rem;
285
- line-height: 1rem;
286
- padding: 0;
287
- margin-left: 1rem;
253
+ .eds-feedback-text__text {
254
+ color: #181c56;
288
255
  }
289
- .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
290
- color: #aeb7e2;
256
+ .eds-contrast .eds-feedback-text__text {
257
+ color: #ffffff;
291
258
  }
292
- .eds-form-control-wrapper--size-large .eds-input-group__label {
259
+
260
+ .eds-feedback-text__icon {
293
261
  font-size: 1.5rem;
294
- line-height: 2.25rem;
295
- height: 4rem;
262
+ min-height: 1.5rem;
263
+ min-width: 1.5rem;
264
+ padding-right: 0.5rem;
265
+ position: relative;
266
+ top: -0.1rem;
296
267
  }
297
- .eds-input-group__label--filled {
298
- top: 0.375rem;
299
- font-size: 0.75rem;
300
- line-height: 0.75rem;
301
- height: 10px;
302
- padding: 0;
303
- margin-left: 1rem;
268
+ .eds-feedback-text__icon--success {
269
+ color: #1a8e60;
304
270
  }
305
- .eds-textarea__label .eds-input-group__label--filled {
306
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
307
- background: var(--textarea-label-background);
308
- width: calc(
309
- 100% - 1rem - 1rem - 4px
310
- );
271
+ .eds-contrast .eds-feedback-text__icon--success {
272
+ color: #5ac39a;
311
273
  }
312
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
313
- top: 0.5rem;
314
- font-size: 0.875rem;
315
- line-height: 1rem;
316
- padding: 0;
317
- margin-left: 1rem;
274
+ .eds-feedback-text__icon--error {
275
+ color: #d31b1b;
318
276
  }
319
- .eds-input-group__label-tooltip-icon {
320
- color: #0082b9;
321
- padding-left: 0.25rem;
322
- padding-right: 0.25rem;
323
- display: flex;
324
- align-items: center;
325
- cursor: help;
326
- font-size: 1rem;
277
+ .eds-contrast .eds-feedback-text__icon--error {
278
+ color: #ff9494;
327
279
  }
328
-
329
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
330
- top: 0.375rem;
331
- font-size: 0.75rem;
332
- line-height: 0.75rem;
333
- height: 10px;
334
- padding: 0;
335
- margin-left: 1rem;
280
+ .eds-feedback-text__icon--info {
281
+ color: #0082b9;
336
282
  }
337
-
338
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
339
- top: 0.375rem;
340
- font-size: 0.75rem;
341
- line-height: 0.75rem;
342
- height: 10px;
343
- padding: 0;
344
- margin-left: 1rem;
283
+ .eds-contrast .eds-feedback-text__icon--info {
284
+ color: #64b3e7;
345
285
  }
346
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
347
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
348
- background: var(--textarea-label-background);
349
- width: calc(
350
- 100% - 1rem - 1rem - 4px
351
- );
286
+ .eds-feedback-text__icon--warning {
287
+ color: #ffca28;
352
288
  }
353
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
354
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
355
- background: var(--textarea-label-background);
356
- width: calc(
357
- 100% - 1rem - 1rem - 4px
358
- );
289
+ .eds-feedback-text__icon--warning circle {
290
+ fill: #181c56;
359
291
  }
360
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
361
- top: 0.5rem;
362
- font-size: 0.875rem;
363
- line-height: 1rem;
364
- padding: 0;
365
- margin-left: 1rem;
292
+ .eds-contrast .eds-feedback-text__icon--warning {
293
+ color: #ffe082;
366
294
  }
367
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
368
- top: 0.5rem;
369
- font-size: 0.875rem;
370
- line-height: 1rem;
295
+ .eds-fieldset {
296
+ margin: 0;
371
297
  padding: 0;
372
- margin-left: 1rem;
298
+ border: 0;
373
299
  }
374
300
  /* DO NOT CHANGE!*/
375
301
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -535,99 +461,6 @@
535
461
  }
536
462
  /* DO NOT CHANGE!*/
537
463
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
538
- .eds-form-component--radio__container {
539
- display: flex;
540
- justify-content: center;
541
- align-items: center;
542
- position: relative;
543
- cursor: pointer;
544
- height: 2rem;
545
- width: -moz-fit-content;
546
- width: fit-content;
547
- -webkit-user-select: none;
548
- -moz-user-select: none;
549
- user-select: none;
550
- }
551
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
552
- border-color: #54568c;
553
- }
554
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
555
- background-color: #54568c;
556
- }
557
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
558
- border-color: #8285a8;
559
- }
560
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
561
- background-color: #8285a8;
562
- }
563
- .eds-form-component--radio__container input {
564
- position: absolute;
565
- opacity: 0;
566
- cursor: pointer;
567
- height: 0;
568
- width: 0;
569
- }
570
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
571
- height: 0.625rem;
572
- width: 0.625rem;
573
- }
574
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
575
- outline: none;
576
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
577
- outline-offset: 0.125rem;
578
- }
579
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
580
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
581
- }
582
- .eds-form-component--radio__container .eds-form-component--radio__radio {
583
- position: relative;
584
- height: 1.25rem;
585
- width: 1.25rem;
586
- margin-right: 1rem;
587
- background-color: #ffffff;
588
- border: 0.125rem solid #181c56;
589
- border-radius: 50%;
590
- display: flex;
591
- align-items: center;
592
- justify-content: center;
593
- }
594
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
595
- background-color: #181c56;
596
- border-color: #aeb7e2;
597
- }
598
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
599
- background: #d1d3d3;
600
- border-color: #d1d3d3;
601
- cursor: not-allowed;
602
- }
603
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
604
- border-color: #d1d3d3;
605
- }
606
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
607
- background: #d1d3d3;
608
- border-color: #d1d3d3;
609
- }
610
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
611
- color: #656782;
612
- }
613
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
614
- display: block;
615
- width: 0;
616
- height: 0;
617
- border-radius: 50%;
618
- background-color: #181c56;
619
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
620
- }
621
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
622
- background-color: #aeb7e2;
623
- }
624
- .eds-fieldset {
625
- margin: 0;
626
- padding: 0;
627
- border: 0;
628
- }
629
- /* DO NOT CHANGE!*/
630
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
631
464
  .eds-switch {
632
465
  cursor: pointer;
633
466
  -webkit-user-select: none;
@@ -747,55 +580,222 @@
747
580
  }
748
581
  /* DO NOT CHANGE!*/
749
582
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
750
- .eds-feedback-text {
583
+ .eds-form-component--radio__container {
751
584
  display: flex;
585
+ justify-content: center;
752
586
  align-items: center;
753
- margin-top: 0.25rem;
587
+ position: relative;
588
+ cursor: pointer;
589
+ height: 2rem;
590
+ width: -moz-fit-content;
591
+ width: fit-content;
592
+ -webkit-user-select: none;
593
+ -moz-user-select: none;
594
+ user-select: none;
754
595
  }
755
- .eds-feedback-text--info {
756
- padding-left: calc(1rem + 0.125rem);
596
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
597
+ border-color: #54568c;
757
598
  }
758
- .eds-feedback-text__text {
759
- color: #181c56;
599
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
600
+ background-color: #54568c;
760
601
  }
761
- .eds-contrast .eds-feedback-text__text {
762
- color: #ffffff;
602
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
603
+ border-color: #8285a8;
763
604
  }
764
-
765
- .eds-feedback-text__icon {
766
- font-size: 1.5rem;
767
- min-height: 1.5rem;
768
- min-width: 1.5rem;
769
- padding-right: 0.5rem;
605
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
606
+ background-color: #8285a8;
607
+ }
608
+ .eds-form-component--radio__container input {
609
+ position: absolute;
610
+ opacity: 0;
611
+ cursor: pointer;
612
+ height: 0;
613
+ width: 0;
614
+ }
615
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
616
+ height: 0.625rem;
617
+ width: 0.625rem;
618
+ }
619
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
620
+ outline: none;
621
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
622
+ outline-offset: 0.125rem;
623
+ }
624
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
625
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
626
+ }
627
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
770
628
  position: relative;
771
- top: -0.1rem;
629
+ height: 1.25rem;
630
+ width: 1.25rem;
631
+ margin-right: 1rem;
632
+ background-color: #ffffff;
633
+ border: 0.125rem solid #181c56;
634
+ border-radius: 50%;
635
+ display: flex;
636
+ align-items: center;
637
+ justify-content: center;
772
638
  }
773
- .eds-feedback-text__icon--success {
774
- color: #1a8e60;
639
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
640
+ background-color: #181c56;
641
+ border-color: #aeb7e2;
775
642
  }
776
- .eds-contrast .eds-feedback-text__icon--success {
777
- color: #5ac39a;
643
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
644
+ background: #d1d3d3;
645
+ border-color: #d1d3d3;
646
+ cursor: not-allowed;
778
647
  }
779
- .eds-feedback-text__icon--error {
780
- color: #d31b1b;
648
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
649
+ border-color: #d1d3d3;
781
650
  }
782
- .eds-contrast .eds-feedback-text__icon--error {
783
- color: #ff9494;
651
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
652
+ background: #d1d3d3;
653
+ border-color: #d1d3d3;
784
654
  }
785
- .eds-feedback-text__icon--info {
655
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
656
+ color: #656782;
657
+ }
658
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
659
+ display: block;
660
+ width: 0;
661
+ height: 0;
662
+ border-radius: 50%;
663
+ background-color: #181c56;
664
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
665
+ }
666
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
667
+ background-color: #aeb7e2;
668
+ }
669
+ /* DO NOT CHANGE!*/
670
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
671
+ .eds-input-group {
672
+ color: inherit;
673
+ display: block;
674
+ position: relative;
675
+ }
676
+ .eds-input-group__label {
677
+ color: #656782;
678
+ display: flex;
679
+ font-size: 1rem;
680
+ position: absolute;
681
+ line-height: 1rem;
682
+ height: 3rem;
683
+ padding: 1rem;
684
+ padding-left: 0;
685
+ margin-left: 1rem;
686
+ top: -0.125rem;
687
+ 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;
688
+ -webkit-user-select: none;
689
+ -moz-user-select: none;
690
+ user-select: none;
691
+ pointer-events: none;
692
+ }
693
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
694
+ top: 0.375rem;
695
+ font-size: 0.75rem;
696
+ line-height: 0.75rem;
697
+ height: 10px;
698
+ padding: 0;
699
+ margin-left: 1rem;
700
+ }
701
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
702
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
703
+ background: var(--textarea-label-background);
704
+ width: calc(
705
+ 100% - 1rem - 1rem - 4px
706
+ );
707
+ }
708
+ .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
709
+ top: 0.5rem;
710
+ font-size: 0.875rem;
711
+ line-height: 1rem;
712
+ padding: 0;
713
+ margin-left: 1rem;
714
+ }
715
+ .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
716
+ color: #aeb7e2;
717
+ }
718
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
719
+ font-size: 1.5rem;
720
+ line-height: 2.25rem;
721
+ height: 4rem;
722
+ }
723
+ .eds-input-group__label--filled {
724
+ top: 0.375rem;
725
+ font-size: 0.75rem;
726
+ line-height: 0.75rem;
727
+ height: 10px;
728
+ padding: 0;
729
+ margin-left: 1rem;
730
+ }
731
+ .eds-textarea__label .eds-input-group__label--filled {
732
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
733
+ background: var(--textarea-label-background);
734
+ width: calc(
735
+ 100% - 1rem - 1rem - 4px
736
+ );
737
+ }
738
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
739
+ top: 0.5rem;
740
+ font-size: 0.875rem;
741
+ line-height: 1rem;
742
+ padding: 0;
743
+ margin-left: 1rem;
744
+ }
745
+ .eds-input-group__label-tooltip-icon {
786
746
  color: #0082b9;
747
+ padding-left: 0.25rem;
748
+ padding-right: 0.25rem;
749
+ display: flex;
750
+ align-items: center;
751
+ cursor: help;
752
+ font-size: 1rem;
787
753
  }
788
- .eds-contrast .eds-feedback-text__icon--info {
789
- color: #64b3e7;
754
+
755
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
756
+ top: 0.375rem;
757
+ font-size: 0.75rem;
758
+ line-height: 0.75rem;
759
+ height: 10px;
760
+ padding: 0;
761
+ margin-left: 1rem;
790
762
  }
791
- .eds-feedback-text__icon--warning {
792
- color: #ffca28;
763
+
764
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
765
+ top: 0.375rem;
766
+ font-size: 0.75rem;
767
+ line-height: 0.75rem;
768
+ height: 10px;
769
+ padding: 0;
770
+ margin-left: 1rem;
793
771
  }
794
- .eds-feedback-text__icon--warning circle {
795
- fill: #181c56;
772
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
773
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
774
+ background: var(--textarea-label-background);
775
+ width: calc(
776
+ 100% - 1rem - 1rem - 4px
777
+ );
796
778
  }
797
- .eds-contrast .eds-feedback-text__icon--warning {
798
- color: #ffe082;
779
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
780
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
781
+ background: var(--textarea-label-background);
782
+ width: calc(
783
+ 100% - 1rem - 1rem - 4px
784
+ );
785
+ }
786
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
787
+ top: 0.5rem;
788
+ font-size: 0.875rem;
789
+ line-height: 1rem;
790
+ padding: 0;
791
+ margin-left: 1rem;
792
+ }
793
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
794
+ top: 0.5rem;
795
+ font-size: 0.875rem;
796
+ line-height: 1rem;
797
+ padding: 0;
798
+ margin-left: 1rem;
799
799
  }
800
800
  /* DO NOT CHANGE!*/
801
801
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.0.27",
3
+ "version": "7.0.29",
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.36",
33
- "@entur/typography": "^1.8.16",
30
+ "@entur/icons": "^6.12.1",
31
+ "@entur/tokens": "^3.11.1",
32
+ "@entur/tooltip": "^2.6.38",
33
+ "@entur/typography": "^1.8.17",
34
34
  "@entur/utils": "^0.9.5",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "ce91791c414af0274bcff712cacfad25a44c45c2"
37
+ "gitHead": "3fc001a78ef085d8fd22bb8aa245ec488214de72"
38
38
  }