@entur/form 8.3.2-beta.12 → 8.3.2-beta.13

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 +427 -427
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -192,6 +192,221 @@
192
192
  }
193
193
  /* DO NOT CHANGE!*/
194
194
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
195
+ .eds-form-control__field-and-feedback-text {
196
+ display: flex;
197
+ flex-direction: column;
198
+ height: -moz-fit-content;
199
+ height: fit-content;
200
+ width: 100%;
201
+ }
202
+ .eds-form-control__field-and-feedback-text--has-tooltip {
203
+ padding-right: 2rem;
204
+ }
205
+ .eds-form-control__field-and-feedback-text:has(.eds-form-control-wrapper--disabled):not(:has(.eds-form-control-wrapper--readonly)) {
206
+ cursor: not-allowed;
207
+ }
208
+ .eds-form-control-wrapper {
209
+ display: flex;
210
+ align-items: center;
211
+ position: relative;
212
+ flex: 1;
213
+ min-height: 3rem;
214
+ padding-left: 1rem;
215
+ padding-right: 1rem;
216
+ background-color: var(--components-form-baseform-standard-fill-default);
217
+ border-radius: 0.25rem;
218
+ border: 0.125rem solid var(--components-form-baseform-standard-border-default);
219
+ box-shadow: 0 0 0 transparent;
220
+ color: var(--components-form-baseform-standard-text-content);
221
+ transition: border-color 0.1s ease-in-out;
222
+ }
223
+ .eds-form-control-wrapper:hover {
224
+ border-color: var(--components-form-baseform-standard-border-interactive);
225
+ }
226
+ .eds-contrast .eds-form-control-wrapper:hover {
227
+ border-color: var(--components-form-baseform-contrast-border-interactive);
228
+ }
229
+ .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
230
+ border-color: var(--components-form-baseform-standard-border-interactive);
231
+ outline: 2px solid var(--components-form-baseform-standard-border-interactive);
232
+ }
233
+ .eds-contrast .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
234
+ border-color: var(--components-form-baseform-contrast-border-interactive);
235
+ outline-color: var(--components-form-baseform-contrast-border-interactive);
236
+ }
237
+ .eds-form-control-wrapper ::-moz-placeholder {
238
+ color: var(--components-form-baseform-standard-text-label);
239
+ }
240
+ .eds-form-control-wrapper ::placeholder {
241
+ color: var(--components-form-baseform-standard-text-label);
242
+ }
243
+ .eds-form-control-wrapper--disabled {
244
+ border-color: transparent;
245
+ background-color: var(--components-form-baseform-standard-fill-disabled);
246
+ pointer-events: none;
247
+ color: var(--components-form-baseform-standard-text-disabled);
248
+ }
249
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
250
+ color: var(--components-form-baseform-standard-text-disabled);
251
+ }
252
+ .eds-contrast .eds-form-control-wrapper--disabled {
253
+ border-color: transparent;
254
+ background-color: var(--components-form-baseform-contrast-fill-disabled);
255
+ color: var(--components-form-baseform-contrast-text-disabled);
256
+ }
257
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
258
+ color: var(--components-form-baseform-contrast-text-disabled);
259
+ }
260
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
261
+ display: none;
262
+ }
263
+ .eds-form-control-wrapper--disabled:focus-within {
264
+ border-color: transparent;
265
+ outline: none;
266
+ }
267
+ .eds-contrast .eds-form-control-wrapper--disabled:focus-within {
268
+ border-color: transparent;
269
+ outline: none;
270
+ }
271
+ .eds-form-control-wrapper--readonly {
272
+ border-color: transparent;
273
+ cursor: default;
274
+ background: var(--components-form-baseform-standard-fill-readonly);
275
+ border: var(--components-form-baseform-standard-fill-readonly);
276
+ }
277
+ .eds-form-control-wrapper--readonly:focus-visible {
278
+ outline: none;
279
+ }
280
+ .eds-contrast .eds-form-control-wrapper--readonly {
281
+ background: var(--components-form-baseform-contrast-fill-readonly);
282
+ border: var(--components-form-baseform-contrast-fill-readonly);
283
+ color: var(--components-form-baseform-contrast-text-description);
284
+ }
285
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-form-control {
286
+ color: var(--components-form-baseform-contrast-text-description);
287
+ }
288
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
289
+ color: var(--components-form-baseform-contrast-text-description);
290
+ }
291
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
292
+ display: none;
293
+ }
294
+ .eds-form-control-wrapper--size-medium .eds-form-control,
295
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
296
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
297
+ font-size: 1rem;
298
+ line-height: 1rem;
299
+ }
300
+ .eds-form-control-wrapper--size-large {
301
+ min-height: 4rem;
302
+ }
303
+ .eds-form-control-wrapper--size-large .eds-form-control,
304
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
305
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
306
+ font-size: 1.5rem;
307
+ }
308
+ .eds-form-control-wrapper--success {
309
+ border-color: var(--components-form-baseform-standard-border-success);
310
+ }
311
+ .eds-form-control-wrapper--success:focus-within {
312
+ border-color: var(--components-form-baseform-standard-border-success);
313
+ outline-color: var(--components-form-baseform-standard-border-success);
314
+ }
315
+ .eds-contrast .eds-form-control-wrapper--success {
316
+ border-color: var(--components-form-baseform-standard-border-success);
317
+ }
318
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
319
+ border-color: var(--components-form-baseform-contrast-border-success);
320
+ outline-color: var(--components-form-baseform-contrast-border-success);
321
+ }
322
+ .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
323
+ border-color: var(--components-form-baseform-standard-border-negative);
324
+ }
325
+ .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
326
+ border-color: var(--components-form-baseform-standard-border-negative);
327
+ outline-color: var(--components-form-baseform-standard-border-negative);
328
+ }
329
+ .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
330
+ border-color: var(--components-form-baseform-contrast-border-negative);
331
+ }
332
+ .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
333
+ border-color: var(--components-form-baseform-contrast-border-negative);
334
+ outline-color: var(--components-form-baseform-contrast-border-negative);
335
+ }
336
+ .eds-contrast .eds-form-control .eds-tooltip {
337
+ background: var(--components-tooltip-tooltip-standard-fill);
338
+ color: var(--components-tooltip-tooltip-standard-text);
339
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
340
+ }
341
+ .eds-form-control .eds-tooltip::after {
342
+ background: var(--components-tooltip-tooltip-standard-fill);
343
+ }
344
+
345
+ .eds-form-control {
346
+ display: block;
347
+ -webkit-appearance: none;
348
+ -moz-appearance: none;
349
+ appearance: none;
350
+ width: 100%;
351
+ height: 100%;
352
+ padding: 20px 0rem 0.25rem;
353
+ font-family: inherit;
354
+ font-size: 1rem;
355
+ line-height: 1rem;
356
+ border: 0;
357
+ color: var(--components-form-baseform-standard-text-content);
358
+ background-color: transparent;
359
+ }
360
+ .eds-form-control::-moz-placeholder {
361
+ opacity: 0;
362
+ -moz-transition: opacity 0.2s ease-in-out;
363
+ transition: opacity 0.2s ease-in-out;
364
+ }
365
+ .eds-form-control::placeholder {
366
+ opacity: 0;
367
+ transition: opacity 0.2s ease-in-out;
368
+ }
369
+ .eds-form-control:focus {
370
+ outline: none;
371
+ }
372
+ .eds-form-control:focus::-moz-placeholder {
373
+ opacity: 1;
374
+ }
375
+ .eds-form-control:focus::placeholder {
376
+ opacity: 1;
377
+ }
378
+ .eds-form-control__prepend, .eds-form-control__append {
379
+ position: relative;
380
+ line-height: inherit;
381
+ }
382
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
383
+ all: unset;
384
+ position: absolute;
385
+ display: flex;
386
+ align-items: center;
387
+ justify-content: center;
388
+ height: 1.5rem;
389
+ width: 1.5rem;
390
+ right: -2rem;
391
+ border-radius: 100%;
392
+ color: var(--primary-text-color);
393
+ cursor: pointer;
394
+ }
395
+ .eds-form-control__prepend {
396
+ margin-right: 0.75rem;
397
+ margin-left: 0;
398
+ }
399
+ .eds-form-control__append {
400
+ margin-right: 0;
401
+ margin-left: 0.75rem;
402
+ }
403
+ .eds-fieldset {
404
+ margin: 0;
405
+ padding: 0;
406
+ border: 0;
407
+ }
408
+ /* DO NOT CHANGE!*/
409
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
195
410
  .eds-feedback-text {
196
411
  display: flex;
197
412
  align-items: center;
@@ -263,11 +478,6 @@
263
478
  .eds-contrast .eds-feedback-text__icon--warning circle {
264
479
  fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
265
480
  }
266
- .eds-fieldset {
267
- margin: 0;
268
- padding: 0;
269
- border: 0;
270
- }
271
481
  /* DO NOT CHANGE!*/
272
482
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
273
483
  .eds-input-group {
@@ -542,426 +752,50 @@
542
752
  .eds-contrast .eds-switch__switch path {
543
753
  fill: var(--components-form-switch-contrast-icon-false);
544
754
  }
545
- :checked + .eds-switch__switch {
546
- background-color: var(--eds-switch-color);
547
- }
548
- :checked + .eds-switch__switch .eds-switch__circle {
549
- left: 1.625rem;
550
- }
551
- :checked + .eds-switch__switch .eds-switch__circle svg g,
552
- :checked + .eds-switch__switch .eds-switch__circle path {
553
- fill: var(--eds-switch-color);
554
- }
555
- .eds-contrast :checked + .eds-switch__switch {
556
- background-color: var(--eds-switch-contrast-color);
557
- }
558
- :focus-visible + .eds-switch__switch {
559
- outline: 2px solid #181c56;
560
- outline-color: var(--basecolors-stroke-focus-standard);
561
- outline-offset: 0.125rem;
562
- }
563
- .eds-contrast :focus-visible + .eds-switch__switch {
564
- outline-color: var(--basecolors-stroke-focus-contrast);
565
- }
566
- .eds-switch__switch--large {
567
- width: 3.75rem;
568
- height: 2rem;
569
- border-radius: 3.75rem;
570
- }
571
- :checked + .eds-switch__switch--large .eds-switch__circle {
572
- left: 1.875rem;
573
- }
574
- .eds-switch__switch--large svg {
575
- position: relative;
576
- right: 0.05rem;
577
- }
578
- .eds-switch__label--large--right {
579
- font-size: 1rem;
580
- }
581
- .eds-switch__label--large--bottom {
582
- font-size: 0.875rem;
583
- }
584
- .eds-switch__label--medium--right {
585
- font-size: 0.875rem;
586
- }
587
- .eds-switch__label--medium--bottom {
588
- font-size: 0.75rem;
589
- }
590
- /* DO NOT CHANGE!*/
591
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
592
- /* DO NOT CHANGE!*/
593
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
594
- /* DO NOT CHANGE!*/
595
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
596
- /* DO NOT CHANGE!*/
597
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
598
- /* DO NOT CHANGE!*/
599
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
600
- [data-color-mode=light],
601
- :root {
602
- --basecolors-frame-contrast: #181c56;
603
- --basecolors-frame-contrastalt: #393d79;
604
- --basecolors-frame-contrastalt-2: #292b6a;
605
- --basecolors-frame-default: #ffffff;
606
- --basecolors-frame-elevated: #ffffff;
607
- --basecolors-frame-elevatedalt: #f6f6f9;
608
- --basecolors-frame-subdued: #d9dae8;
609
- --basecolors-frame-tint: #f6f6f9;
610
- --basecolors-shape-accent: #181c56;
611
- --basecolors-shape-bicycle-contrast: #00db9b;
612
- --basecolors-shape-bicycle-default: #388f76;
613
- --basecolors-shape-bus-contrast: #ff6392;
614
- --basecolors-shape-bus-default: #c5044e;
615
- --basecolors-shape-cableway-contrast: #b482fb;
616
- --basecolors-shape-cableway-default: #78469a;
617
- --basecolors-shape-disabled: #6e6f73;
618
- --basecolors-shape-disabledalt: #b6b8ba;
619
- --basecolors-shape-ferry-contrast: #6fdfff;
620
- --basecolors-shape-ferry-default: #0c6693;
621
- --basecolors-shape-funicular-contrast: #b482fb;
622
- --basecolors-shape-funicular-default: #78469a;
623
- --basecolors-shape-helicopter-contrast: #fbafea;
624
- --basecolors-shape-helicopter-default: #800664;
625
- --basecolors-shape-highlight: #ff5959;
626
- --basecolors-shape-light: #ffffff;
627
- --basecolors-shape-mask: #ffffff;
628
- --basecolors-shape-maskalt: #ffffff;
629
- --basecolors-shape-metro-contrast: #f08901;
630
- --basecolors-shape-metro-default: #bf5826;
631
- --basecolors-shape-mobility-contrast: #00db9b;
632
- --basecolors-shape-mobility-default: #388f76;
633
- --basecolors-shape-plane-contrast: #fbafea;
634
- --basecolors-shape-plane-default: #800664;
635
- --basecolors-shape-subdued: #626493;
636
- --basecolors-shape-subduedalt: #d9dae8;
637
- --basecolors-shape-taxi-contrast: #ffe082;
638
- --basecolors-shape-taxi-default: #3d3e40;
639
- --basecolors-shape-train-contrast: #42a5f5;
640
- --basecolors-shape-train-default: #00367f;
641
- --basecolors-shape-tram-contrast: #b482fb;
642
- --basecolors-shape-tram-default: #78469a;
643
- --basecolors-shape-walk-contrast: #8284ab;
644
- --basecolors-shape-walk-default: #8d8e9c;
645
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
646
- --basecolors-shape-airportlinkbus-default: #800664;
647
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
648
- --basecolors-shape-airportlinkrail-default: #800664;
649
- --basecolors-stroke-contrast: #aeb7e2;
650
- --basecolors-stroke-default: #181c56;
651
- --basecolors-stroke-disabled: #949699;
652
- --basecolors-stroke-focus-contrast: #aeb7e2;
653
- --basecolors-stroke-focus-standard: #181c56;
654
- --basecolors-stroke-highlight: #ff5959;
655
- --basecolors-stroke-light: #ffffff;
656
- --basecolors-stroke-subdued: #8284ab;
657
- --basecolors-stroke-subduedalt: #e3e6e8;
658
- --basecolors-text-accent: #181c56;
659
- --basecolors-text-disabled: #6e6f73;
660
- --basecolors-text-disabledalt: #b6b8ba;
661
- --basecolors-text-highlight: #ff5959;
662
- --basecolors-text-light: #ffffff;
663
- --basecolors-text-subdued: #626493;
664
- --basecolors-text-subduedalt: #d9dae8;
665
- }
666
-
667
- [data-color-mode=dark] {
668
- --basecolors-frame-contrast: #212233;
669
- --basecolors-frame-contrastalt: #141527;
670
- --basecolors-frame-contrastalt-2: #08091c;
671
- --basecolors-frame-default: #08091c;
672
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
673
- --basecolors-frame-elevatedalt: #464755;
674
- --basecolors-frame-subdued: #2d2e3e;
675
- --basecolors-frame-tint: #141527;
676
- --basecolors-shape-accent: #e5e5e9;
677
- --basecolors-shape-bicycle-contrast: #4db295;
678
- --basecolors-shape-bicycle-default: #4db295;
679
- --basecolors-shape-bus-contrast: #ef7398;
680
- --basecolors-shape-bus-default: #ef7398;
681
- --basecolors-shape-cableway-contrast: #b898e5;
682
- --basecolors-shape-cableway-default: #b898e5;
683
- --basecolors-shape-disabled: #b6b8ba;
684
- --basecolors-shape-disabledalt: #b3b4bd;
685
- --basecolors-shape-ferry-contrast: #8ccfe2;
686
- --basecolors-shape-ferry-default: #8ccfe2;
687
- --basecolors-shape-funicular-contrast: #b898e5;
688
- --basecolors-shape-funicular-default: #b898e5;
689
- --basecolors-shape-helicopter-contrast: #f2b8e5;
690
- --basecolors-shape-helicopter-default: #f2b8e5;
691
- --basecolors-shape-highlight: #ff9494;
692
- --basecolors-shape-light: #e5e5e9;
693
- --basecolors-shape-mask: #2d2e3e;
694
- --basecolors-shape-maskalt: #393a49;
695
- --basecolors-shape-metro-contrast: #dd973c;
696
- --basecolors-shape-metro-default: #dd973c;
697
- --basecolors-shape-mobility-contrast: #4db295;
698
- --basecolors-shape-mobility-default: #4db295;
699
- --basecolors-shape-plane-contrast: #f2b8e5;
700
- --basecolors-shape-plane-default: #f2b8e5;
701
- --basecolors-shape-subdued: #b3b4bd;
702
- --basecolors-shape-subduedalt: #b3b4bd;
703
- --basecolors-shape-taxi-contrast: #ffe082;
704
- --basecolors-shape-taxi-default: #ffe082;
705
- --basecolors-shape-train-contrast: #60a2d7;
706
- --basecolors-shape-train-default: #60a2d7;
707
- --basecolors-shape-tram-contrast: #b898e5;
708
- --basecolors-shape-tram-default: #b898e5;
709
- --basecolors-shape-walk-contrast: #8d8e9c;
710
- --basecolors-shape-walk-default: #8d8e9c;
711
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
712
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
713
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
714
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
715
- --basecolors-stroke-contrast: #aeb7e2;
716
- --basecolors-stroke-default: #b3b4bd;
717
- --basecolors-stroke-disabled: #e3e6e8;
718
- --basecolors-stroke-focus-contrast: #aeb7e2;
719
- --basecolors-stroke-focus-standard: #aeb7e2;
720
- --basecolors-stroke-highlight: #ff9494;
721
- --basecolors-stroke-light: #b3b4bd;
722
- --basecolors-stroke-subdued: #81828f;
723
- --basecolors-stroke-subduedalt: #949699;
724
- --basecolors-text-accent: #e5e5e9;
725
- --basecolors-text-disabled: #b6b8ba;
726
- --basecolors-text-disabledalt: #b6b8ba;
727
- --basecolors-text-highlight: #ff9494;
728
- --basecolors-text-light: #e5e5e9;
729
- --basecolors-text-subdued: #b3b4bd;
730
- --basecolors-text-subduedalt: #b3b4bd;
731
- }
732
-
733
- .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled):not(.eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
734
- background: #ffffff;
735
- background: var(--basecolors-frame-default);
736
- width: -moz-fit-content;
737
- width: fit-content;
738
- height: -moz-fit-content;
739
- height: fit-content;
740
- padding: 0.15rem;
741
- margin: -0.15rem;
742
- }
743
- *[data-color-mode=dark] .eds-contrast .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled):not(.eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
744
- background-color: #181c56;
745
- background-color: var(--basecolors-frame-contrast);
746
- }
747
- .eds-textarea__wrapper textarea.eds-form-control.eds-textarea {
748
- min-height: 7.75rem;
749
- resize: vertical;
750
- line-height: 1.5rem;
751
- }
752
- .eds-textarea__wrapper .eds-form-control-wrapper {
753
- padding-right: 0;
754
- cursor: text;
755
- }
756
- /* DO NOT CHANGE!*/
757
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
758
- .eds-form-control__field-and-feedback-text {
759
- display: flex;
760
- flex-direction: column;
761
- height: -moz-fit-content;
762
- height: fit-content;
763
- width: 100%;
764
- }
765
- .eds-form-control__field-and-feedback-text--has-tooltip {
766
- padding-right: 2rem;
767
- }
768
- .eds-form-control__field-and-feedback-text:has(.eds-form-control-wrapper--disabled):not(:has(.eds-form-control-wrapper--readonly)) {
769
- cursor: not-allowed;
770
- }
771
- .eds-form-control-wrapper {
772
- display: flex;
773
- align-items: center;
774
- position: relative;
775
- flex: 1;
776
- min-height: 3rem;
777
- padding-left: 1rem;
778
- padding-right: 1rem;
779
- background-color: var(--components-form-baseform-standard-fill-default);
780
- border-radius: 0.25rem;
781
- border: 0.125rem solid var(--components-form-baseform-standard-border-default);
782
- box-shadow: 0 0 0 transparent;
783
- color: var(--components-form-baseform-standard-text-content);
784
- transition: border-color 0.1s ease-in-out;
785
- }
786
- .eds-form-control-wrapper:hover {
787
- border-color: var(--components-form-baseform-standard-border-interactive);
788
- }
789
- .eds-contrast .eds-form-control-wrapper:hover {
790
- border-color: var(--components-form-baseform-contrast-border-interactive);
791
- }
792
- .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
793
- border-color: var(--components-form-baseform-standard-border-interactive);
794
- outline: 2px solid var(--components-form-baseform-standard-border-interactive);
795
- }
796
- .eds-contrast .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
797
- border-color: var(--components-form-baseform-contrast-border-interactive);
798
- outline-color: var(--components-form-baseform-contrast-border-interactive);
799
- }
800
- .eds-form-control-wrapper ::-moz-placeholder {
801
- color: var(--components-form-baseform-standard-text-label);
802
- }
803
- .eds-form-control-wrapper ::placeholder {
804
- color: var(--components-form-baseform-standard-text-label);
805
- }
806
- .eds-form-control-wrapper--disabled {
807
- border-color: transparent;
808
- background-color: var(--components-form-baseform-standard-fill-disabled);
809
- pointer-events: none;
810
- color: var(--components-form-baseform-standard-text-disabled);
811
- }
812
- .eds-form-control-wrapper--disabled .eds-input-group__label {
813
- color: var(--components-form-baseform-standard-text-disabled);
814
- }
815
- .eds-contrast .eds-form-control-wrapper--disabled {
816
- border-color: transparent;
817
- background-color: var(--components-form-baseform-contrast-fill-disabled);
818
- color: var(--components-form-baseform-contrast-text-disabled);
819
- }
820
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
821
- color: var(--components-form-baseform-contrast-text-disabled);
822
- }
823
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
824
- display: none;
825
- }
826
- .eds-form-control-wrapper--disabled:focus-within {
827
- border-color: transparent;
828
- outline: none;
829
- }
830
- .eds-contrast .eds-form-control-wrapper--disabled:focus-within {
831
- border-color: transparent;
832
- outline: none;
833
- }
834
- .eds-form-control-wrapper--readonly {
835
- border-color: transparent;
836
- cursor: default;
837
- background: var(--components-form-baseform-standard-fill-readonly);
838
- border: var(--components-form-baseform-standard-fill-readonly);
839
- }
840
- .eds-form-control-wrapper--readonly:focus-visible {
841
- outline: none;
842
- }
843
- .eds-contrast .eds-form-control-wrapper--readonly {
844
- background: var(--components-form-baseform-contrast-fill-readonly);
845
- border: var(--components-form-baseform-contrast-fill-readonly);
846
- color: var(--components-form-baseform-contrast-text-description);
847
- }
848
- .eds-contrast .eds-form-control-wrapper--readonly .eds-form-control {
849
- color: var(--components-form-baseform-contrast-text-description);
850
- }
851
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
852
- color: var(--components-form-baseform-contrast-text-description);
853
- }
854
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
855
- display: none;
856
- }
857
- .eds-form-control-wrapper--size-medium .eds-form-control,
858
- .eds-form-control-wrapper--size-medium .eds-form-control__append,
859
- .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
860
- font-size: 1rem;
861
- line-height: 1rem;
862
- }
863
- .eds-form-control-wrapper--size-large {
864
- min-height: 4rem;
865
- }
866
- .eds-form-control-wrapper--size-large .eds-form-control,
867
- .eds-form-control-wrapper--size-large .eds-form-control__append,
868
- .eds-form-control-wrapper--size-large .eds-form-control__prepend {
869
- font-size: 1.5rem;
870
- }
871
- .eds-form-control-wrapper--success {
872
- border-color: var(--components-form-baseform-standard-border-success);
873
- }
874
- .eds-form-control-wrapper--success:focus-within {
875
- border-color: var(--components-form-baseform-standard-border-success);
876
- outline-color: var(--components-form-baseform-standard-border-success);
877
- }
878
- .eds-contrast .eds-form-control-wrapper--success {
879
- border-color: var(--components-form-baseform-standard-border-success);
880
- }
881
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
882
- border-color: var(--components-form-baseform-contrast-border-success);
883
- outline-color: var(--components-form-baseform-contrast-border-success);
884
- }
885
- .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
886
- border-color: var(--components-form-baseform-standard-border-negative);
887
- }
888
- .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
889
- border-color: var(--components-form-baseform-standard-border-negative);
890
- outline-color: var(--components-form-baseform-standard-border-negative);
891
- }
892
- .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
893
- border-color: var(--components-form-baseform-contrast-border-negative);
894
- }
895
- .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
896
- border-color: var(--components-form-baseform-contrast-border-negative);
897
- outline-color: var(--components-form-baseform-contrast-border-negative);
898
- }
899
- .eds-contrast .eds-form-control .eds-tooltip {
900
- background: var(--components-tooltip-tooltip-standard-fill);
901
- color: var(--components-tooltip-tooltip-standard-text);
902
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
903
- }
904
- .eds-form-control .eds-tooltip::after {
905
- background: var(--components-tooltip-tooltip-standard-fill);
906
- }
907
-
908
- .eds-form-control {
909
- display: block;
910
- -webkit-appearance: none;
911
- -moz-appearance: none;
912
- appearance: none;
913
- width: 100%;
914
- height: 100%;
915
- padding: 20px 0rem 0.25rem;
916
- font-family: inherit;
917
- font-size: 1rem;
918
- line-height: 1rem;
919
- border: 0;
920
- color: var(--components-form-baseform-standard-text-content);
921
- background-color: transparent;
922
- }
923
- .eds-form-control::-moz-placeholder {
924
- opacity: 0;
925
- -moz-transition: opacity 0.2s ease-in-out;
926
- transition: opacity 0.2s ease-in-out;
755
+ :checked + .eds-switch__switch {
756
+ background-color: var(--eds-switch-color);
927
757
  }
928
- .eds-form-control::placeholder {
929
- opacity: 0;
930
- transition: opacity 0.2s ease-in-out;
758
+ :checked + .eds-switch__switch .eds-switch__circle {
759
+ left: 1.625rem;
931
760
  }
932
- .eds-form-control:focus {
933
- outline: none;
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);
934
764
  }
935
- .eds-form-control:focus::-moz-placeholder {
936
- opacity: 1;
765
+ .eds-contrast :checked + .eds-switch__switch {
766
+ background-color: var(--eds-switch-contrast-color);
937
767
  }
938
- .eds-form-control:focus::placeholder {
939
- opacity: 1;
768
+ :focus-visible + .eds-switch__switch {
769
+ outline: 2px solid #181c56;
770
+ outline-color: var(--basecolors-stroke-focus-standard);
771
+ outline-offset: 0.125rem;
940
772
  }
941
- .eds-form-control__prepend, .eds-form-control__append {
773
+ .eds-contrast :focus-visible + .eds-switch__switch {
774
+ outline-color: var(--basecolors-stroke-focus-contrast);
775
+ }
776
+ .eds-switch__switch--large {
777
+ width: 3.75rem;
778
+ height: 2rem;
779
+ border-radius: 3.75rem;
780
+ }
781
+ :checked + .eds-switch__switch--large .eds-switch__circle {
782
+ left: 1.875rem;
783
+ }
784
+ .eds-switch__switch--large svg {
942
785
  position: relative;
943
- line-height: inherit;
786
+ right: 0.05rem;
944
787
  }
945
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
946
- all: unset;
947
- position: absolute;
948
- display: flex;
949
- align-items: center;
950
- justify-content: center;
951
- height: 1.5rem;
952
- width: 1.5rem;
953
- right: -2rem;
954
- border-radius: 100%;
955
- color: var(--primary-text-color);
956
- cursor: pointer;
788
+ .eds-switch__label--large--right {
789
+ font-size: 1rem;
957
790
  }
958
- .eds-form-control__prepend {
959
- margin-right: 0.75rem;
960
- margin-left: 0;
791
+ .eds-switch__label--large--bottom {
792
+ font-size: 0.875rem;
961
793
  }
962
- .eds-form-control__append {
963
- margin-right: 0;
964
- margin-left: 0.75rem;
794
+ .eds-switch__label--medium--right {
795
+ font-size: 0.875rem;
796
+ }
797
+ .eds-switch__label--medium--bottom {
798
+ font-size: 0.75rem;
965
799
  }
966
800
  /* DO NOT CHANGE!*/
967
801
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -1113,6 +947,172 @@ input:disabled + .eds-input-panel__container {
1113
947
  }
1114
948
  /* DO NOT CHANGE!*/
1115
949
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
950
+ /* DO NOT CHANGE!*/
951
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
952
+ /* DO NOT CHANGE!*/
953
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
954
+ /* DO NOT CHANGE!*/
955
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
956
+ /* DO NOT CHANGE!*/
957
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
958
+ [data-color-mode=light],
959
+ :root {
960
+ --basecolors-frame-contrast: #181c56;
961
+ --basecolors-frame-contrastalt: #393d79;
962
+ --basecolors-frame-contrastalt-2: #292b6a;
963
+ --basecolors-frame-default: #ffffff;
964
+ --basecolors-frame-elevated: #ffffff;
965
+ --basecolors-frame-elevatedalt: #f6f6f9;
966
+ --basecolors-frame-subdued: #d9dae8;
967
+ --basecolors-frame-tint: #f6f6f9;
968
+ --basecolors-shape-accent: #181c56;
969
+ --basecolors-shape-bicycle-contrast: #00db9b;
970
+ --basecolors-shape-bicycle-default: #388f76;
971
+ --basecolors-shape-bus-contrast: #ff6392;
972
+ --basecolors-shape-bus-default: #c5044e;
973
+ --basecolors-shape-cableway-contrast: #b482fb;
974
+ --basecolors-shape-cableway-default: #78469a;
975
+ --basecolors-shape-disabled: #6e6f73;
976
+ --basecolors-shape-disabledalt: #b6b8ba;
977
+ --basecolors-shape-ferry-contrast: #6fdfff;
978
+ --basecolors-shape-ferry-default: #0c6693;
979
+ --basecolors-shape-funicular-contrast: #b482fb;
980
+ --basecolors-shape-funicular-default: #78469a;
981
+ --basecolors-shape-helicopter-contrast: #fbafea;
982
+ --basecolors-shape-helicopter-default: #800664;
983
+ --basecolors-shape-highlight: #ff5959;
984
+ --basecolors-shape-light: #ffffff;
985
+ --basecolors-shape-mask: #ffffff;
986
+ --basecolors-shape-maskalt: #ffffff;
987
+ --basecolors-shape-metro-contrast: #f08901;
988
+ --basecolors-shape-metro-default: #bf5826;
989
+ --basecolors-shape-mobility-contrast: #00db9b;
990
+ --basecolors-shape-mobility-default: #388f76;
991
+ --basecolors-shape-plane-contrast: #fbafea;
992
+ --basecolors-shape-plane-default: #800664;
993
+ --basecolors-shape-subdued: #626493;
994
+ --basecolors-shape-subduedalt: #d9dae8;
995
+ --basecolors-shape-taxi-contrast: #ffe082;
996
+ --basecolors-shape-taxi-default: #3d3e40;
997
+ --basecolors-shape-train-contrast: #42a5f5;
998
+ --basecolors-shape-train-default: #00367f;
999
+ --basecolors-shape-tram-contrast: #b482fb;
1000
+ --basecolors-shape-tram-default: #78469a;
1001
+ --basecolors-shape-walk-contrast: #8284ab;
1002
+ --basecolors-shape-walk-default: #8d8e9c;
1003
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
1004
+ --basecolors-shape-airportlinkbus-default: #800664;
1005
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
1006
+ --basecolors-shape-airportlinkrail-default: #800664;
1007
+ --basecolors-stroke-contrast: #aeb7e2;
1008
+ --basecolors-stroke-default: #181c56;
1009
+ --basecolors-stroke-disabled: #949699;
1010
+ --basecolors-stroke-focus-contrast: #aeb7e2;
1011
+ --basecolors-stroke-focus-standard: #181c56;
1012
+ --basecolors-stroke-highlight: #ff5959;
1013
+ --basecolors-stroke-light: #ffffff;
1014
+ --basecolors-stroke-subdued: #8284ab;
1015
+ --basecolors-stroke-subduedalt: #e3e6e8;
1016
+ --basecolors-text-accent: #181c56;
1017
+ --basecolors-text-disabled: #6e6f73;
1018
+ --basecolors-text-disabledalt: #b6b8ba;
1019
+ --basecolors-text-highlight: #ff5959;
1020
+ --basecolors-text-light: #ffffff;
1021
+ --basecolors-text-subdued: #626493;
1022
+ --basecolors-text-subduedalt: #d9dae8;
1023
+ }
1024
+
1025
+ [data-color-mode=dark] {
1026
+ --basecolors-frame-contrast: #212233;
1027
+ --basecolors-frame-contrastalt: #141527;
1028
+ --basecolors-frame-contrastalt-2: #08091c;
1029
+ --basecolors-frame-default: #08091c;
1030
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
1031
+ --basecolors-frame-elevatedalt: #464755;
1032
+ --basecolors-frame-subdued: #2d2e3e;
1033
+ --basecolors-frame-tint: #141527;
1034
+ --basecolors-shape-accent: #e5e5e9;
1035
+ --basecolors-shape-bicycle-contrast: #4db295;
1036
+ --basecolors-shape-bicycle-default: #4db295;
1037
+ --basecolors-shape-bus-contrast: #ef7398;
1038
+ --basecolors-shape-bus-default: #ef7398;
1039
+ --basecolors-shape-cableway-contrast: #b898e5;
1040
+ --basecolors-shape-cableway-default: #b898e5;
1041
+ --basecolors-shape-disabled: #b6b8ba;
1042
+ --basecolors-shape-disabledalt: #b3b4bd;
1043
+ --basecolors-shape-ferry-contrast: #8ccfe2;
1044
+ --basecolors-shape-ferry-default: #8ccfe2;
1045
+ --basecolors-shape-funicular-contrast: #b898e5;
1046
+ --basecolors-shape-funicular-default: #b898e5;
1047
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
1048
+ --basecolors-shape-helicopter-default: #f2b8e5;
1049
+ --basecolors-shape-highlight: #ff9494;
1050
+ --basecolors-shape-light: #e5e5e9;
1051
+ --basecolors-shape-mask: #2d2e3e;
1052
+ --basecolors-shape-maskalt: #393a49;
1053
+ --basecolors-shape-metro-contrast: #dd973c;
1054
+ --basecolors-shape-metro-default: #dd973c;
1055
+ --basecolors-shape-mobility-contrast: #4db295;
1056
+ --basecolors-shape-mobility-default: #4db295;
1057
+ --basecolors-shape-plane-contrast: #f2b8e5;
1058
+ --basecolors-shape-plane-default: #f2b8e5;
1059
+ --basecolors-shape-subdued: #b3b4bd;
1060
+ --basecolors-shape-subduedalt: #b3b4bd;
1061
+ --basecolors-shape-taxi-contrast: #ffe082;
1062
+ --basecolors-shape-taxi-default: #ffe082;
1063
+ --basecolors-shape-train-contrast: #60a2d7;
1064
+ --basecolors-shape-train-default: #60a2d7;
1065
+ --basecolors-shape-tram-contrast: #b898e5;
1066
+ --basecolors-shape-tram-default: #b898e5;
1067
+ --basecolors-shape-walk-contrast: #8d8e9c;
1068
+ --basecolors-shape-walk-default: #8d8e9c;
1069
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
1070
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
1071
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
1072
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
1073
+ --basecolors-stroke-contrast: #aeb7e2;
1074
+ --basecolors-stroke-default: #b3b4bd;
1075
+ --basecolors-stroke-disabled: #e3e6e8;
1076
+ --basecolors-stroke-focus-contrast: #aeb7e2;
1077
+ --basecolors-stroke-focus-standard: #aeb7e2;
1078
+ --basecolors-stroke-highlight: #ff9494;
1079
+ --basecolors-stroke-light: #b3b4bd;
1080
+ --basecolors-stroke-subdued: #81828f;
1081
+ --basecolors-stroke-subduedalt: #949699;
1082
+ --basecolors-text-accent: #e5e5e9;
1083
+ --basecolors-text-disabled: #b6b8ba;
1084
+ --basecolors-text-disabledalt: #b6b8ba;
1085
+ --basecolors-text-highlight: #ff9494;
1086
+ --basecolors-text-light: #e5e5e9;
1087
+ --basecolors-text-subdued: #b3b4bd;
1088
+ --basecolors-text-subduedalt: #b3b4bd;
1089
+ }
1090
+
1091
+ .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled):not(.eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
1092
+ background: #ffffff;
1093
+ background: var(--basecolors-frame-default);
1094
+ width: -moz-fit-content;
1095
+ width: fit-content;
1096
+ height: -moz-fit-content;
1097
+ height: fit-content;
1098
+ padding: 0.15rem;
1099
+ margin: -0.15rem;
1100
+ }
1101
+ *[data-color-mode=dark] .eds-contrast .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled):not(.eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
1102
+ background-color: #181c56;
1103
+ background-color: var(--basecolors-frame-contrast);
1104
+ }
1105
+ .eds-textarea__wrapper textarea.eds-form-control.eds-textarea {
1106
+ min-height: 7.75rem;
1107
+ resize: vertical;
1108
+ line-height: 1.5rem;
1109
+ }
1110
+ .eds-textarea__wrapper .eds-form-control-wrapper {
1111
+ padding-right: 0;
1112
+ cursor: text;
1113
+ }
1114
+ /* DO NOT CHANGE!*/
1115
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1116
1116
  .eds-textfield__clear-button {
1117
1117
  background: none;
1118
1118
  border: none;
@@ -1237,17 +1237,6 @@ input:disabled + .eds-input-panel__container {
1237
1237
  }
1238
1238
  /* DO NOT CHANGE!*/
1239
1239
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1240
- .eds-segmented-control {
1241
- margin-top: 0.25rem;
1242
- display: flex;
1243
- background: var(--components-form-segmentedcontrol-standard-background);
1244
- border-radius: 0.5rem;
1245
- }
1246
- .eds-contrast .eds-segmented-control {
1247
- background: var(--components-form-segmentedcontrol-contrast-background);
1248
- }
1249
- /* DO NOT CHANGE!*/
1250
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1251
1240
  /* DO NOT CHANGE!*/
1252
1241
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1253
1242
  /* DO NOT CHANGE!*/
@@ -1845,3 +1834,14 @@ input:disabled + .eds-input-panel__container {
1845
1834
  :root {
1846
1835
  --eds-form: 1;
1847
1836
  }
1837
+ /* DO NOT CHANGE!*/
1838
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1839
+ .eds-segmented-control {
1840
+ margin-top: 0.25rem;
1841
+ display: flex;
1842
+ background: var(--components-form-segmentedcontrol-standard-background);
1843
+ border-radius: 0.5rem;
1844
+ }
1845
+ .eds-contrast .eds-segmented-control {
1846
+ background: var(--components-form-segmentedcontrol-contrast-background);
1847
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "8.3.2-beta.12",
3
+ "version": "8.3.2-beta.13",
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.13-beta.12",
30
+ "@entur/button": "^3.3.13-beta.13",
31
31
  "@entur/icons": "^8.0.0",
32
32
  "@entur/tokens": "^3.19.1",
33
- "@entur/tooltip": "^5.2.13-beta.12",
34
- "@entur/typography": "^1.10.0-beta.12",
33
+ "@entur/tooltip": "^5.2.13-beta.13",
34
+ "@entur/typography": "^1.10.0-beta.13",
35
35
  "@entur/utils": "^0.12.3",
36
36
  "classnames": "^2.3.1"
37
37
  },
38
38
  "devDependencies": {
39
39
  "dts-cli": "2.0.5"
40
40
  },
41
- "gitHead": "2a01de420517ee321602ced4e534eada22e2a10c"
41
+ "gitHead": "c9b59ab0f79e2611a602951c89f4f2c8213e235f"
42
42
  }