@entur/form 7.0.6 → 7.0.8

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 +251 -255
  2. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -3,65 +3,13 @@
3
3
  }
4
4
  /* DO NOT CHANGE!*/
5
5
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
6
- .eds-feedback-text {
7
- display: flex;
8
- align-items: center;
9
- margin-top: 0.25rem;
10
- }
11
- .eds-feedback-text--info {
12
- padding-left: calc(1rem + 0.125rem);
13
- }
14
- .eds-feedback-text__text {
15
- color: #181c56;
16
- }
17
- .eds-contrast .eds-feedback-text__text {
18
- color: #ffffff;
19
- }
20
-
21
- .eds-feedback-text__icon {
22
- font-size: 1.5rem;
23
- min-height: 1.5rem;
24
- min-width: 1.5rem;
25
- padding-right: 0.5rem;
26
- position: relative;
27
- top: -0.1rem;
28
- }
29
- .eds-feedback-text__icon--success {
30
- color: #1a8e60;
31
- }
32
- .eds-contrast .eds-feedback-text__icon--success {
33
- color: #5ac39a;
34
- }
35
- .eds-feedback-text__icon--error {
36
- color: #d31b1b;
37
- }
38
- .eds-contrast .eds-feedback-text__icon--error {
39
- color: #ff9494;
40
- }
41
- .eds-feedback-text__icon--info {
42
- color: #0082b9;
43
- }
44
- .eds-contrast .eds-feedback-text__icon--info {
45
- color: #64b3e7;
46
- }
47
- .eds-feedback-text__icon--warning {
48
- color: #ffca28;
49
- }
50
- .eds-feedback-text__icon--warning circle {
51
- fill: #181c56;
52
- }
53
- .eds-contrast .eds-feedback-text__icon--warning {
54
- color: #ffe082;
55
- }
56
- /* DO NOT CHANGE!*/
57
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
58
6
  .eds-form-control-wrapper {
59
- --border-color: #181c56;
7
+ --border-color: #7C7F9F;
60
8
  --border-color-hover: #aeb7e2;
61
9
  align-items: center;
62
10
  background-color: #ffffff;
63
11
  border-radius: 0.25rem;
64
- border: 0.125rem solid #d1d3d3;
12
+ border: 0.125rem solid var(--border-color);
65
13
  box-shadow: 0 0 0 transparent;
66
14
  color: #181c56;
67
15
  display: flex;
@@ -75,20 +23,14 @@
75
23
  These elements require the `--dark` modifier, even on the wrapper.
76
24
  */
77
25
  }
78
- .eds-contrast .eds-form-control-wrapper {
79
- --border-color: #aeb7e2;
80
- background-color: #ffffff;
81
- border-color: #54568c;
82
- }
83
26
  .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
84
- border-color: #181c56;
27
+ --border-color: #181c56;
85
28
  }
86
29
  .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
87
- border-color: #181c56;
30
+ --border-color: #181c56;
88
31
  }
89
32
  .eds-contrast .eds-form-control-wrapper:hover {
90
- border-color: #aeb7e2;
91
- background: #ebebf1;
33
+ --border-color: #aeb7e2;
92
34
  }
93
35
  .eds-form-control-wrapper[focus-within] {
94
36
  box-shadow: inset 0 0 0 1px var(--border-color);
@@ -97,14 +39,12 @@
97
39
  box-shadow: inset 0 0 0 1px var(--border-color);
98
40
  }
99
41
  .eds-contrast .eds-form-control-wrapper[focus-within] {
100
- border-color: #181c56;
101
- --border-color: #aeb7e2;
102
- box-shadow: 0 0 0 0.125rem var(--border-color);
42
+ --border-color: #181c56;
43
+ box-shadow: 0 0 0 0.125rem #aeb7e2;
103
44
  }
104
45
  .eds-contrast .eds-form-control-wrapper:focus-within {
105
- border-color: #181c56;
106
- --border-color: #aeb7e2;
107
- box-shadow: 0 0 0 0.125rem var(--border-color);
46
+ --border-color: #181c56;
47
+ box-shadow: 0 0 0 0.125rem #aeb7e2;
108
48
  }
109
49
  .eds-form-control-wrapper ::-moz-placeholder {
110
50
  color: #656782;
@@ -113,31 +53,38 @@
113
53
  color: #656782;
114
54
  }
115
55
  .eds-form-control-wrapper--disabled {
56
+ --border-color: transparent;
116
57
  background-color: #e9e9e9;
117
- color: #656782;
118
- border-color: transparent;
119
58
  pointer-events: none;
59
+ color: #646464;
120
60
  }
121
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
122
- display: none;
61
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
62
+ color: #646464;
123
63
  }
124
64
  .eds-contrast .eds-form-control-wrapper--disabled {
125
65
  background: #292b6a;
126
- border-color: transparent;
127
66
  color: #8285a8;
128
67
  }
68
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
69
+ color: #8285a8;
70
+ }
71
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
72
+ display: none;
73
+ }
129
74
  .eds-form-control-wrapper--readonly {
75
+ --border-color: transparent;
76
+ --textarea-label-background: $colors-greys-grey90;
130
77
  pointer-events: none;
131
78
  cursor: default;
132
- border-color: transparent;
133
79
  background: #f8f8f8;
134
- --textarea-label-background: $colors-greys-grey90;
135
80
  }
136
81
  .eds-contrast .eds-form-control-wrapper--readonly {
137
- background: #292b6a;
138
82
  --textarea-label-background: $colors-blues-blue10;
83
+ background: #292b6a;
139
84
  color: #ffffff;
140
- border-color: transparent;
85
+ }
86
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
87
+ color: #aeb7e2;
141
88
  }
142
89
  .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
143
90
  display: none;
@@ -298,10 +245,186 @@
298
245
  }
299
246
  /* DO NOT CHANGE!*/
300
247
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
301
- .eds-fieldset {
302
- margin: 0;
248
+ .eds-feedback-text {
249
+ display: flex;
250
+ align-items: center;
251
+ margin-top: 0.25rem;
252
+ }
253
+ .eds-feedback-text--info {
254
+ padding-left: calc(1rem + 0.125rem);
255
+ }
256
+ .eds-feedback-text__text {
257
+ color: #181c56;
258
+ }
259
+ .eds-contrast .eds-feedback-text__text {
260
+ color: #ffffff;
261
+ }
262
+
263
+ .eds-feedback-text__icon {
264
+ font-size: 1.5rem;
265
+ min-height: 1.5rem;
266
+ min-width: 1.5rem;
267
+ padding-right: 0.5rem;
268
+ position: relative;
269
+ top: -0.1rem;
270
+ }
271
+ .eds-feedback-text__icon--success {
272
+ color: #1a8e60;
273
+ }
274
+ .eds-contrast .eds-feedback-text__icon--success {
275
+ color: #5ac39a;
276
+ }
277
+ .eds-feedback-text__icon--error {
278
+ color: #d31b1b;
279
+ }
280
+ .eds-contrast .eds-feedback-text__icon--error {
281
+ color: #ff9494;
282
+ }
283
+ .eds-feedback-text__icon--info {
284
+ color: #0082b9;
285
+ }
286
+ .eds-contrast .eds-feedback-text__icon--info {
287
+ color: #64b3e7;
288
+ }
289
+ .eds-feedback-text__icon--warning {
290
+ color: #ffca28;
291
+ }
292
+ .eds-feedback-text__icon--warning circle {
293
+ fill: #181c56;
294
+ }
295
+ .eds-contrast .eds-feedback-text__icon--warning {
296
+ color: #ffe082;
297
+ }
298
+ /* DO NOT CHANGE!*/
299
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
300
+ .eds-input-group {
301
+ color: inherit;
302
+ display: block;
303
+ position: relative;
304
+ }
305
+ .eds-input-group__label {
306
+ color: #656782;
307
+ display: flex;
308
+ font-size: 1rem;
309
+ position: absolute;
310
+ line-height: 1rem;
311
+ height: 3rem;
312
+ padding: 1rem;
313
+ padding-left: 0;
314
+ margin-left: 1rem;
315
+ top: -0.125rem;
316
+ 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;
317
+ -webkit-user-select: none;
318
+ -moz-user-select: none;
319
+ user-select: none;
320
+ pointer-events: none;
321
+ }
322
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
323
+ top: 0.375rem;
324
+ font-size: 0.75rem;
325
+ line-height: 0.75rem;
326
+ height: 10px;
303
327
  padding: 0;
304
- border: 0;
328
+ margin-left: 1rem;
329
+ }
330
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
331
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
332
+ background: var(--textarea-label-background);
333
+ width: calc(
334
+ 100% - 1rem - 1rem - 4px
335
+ );
336
+ }
337
+ .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
338
+ top: 0.5rem;
339
+ font-size: 0.875rem;
340
+ line-height: 1rem;
341
+ padding: 0;
342
+ margin-left: 1rem;
343
+ }
344
+ .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
345
+ color: #aeb7e2;
346
+ }
347
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
348
+ font-size: 1.5rem;
349
+ line-height: 2.25rem;
350
+ height: 4rem;
351
+ }
352
+ .eds-input-group__label--filled {
353
+ top: 0.375rem;
354
+ font-size: 0.75rem;
355
+ line-height: 0.75rem;
356
+ height: 10px;
357
+ padding: 0;
358
+ margin-left: 1rem;
359
+ }
360
+ .eds-textarea__label .eds-input-group__label--filled {
361
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
362
+ background: var(--textarea-label-background);
363
+ width: calc(
364
+ 100% - 1rem - 1rem - 4px
365
+ );
366
+ }
367
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
368
+ top: 0.5rem;
369
+ font-size: 0.875rem;
370
+ line-height: 1rem;
371
+ padding: 0;
372
+ margin-left: 1rem;
373
+ }
374
+ .eds-input-group__label-tooltip-icon {
375
+ color: #0082b9;
376
+ padding-left: 0.25rem;
377
+ padding-right: 0.25rem;
378
+ display: flex;
379
+ align-items: center;
380
+ cursor: help;
381
+ font-size: 1rem;
382
+ }
383
+
384
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
385
+ top: 0.375rem;
386
+ font-size: 0.75rem;
387
+ line-height: 0.75rem;
388
+ height: 10px;
389
+ padding: 0;
390
+ margin-left: 1rem;
391
+ }
392
+
393
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
394
+ top: 0.375rem;
395
+ font-size: 0.75rem;
396
+ line-height: 0.75rem;
397
+ height: 10px;
398
+ padding: 0;
399
+ margin-left: 1rem;
400
+ }
401
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
402
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
403
+ background: var(--textarea-label-background);
404
+ width: calc(
405
+ 100% - 1rem - 1rem - 4px
406
+ );
407
+ }
408
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
409
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
410
+ background: var(--textarea-label-background);
411
+ width: calc(
412
+ 100% - 1rem - 1rem - 4px
413
+ );
414
+ }
415
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
416
+ top: 0.5rem;
417
+ font-size: 0.875rem;
418
+ line-height: 1rem;
419
+ padding: 0;
420
+ margin-left: 1rem;
421
+ }
422
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
423
+ top: 0.5rem;
424
+ font-size: 0.875rem;
425
+ line-height: 1rem;
426
+ padding: 0;
427
+ margin-left: 1rem;
305
428
  }
306
429
  /* DO NOT CHANGE!*/
307
430
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -467,137 +590,10 @@
467
590
  }
468
591
  /* DO NOT CHANGE!*/
469
592
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
470
- .eds-input-group {
471
- color: inherit;
472
- display: block;
473
- position: relative;
474
- }
475
- .eds-input-group__label {
476
- color: #656782;
477
- display: flex;
478
- font-size: 1rem;
479
- position: absolute;
480
- line-height: 1rem;
481
- height: 3rem;
482
- padding: 1rem;
483
- padding-left: 0;
484
- margin-left: 1rem;
485
- top: -0.125rem;
486
- 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;
487
- -webkit-user-select: none;
488
- -moz-user-select: none;
489
- user-select: none;
490
- pointer-events: none;
491
- }
492
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
493
- top: 0.375rem;
494
- font-size: 0.75rem;
495
- line-height: 0.75rem;
496
- height: 10px;
497
- padding: 0;
498
- margin-left: 1rem;
499
- }
500
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
501
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
502
- background: var(--textarea-label-background);
503
- width: calc(
504
- 100% - 1rem - 1rem - 4px
505
- );
506
- }
507
- .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
508
- top: 0.5rem;
509
- font-size: 0.875rem;
510
- line-height: 1rem;
511
- padding: 0;
512
- margin-left: 1rem;
513
- }
514
- .eds-contrast .eds-input-group__label {
515
- color: #8285a8;
516
- }
517
- .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
518
- color: #aeb7e2;
519
- }
520
- .eds-form-control-wrapper--size-large .eds-input-group__label {
521
- font-size: 1.5rem;
522
- line-height: 2.25rem;
523
- height: 4rem;
524
- }
525
- .eds-input-group__label--filled {
526
- top: 0.375rem;
527
- font-size: 0.75rem;
528
- line-height: 0.75rem;
529
- height: 10px;
530
- padding: 0;
531
- margin-left: 1rem;
532
- }
533
- .eds-textarea__label .eds-input-group__label--filled {
534
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
535
- background: var(--textarea-label-background);
536
- width: calc(
537
- 100% - 1rem - 1rem - 4px
538
- );
539
- }
540
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
541
- top: 0.5rem;
542
- font-size: 0.875rem;
543
- line-height: 1rem;
544
- padding: 0;
545
- margin-left: 1rem;
546
- }
547
- .eds-input-group__label-tooltip-icon {
548
- color: #0082b9;
549
- padding-left: 0.25rem;
550
- padding-right: 0.25rem;
551
- display: flex;
552
- align-items: center;
553
- cursor: help;
554
- font-size: 1rem;
555
- }
556
-
557
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
558
- top: 0.375rem;
559
- font-size: 0.75rem;
560
- line-height: 0.75rem;
561
- height: 10px;
562
- padding: 0;
563
- margin-left: 1rem;
564
- }
565
-
566
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
567
- top: 0.375rem;
568
- font-size: 0.75rem;
569
- line-height: 0.75rem;
570
- height: 10px;
571
- padding: 0;
572
- margin-left: 1rem;
573
- }
574
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
575
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
576
- background: var(--textarea-label-background);
577
- width: calc(
578
- 100% - 1rem - 1rem - 4px
579
- );
580
- }
581
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
582
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
583
- background: var(--textarea-label-background);
584
- width: calc(
585
- 100% - 1rem - 1rem - 4px
586
- );
587
- }
588
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
589
- top: 0.5rem;
590
- font-size: 0.875rem;
591
- line-height: 1rem;
592
- padding: 0;
593
- margin-left: 1rem;
594
- }
595
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
596
- top: 0.5rem;
597
- font-size: 0.875rem;
598
- line-height: 1rem;
593
+ .eds-fieldset {
594
+ margin: 0;
599
595
  padding: 0;
600
- margin-left: 1rem;
596
+ border: 0;
601
597
  }
602
598
  /* DO NOT CHANGE!*/
603
599
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -689,6 +685,50 @@
689
685
  }
690
686
  /* DO NOT CHANGE!*/
691
687
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
688
+ textarea.eds-form-control.eds-textarea {
689
+ min-height: 7.75rem;
690
+ resize: vertical;
691
+ line-height: 1.5rem;
692
+ }
693
+ /* DO NOT CHANGE!*/
694
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
695
+ .eds-textfield__clear-button {
696
+ background: none;
697
+ border: none;
698
+ border-radius: 50%;
699
+ color: inherit;
700
+ cursor: pointer;
701
+ display: flex;
702
+ font: inherit;
703
+ font-size: 1rem;
704
+ line-height: 1rem;
705
+ padding: 0.5rem;
706
+ margin-right: -0.75rem;
707
+ }
708
+ .eds-textfield__clear-button-wrapper {
709
+ display: flex;
710
+ align-items: center;
711
+ }
712
+ .eds-textfield__clear-button:hover {
713
+ background: #f3f3f3;
714
+ }
715
+ .eds-textfield__clear-button:focus {
716
+ outline: none;
717
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
718
+ }
719
+
720
+ .eds-textfield__divider {
721
+ content: "";
722
+ display: block;
723
+ background-color: #e9e9e9;
724
+ height: 1.5rem;
725
+ width: 1px;
726
+ }
727
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
728
+ background-color: #8285a8;
729
+ }
730
+ /* DO NOT CHANGE!*/
731
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
692
732
  .eds-switch {
693
733
  cursor: pointer;
694
734
  -webkit-user-select: none;
@@ -808,50 +848,6 @@
808
848
  }
809
849
  /* DO NOT CHANGE!*/
810
850
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
811
- textarea.eds-form-control.eds-textarea {
812
- min-height: 7.75rem;
813
- resize: vertical;
814
- line-height: 1.5rem;
815
- }
816
- /* DO NOT CHANGE!*/
817
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
818
- .eds-textfield__clear-button {
819
- background: none;
820
- border: none;
821
- border-radius: 50%;
822
- color: inherit;
823
- cursor: pointer;
824
- display: flex;
825
- font: inherit;
826
- font-size: 1rem;
827
- line-height: 1rem;
828
- padding: 0.5rem;
829
- margin-right: -0.75rem;
830
- }
831
- .eds-textfield__clear-button-wrapper {
832
- display: flex;
833
- align-items: center;
834
- }
835
- .eds-textfield__clear-button:hover {
836
- background: #f3f3f3;
837
- }
838
- .eds-textfield__clear-button:focus {
839
- outline: none;
840
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
841
- }
842
-
843
- .eds-textfield__divider {
844
- content: "";
845
- display: block;
846
- background-color: #e9e9e9;
847
- height: 1.5rem;
848
- width: 1px;
849
- }
850
- .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
851
- background-color: #8285a8;
852
- }
853
- /* DO NOT CHANGE!*/
854
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
855
851
  .eds-segmented-control {
856
852
  margin-top: 0.25rem;
857
853
  display: flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.0.6",
3
+ "version": "7.0.8",
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.2.0",
31
- "@entur/tokens": "^3.8.1",
32
- "@entur/tooltip": "^2.6.16",
33
- "@entur/typography": "^1.7.16",
30
+ "@entur/icons": "^6.3.0",
31
+ "@entur/tokens": "^3.9.0",
32
+ "@entur/tooltip": "^2.6.18",
33
+ "@entur/typography": "^1.7.17",
34
34
  "@entur/utils": "^0.9.0",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "02c9d76ac36b3357b91ee60ac3e0f66eb111c9c2"
37
+ "gitHead": "a4e1d50fdac6ac767d5a90e92360c8d07e7c5e9c"
38
38
  }