@entur/menu 4.2.35 → 4.2.36

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 +413 -413
  2. package/package.json +7 -7
package/dist/styles.css CHANGED
@@ -1,59 +1,5 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-breadcrumb {
4
- list-style: none;
5
- margin: 0;
6
- padding: 0;
7
- }
8
-
9
- .eds-breadcrumb__item {
10
- display: inline-block;
11
- color: var(--components-menu-breadcrumb-standard-text);
12
- }
13
- .eds-contrast .eds-breadcrumb__item {
14
- color: var(--components-menu-breadcrumb-contrast-text);
15
- }
16
-
17
- .eds-breadcrumb__separator {
18
- margin: 0 0.25rem 0 0.25rem;
19
- }
20
-
21
- .eds-breadcrumb__link {
22
- text-decoration: none;
23
- color: var(--components-menu-breadcrumb-standard-text);
24
- background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-standard-text) 0%, var(--components-menu-breadcrumb-standard-text) 100%);
25
- background-repeat: no-repeat;
26
- background-size: 100% 0.125rem;
27
- background-position: 0 100%;
28
- }
29
- .eds-contrast .eds-breadcrumb__link {
30
- color: var(--components-menu-breadcrumb-contrast-text);
31
- background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-contrast-text) 0%, var(--components-menu-breadcrumb-contrast-text) 100%);
32
- }
33
- .eds-breadcrumb__link:hover {
34
- animation: eds-breadcrumb-underline 0.3s ease-in;
35
- }
36
- .eds-breadcrumb__link:focus {
37
- outline: 2px solid #181c56;
38
- outline-color: var(--basecolors-stroke-focus-standard);
39
- outline-offset: 0.125rem;
40
- }
41
- .eds-contrast .eds-breadcrumb__link:focus {
42
- outline-color: var(--basecolors-stroke-focus-contrast);
43
- }
44
- @keyframes eds-breadcrumb-underline {
45
- from {
46
- background-size: 0% 0.125rem;
47
- }
48
- to {
49
- background-size: 100% 0.125rem;
50
- }
51
- }
52
- .eds-breadcrumb__link--current {
53
- font-weight: 600;
54
- }
55
- /* DO NOT CHANGE!*/
56
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
57
3
  .eds-side-navigation,
58
4
  .eds-side-navigation-group {
59
5
  color: var(--components-menu-sidenavigation-standard-text);
@@ -307,59 +253,57 @@
307
253
  }
308
254
  /* DO NOT CHANGE!*/
309
255
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
310
- .eds-top-navigation-item {
311
- --show-active-line: 0;
256
+ .eds-breadcrumb {
257
+ list-style: none;
258
+ margin: 0;
259
+ padding: 0;
260
+ }
261
+
262
+ .eds-breadcrumb__item {
312
263
  display: inline-block;
313
- cursor: pointer;
314
- color: var(--components-menu-navigationbar-standard-text-unselected);
264
+ color: var(--components-menu-breadcrumb-standard-text);
265
+ }
266
+ .eds-contrast .eds-breadcrumb__item {
267
+ color: var(--components-menu-breadcrumb-contrast-text);
268
+ }
269
+
270
+ .eds-breadcrumb__separator {
271
+ margin: 0 0.25rem 0 0.25rem;
272
+ }
273
+
274
+ .eds-breadcrumb__link {
315
275
  text-decoration: none;
316
- position: relative;
317
- padding: 1rem;
318
- min-width: 5rem;
319
- width: -moz-fit-content;
320
- width: fit-content;
321
- text-align: center;
322
- font-family: inherit;
323
- font-size: 1rem;
324
- font-weight: 600;
276
+ color: var(--components-menu-breadcrumb-standard-text);
277
+ background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-standard-text) 0%, var(--components-menu-breadcrumb-standard-text) 100%);
278
+ background-repeat: no-repeat;
279
+ background-size: 100% 0.125rem;
280
+ background-position: 0 100%;
325
281
  }
326
- .eds-top-navigation-item::after {
327
- content: "";
328
- display: block;
329
- bottom: 1rem;
330
- height: 0.1875rem;
331
- width: 0;
332
- margin: 0 auto;
333
- opacity: var(--show-active-line);
334
- background: var(--components-menu-navigationbar-standard-stroke-selected);
335
- transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
282
+ .eds-contrast .eds-breadcrumb__link {
283
+ color: var(--components-menu-breadcrumb-contrast-text);
284
+ background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-contrast-text) 0%, var(--components-menu-breadcrumb-contrast-text) 100%);
336
285
  }
337
- .eds-contrast .eds-top-navigation-item {
338
- color: var(--components-menu-navigationbar-contrast-text-unselected);
286
+ .eds-breadcrumb__link:hover {
287
+ animation: eds-breadcrumb-underline 0.3s ease-in;
339
288
  }
340
- .eds-top-navigation-item:focus {
289
+ .eds-breadcrumb__link:focus {
341
290
  outline: 2px solid #181c56;
342
291
  outline-color: var(--basecolors-stroke-focus-standard);
343
292
  outline-offset: 0.125rem;
344
293
  }
345
- .eds-contrast .eds-top-navigation-item:focus {
294
+ .eds-contrast .eds-breadcrumb__link:focus {
346
295
  outline-color: var(--basecolors-stroke-focus-contrast);
347
296
  }
348
- .eds-top-navigation-item:hover {
349
- --show-active-line: 1;
350
- }
351
- .eds-top-navigation-item:hover::after {
352
- width: 2rem;
353
- }
354
- .eds-top-navigation-item--active {
355
- color: var(--components-menu-navigationbar-standard-text-selected);
356
- --show-active-line: 1;
357
- }
358
- .eds-top-navigation-item--active::after {
359
- width: 2rem;
297
+ @keyframes eds-breadcrumb-underline {
298
+ from {
299
+ background-size: 0% 0.125rem;
300
+ }
301
+ to {
302
+ background-size: 100% 0.125rem;
303
+ }
360
304
  }
361
- .eds-contrast .eds-top-navigation-item--active {
362
- color: var(--components-menu-navigationbar-contrast-text-selected);
305
+ .eds-breadcrumb__link--current {
306
+ font-weight: 600;
363
307
  }
364
308
  /* DO NOT CHANGE!*/
365
309
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -441,334 +385,59 @@
441
385
  }
442
386
  /* DO NOT CHANGE!*/
443
387
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
444
- .eds-pagination {
445
- align-items: center;
446
- display: flex;
447
- flex-wrap: wrap;
448
- row-gap: 0.75rem;
449
- justify-content: space-between;
450
- }
451
- .eds-pagination__results {
452
- align-items: center;
453
- display: flex;
454
- flex: 1;
455
- justify-content: flex-start;
456
- }
457
- .eds-pagination__results-label {
458
- margin-right: 0.5rem;
459
- }
460
- .eds-pagination .eds-label {
461
- color: var(--components-menu-pagination-standard-text-subdued);
462
- }
463
- .eds-contrast .eds-pagination .eds-label {
464
- color: var(--components-menu-pagination-contrast-text-subdued);
465
- }
466
- .eds-pagination__controls {
467
- align-items: center;
468
- display: flex;
469
- justify-content: center;
388
+ .eds-top-navigation-item {
389
+ --show-active-line: 0;
390
+ display: inline-block;
391
+ cursor: pointer;
392
+ color: var(--components-menu-navigationbar-standard-text-unselected);
393
+ text-decoration: none;
394
+ position: relative;
395
+ padding: 1rem;
396
+ min-width: 5rem;
397
+ width: -moz-fit-content;
398
+ width: fit-content;
399
+ text-align: center;
400
+ font-family: inherit;
401
+ font-size: 1rem;
402
+ font-weight: 600;
470
403
  }
471
- .eds-pagination__results:first-of-type:last-of-type, .eds-pagination__controls:first-of-type:last-of-type {
404
+ .eds-top-navigation-item::after {
405
+ content: "";
406
+ display: block;
407
+ bottom: 1rem;
408
+ height: 0.1875rem;
409
+ width: 0;
472
410
  margin: 0 auto;
411
+ opacity: var(--show-active-line);
412
+ background: var(--components-menu-navigationbar-standard-stroke-selected);
413
+ transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
473
414
  }
474
-
475
- .eds-pagination-menu__menu-button {
476
- -webkit-appearance: none;
477
- -moz-appearance: none;
478
- appearance: none;
479
- background: transparent;
480
- border: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
481
- border-radius: 0.25rem;
482
- color: var(--components-menu-pagination-standard-text-unselected);
483
- font-family: inherit;
484
- display: flex;
485
- align-items: center;
486
- justify-content: space-around;
487
- height: 2rem;
488
- margin-left: 0.25rem;
489
- margin-right: 1rem;
490
- width: 3.5rem;
415
+ .eds-contrast .eds-top-navigation-item {
416
+ color: var(--components-menu-navigationbar-contrast-text-unselected);
491
417
  }
492
- .eds-contrast .eds-pagination-menu__menu-button {
493
- border-color: var(--components-menu-pagination-contrast-border-unselected);
494
- color: var(--components-menu-pagination-contrast-text-unselected);
418
+ .eds-top-navigation-item:focus {
419
+ outline: 2px solid #181c56;
420
+ outline-color: var(--basecolors-stroke-focus-standard);
421
+ outline-offset: 0.125rem;
495
422
  }
496
- .eds-pagination-menu__menu-button--open {
497
- border-color: currentColor;
423
+ .eds-contrast .eds-top-navigation-item:focus {
424
+ outline-color: var(--basecolors-stroke-focus-contrast);
498
425
  }
499
- .eds-pagination-menu__menu-button:focus {
500
- outline: none;
501
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
426
+ .eds-top-navigation-item:hover {
427
+ --show-active-line: 1;
502
428
  }
503
- .eds-pagination-menu__menu-list {
504
- width: 3.5rem;
429
+ .eds-top-navigation-item:hover::after {
430
+ width: 2rem;
505
431
  }
506
-
507
- .eds-pagination__page {
508
- align-items: center;
509
- -webkit-appearance: none;
510
- -moz-appearance: none;
511
- appearance: none;
512
- background-color: var(--components-menu-pagination-standard-default);
513
- border: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
514
- border-radius: 0.25rem;
515
- color: var(--components-menu-pagination-standard-text-unselected);
516
- cursor: pointer;
517
- display: flex;
518
- font-family: inherit;
519
- font-size: 0.875rem;
520
- height: 2rem;
521
- justify-content: center;
522
- margin: 0 0.125rem;
523
- padding: 0 0.25rem;
524
- transition: background 0.1s ease-out, border-color 0.1s ease-out;
525
- -webkit-user-select: none;
526
- -moz-user-select: none;
527
- user-select: none;
528
- min-width: 2rem;
432
+ .eds-top-navigation-item--active {
433
+ color: var(--components-menu-navigationbar-standard-text-selected);
434
+ --show-active-line: 1;
529
435
  }
530
- .eds-contrast .eds-pagination__page {
531
- background-color: var(--components-menu-pagination-contrast-default);
532
- border-color: var(--components-menu-pagination-contrast-border-unselected);
533
- color: var(--components-menu-pagination-contrast-text-unselected);
436
+ .eds-top-navigation-item--active::after {
437
+ width: 2rem;
534
438
  }
535
- .eds-pagination__page--selected {
536
- background: var(--components-menu-pagination-standard-active);
537
- border-color: var(--components-menu-pagination-standard-border-selected);
538
- color: var(--components-menu-pagination-standard-text-selected);
539
- opacity: 1;
540
- pointer-events: none;
541
- }
542
- .eds-contrast .eds-pagination__page--selected {
543
- background: var(--components-menu-pagination-contrast-active);
544
- border-color: var(--components-menu-pagination-contrast-border-selected);
545
- color: var(--components-menu-pagination-contrast-text-selected);
546
- }
547
- .eds-pagination__page--disabled {
548
- opacity: 0.5;
549
- pointer-events: none;
550
- }
551
- .eds-pagination__page:hover {
552
- background-color: var(--components-menu-pagination-standard-hover);
553
- border-color: var(--components-menu-pagination-standard-border-unselected);
554
- }
555
- .eds-contrast .eds-pagination__page:hover {
556
- background-color: var(--components-menu-pagination-contrast-hover);
557
- border-color: var(--components-menu-pagination-contrast-border-unselected);
558
- }
559
- .eds-pagination__page.focus-visible {
560
- outline: 2px solid #181c56;
561
- outline-color: var(--basecolors-stroke-focus-standard);
562
- outline-offset: 0.125rem;
563
- }
564
- .eds-pagination__page:focus-visible {
565
- outline: 2px solid #181c56;
566
- outline-color: var(--basecolors-stroke-focus-standard);
567
- outline-offset: 0.125rem;
568
- }
569
- .eds-contrast .eds-pagination__page.focus-visible {
570
- outline-color: var(--basecolors-stroke-focus-contrast);
571
- }
572
- .eds-contrast .eds-pagination__page:focus-visible {
573
- outline-color: var(--basecolors-stroke-focus-contrast);
574
- }
575
-
576
- .eds-pagination__ellipsis {
577
- color: var(--components-menu-pagination-standard-icon);
578
- align-items: baseline;
579
- cursor: default;
580
- display: flex;
581
- font-size: 1.5rem;
582
- height: 2rem;
583
- justify-content: center;
584
- -webkit-user-select: none;
585
- -moz-user-select: none;
586
- user-select: none;
587
- width: 2rem;
588
- margin: 0 2px;
589
- }
590
- .eds-contrast .eds-pagination__ellipsis {
591
- color: var(--components-menu-pagination-contrast-icon);
592
- }
593
-
594
- .eds-pagination__input-wrapper {
595
- white-space: nowrap;
596
- }
597
- .eds-pagination__input-label {
598
- border-left: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
599
- color: var(--components-menu-pagination-standard-text-subdued);
600
- font-size: 0.875rem;
601
- margin-left: 0.5rem;
602
- padding: 0 1rem;
603
- }
604
- .eds-contrast .eds-pagination__input-label {
605
- border-color: var(--components-menu-pagination-contrast-border-unselected);
606
- color: var(--components-menu-pagination-contrast-text-subdued);
607
- }
608
- .eds-pagination__input-field {
609
- -webkit-appearance: none;
610
- -moz-appearance: none;
611
- appearance: none;
612
- background-color: var(--components-menu-pagination-standard-default);
613
- border: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
614
- border-radius: 0.25rem;
615
- color: var(--components-menu-pagination-standard-text-unselected);
616
- font-family: inherit;
617
- font-size: 0.875rem;
618
- height: 2rem;
619
- text-align: center;
620
- width: 2rem;
621
- }
622
- .eds-contrast .eds-pagination__input-field {
623
- background-color: var(--components-menu-pagination-contrast-default);
624
- border-color: var(--components-menu-pagination-contrast-border-unselected);
625
- color: var(--components-menu-pagination-contrast-text-unselected);
626
- }
627
- .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
628
- -webkit-appearance: none;
629
- appearance: none;
630
- margin: 0;
631
- }
632
- .eds-pagination__input-field.focus-visible {
633
- outline: 2px solid #181c56;
634
- outline-color: var(--basecolors-stroke-focus-standard);
635
- outline-offset: 0.125rem;
636
- }
637
- .eds-pagination__input-field:focus-visible {
638
- outline: 2px solid #181c56;
639
- outline-color: var(--basecolors-stroke-focus-standard);
640
- outline-offset: 0.125rem;
641
- }
642
- .eds-contrast .eds-pagination__input-field.focus-visible {
643
- outline-color: var(--basecolors-stroke-focus-contrast);
644
- }
645
- .eds-contrast .eds-pagination__input-field:focus-visible {
646
- outline-color: var(--basecolors-stroke-focus-contrast);
647
- }
648
- /* DO NOT CHANGE!*/
649
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
650
- .eds-stepper {
651
- --text-color: var(--components-menu-stepper-standard-text-uncompleted);
652
- --line-color: var(--components-menu-stepper-standard-background);
653
- --label-font-weight: 500;
654
- --display-active-line: none;
655
- display: flex;
656
- flex-direction: row;
657
- width: 100%;
658
- list-style-type: none;
659
- }
660
- .eds-stepper__step {
661
- display: flex;
662
- flex-grow: 1;
663
- flex-basis: 0;
664
- flex-direction: column;
665
- align-items: inherit;
666
- -webkit-appearance: none;
667
- -moz-appearance: none;
668
- appearance: none;
669
- background: none;
670
- border: none;
671
- font-family: inherit;
672
- text-transform: none;
673
- }
674
- .eds-stepper__step__wrapper {
675
- flex-grow: 1;
676
- }
677
- .eds-stepper__step.focus-visible .eds-stepper__step__label {
678
- outline-offset: 0.125rem;
679
- outline: 2px solid #181c56;
680
- }
681
- .eds-stepper__step:focus-visible .eds-stepper__step__label {
682
- outline-offset: 0.125rem;
683
- outline: 2px solid #181c56;
684
- }
685
- .eds-contrast .eds-stepper__step.focus-visible .eds-stepper__step__label {
686
- outline: 2px solid #ffffff;
687
- }
688
- .eds-contrast .eds-stepper__step:focus-visible .eds-stepper__step__label {
689
- outline: 2px solid #ffffff;
690
- }
691
- .eds-contrast .eds-stepper__step {
692
- --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
693
- --line-color: var(--components-menu-stepper-contrast-background);
694
- }
695
- .eds-stepper__step--interactive {
696
- all: unset;
697
- display: flex;
698
- flex-direction: column;
699
- width: 100%;
700
- cursor: pointer;
701
- }
702
- .eds-stepper__step--active {
703
- --text-color: var(--components-menu-stepper-standard-text-uncompleted);
704
- --label-font-weight: 600;
705
- --display-active-line: block;
706
- }
707
- .eds-contrast .eds-stepper__step--active {
708
- --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
709
- }
710
- .eds-stepper__step--completed {
711
- --text-color: var(--components-menu-stepper-standard-text-completed);
712
- --line-color: var(--components-menu-stepper-standard-progressbar);
713
- }
714
- .eds-contrast .eds-stepper__step--completed {
715
- --text-color: var(--components-menu-stepper-contrast-text-completed);
716
- --line-color: var(--components-menu-stepper-contrast-progressbar);
717
- }
718
- .eds-stepper__step__label {
719
- flex-grow: 1;
720
- flex-direction: column;
721
- align-self: center;
722
- text-align: center;
723
- font-size: 0.875rem;
724
- margin: 0.5rem 0 0;
725
- padding: 0 0.5rem;
726
- width: -moz-fit-content;
727
- width: fit-content;
728
- border-radius: 0.0625rem;
729
- color: var(--text-color);
730
- font-weight: var(--label-font-weight);
731
- }
732
- .eds-stepper__step--interactive:hover .eds-stepper__step__label {
733
- background-color: var(--components-menu-stepper-standard-background);
734
- color: var(--components-menu-stepper-standard-text-completed);
735
- }
736
- .eds-contrast .eds-stepper__step--interactive:hover .eds-stepper__step__label {
737
- background-color: var(--components-menu-stepper-contrast-background);
738
- color: var(--components-menu-stepper-contrast-text-completed);
739
- }
740
- .eds-stepper__step__line {
741
- height: 0.5rem;
742
- background: var(--line-color);
743
- position: relative;
744
- }
745
- .eds-stepper__step__line:before {
746
- display: var(--display-active-line);
747
- content: "";
748
- position: absolute;
749
- right: calc(50% - 0.2rem);
750
- bottom: 0.0625rem;
751
- border-radius: 0.0625rem;
752
- background: var(--components-menu-stepper-standard-progressbar);
753
- width: calc(0.5rem - 0.125rem - 0.01rem);
754
- height: calc(0.5rem - 0.125rem - 0.01rem);
755
- transform: rotate(45deg);
756
- }
757
- .eds-contrast .eds-stepper__step__line:before {
758
- background: var(--components-menu-stepper-contrast-progressbar);
759
- }
760
- .eds-stepper__step__line:after {
761
- display: var(--display-active-line);
762
- content: "";
763
- position: absolute;
764
- left: 0;
765
- bottom: 0;
766
- width: 50%;
767
- height: 0.5rem;
768
- background: var(--components-menu-stepper-standard-progressbar);
769
- }
770
- .eds-contrast .eds-stepper__step__line:after {
771
- background: var(--components-menu-stepper-contrast-progressbar);
439
+ .eds-contrast .eds-top-navigation-item--active {
440
+ color: var(--components-menu-navigationbar-contrast-text-selected);
772
441
  }
773
442
  /* DO NOT CHANGE!*/
774
443
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -1112,3 +781,334 @@
1112
781
  --eds-menu: 1;
1113
782
  --reach-menu-button: 1;
1114
783
  }
784
+ /* DO NOT CHANGE!*/
785
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
786
+ .eds-pagination {
787
+ align-items: center;
788
+ display: flex;
789
+ flex-wrap: wrap;
790
+ row-gap: 0.75rem;
791
+ justify-content: space-between;
792
+ }
793
+ .eds-pagination__results {
794
+ align-items: center;
795
+ display: flex;
796
+ flex: 1;
797
+ justify-content: flex-start;
798
+ }
799
+ .eds-pagination__results-label {
800
+ margin-right: 0.5rem;
801
+ }
802
+ .eds-pagination .eds-label {
803
+ color: var(--components-menu-pagination-standard-text-subdued);
804
+ }
805
+ .eds-contrast .eds-pagination .eds-label {
806
+ color: var(--components-menu-pagination-contrast-text-subdued);
807
+ }
808
+ .eds-pagination__controls {
809
+ align-items: center;
810
+ display: flex;
811
+ justify-content: center;
812
+ }
813
+ .eds-pagination__results:first-of-type:last-of-type, .eds-pagination__controls:first-of-type:last-of-type {
814
+ margin: 0 auto;
815
+ }
816
+
817
+ .eds-pagination-menu__menu-button {
818
+ -webkit-appearance: none;
819
+ -moz-appearance: none;
820
+ appearance: none;
821
+ background: transparent;
822
+ border: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
823
+ border-radius: 0.25rem;
824
+ color: var(--components-menu-pagination-standard-text-unselected);
825
+ font-family: inherit;
826
+ display: flex;
827
+ align-items: center;
828
+ justify-content: space-around;
829
+ height: 2rem;
830
+ margin-left: 0.25rem;
831
+ margin-right: 1rem;
832
+ width: 3.5rem;
833
+ }
834
+ .eds-contrast .eds-pagination-menu__menu-button {
835
+ border-color: var(--components-menu-pagination-contrast-border-unselected);
836
+ color: var(--components-menu-pagination-contrast-text-unselected);
837
+ }
838
+ .eds-pagination-menu__menu-button--open {
839
+ border-color: currentColor;
840
+ }
841
+ .eds-pagination-menu__menu-button:focus {
842
+ outline: none;
843
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
844
+ }
845
+ .eds-pagination-menu__menu-list {
846
+ width: 3.5rem;
847
+ }
848
+
849
+ .eds-pagination__page {
850
+ align-items: center;
851
+ -webkit-appearance: none;
852
+ -moz-appearance: none;
853
+ appearance: none;
854
+ background-color: var(--components-menu-pagination-standard-default);
855
+ border: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
856
+ border-radius: 0.25rem;
857
+ color: var(--components-menu-pagination-standard-text-unselected);
858
+ cursor: pointer;
859
+ display: flex;
860
+ font-family: inherit;
861
+ font-size: 0.875rem;
862
+ height: 2rem;
863
+ justify-content: center;
864
+ margin: 0 0.125rem;
865
+ padding: 0 0.25rem;
866
+ transition: background 0.1s ease-out, border-color 0.1s ease-out;
867
+ -webkit-user-select: none;
868
+ -moz-user-select: none;
869
+ user-select: none;
870
+ min-width: 2rem;
871
+ }
872
+ .eds-contrast .eds-pagination__page {
873
+ background-color: var(--components-menu-pagination-contrast-default);
874
+ border-color: var(--components-menu-pagination-contrast-border-unselected);
875
+ color: var(--components-menu-pagination-contrast-text-unselected);
876
+ }
877
+ .eds-pagination__page--selected {
878
+ background: var(--components-menu-pagination-standard-active);
879
+ border-color: var(--components-menu-pagination-standard-border-selected);
880
+ color: var(--components-menu-pagination-standard-text-selected);
881
+ opacity: 1;
882
+ pointer-events: none;
883
+ }
884
+ .eds-contrast .eds-pagination__page--selected {
885
+ background: var(--components-menu-pagination-contrast-active);
886
+ border-color: var(--components-menu-pagination-contrast-border-selected);
887
+ color: var(--components-menu-pagination-contrast-text-selected);
888
+ }
889
+ .eds-pagination__page--disabled {
890
+ opacity: 0.5;
891
+ pointer-events: none;
892
+ }
893
+ .eds-pagination__page:hover {
894
+ background-color: var(--components-menu-pagination-standard-hover);
895
+ border-color: var(--components-menu-pagination-standard-border-unselected);
896
+ }
897
+ .eds-contrast .eds-pagination__page:hover {
898
+ background-color: var(--components-menu-pagination-contrast-hover);
899
+ border-color: var(--components-menu-pagination-contrast-border-unselected);
900
+ }
901
+ .eds-pagination__page.focus-visible {
902
+ outline: 2px solid #181c56;
903
+ outline-color: var(--basecolors-stroke-focus-standard);
904
+ outline-offset: 0.125rem;
905
+ }
906
+ .eds-pagination__page:focus-visible {
907
+ outline: 2px solid #181c56;
908
+ outline-color: var(--basecolors-stroke-focus-standard);
909
+ outline-offset: 0.125rem;
910
+ }
911
+ .eds-contrast .eds-pagination__page.focus-visible {
912
+ outline-color: var(--basecolors-stroke-focus-contrast);
913
+ }
914
+ .eds-contrast .eds-pagination__page:focus-visible {
915
+ outline-color: var(--basecolors-stroke-focus-contrast);
916
+ }
917
+
918
+ .eds-pagination__ellipsis {
919
+ color: var(--components-menu-pagination-standard-icon);
920
+ align-items: baseline;
921
+ cursor: default;
922
+ display: flex;
923
+ font-size: 1.5rem;
924
+ height: 2rem;
925
+ justify-content: center;
926
+ -webkit-user-select: none;
927
+ -moz-user-select: none;
928
+ user-select: none;
929
+ width: 2rem;
930
+ margin: 0 2px;
931
+ }
932
+ .eds-contrast .eds-pagination__ellipsis {
933
+ color: var(--components-menu-pagination-contrast-icon);
934
+ }
935
+
936
+ .eds-pagination__input-wrapper {
937
+ white-space: nowrap;
938
+ }
939
+ .eds-pagination__input-label {
940
+ border-left: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
941
+ color: var(--components-menu-pagination-standard-text-subdued);
942
+ font-size: 0.875rem;
943
+ margin-left: 0.5rem;
944
+ padding: 0 1rem;
945
+ }
946
+ .eds-contrast .eds-pagination__input-label {
947
+ border-color: var(--components-menu-pagination-contrast-border-unselected);
948
+ color: var(--components-menu-pagination-contrast-text-subdued);
949
+ }
950
+ .eds-pagination__input-field {
951
+ -webkit-appearance: none;
952
+ -moz-appearance: none;
953
+ appearance: none;
954
+ background-color: var(--components-menu-pagination-standard-default);
955
+ border: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
956
+ border-radius: 0.25rem;
957
+ color: var(--components-menu-pagination-standard-text-unselected);
958
+ font-family: inherit;
959
+ font-size: 0.875rem;
960
+ height: 2rem;
961
+ text-align: center;
962
+ width: 2rem;
963
+ }
964
+ .eds-contrast .eds-pagination__input-field {
965
+ background-color: var(--components-menu-pagination-contrast-default);
966
+ border-color: var(--components-menu-pagination-contrast-border-unselected);
967
+ color: var(--components-menu-pagination-contrast-text-unselected);
968
+ }
969
+ .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
970
+ -webkit-appearance: none;
971
+ appearance: none;
972
+ margin: 0;
973
+ }
974
+ .eds-pagination__input-field.focus-visible {
975
+ outline: 2px solid #181c56;
976
+ outline-color: var(--basecolors-stroke-focus-standard);
977
+ outline-offset: 0.125rem;
978
+ }
979
+ .eds-pagination__input-field:focus-visible {
980
+ outline: 2px solid #181c56;
981
+ outline-color: var(--basecolors-stroke-focus-standard);
982
+ outline-offset: 0.125rem;
983
+ }
984
+ .eds-contrast .eds-pagination__input-field.focus-visible {
985
+ outline-color: var(--basecolors-stroke-focus-contrast);
986
+ }
987
+ .eds-contrast .eds-pagination__input-field:focus-visible {
988
+ outline-color: var(--basecolors-stroke-focus-contrast);
989
+ }
990
+ /* DO NOT CHANGE!*/
991
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
992
+ .eds-stepper {
993
+ --text-color: var(--components-menu-stepper-standard-text-uncompleted);
994
+ --line-color: var(--components-menu-stepper-standard-background);
995
+ --label-font-weight: 500;
996
+ --display-active-line: none;
997
+ display: flex;
998
+ flex-direction: row;
999
+ width: 100%;
1000
+ list-style-type: none;
1001
+ }
1002
+ .eds-stepper__step {
1003
+ display: flex;
1004
+ flex-grow: 1;
1005
+ flex-basis: 0;
1006
+ flex-direction: column;
1007
+ align-items: inherit;
1008
+ -webkit-appearance: none;
1009
+ -moz-appearance: none;
1010
+ appearance: none;
1011
+ background: none;
1012
+ border: none;
1013
+ font-family: inherit;
1014
+ text-transform: none;
1015
+ }
1016
+ .eds-stepper__step__wrapper {
1017
+ flex-grow: 1;
1018
+ }
1019
+ .eds-stepper__step.focus-visible .eds-stepper__step__label {
1020
+ outline-offset: 0.125rem;
1021
+ outline: 2px solid #181c56;
1022
+ }
1023
+ .eds-stepper__step:focus-visible .eds-stepper__step__label {
1024
+ outline-offset: 0.125rem;
1025
+ outline: 2px solid #181c56;
1026
+ }
1027
+ .eds-contrast .eds-stepper__step.focus-visible .eds-stepper__step__label {
1028
+ outline: 2px solid #ffffff;
1029
+ }
1030
+ .eds-contrast .eds-stepper__step:focus-visible .eds-stepper__step__label {
1031
+ outline: 2px solid #ffffff;
1032
+ }
1033
+ .eds-contrast .eds-stepper__step {
1034
+ --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
1035
+ --line-color: var(--components-menu-stepper-contrast-background);
1036
+ }
1037
+ .eds-stepper__step--interactive {
1038
+ all: unset;
1039
+ display: flex;
1040
+ flex-direction: column;
1041
+ width: 100%;
1042
+ cursor: pointer;
1043
+ }
1044
+ .eds-stepper__step--active {
1045
+ --text-color: var(--components-menu-stepper-standard-text-uncompleted);
1046
+ --label-font-weight: 600;
1047
+ --display-active-line: block;
1048
+ }
1049
+ .eds-contrast .eds-stepper__step--active {
1050
+ --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
1051
+ }
1052
+ .eds-stepper__step--completed {
1053
+ --text-color: var(--components-menu-stepper-standard-text-completed);
1054
+ --line-color: var(--components-menu-stepper-standard-progressbar);
1055
+ }
1056
+ .eds-contrast .eds-stepper__step--completed {
1057
+ --text-color: var(--components-menu-stepper-contrast-text-completed);
1058
+ --line-color: var(--components-menu-stepper-contrast-progressbar);
1059
+ }
1060
+ .eds-stepper__step__label {
1061
+ flex-grow: 1;
1062
+ flex-direction: column;
1063
+ align-self: center;
1064
+ text-align: center;
1065
+ font-size: 0.875rem;
1066
+ margin: 0.5rem 0 0;
1067
+ padding: 0 0.5rem;
1068
+ width: -moz-fit-content;
1069
+ width: fit-content;
1070
+ border-radius: 0.0625rem;
1071
+ color: var(--text-color);
1072
+ font-weight: var(--label-font-weight);
1073
+ }
1074
+ .eds-stepper__step--interactive:hover .eds-stepper__step__label {
1075
+ background-color: var(--components-menu-stepper-standard-background);
1076
+ color: var(--components-menu-stepper-standard-text-completed);
1077
+ }
1078
+ .eds-contrast .eds-stepper__step--interactive:hover .eds-stepper__step__label {
1079
+ background-color: var(--components-menu-stepper-contrast-background);
1080
+ color: var(--components-menu-stepper-contrast-text-completed);
1081
+ }
1082
+ .eds-stepper__step__line {
1083
+ height: 0.5rem;
1084
+ background: var(--line-color);
1085
+ position: relative;
1086
+ }
1087
+ .eds-stepper__step__line:before {
1088
+ display: var(--display-active-line);
1089
+ content: "";
1090
+ position: absolute;
1091
+ right: calc(50% - 0.2rem);
1092
+ bottom: 0.0625rem;
1093
+ border-radius: 0.0625rem;
1094
+ background: var(--components-menu-stepper-standard-progressbar);
1095
+ width: calc(0.5rem - 0.125rem - 0.01rem);
1096
+ height: calc(0.5rem - 0.125rem - 0.01rem);
1097
+ transform: rotate(45deg);
1098
+ }
1099
+ .eds-contrast .eds-stepper__step__line:before {
1100
+ background: var(--components-menu-stepper-contrast-progressbar);
1101
+ }
1102
+ .eds-stepper__step__line:after {
1103
+ display: var(--display-active-line);
1104
+ content: "";
1105
+ position: absolute;
1106
+ left: 0;
1107
+ bottom: 0;
1108
+ width: 50%;
1109
+ height: 0.5rem;
1110
+ background: var(--components-menu-stepper-standard-progressbar);
1111
+ }
1112
+ .eds-contrast .eds-stepper__step__line:after {
1113
+ background: var(--components-menu-stepper-contrast-progressbar);
1114
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.2.35",
3
+ "version": "4.2.36",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -28,16 +28,16 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@entur/a11y": "^0.2.87",
31
- "@entur/button": "^3.2.27",
32
- "@entur/expand": "^3.5.16",
33
- "@entur/icons": "^6.18.1",
34
- "@entur/layout": "^2.3.11",
31
+ "@entur/button": "^3.2.28",
32
+ "@entur/expand": "^3.5.17",
33
+ "@entur/icons": "^7.0.0",
34
+ "@entur/layout": "^2.3.12",
35
35
  "@entur/tokens": "^3.15.2",
36
- "@entur/typography": "^1.8.40",
36
+ "@entur/typography": "^1.8.41",
37
37
  "@entur/utils": "^0.11.1",
38
38
  "@reach/menu-button": "^0.16.1",
39
39
  "@reach/polymorphic": "0.18.0",
40
40
  "classnames": "^2.3.1"
41
41
  },
42
- "gitHead": "4d4f7939fb1c9b936e07dd321b7faa3e12476b3d"
42
+ "gitHead": "cff2157007648ca73944d215e9f3f03160c96f13"
43
43
  }