@entur/menu 4.1.10 → 4.1.12

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.
package/dist/styles.css CHANGED
@@ -57,165 +57,167 @@
57
57
  font-weight: 600;
58
58
  }/* DO NOT CHANGE!*/
59
59
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
60
- .eds-pagination {
61
- align-items: center;
62
- display: flex;
63
- flex-wrap: wrap;
64
- row-gap: 0.75rem;
65
- justify-content: space-between;
60
+ .eds-top-navigation-item {
61
+ --show-active-line: 0;
62
+ display: inline-block;
63
+ cursor: pointer;
64
+ color: inherit;
65
+ text-decoration: none;
66
+ position: relative;
67
+ padding: 1rem;
68
+ min-width: 5rem;
69
+ width: -webkit-fit-content;
70
+ width: -moz-fit-content;
71
+ width: fit-content;
72
+ text-align: center;
73
+ font-family: inherit;
74
+ font-size: 1rem;
75
+ font-weight: 600;
66
76
  }
67
- .eds-pagination__results {
68
- align-items: center;
69
- display: flex;
70
- flex: 1;
71
- justify-content: flex-start;
77
+ .eds-top-navigation-item::after {
78
+ content: "";
79
+ display: block;
80
+ bottom: 1rem;
81
+ height: 0.1875rem;
82
+ width: 0;
83
+ margin: 0 auto;
84
+ opacity: var(--show-active-line);
85
+ background: #ff5959;
86
+ transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
72
87
  }
73
- .eds-pagination__results-label {
74
- margin-right: 0.5rem;
88
+ .eds-top-navigation-item:focus {
89
+ outline-offset: 0.125rem;
90
+ outline: none;
91
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
75
92
  }
76
- .eds-pagination__controls {
77
- align-items: center;
78
- display: flex;
79
- justify-content: center;
93
+ .eds-contrast .eds-top-navigation-item:focus {
94
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
80
95
  }
81
- .eds-pagination__results:first-of-type:last-of-type, .eds-pagination__controls:first-of-type:last-of-type {
82
- margin: 0 auto;
96
+ .eds-top-navigation-item:hover {
97
+ --show-active-line: 1;
83
98
  }
84
-
85
- .eds-pagination-menu__menu-button {
99
+ .eds-top-navigation-item:hover::after {
100
+ width: 2rem;
101
+ }
102
+ .eds-top-navigation-item--active {
103
+ --show-active-line: 1;
104
+ }
105
+ .eds-top-navigation-item--active::after {
106
+ width: 2rem;
107
+ }/* DO NOT CHANGE!*/
108
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
109
+ .eds-stepper {
110
+ display: flex;
111
+ flex-direction: row;
112
+ }
113
+ .eds-stepper__item__container {
114
+ cursor: pointer;
115
+ font-family: inherit;
116
+ text-transform: none;
86
117
  -webkit-appearance: none;
87
118
  -moz-appearance: none;
88
119
  appearance: none;
89
- background: transparent;
90
- border: 0.0625rem solid #d1d3d3;
91
- border-radius: 0.25rem;
92
- color: inherit;
93
- font-family: inherit;
120
+ background: none;
121
+ border: none;
122
+ margin: 0;
123
+ padding: 0;
124
+ align-items: inherit;
94
125
  display: flex;
95
- align-items: center;
96
- justify-content: space-around;
97
- height: 2rem;
126
+ flex-grow: 1;
127
+ flex-basis: 0;
128
+ flex-direction: column;
98
129
  margin-left: 0.25rem;
99
- margin-right: 1rem;
100
- width: 3.5rem;
101
130
  }
102
- .eds-pagination-menu__menu-button--open {
103
- border-color: currentColor;
131
+ .eds-stepper__item__container--non-interactive {
132
+ cursor: default;
104
133
  }
105
- .eds-pagination-menu__menu-button:focus {
134
+ .eds-stepper__item__container:focus {
135
+ outline-offset: 0.125rem;
106
136
  outline: none;
107
137
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
108
138
  }
109
- .eds-pagination-menu__menu-list {
110
- width: 3.5rem;
139
+ .eds-contrast .eds-stepper__item__container:focus {
140
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
111
141
  }
112
-
113
- .eds-pagination__page {
114
- align-items: center;
115
- -webkit-appearance: none;
116
- -moz-appearance: none;
117
- appearance: none;
118
- background: transparent;
119
- border: 0.0625rem solid #d1d3d3;
120
- border-color: #d1d3d3;
121
- border-radius: 0.25rem;
122
- color: inherit;
123
- cursor: pointer;
124
- display: flex;
125
- font-family: inherit;
142
+ .eds-stepper__item__container:first-child {
143
+ margin-left: 0;
144
+ }
145
+ .eds-stepper__item__label {
146
+ cursor: inherit;
147
+ flex-grow: 1;
148
+ flex-direction: column;
149
+ text-align: center;
126
150
  font-size: 0.875rem;
127
- height: 2rem;
128
- justify-content: center;
129
- margin: 0 0.125rem;
130
- padding: 0 0.25rem;
131
- transition: background 0.1s ease-out, border-color 0.1s ease-out;
132
- -webkit-user-select: none;
133
- -moz-user-select: none;
134
- -ms-user-select: none;
135
- user-select: none;
136
- min-width: 2rem;
151
+ padding: 0.25rem 1rem;
137
152
  }
138
- .eds-contrast .eds-pagination__page {
139
- border-color: #54568c;
153
+ .eds-stepper__item__label--active {
154
+ font-weight: 600;
140
155
  }
141
- .eds-pagination__page--selected {
142
- background: #d1d4e3;
143
- border-color: #181c56;
144
- color: inherit;
145
- opacity: 1;
146
- pointer-events: none;
156
+ .eds-stepper__item__label.eds-stepper__item__label--active {
157
+ color: #181c56;
147
158
  }
148
- .eds-contrast .eds-pagination__page--selected {
149
- border-color: #ffffff;
150
- background: #393d79;
159
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
160
+ color: #ffffff;
151
161
  }
152
- .eds-pagination__page--disabled {
153
- opacity: 0.5;
154
- pointer-events: none;
162
+ .eds-stepper__item__label.eds-stepper__item__label--has-been {
163
+ color: #181c56;
155
164
  }
156
- .eds-pagination__page:hover {
157
- background-color: #d1d4e3;
158
- border-color: #d1d4e3;
165
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
166
+ color: #ffffff;
159
167
  }
160
- .eds-contrast .eds-pagination__page:hover {
161
- background-color: #393d79;
162
- border-color: #393d79;
168
+ .eds-stepper__item__square {
169
+ height: 0.5rem;
163
170
  }
164
- .eds-pagination__page:focus {
165
- outline: none;
166
- border-color: #181c56;
171
+ .eds-stepper__item__square--active {
172
+ color: inherit;
173
+ background: #e9e9e9;
174
+ position: relative;
167
175
  }
168
- .eds-contrast .eds-pagination__page:focus {
169
- border-color: #ffffff;
176
+ .eds-stepper__item__square--active:before {
177
+ background: #181c56;
178
+ content: "";
179
+ position: absolute;
180
+ right: calc(50% - 0.2rem);
181
+ border-radius: 0.0625rem;
182
+ bottom: 0.0625rem;
183
+ width: calc( 0.5rem - 0.125rem - 0.01rem );
184
+ height: calc( 0.5rem - 0.125rem - 0.01rem );
185
+ transform: rotate(45deg);
170
186
  }
171
-
172
- .eds-pagination__ellipsis {
173
- align-items: baseline;
174
- cursor: default;
175
- display: flex;
176
- font-size: 1.5rem;
177
- height: 2rem;
178
- justify-content: center;
179
- -webkit-user-select: none;
180
- -moz-user-select: none;
181
- -ms-user-select: none;
182
- user-select: none;
183
- width: 2rem;
184
- margin: 0 2px;
187
+ .eds-contrast .eds-stepper__item__square--active:before {
188
+ border-left-color: #aeb7e2;
189
+ border-left-color: #aeb7e2;
185
190
  }
186
-
187
- .eds-pagination__input-wrapper {
188
- white-space: nowrap;
191
+ .eds-stepper__item__square--active:after {
192
+ content: "";
193
+ position: absolute;
194
+ left: 0;
195
+ bottom: 0;
196
+ width: 50%;
197
+ height: 0.5rem;
198
+ background: #181c56;
189
199
  }
190
- .eds-pagination__input-label {
191
- border-left: 0.0625rem solid #d1d3d3;
200
+ .eds-contrast .eds-stepper__item__square--active:after {
201
+ background: #aeb7e2;
202
+ }
203
+ .eds-contrast .eds-stepper__item__square--active {
204
+ background: #aeb7e2;
205
+ background: #393d79;
206
+ }
207
+ .eds-stepper__item__square--inactive {
192
208
  color: #656782;
193
- font-size: 0.875rem;
194
- margin-left: 0.5rem;
195
- padding: 0 1rem;
209
+ background: #e9e9e9;
196
210
  }
197
- .eds-contrast .eds-pagination__input-label {
198
- border-color: #393d79;
211
+ .eds-contrast .eds-stepper__item__square--inactive {
199
212
  color: #aeb7e2;
213
+ background: #393d79;
200
214
  }
201
- .eds-pagination__input-field {
202
- -webkit-appearance: none;
203
- -moz-appearance: none;
204
- appearance: none;
205
- background: transparent;
206
- border: 0.0625rem solid #d1d3d3;
207
- border-radius: 0.25rem;
215
+ .eds-stepper__item__square--has-been {
208
216
  color: inherit;
209
- font-family: inherit;
210
- font-size: 0.875rem;
211
- height: 2rem;
212
- text-align: center;
213
- width: 2rem;
217
+ background: #181c56;
214
218
  }
215
- .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
216
- -webkit-appearance: none;
217
- appearance: none;
218
- margin: 0;
219
+ .eds-contrast .eds-stepper__item__square--has-been {
220
+ background: #aeb7e2;
219
221
  }/* DO NOT CHANGE!*/
220
222
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
221
223
  /* DO NOT CHANGE!*/
@@ -437,169 +439,6 @@
437
439
  outline: 2px solid #ffffff;
438
440
  }/* DO NOT CHANGE!*/
439
441
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
440
- .eds-top-navigation-item {
441
- --show-active-line: 0;
442
- display: inline-block;
443
- cursor: pointer;
444
- color: inherit;
445
- text-decoration: none;
446
- position: relative;
447
- padding: 1rem;
448
- min-width: 5rem;
449
- width: -webkit-fit-content;
450
- width: -moz-fit-content;
451
- width: fit-content;
452
- text-align: center;
453
- font-family: inherit;
454
- font-size: 1rem;
455
- font-weight: 600;
456
- }
457
- .eds-top-navigation-item::after {
458
- content: "";
459
- display: block;
460
- bottom: 1rem;
461
- height: 0.1875rem;
462
- width: 0;
463
- margin: 0 auto;
464
- opacity: var(--show-active-line);
465
- background: #ff5959;
466
- transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
467
- }
468
- .eds-top-navigation-item:focus {
469
- outline-offset: 0.125rem;
470
- outline: none;
471
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
472
- }
473
- .eds-contrast .eds-top-navigation-item:focus {
474
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
475
- }
476
- .eds-top-navigation-item:hover {
477
- --show-active-line: 1;
478
- }
479
- .eds-top-navigation-item:hover::after {
480
- width: 2rem;
481
- }
482
- .eds-top-navigation-item--active {
483
- --show-active-line: 1;
484
- }
485
- .eds-top-navigation-item--active::after {
486
- width: 2rem;
487
- }/* DO NOT CHANGE!*/
488
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
489
- .eds-stepper {
490
- display: flex;
491
- flex-direction: row;
492
- }
493
- .eds-stepper__item__container {
494
- cursor: pointer;
495
- font-family: inherit;
496
- text-transform: none;
497
- -webkit-appearance: none;
498
- -moz-appearance: none;
499
- appearance: none;
500
- background: none;
501
- border: none;
502
- margin: 0;
503
- padding: 0;
504
- align-items: inherit;
505
- display: flex;
506
- flex-grow: 1;
507
- flex-basis: 0;
508
- flex-direction: column;
509
- margin-left: 0.25rem;
510
- }
511
- .eds-stepper__item__container--non-interactive {
512
- cursor: default;
513
- }
514
- .eds-stepper__item__container:focus {
515
- outline-offset: 0.125rem;
516
- outline: none;
517
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
518
- }
519
- .eds-contrast .eds-stepper__item__container:focus {
520
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
521
- }
522
- .eds-stepper__item__container:first-child {
523
- margin-left: 0;
524
- }
525
- .eds-stepper__item__label {
526
- cursor: inherit;
527
- flex-grow: 1;
528
- flex-direction: column;
529
- text-align: center;
530
- font-size: 0.875rem;
531
- padding: 0.25rem 1rem;
532
- }
533
- .eds-stepper__item__label--active {
534
- font-weight: 600;
535
- }
536
- .eds-stepper__item__label.eds-stepper__item__label--active {
537
- color: #181c56;
538
- }
539
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
540
- color: #ffffff;
541
- }
542
- .eds-stepper__item__label.eds-stepper__item__label--has-been {
543
- color: #181c56;
544
- }
545
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
546
- color: #ffffff;
547
- }
548
- .eds-stepper__item__square {
549
- height: 0.5rem;
550
- }
551
- .eds-stepper__item__square--active {
552
- color: inherit;
553
- background: #e9e9e9;
554
- position: relative;
555
- }
556
- .eds-stepper__item__square--active:before {
557
- background: #181c56;
558
- content: "";
559
- position: absolute;
560
- right: calc(50% - 0.2rem);
561
- border-radius: 0.0625rem;
562
- bottom: 0.0625rem;
563
- width: calc( 0.5rem - 0.125rem - 0.01rem );
564
- height: calc( 0.5rem - 0.125rem - 0.01rem );
565
- transform: rotate(45deg);
566
- }
567
- .eds-contrast .eds-stepper__item__square--active:before {
568
- border-left-color: #aeb7e2;
569
- border-left-color: #aeb7e2;
570
- }
571
- .eds-stepper__item__square--active:after {
572
- content: "";
573
- position: absolute;
574
- left: 0;
575
- bottom: 0;
576
- width: 50%;
577
- height: 0.5rem;
578
- background: #181c56;
579
- }
580
- .eds-contrast .eds-stepper__item__square--active:after {
581
- background: #aeb7e2;
582
- }
583
- .eds-contrast .eds-stepper__item__square--active {
584
- background: #aeb7e2;
585
- background: #393d79;
586
- }
587
- .eds-stepper__item__square--inactive {
588
- color: #656782;
589
- background: #e9e9e9;
590
- }
591
- .eds-contrast .eds-stepper__item__square--inactive {
592
- color: #aeb7e2;
593
- background: #393d79;
594
- }
595
- .eds-stepper__item__square--has-been {
596
- color: inherit;
597
- background: #181c56;
598
- }
599
- .eds-contrast .eds-stepper__item__square--has-been {
600
- background: #aeb7e2;
601
- }/* DO NOT CHANGE!*/
602
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
603
442
  .eds-overflow-menu__item {
604
443
  -webkit-appearance: none;
605
444
  -moz-appearance: none;
@@ -695,4 +534,165 @@
695
534
  [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
696
535
  position: relative;
697
536
  right: calc(100% - 2rem);
537
+ }/* DO NOT CHANGE!*/
538
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
539
+ .eds-pagination {
540
+ align-items: center;
541
+ display: flex;
542
+ flex-wrap: wrap;
543
+ row-gap: 0.75rem;
544
+ justify-content: space-between;
545
+ }
546
+ .eds-pagination__results {
547
+ align-items: center;
548
+ display: flex;
549
+ flex: 1;
550
+ justify-content: flex-start;
551
+ }
552
+ .eds-pagination__results-label {
553
+ margin-right: 0.5rem;
554
+ }
555
+ .eds-pagination__controls {
556
+ align-items: center;
557
+ display: flex;
558
+ justify-content: center;
559
+ }
560
+ .eds-pagination__results:first-of-type:last-of-type, .eds-pagination__controls:first-of-type:last-of-type {
561
+ margin: 0 auto;
562
+ }
563
+
564
+ .eds-pagination-menu__menu-button {
565
+ -webkit-appearance: none;
566
+ -moz-appearance: none;
567
+ appearance: none;
568
+ background: transparent;
569
+ border: 0.0625rem solid #d1d3d3;
570
+ border-radius: 0.25rem;
571
+ color: inherit;
572
+ font-family: inherit;
573
+ display: flex;
574
+ align-items: center;
575
+ justify-content: space-around;
576
+ height: 2rem;
577
+ margin-left: 0.25rem;
578
+ margin-right: 1rem;
579
+ width: 3.5rem;
580
+ }
581
+ .eds-pagination-menu__menu-button--open {
582
+ border-color: currentColor;
583
+ }
584
+ .eds-pagination-menu__menu-button:focus {
585
+ outline: none;
586
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
587
+ }
588
+ .eds-pagination-menu__menu-list {
589
+ width: 3.5rem;
590
+ }
591
+
592
+ .eds-pagination__page {
593
+ align-items: center;
594
+ -webkit-appearance: none;
595
+ -moz-appearance: none;
596
+ appearance: none;
597
+ background: transparent;
598
+ border: 0.0625rem solid #d1d3d3;
599
+ border-color: #d1d3d3;
600
+ border-radius: 0.25rem;
601
+ color: inherit;
602
+ cursor: pointer;
603
+ display: flex;
604
+ font-family: inherit;
605
+ font-size: 0.875rem;
606
+ height: 2rem;
607
+ justify-content: center;
608
+ margin: 0 0.125rem;
609
+ padding: 0 0.25rem;
610
+ transition: background 0.1s ease-out, border-color 0.1s ease-out;
611
+ -webkit-user-select: none;
612
+ -moz-user-select: none;
613
+ -ms-user-select: none;
614
+ user-select: none;
615
+ min-width: 2rem;
616
+ }
617
+ .eds-contrast .eds-pagination__page {
618
+ border-color: #54568c;
619
+ }
620
+ .eds-pagination__page--selected {
621
+ background: #d1d4e3;
622
+ border-color: #181c56;
623
+ color: inherit;
624
+ opacity: 1;
625
+ pointer-events: none;
626
+ }
627
+ .eds-contrast .eds-pagination__page--selected {
628
+ border-color: #ffffff;
629
+ background: #393d79;
630
+ }
631
+ .eds-pagination__page--disabled {
632
+ opacity: 0.5;
633
+ pointer-events: none;
634
+ }
635
+ .eds-pagination__page:hover {
636
+ background-color: #d1d4e3;
637
+ border-color: #d1d4e3;
638
+ }
639
+ .eds-contrast .eds-pagination__page:hover {
640
+ background-color: #393d79;
641
+ border-color: #393d79;
642
+ }
643
+ .eds-pagination__page:focus {
644
+ outline: none;
645
+ border-color: #181c56;
646
+ }
647
+ .eds-contrast .eds-pagination__page:focus {
648
+ border-color: #ffffff;
649
+ }
650
+
651
+ .eds-pagination__ellipsis {
652
+ align-items: baseline;
653
+ cursor: default;
654
+ display: flex;
655
+ font-size: 1.5rem;
656
+ height: 2rem;
657
+ justify-content: center;
658
+ -webkit-user-select: none;
659
+ -moz-user-select: none;
660
+ -ms-user-select: none;
661
+ user-select: none;
662
+ width: 2rem;
663
+ margin: 0 2px;
664
+ }
665
+
666
+ .eds-pagination__input-wrapper {
667
+ white-space: nowrap;
668
+ }
669
+ .eds-pagination__input-label {
670
+ border-left: 0.0625rem solid #d1d3d3;
671
+ color: #656782;
672
+ font-size: 0.875rem;
673
+ margin-left: 0.5rem;
674
+ padding: 0 1rem;
675
+ }
676
+ .eds-contrast .eds-pagination__input-label {
677
+ border-color: #393d79;
678
+ color: #aeb7e2;
679
+ }
680
+ .eds-pagination__input-field {
681
+ -webkit-appearance: none;
682
+ -moz-appearance: none;
683
+ appearance: none;
684
+ background: transparent;
685
+ border: 0.0625rem solid #d1d3d3;
686
+ border-radius: 0.25rem;
687
+ color: inherit;
688
+ font-family: inherit;
689
+ font-size: 0.875rem;
690
+ height: 2rem;
691
+ text-align: center;
692
+ width: 2rem;
693
+ }
694
+ .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
695
+ -webkit-appearance: none;
696
+ appearance: none;
697
+ margin: 0;
698
698
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.1.10",
3
+ "version": "4.1.12",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -23,13 +23,13 @@
23
23
  "lint": "dts lint"
24
24
  },
25
25
  "dependencies": {
26
- "@entur/a11y": "^0.2.48",
27
- "@entur/button": "^2.10.3",
28
- "@entur/expand": "^3.3.19",
26
+ "@entur/a11y": "^0.2.49",
27
+ "@entur/button": "^2.10.4",
28
+ "@entur/expand": "^3.3.20",
29
29
  "@entur/icons": "^4.3.3",
30
- "@entur/layout": "^2.1.10",
30
+ "@entur/layout": "^2.1.11",
31
31
  "@entur/tokens": "^3.4.1",
32
- "@entur/typography": "^1.6.17",
32
+ "@entur/typography": "^1.7.0",
33
33
  "@entur/utils": "^0.4.5",
34
34
  "@reach/menu-button": "^0.16.1",
35
35
  "classnames": "^2.3.1"
@@ -38,5 +38,5 @@
38
38
  "react": ">=16.8.0",
39
39
  "react-dom": ">=16.8.0"
40
40
  },
41
- "gitHead": "278c922026fedcd798934f82d34b43d39bf8f4ce"
41
+ "gitHead": "9ae8c78160b6a9c946b95ceb81f300ca79625e11"
42
42
  }