@entur/form 8.2.2 → 8.2.3

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 +176 -159
  2. package/package.json +7 -7
package/dist/styles.css CHANGED
@@ -1,5 +1,83 @@
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
+ .eds-fieldset {
75
+ margin: 0;
76
+ padding: 0;
77
+ border: 0;
78
+ }
79
+ /* DO NOT CHANGE!*/
80
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
81
  .eds-form-control__field-and-feedback-text {
4
82
  display: flex;
5
83
  flex-direction: column;
@@ -10,6 +88,9 @@
10
88
  .eds-form-control__field-and-feedback-text--has-tooltip {
11
89
  padding-right: 2rem;
12
90
  }
91
+ .eds-form-control__field-and-feedback-text:has(.eds-form-control-wrapper--disabled) {
92
+ cursor: not-allowed;
93
+ }
13
94
  .eds-form-control-wrapper {
14
95
  display: flex;
15
96
  align-items: center;
@@ -65,6 +146,14 @@
65
146
  .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
66
147
  display: none;
67
148
  }
149
+ .eds-form-control-wrapper--disabled:focus-within {
150
+ border-color: transparent;
151
+ outline: none;
152
+ }
153
+ .eds-contrast .eds-form-control-wrapper--disabled:focus-within {
154
+ border-color: transparent;
155
+ outline: none;
156
+ }
68
157
  .eds-form-control-wrapper--readonly {
69
158
  border-color: transparent;
70
159
  pointer-events: none;
@@ -197,6 +286,88 @@
197
286
  }
198
287
  /* DO NOT CHANGE!*/
199
288
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
289
+ .eds-form-component--radio__container {
290
+ display: flex;
291
+ justify-content: center;
292
+ align-items: center;
293
+ position: relative;
294
+ cursor: pointer;
295
+ height: 2rem;
296
+ width: -moz-fit-content;
297
+ width: fit-content;
298
+ -webkit-user-select: none;
299
+ -moz-user-select: none;
300
+ user-select: none;
301
+ }
302
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
303
+ background-color: var(--components-form-radio-standard-fill-hover);
304
+ }
305
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
306
+ background-color: var(--components-form-radio-contrast-fill-hover);
307
+ }
308
+ .eds-form-component--radio__container input {
309
+ position: absolute;
310
+ opacity: 0;
311
+ cursor: pointer;
312
+ height: 0;
313
+ width: 0;
314
+ }
315
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
316
+ height: 0.625rem;
317
+ width: 0.625rem;
318
+ }
319
+ .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
320
+ outline: 2px solid #181c56;
321
+ outline-color: var(--basecolors-stroke-focus-standard);
322
+ outline-offset: 0.125rem;
323
+ }
324
+ .eds-contrast .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
325
+ outline-color: var(--basecolors-stroke-focus-contrast);
326
+ }
327
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
328
+ position: relative;
329
+ height: 1.25rem;
330
+ width: 1.25rem;
331
+ margin-right: 1rem;
332
+ background-color: var(--components-form-radio-standard-fill-default);
333
+ border: 0.125rem solid var(--components-form-radio-standard-border);
334
+ border-radius: 50%;
335
+ display: flex;
336
+ align-items: center;
337
+ justify-content: center;
338
+ }
339
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
340
+ background-color: var(--components-form-radio-contrast-fill-default);
341
+ border-color: var(--components-form-radio-contrast-border);
342
+ }
343
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
344
+ background: var(--components-form-baseform-contrast-fill-disabled);
345
+ border-color: var(--components-form-baseform-contrast-text-disabled);
346
+ cursor: not-allowed;
347
+ }
348
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
349
+ border-color: var(--components-form-baseform-contrast-text-disabled);
350
+ }
351
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
352
+ background: var(--components-form-baseform-contrast-fill-disabled);
353
+ border-color: var(--components-form-baseform-contrast-text-disabled);
354
+ }
355
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
356
+ color: var(--components-form-baseform-contrast-text-disabled);
357
+ }
358
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
359
+ display: block;
360
+ width: 0;
361
+ height: 0;
362
+ border-radius: 50%;
363
+ background-color: var(--components-form-radio-standard-fill-selected);
364
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
365
+ }
366
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
367
+ background-color: var(--components-form-radio-contrast-icon);
368
+ }
369
+ /* DO NOT CHANGE!*/
370
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
200
371
  .eds-checkbox__container {
201
372
  display: flex;
202
373
  align-items: center;
@@ -338,11 +509,6 @@
338
509
  stroke-dashoffset: 0;
339
510
  }
340
511
  }
341
- .eds-fieldset {
342
- margin: 0;
343
- padding: 0;
344
- border: 0;
345
- }
346
512
  /* DO NOT CHANGE!*/
347
513
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
348
514
  .eds-input-group {
@@ -425,160 +591,11 @@
425
591
  line-height: 1rem;
426
592
  padding: 0;
427
593
  }
428
- /* DO NOT CHANGE!*/
429
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
430
- .eds-feedback-text {
431
- display: flex;
432
- align-items: center;
433
- margin-top: 0.25rem;
434
- }
435
- .eds-feedback-text--info, .eds-feedback-text--information {
436
- padding-left: calc(1rem + 0.125rem);
437
- }
438
- .eds-feedback-text__text {
439
- color: var(--components-form-feedbacktext-information-standard-text);
440
- }
441
- .eds-contrast .eds-feedback-text__text {
442
- color: var(--components-form-feedbacktext-information-contrast-text);
443
- }
444
-
445
- .eds-feedback-text__icon {
446
- font-size: 1.5rem;
447
- min-height: 1.5rem;
448
- min-width: 1.5rem;
449
- padding-right: 0.5rem;
450
- position: relative;
451
- top: -0.1rem;
452
- }
453
- .eds-feedback-text__icon--success {
454
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
455
- }
456
- .eds-feedback-text__icon--success circle {
457
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
458
- }
459
- .eds-contrast .eds-feedback-text__icon--success {
460
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
461
- }
462
- .eds-contrast .eds-feedback-text__icon--success circle {
463
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
464
- }
465
- .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
466
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
467
- }
468
- .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
469
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
470
- }
471
- .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
472
- color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
473
- }
474
- .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
475
- fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
476
- }
477
- .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
478
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
479
- }
480
- .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
481
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
482
- }
483
- .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
484
- color: var(--components-form-feedbacktext-information-contrast-icon-fill);
485
- }
486
- .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
487
- fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
488
- }
489
- .eds-feedback-text__icon--warning {
490
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
491
- }
492
- .eds-feedback-text__icon--warning .svg-exclamation {
493
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
494
- }
495
- .eds-contrast .eds-feedback-text__icon--warning {
496
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
497
- }
498
- .eds-contrast .eds-feedback-text__icon--warning circle {
499
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
500
- }
501
- /* DO NOT CHANGE!*/
502
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
503
- .eds-form-component--radio__container {
504
- display: flex;
505
- justify-content: center;
506
- align-items: center;
507
- position: relative;
508
- cursor: pointer;
509
- height: 2rem;
510
- width: -moz-fit-content;
511
- width: fit-content;
512
- -webkit-user-select: none;
513
- -moz-user-select: none;
514
- user-select: none;
515
- }
516
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
517
- background-color: var(--components-form-radio-standard-fill-hover);
518
- }
519
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
520
- background-color: var(--components-form-radio-contrast-fill-hover);
521
- }
522
- .eds-form-component--radio__container input {
523
- position: absolute;
524
- opacity: 0;
525
- cursor: pointer;
526
- height: 0;
527
- width: 0;
528
- }
529
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
530
- height: 0.625rem;
531
- width: 0.625rem;
532
- }
533
- .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
534
- outline: 2px solid #181c56;
535
- outline-color: var(--basecolors-stroke-focus-standard);
536
- outline-offset: 0.125rem;
537
- }
538
- .eds-contrast .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
539
- outline-color: var(--basecolors-stroke-focus-contrast);
540
- }
541
- .eds-form-component--radio__container .eds-form-component--radio__radio {
542
- position: relative;
543
- height: 1.25rem;
544
- width: 1.25rem;
545
- margin-right: 1rem;
546
- background-color: var(--components-form-radio-standard-fill-default);
547
- border: 0.125rem solid var(--components-form-radio-standard-border);
548
- border-radius: 50%;
549
- display: flex;
550
- align-items: center;
551
- justify-content: center;
552
- }
553
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
554
- background-color: var(--components-form-radio-contrast-fill-default);
555
- border-color: var(--components-form-radio-contrast-border);
556
- }
557
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
558
- background: var(--components-form-baseform-contrast-fill-disabled);
559
- border-color: var(--components-form-baseform-contrast-text-disabled);
560
- cursor: not-allowed;
561
- }
562
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
563
- border-color: var(--components-form-baseform-contrast-text-disabled);
564
- }
565
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
566
- background: var(--components-form-baseform-contrast-fill-disabled);
567
- border-color: var(--components-form-baseform-contrast-text-disabled);
568
- }
569
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
570
- color: var(--components-form-baseform-contrast-text-disabled);
571
- }
572
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
573
- display: block;
574
- width: 0;
575
- height: 0;
576
- border-radius: 50%;
577
- background-color: var(--components-form-radio-standard-fill-selected);
578
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
579
- }
580
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
581
- background-color: var(--components-form-radio-contrast-icon);
594
+ .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
595
+ top: 1rem;
596
+ font-size: 1rem;
597
+ height: 3rem;
598
+ line-height: 1rem;
582
599
  }
583
600
  /* DO NOT CHANGE!*/
584
601
  /* 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": "8.2.2",
3
+ "version": "8.2.3",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -27,16 +27,16 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/button": "^3.3.2",
31
- "@entur/icons": "^7.7.0",
32
- "@entur/tokens": "^3.17.6",
33
- "@entur/tooltip": "^5.2.2",
34
- "@entur/typography": "^1.9.2",
30
+ "@entur/button": "^3.3.3",
31
+ "@entur/icons": "^7.7.1",
32
+ "@entur/tokens": "^3.18.0",
33
+ "@entur/tooltip": "^5.2.3",
34
+ "@entur/typography": "^1.9.3",
35
35
  "@entur/utils": "^0.12.2",
36
36
  "classnames": "^2.3.1"
37
37
  },
38
38
  "devDependencies": {
39
39
  "dts-cli": "2.0.5"
40
40
  },
41
- "gitHead": "7c03f458e9c34f5e0fd4f2d23c8eb6a6e47fb669"
41
+ "gitHead": "8ae7ed09699a63cc7e50d546d54750d8ec066c50"
42
42
  }