@entur/menu 4.2.38 → 4.2.39-RC.0

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 +410 -410
  2. package/package.json +9 -9
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,6 +253,60 @@
307
253
  }
308
254
  /* DO NOT CHANGE!*/
309
255
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
256
+ .eds-breadcrumb {
257
+ list-style: none;
258
+ margin: 0;
259
+ padding: 0;
260
+ }
261
+
262
+ .eds-breadcrumb__item {
263
+ display: inline-block;
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 {
275
+ text-decoration: none;
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%;
281
+ }
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%);
285
+ }
286
+ .eds-breadcrumb__link:hover {
287
+ animation: eds-breadcrumb-underline 0.3s ease-in;
288
+ }
289
+ .eds-breadcrumb__link:focus {
290
+ outline: 2px solid #181c56;
291
+ outline-color: var(--basecolors-stroke-focus-standard);
292
+ outline-offset: 0.125rem;
293
+ }
294
+ .eds-contrast .eds-breadcrumb__link:focus {
295
+ outline-color: var(--basecolors-stroke-focus-contrast);
296
+ }
297
+ @keyframes eds-breadcrumb-underline {
298
+ from {
299
+ background-size: 0% 0.125rem;
300
+ }
301
+ to {
302
+ background-size: 100% 0.125rem;
303
+ }
304
+ }
305
+ .eds-breadcrumb__link--current {
306
+ font-weight: 600;
307
+ }
308
+ /* DO NOT CHANGE!*/
309
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
310
310
  .eds-top-navigation-item {
311
311
  --show-active-line: 0;
312
312
  display: inline-block;
@@ -441,33 +441,364 @@
441
441
  }
442
442
  /* DO NOT CHANGE!*/
443
443
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
444
+ .eds-stepper {
445
+ --text-color: var(--components-menu-stepper-standard-text-uncompleted);
446
+ --line-color: var(--components-menu-stepper-standard-background);
447
+ --label-font-weight: 500;
448
+ --display-active-line: none;
449
+ display: flex;
450
+ flex-direction: row;
451
+ width: 100%;
452
+ list-style-type: none;
453
+ }
454
+ .eds-stepper__step {
455
+ display: flex;
456
+ flex-grow: 1;
457
+ flex-basis: 0;
458
+ flex-direction: column;
459
+ align-items: inherit;
460
+ -webkit-appearance: none;
461
+ -moz-appearance: none;
462
+ appearance: none;
463
+ background: none;
464
+ border: none;
465
+ font-family: inherit;
466
+ text-transform: none;
467
+ }
468
+ .eds-stepper__step__wrapper {
469
+ flex-grow: 1;
470
+ }
471
+ .eds-stepper__step.focus-visible .eds-stepper__step__label {
472
+ outline-offset: 0.125rem;
473
+ outline: 2px solid #181c56;
474
+ }
475
+ .eds-stepper__step:focus-visible .eds-stepper__step__label {
476
+ outline-offset: 0.125rem;
477
+ outline: 2px solid #181c56;
478
+ }
479
+ .eds-contrast .eds-stepper__step.focus-visible .eds-stepper__step__label {
480
+ outline: 2px solid #ffffff;
481
+ }
482
+ .eds-contrast .eds-stepper__step:focus-visible .eds-stepper__step__label {
483
+ outline: 2px solid #ffffff;
484
+ }
485
+ .eds-contrast .eds-stepper__step {
486
+ --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
487
+ --line-color: var(--components-menu-stepper-contrast-background);
488
+ }
489
+ .eds-stepper__step--interactive {
490
+ all: unset;
491
+ display: flex;
492
+ flex-direction: column;
493
+ width: 100%;
494
+ cursor: pointer;
495
+ }
496
+ .eds-stepper__step--active {
497
+ --text-color: var(--components-menu-stepper-standard-text-uncompleted);
498
+ --label-font-weight: 600;
499
+ --display-active-line: block;
500
+ }
501
+ .eds-contrast .eds-stepper__step--active {
502
+ --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
503
+ }
504
+ .eds-stepper__step--completed {
505
+ --text-color: var(--components-menu-stepper-standard-text-completed);
506
+ --line-color: var(--components-menu-stepper-standard-progressbar);
507
+ }
508
+ .eds-contrast .eds-stepper__step--completed {
509
+ --text-color: var(--components-menu-stepper-contrast-text-completed);
510
+ --line-color: var(--components-menu-stepper-contrast-progressbar);
511
+ }
512
+ .eds-stepper__step__label {
513
+ flex-grow: 1;
514
+ flex-direction: column;
515
+ align-self: center;
516
+ text-align: center;
517
+ font-size: 0.875rem;
518
+ margin: 0.5rem 0 0;
519
+ padding: 0 0.5rem;
520
+ width: -moz-fit-content;
521
+ width: fit-content;
522
+ border-radius: 0.0625rem;
523
+ color: var(--text-color);
524
+ font-weight: var(--label-font-weight);
525
+ }
526
+ .eds-stepper__step--interactive:hover .eds-stepper__step__label {
527
+ background-color: var(--components-menu-stepper-standard-background);
528
+ color: var(--components-menu-stepper-standard-text-completed);
529
+ }
530
+ .eds-contrast .eds-stepper__step--interactive:hover .eds-stepper__step__label {
531
+ background-color: var(--components-menu-stepper-contrast-background);
532
+ color: var(--components-menu-stepper-contrast-text-completed);
533
+ }
534
+ .eds-stepper__step__line {
535
+ height: 0.5rem;
536
+ background: var(--line-color);
537
+ position: relative;
538
+ }
539
+ .eds-stepper__step__line:before {
540
+ display: var(--display-active-line);
541
+ content: "";
542
+ position: absolute;
543
+ right: calc(50% - 0.2rem);
544
+ bottom: 0.0625rem;
545
+ border-radius: 0.0625rem;
546
+ background: var(--components-menu-stepper-standard-progressbar);
547
+ width: calc(0.5rem - 0.125rem - 0.01rem);
548
+ height: calc(0.5rem - 0.125rem - 0.01rem);
549
+ transform: rotate(45deg);
550
+ }
551
+ .eds-contrast .eds-stepper__step__line:before {
552
+ background: var(--components-menu-stepper-contrast-progressbar);
553
+ }
554
+ .eds-stepper__step__line:after {
555
+ display: var(--display-active-line);
556
+ content: "";
557
+ position: absolute;
558
+ left: 0;
559
+ bottom: 0;
560
+ width: 50%;
561
+ height: 0.5rem;
562
+ background: var(--components-menu-stepper-standard-progressbar);
563
+ }
564
+ .eds-contrast .eds-stepper__step__line:after {
565
+ background: var(--components-menu-stepper-contrast-progressbar);
566
+ }
444
567
  /* DO NOT CHANGE!*/
445
568
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
446
- /* DO NOT CHANGE!*/
447
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
448
- [data-color-mode=light],
449
- :root {
450
- --components-menu-breadcrumb-contrast-icon: #ffffff;
451
- --components-menu-breadcrumb-contrast-text: #ffffff;
452
- --components-menu-breadcrumb-standard-icon: #181c56;
453
- --components-menu-breadcrumb-standard-text: #181c56;
454
- --components-menu-navigationbar-contrast-background: #393d79;
455
- --components-menu-navigationbar-contrast-divide: rgba(255, 255, 255, 0);
456
- --components-menu-navigationbar-contrast-icon-selected: #ffffff;
457
- --components-menu-navigationbar-contrast-icon-unselected: #d9dae8;
458
- --components-menu-navigationbar-contrast-stroke-selected: #ff5959;
459
- --components-menu-navigationbar-contrast-text-selected: #ffffff;
460
- --components-menu-navigationbar-contrast-text-unselected: #d9dae8;
461
- --components-menu-navigationbar-standard-background: #ffffff;
462
- --components-menu-navigationbar-standard-divide: #e3e6e8;
463
- --components-menu-navigationbar-standard-icon-selected: #181c56;
464
- --components-menu-navigationbar-standard-icon-unselected: #626493;
465
- --components-menu-navigationbar-standard-stroke-selected: #ff5959;
466
- --components-menu-navigationbar-standard-text-selected: #181c56;
467
- --components-menu-navigationbar-standard-text-unselected: #626493;
468
- --components-menu-navigationlink-contrast-icon: #ffffff;
469
- --components-menu-navigationlink-contrast-text: #ffffff;
470
- --components-menu-navigationlink-standard-icon: #181c56;
569
+ .eds-pagination {
570
+ align-items: center;
571
+ display: flex;
572
+ flex-wrap: wrap;
573
+ row-gap: 0.75rem;
574
+ justify-content: space-between;
575
+ }
576
+ .eds-pagination__results {
577
+ align-items: center;
578
+ display: flex;
579
+ flex: 1;
580
+ justify-content: flex-start;
581
+ }
582
+ .eds-pagination__results-label {
583
+ margin-right: 0.5rem;
584
+ }
585
+ .eds-pagination .eds-label {
586
+ color: var(--components-menu-pagination-standard-text-subdued);
587
+ }
588
+ .eds-contrast .eds-pagination .eds-label {
589
+ color: var(--components-menu-pagination-contrast-text-subdued);
590
+ }
591
+ .eds-pagination__controls {
592
+ align-items: center;
593
+ display: flex;
594
+ justify-content: center;
595
+ }
596
+ .eds-pagination__results:first-of-type:last-of-type, .eds-pagination__controls:first-of-type:last-of-type {
597
+ margin: 0 auto;
598
+ }
599
+
600
+ .eds-pagination-menu__menu-button {
601
+ -webkit-appearance: none;
602
+ -moz-appearance: none;
603
+ appearance: none;
604
+ background: transparent;
605
+ border: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
606
+ border-radius: 0.25rem;
607
+ color: var(--components-menu-pagination-standard-text-unselected);
608
+ font-family: inherit;
609
+ display: flex;
610
+ align-items: center;
611
+ justify-content: space-around;
612
+ height: 2rem;
613
+ margin-left: 0.25rem;
614
+ margin-right: 1rem;
615
+ width: 3.5rem;
616
+ }
617
+ .eds-contrast .eds-pagination-menu__menu-button {
618
+ border-color: var(--components-menu-pagination-contrast-border-unselected);
619
+ color: var(--components-menu-pagination-contrast-text-unselected);
620
+ }
621
+ .eds-pagination-menu__menu-button--open {
622
+ border-color: currentColor;
623
+ }
624
+ .eds-pagination-menu__menu-button:focus {
625
+ outline: none;
626
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
627
+ }
628
+ .eds-pagination-menu__menu-list {
629
+ width: 3.5rem;
630
+ }
631
+
632
+ .eds-pagination__page {
633
+ align-items: center;
634
+ -webkit-appearance: none;
635
+ -moz-appearance: none;
636
+ appearance: none;
637
+ background-color: var(--components-menu-pagination-standard-default);
638
+ border: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
639
+ border-radius: 0.25rem;
640
+ color: var(--components-menu-pagination-standard-text-unselected);
641
+ cursor: pointer;
642
+ display: flex;
643
+ font-family: inherit;
644
+ font-size: 0.875rem;
645
+ height: 2rem;
646
+ justify-content: center;
647
+ margin: 0 0.125rem;
648
+ padding: 0 0.25rem;
649
+ transition: background 0.1s ease-out, border-color 0.1s ease-out;
650
+ -webkit-user-select: none;
651
+ -moz-user-select: none;
652
+ user-select: none;
653
+ min-width: 2rem;
654
+ }
655
+ .eds-contrast .eds-pagination__page {
656
+ background-color: var(--components-menu-pagination-contrast-default);
657
+ border-color: var(--components-menu-pagination-contrast-border-unselected);
658
+ color: var(--components-menu-pagination-contrast-text-unselected);
659
+ }
660
+ .eds-pagination__page--selected {
661
+ background: var(--components-menu-pagination-standard-active);
662
+ border-color: var(--components-menu-pagination-standard-border-selected);
663
+ color: var(--components-menu-pagination-standard-text-selected);
664
+ opacity: 1;
665
+ pointer-events: none;
666
+ }
667
+ .eds-contrast .eds-pagination__page--selected {
668
+ background: var(--components-menu-pagination-contrast-active);
669
+ border-color: var(--components-menu-pagination-contrast-border-selected);
670
+ color: var(--components-menu-pagination-contrast-text-selected);
671
+ }
672
+ .eds-pagination__page--disabled {
673
+ opacity: 0.5;
674
+ pointer-events: none;
675
+ }
676
+ .eds-pagination__page:hover {
677
+ background-color: var(--components-menu-pagination-standard-hover);
678
+ border-color: var(--components-menu-pagination-standard-border-unselected);
679
+ }
680
+ .eds-contrast .eds-pagination__page:hover {
681
+ background-color: var(--components-menu-pagination-contrast-hover);
682
+ border-color: var(--components-menu-pagination-contrast-border-unselected);
683
+ }
684
+ .eds-pagination__page.focus-visible {
685
+ outline: 2px solid #181c56;
686
+ outline-color: var(--basecolors-stroke-focus-standard);
687
+ outline-offset: 0.125rem;
688
+ }
689
+ .eds-pagination__page:focus-visible {
690
+ outline: 2px solid #181c56;
691
+ outline-color: var(--basecolors-stroke-focus-standard);
692
+ outline-offset: 0.125rem;
693
+ }
694
+ .eds-contrast .eds-pagination__page.focus-visible {
695
+ outline-color: var(--basecolors-stroke-focus-contrast);
696
+ }
697
+ .eds-contrast .eds-pagination__page:focus-visible {
698
+ outline-color: var(--basecolors-stroke-focus-contrast);
699
+ }
700
+
701
+ .eds-pagination__ellipsis {
702
+ color: var(--components-menu-pagination-standard-icon);
703
+ align-items: baseline;
704
+ cursor: default;
705
+ display: flex;
706
+ font-size: 1.5rem;
707
+ height: 2rem;
708
+ justify-content: center;
709
+ -webkit-user-select: none;
710
+ -moz-user-select: none;
711
+ user-select: none;
712
+ width: 2rem;
713
+ margin: 0 2px;
714
+ }
715
+ .eds-contrast .eds-pagination__ellipsis {
716
+ color: var(--components-menu-pagination-contrast-icon);
717
+ }
718
+
719
+ .eds-pagination__input-wrapper {
720
+ white-space: nowrap;
721
+ }
722
+ .eds-pagination__input-label {
723
+ border-left: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
724
+ color: var(--components-menu-pagination-standard-text-subdued);
725
+ font-size: 0.875rem;
726
+ margin-left: 0.5rem;
727
+ padding: 0 1rem;
728
+ }
729
+ .eds-contrast .eds-pagination__input-label {
730
+ border-color: var(--components-menu-pagination-contrast-border-unselected);
731
+ color: var(--components-menu-pagination-contrast-text-subdued);
732
+ }
733
+ .eds-pagination__input-field {
734
+ -webkit-appearance: none;
735
+ -moz-appearance: none;
736
+ appearance: none;
737
+ background-color: var(--components-menu-pagination-standard-default);
738
+ border: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
739
+ border-radius: 0.25rem;
740
+ color: var(--components-menu-pagination-standard-text-unselected);
741
+ font-family: inherit;
742
+ font-size: 0.875rem;
743
+ height: 2rem;
744
+ text-align: center;
745
+ width: 2rem;
746
+ }
747
+ .eds-contrast .eds-pagination__input-field {
748
+ background-color: var(--components-menu-pagination-contrast-default);
749
+ border-color: var(--components-menu-pagination-contrast-border-unselected);
750
+ color: var(--components-menu-pagination-contrast-text-unselected);
751
+ }
752
+ .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
753
+ -webkit-appearance: none;
754
+ appearance: none;
755
+ margin: 0;
756
+ }
757
+ .eds-pagination__input-field.focus-visible {
758
+ outline: 2px solid #181c56;
759
+ outline-color: var(--basecolors-stroke-focus-standard);
760
+ outline-offset: 0.125rem;
761
+ }
762
+ .eds-pagination__input-field:focus-visible {
763
+ outline: 2px solid #181c56;
764
+ outline-color: var(--basecolors-stroke-focus-standard);
765
+ outline-offset: 0.125rem;
766
+ }
767
+ .eds-contrast .eds-pagination__input-field.focus-visible {
768
+ outline-color: var(--basecolors-stroke-focus-contrast);
769
+ }
770
+ .eds-contrast .eds-pagination__input-field:focus-visible {
771
+ outline-color: var(--basecolors-stroke-focus-contrast);
772
+ }
773
+ /* DO NOT CHANGE!*/
774
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
775
+ /* DO NOT CHANGE!*/
776
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
777
+ /* DO NOT CHANGE!*/
778
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
779
+ [data-color-mode=light],
780
+ :root {
781
+ --components-menu-breadcrumb-contrast-icon: #ffffff;
782
+ --components-menu-breadcrumb-contrast-text: #ffffff;
783
+ --components-menu-breadcrumb-standard-icon: #181c56;
784
+ --components-menu-breadcrumb-standard-text: #181c56;
785
+ --components-menu-navigationbar-contrast-background: #393d79;
786
+ --components-menu-navigationbar-contrast-divide: rgba(255, 255, 255, 0);
787
+ --components-menu-navigationbar-contrast-icon-selected: #ffffff;
788
+ --components-menu-navigationbar-contrast-icon-unselected: #d9dae8;
789
+ --components-menu-navigationbar-contrast-stroke-selected: #ff5959;
790
+ --components-menu-navigationbar-contrast-text-selected: #ffffff;
791
+ --components-menu-navigationbar-contrast-text-unselected: #d9dae8;
792
+ --components-menu-navigationbar-standard-background: #ffffff;
793
+ --components-menu-navigationbar-standard-divide: #e3e6e8;
794
+ --components-menu-navigationbar-standard-icon-selected: #181c56;
795
+ --components-menu-navigationbar-standard-icon-unselected: #626493;
796
+ --components-menu-navigationbar-standard-stroke-selected: #ff5959;
797
+ --components-menu-navigationbar-standard-text-selected: #181c56;
798
+ --components-menu-navigationbar-standard-text-unselected: #626493;
799
+ --components-menu-navigationlink-contrast-icon: #ffffff;
800
+ --components-menu-navigationlink-contrast-text: #ffffff;
801
+ --components-menu-navigationlink-standard-icon: #181c56;
471
802
  --components-menu-navigationlink-standard-text: #181c56;
472
803
  --components-menu-overflowmenu-border: #8284ab;
473
804
  --components-menu-overflowmenu-fill-default: #f2f5f7;
@@ -781,334 +1112,3 @@
781
1112
  --eds-menu: 1;
782
1113
  --reach-menu-button: 1;
783
1114
  }
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.38",
3
+ "version": "4.2.39-RC.0",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -27,17 +27,17 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/a11y": "^0.2.89",
31
- "@entur/button": "^3.2.30",
32
- "@entur/expand": "^3.5.19",
33
- "@entur/icons": "^7.2.0",
34
- "@entur/layout": "^2.3.14",
30
+ "@entur/a11y": "^0.2.90-RC.0",
31
+ "@entur/button": "^3.2.31-RC.0",
32
+ "@entur/expand": "^3.5.20-RC.0",
33
+ "@entur/icons": "^7.3.0-RC.0",
34
+ "@entur/layout": "^2.3.15-RC.0",
35
35
  "@entur/tokens": "^3.17.0",
36
- "@entur/typography": "^1.8.43",
37
- "@entur/utils": "^0.11.1",
36
+ "@entur/typography": "^1.8.44-RC.0",
37
+ "@entur/utils": "^0.11.2-RC.0",
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": "20838cf27b3f76a9ce3259fe808d60132ab0a653"
42
+ "gitHead": "f279e609e10d40dd3ff47b09bd2828edf2bbcb7b"
43
43
  }