@entur/form 8.1.0 → 8.1.1

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 +170 -170
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -1,5 +1,78 @@
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, .eds-feedback-text--information {
9
+ padding-left: calc(1rem + 0.125rem);
10
+ }
11
+ .eds-feedback-text__text {
12
+ color: var(--components-form-feedbacktext-information-standard-text);
13
+ }
14
+ .eds-contrast .eds-feedback-text__text {
15
+ color: var(--components-form-feedbacktext-information-contrast-text);
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: var(--components-form-feedbacktext-success-standard-icon-fill);
28
+ }
29
+ .eds-feedback-text__icon--success circle {
30
+ fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
31
+ }
32
+ .eds-contrast .eds-feedback-text__icon--success {
33
+ color: var(--components-form-feedbacktext-success-contrast-icon-fill);
34
+ }
35
+ .eds-contrast .eds-feedback-text__icon--success circle {
36
+ fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
37
+ }
38
+ .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
39
+ color: var(--components-form-feedbacktext-negative-standard-icon-fill);
40
+ }
41
+ .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
42
+ fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
43
+ }
44
+ .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
45
+ color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
46
+ }
47
+ .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
48
+ fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
49
+ }
50
+ .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
51
+ color: var(--components-form-feedbacktext-information-standard-icon-fill);
52
+ }
53
+ .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
54
+ fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
55
+ }
56
+ .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
57
+ color: var(--components-form-feedbacktext-information-contrast-icon-fill);
58
+ }
59
+ .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
60
+ fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
61
+ }
62
+ .eds-feedback-text__icon--warning {
63
+ color: var(--components-form-feedbacktext-warning-standard-icon-fill);
64
+ }
65
+ .eds-feedback-text__icon--warning .svg-exclamation {
66
+ fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
67
+ }
68
+ .eds-contrast .eds-feedback-text__icon--warning {
69
+ color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
70
+ }
71
+ .eds-contrast .eds-feedback-text__icon--warning circle {
72
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
73
+ }
74
+ /* DO NOT CHANGE!*/
75
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
76
  .eds-form-control__field-and-feedback-text {
4
77
  display: flex;
5
78
  flex-direction: column;
@@ -207,84 +280,6 @@
207
280
  margin-right: 0;
208
281
  margin-left: 0.75rem;
209
282
  }
210
- .eds-fieldset {
211
- margin: 0;
212
- padding: 0;
213
- border: 0;
214
- }
215
- /* DO NOT CHANGE!*/
216
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
217
- .eds-feedback-text {
218
- display: flex;
219
- align-items: center;
220
- margin-top: 0.25rem;
221
- }
222
- .eds-feedback-text--info, .eds-feedback-text--information {
223
- padding-left: calc(1rem + 0.125rem);
224
- }
225
- .eds-feedback-text__text {
226
- color: var(--components-form-feedbacktext-information-standard-text);
227
- }
228
- .eds-contrast .eds-feedback-text__text {
229
- color: var(--components-form-feedbacktext-information-contrast-text);
230
- }
231
-
232
- .eds-feedback-text__icon {
233
- font-size: 1.5rem;
234
- min-height: 1.5rem;
235
- min-width: 1.5rem;
236
- padding-right: 0.5rem;
237
- position: relative;
238
- top: -0.1rem;
239
- }
240
- .eds-feedback-text__icon--success {
241
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
242
- }
243
- .eds-feedback-text__icon--success circle {
244
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
245
- }
246
- .eds-contrast .eds-feedback-text__icon--success {
247
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
248
- }
249
- .eds-contrast .eds-feedback-text__icon--success circle {
250
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
251
- }
252
- .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
253
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
254
- }
255
- .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
256
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
257
- }
258
- .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
259
- color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
260
- }
261
- .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
262
- fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
263
- }
264
- .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
265
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
266
- }
267
- .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
268
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
269
- }
270
- .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
271
- color: var(--components-form-feedbacktext-information-contrast-icon-fill);
272
- }
273
- .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
274
- fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
275
- }
276
- .eds-feedback-text__icon--warning {
277
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
278
- }
279
- .eds-feedback-text__icon--warning .svg-exclamation {
280
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
281
- }
282
- .eds-contrast .eds-feedback-text__icon--warning {
283
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
284
- }
285
- .eds-contrast .eds-feedback-text__icon--warning circle {
286
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
287
- }
288
283
  /* DO NOT CHANGE!*/
289
284
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
290
285
  .eds-checkbox__container {
@@ -440,87 +435,10 @@
440
435
  stroke-dashoffset: 0;
441
436
  }
442
437
  }
443
- /* DO NOT CHANGE!*/
444
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
445
- .eds-form-component--radio__container {
446
- display: flex;
447
- justify-content: center;
448
- align-items: center;
449
- position: relative;
450
- cursor: pointer;
451
- height: 2rem;
452
- width: -moz-fit-content;
453
- width: fit-content;
454
- -webkit-user-select: none;
455
- -moz-user-select: none;
456
- user-select: none;
457
- }
458
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
459
- background-color: var(--components-form-radio-standard-fill-hover);
460
- }
461
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
462
- background-color: var(--components-form-radio-contrast-fill-hover);
463
- }
464
- .eds-form-component--radio__container input {
465
- position: absolute;
466
- opacity: 0;
467
- cursor: pointer;
468
- height: 0;
469
- width: 0;
470
- }
471
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
472
- height: 0.625rem;
473
- width: 0.625rem;
474
- }
475
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
476
- outline: 2px solid #181c56;
477
- outline-color: var(--basecolors-stroke-focus-standard);
478
- outline-offset: 0.125rem;
479
- }
480
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
481
- outline-color: var(--basecolors-stroke-focus-contrast);
482
- }
483
- .eds-form-component--radio__container .eds-form-component--radio__radio {
484
- position: relative;
485
- height: 1.25rem;
486
- width: 1.25rem;
487
- margin-right: 1rem;
488
- background-color: var(--components-form-radio-standard-fill-default);
489
- border: 0.125rem solid var(--components-form-radio-standard-border);
490
- border-radius: 50%;
491
- display: flex;
492
- align-items: center;
493
- justify-content: center;
494
- }
495
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
496
- background-color: var(--components-form-radio-contrast-fill-default);
497
- border-color: var(--components-form-radio-contrast-border);
498
- }
499
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
500
- background: var(--components-form-baseform-contrast-fill-disabled);
501
- border-color: var(--components-form-baseform-contrast-text-disabled);
502
- cursor: not-allowed;
503
- }
504
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
505
- border-color: var(--components-form-baseform-contrast-text-disabled);
506
- }
507
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
508
- background: var(--components-form-baseform-contrast-fill-disabled);
509
- border-color: var(--components-form-baseform-contrast-text-disabled);
510
- }
511
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
512
- color: var(--components-form-baseform-contrast-text-disabled);
513
- }
514
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
515
- display: block;
516
- width: 0;
517
- height: 0;
518
- border-radius: 50%;
519
- background-color: var(--components-form-radio-standard-fill-selected);
520
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
521
- }
522
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
523
- background-color: var(--components-form-radio-contrast-icon);
438
+ .eds-fieldset {
439
+ margin: 0;
440
+ padding: 0;
441
+ border: 0;
524
442
  }
525
443
  /* DO NOT CHANGE!*/
526
444
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -643,6 +561,88 @@
643
561
  }
644
562
  /* DO NOT CHANGE!*/
645
563
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
564
+ .eds-form-component--radio__container {
565
+ display: flex;
566
+ justify-content: center;
567
+ align-items: center;
568
+ position: relative;
569
+ cursor: pointer;
570
+ height: 2rem;
571
+ width: -moz-fit-content;
572
+ width: fit-content;
573
+ -webkit-user-select: none;
574
+ -moz-user-select: none;
575
+ user-select: none;
576
+ }
577
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
578
+ background-color: var(--components-form-radio-standard-fill-hover);
579
+ }
580
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
581
+ background-color: var(--components-form-radio-contrast-fill-hover);
582
+ }
583
+ .eds-form-component--radio__container input {
584
+ position: absolute;
585
+ opacity: 0;
586
+ cursor: pointer;
587
+ height: 0;
588
+ width: 0;
589
+ }
590
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
591
+ height: 0.625rem;
592
+ width: 0.625rem;
593
+ }
594
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
595
+ outline: 2px solid #181c56;
596
+ outline-color: var(--basecolors-stroke-focus-standard);
597
+ outline-offset: 0.125rem;
598
+ }
599
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
600
+ outline-color: var(--basecolors-stroke-focus-contrast);
601
+ }
602
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
603
+ position: relative;
604
+ height: 1.25rem;
605
+ width: 1.25rem;
606
+ margin-right: 1rem;
607
+ background-color: var(--components-form-radio-standard-fill-default);
608
+ border: 0.125rem solid var(--components-form-radio-standard-border);
609
+ border-radius: 50%;
610
+ display: flex;
611
+ align-items: center;
612
+ justify-content: center;
613
+ }
614
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
615
+ background-color: var(--components-form-radio-contrast-fill-default);
616
+ border-color: var(--components-form-radio-contrast-border);
617
+ }
618
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
619
+ background: var(--components-form-baseform-contrast-fill-disabled);
620
+ border-color: var(--components-form-baseform-contrast-text-disabled);
621
+ cursor: not-allowed;
622
+ }
623
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
624
+ border-color: var(--components-form-baseform-contrast-text-disabled);
625
+ }
626
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
627
+ background: var(--components-form-baseform-contrast-fill-disabled);
628
+ border-color: var(--components-form-baseform-contrast-text-disabled);
629
+ }
630
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
631
+ color: var(--components-form-baseform-contrast-text-disabled);
632
+ }
633
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
634
+ display: block;
635
+ width: 0;
636
+ height: 0;
637
+ border-radius: 50%;
638
+ background-color: var(--components-form-radio-standard-fill-selected);
639
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
640
+ }
641
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
642
+ background-color: var(--components-form-radio-contrast-icon);
643
+ }
644
+ /* DO NOT CHANGE!*/
645
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
646
646
  .eds-input-group {
647
647
  color: inherit;
648
648
  display: block;
@@ -954,6 +954,17 @@ textarea.eds-form-control.eds-textarea {
954
954
  }
955
955
  /* DO NOT CHANGE!*/
956
956
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
957
+ .eds-segmented-control {
958
+ margin-top: 0.25rem;
959
+ display: flex;
960
+ background: var(--components-form-segmentedcontrol-standard-background);
961
+ border-radius: 0.5rem;
962
+ }
963
+ .eds-contrast .eds-segmented-control {
964
+ background: var(--components-form-segmentedcontrol-contrast-background);
965
+ }
966
+ /* DO NOT CHANGE!*/
967
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
957
968
  .eds-segmented-choice {
958
969
  display: block;
959
970
  flex: 1 1 0px;
@@ -1581,14 +1592,3 @@ textarea.eds-form-control.eds-textarea {
1581
1592
  :root {
1582
1593
  --eds-form: 1;
1583
1594
  }
1584
- /* DO NOT CHANGE!*/
1585
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1586
- .eds-segmented-control {
1587
- margin-top: 0.25rem;
1588
- display: flex;
1589
- background: var(--components-form-segmentedcontrol-standard-background);
1590
- border-radius: 0.5rem;
1591
- }
1592
- .eds-contrast .eds-segmented-control {
1593
- background: var(--components-form-segmentedcontrol-contrast-background);
1594
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "8.1.0",
3
+ "version": "8.1.1",
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": "^7.3.0",
30
+ "@entur/icons": "^7.4.0",
31
31
  "@entur/tokens": "^3.17.0",
32
- "@entur/tooltip": "^4.0.0",
33
- "@entur/typography": "^1.8.44",
32
+ "@entur/tooltip": "^4.0.1",
33
+ "@entur/typography": "^1.8.45",
34
34
  "@entur/utils": "^0.11.2",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "c5713d9ad333e17ca5714d86181baba74c56e0eb"
37
+ "gitHead": "045cada5d95c62d8ddfc95d82b4526742ab07d0a"
38
38
  }