@entur/menu 4.1.25 → 4.1.27

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 +333 -328
  2. package/package.json +14 -14
package/dist/styles.css CHANGED
@@ -1,259 +1,8 @@
1
1
  :root {
2
2
  --eds-menu: 1;
3
3
  --reach-menu-button: 1;
4
- }/* DO NOT CHANGE!*/
5
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
6
- .eds-breadcrumb {
7
- list-style: none;
8
- margin: 0;
9
- padding: 0;
10
- }
11
-
12
- .eds-breadcrumb__item {
13
- display: inline-block;
14
- }
15
-
16
- .eds-breadcrumb__separator {
17
- margin: 0 0.25rem 0 0.25rem;
18
- }
19
-
20
- .eds-breadcrumb__link {
21
- text-decoration: none;
22
- color: inherit;
23
- background-image: linear-gradient(120deg, #181c56 0%, #181c56 100%);
24
- background-repeat: no-repeat;
25
- background-size: 100% 0.125rem;
26
- background-position: 0 100%;
27
- }
28
- .eds-contrast .eds-breadcrumb__link {
29
- background-image: linear-gradient(120deg, #ffffff 0%, #ffffff 100%);
30
- }
31
- .eds-breadcrumb__link:hover {
32
- animation: eds-breadcrumb-underline 0.3s ease-in;
33
- }
34
- .eds-breadcrumb__link:focus {
35
- outline: none;
36
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
37
- outline-offset: 0.125rem;
38
- }
39
- @keyframes eds-breadcrumb-underline {
40
- from {
41
- background-size: 0% 0.125rem;
42
- }
43
- to {
44
- background-size: 100% 0.125rem;
45
- }
46
- }
47
- .eds-breadcrumb__link--current {
48
- font-weight: 600;
49
- }/* DO NOT CHANGE!*/
50
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
51
- .eds-top-navigation-item {
52
- --show-active-line: 0;
53
- display: inline-block;
54
- cursor: pointer;
55
- color: inherit;
56
- text-decoration: none;
57
- position: relative;
58
- padding: 1rem;
59
- min-width: 5rem;
60
- width: -moz-fit-content;
61
- width: fit-content;
62
- text-align: center;
63
- font-family: inherit;
64
- font-size: 1rem;
65
- font-weight: 600;
66
- }
67
- .eds-top-navigation-item::after {
68
- content: "";
69
- display: block;
70
- bottom: 1rem;
71
- height: 0.1875rem;
72
- width: 0;
73
- margin: 0 auto;
74
- opacity: var(--show-active-line);
75
- background: #ff5959;
76
- transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
77
- }
78
- .eds-top-navigation-item:focus {
79
- outline-offset: 0.125rem;
80
- outline: none;
81
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
82
- }
83
- .eds-contrast .eds-top-navigation-item:focus {
84
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
85
- }
86
- .eds-top-navigation-item:hover {
87
- --show-active-line: 1;
88
- }
89
- .eds-top-navigation-item:hover::after {
90
- width: 2rem;
91
- }
92
- .eds-top-navigation-item--active {
93
- --show-active-line: 1;
94
- }
95
- .eds-top-navigation-item--active::after {
96
- width: 2rem;
97
- }/* DO NOT CHANGE!*/
98
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
99
- .eds-pagination {
100
- align-items: center;
101
- display: flex;
102
- flex-wrap: wrap;
103
- row-gap: 0.75rem;
104
- justify-content: space-between;
105
- }
106
- .eds-pagination__results {
107
- align-items: center;
108
- display: flex;
109
- flex: 1;
110
- justify-content: flex-start;
111
- }
112
- .eds-pagination__results-label {
113
- margin-right: 0.5rem;
114
- }
115
- .eds-pagination__controls {
116
- align-items: center;
117
- display: flex;
118
- justify-content: center;
119
- }
120
- .eds-pagination__results:first-of-type:last-of-type, .eds-pagination__controls:first-of-type:last-of-type {
121
- margin: 0 auto;
122
- }
123
-
124
- .eds-pagination-menu__menu-button {
125
- -webkit-appearance: none;
126
- -moz-appearance: none;
127
- appearance: none;
128
- background: transparent;
129
- border: 0.0625rem solid #d1d3d3;
130
- border-radius: 0.25rem;
131
- color: inherit;
132
- font-family: inherit;
133
- display: flex;
134
- align-items: center;
135
- justify-content: space-around;
136
- height: 2rem;
137
- margin-left: 0.25rem;
138
- margin-right: 1rem;
139
- width: 3.5rem;
140
- }
141
- .eds-pagination-menu__menu-button--open {
142
- border-color: currentColor;
143
- }
144
- .eds-pagination-menu__menu-button:focus {
145
- outline: none;
146
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
147
- }
148
- .eds-pagination-menu__menu-list {
149
- width: 3.5rem;
150
- }
151
-
152
- .eds-pagination__page {
153
- align-items: center;
154
- -webkit-appearance: none;
155
- -moz-appearance: none;
156
- appearance: none;
157
- background: transparent;
158
- border: 0.0625rem solid #d1d3d3;
159
- border-color: #d1d3d3;
160
- border-radius: 0.25rem;
161
- color: inherit;
162
- cursor: pointer;
163
- display: flex;
164
- font-family: inherit;
165
- font-size: 0.875rem;
166
- height: 2rem;
167
- justify-content: center;
168
- margin: 0 0.125rem;
169
- padding: 0 0.25rem;
170
- transition: background 0.1s ease-out, border-color 0.1s ease-out;
171
- -webkit-user-select: none;
172
- -moz-user-select: none;
173
- user-select: none;
174
- min-width: 2rem;
175
- }
176
- .eds-contrast .eds-pagination__page {
177
- border-color: #54568c;
178
- }
179
- .eds-pagination__page--selected {
180
- background: #d1d4e3;
181
- border-color: #181c56;
182
- color: inherit;
183
- opacity: 1;
184
- pointer-events: none;
185
- }
186
- .eds-contrast .eds-pagination__page--selected {
187
- border-color: #ffffff;
188
- background: #393d79;
189
- }
190
- .eds-pagination__page--disabled {
191
- opacity: 0.5;
192
- pointer-events: none;
193
- }
194
- .eds-pagination__page:hover {
195
- background-color: #d1d4e3;
196
- border-color: #d1d4e3;
197
- }
198
- .eds-contrast .eds-pagination__page:hover {
199
- background-color: #393d79;
200
- border-color: #393d79;
201
- }
202
- .eds-pagination__page:focus {
203
- outline: none;
204
- border-color: #181c56;
205
- }
206
- .eds-contrast .eds-pagination__page:focus {
207
- border-color: #ffffff;
208
- }
209
-
210
- .eds-pagination__ellipsis {
211
- align-items: baseline;
212
- cursor: default;
213
- display: flex;
214
- font-size: 1.5rem;
215
- height: 2rem;
216
- justify-content: center;
217
- -webkit-user-select: none;
218
- -moz-user-select: none;
219
- user-select: none;
220
- width: 2rem;
221
- margin: 0 2px;
222
- }
223
-
224
- .eds-pagination__input-wrapper {
225
- white-space: nowrap;
226
- }
227
- .eds-pagination__input-label {
228
- border-left: 0.0625rem solid #d1d3d3;
229
- color: #656782;
230
- font-size: 0.875rem;
231
- margin-left: 0.5rem;
232
- padding: 0 1rem;
233
- }
234
- .eds-contrast .eds-pagination__input-label {
235
- border-color: #393d79;
236
- color: #aeb7e2;
237
- }
238
- .eds-pagination__input-field {
239
- -webkit-appearance: none;
240
- -moz-appearance: none;
241
- appearance: none;
242
- background: transparent;
243
- border: 0.0625rem solid #d1d3d3;
244
- border-radius: 0.25rem;
245
- color: inherit;
246
- font-family: inherit;
247
- font-size: 0.875rem;
248
- height: 2rem;
249
- text-align: center;
250
- width: 2rem;
251
- }
252
- .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
253
- -webkit-appearance: none;
254
- appearance: none;
255
- margin: 0;
256
- }/* DO NOT CHANGE!*/
4
+ }@charset "UTF-8";
5
+ /* DO NOT CHANGE!*/
257
6
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
258
7
  /* DO NOT CHANGE!*/
259
8
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -343,7 +92,7 @@
343
92
  .eds-side-navigation .eds-side-navigation {
344
93
  background-color: #f3f3f3;
345
94
  }
346
- .eds-contrast .eds-side-navigation .eds-side-navigation {
95
+ .eds-contrast .eds-side-navigation .eds-side-navigation  {
347
96
  background-color: #292b6a;
348
97
  }
349
98
  .eds-side-navigation--collapsed {
@@ -411,7 +160,7 @@
411
160
  outline-offset: -2px;
412
161
  background: #ebebf1;
413
162
  }
414
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):active, .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus {
163
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):active , .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus  {
415
164
  background-color: #54568c;
416
165
  outline: 2px solid #ffffff;
417
166
  }
@@ -474,89 +223,49 @@
474
223
  outline: 2px solid #ffffff;
475
224
  }/* DO NOT CHANGE!*/
476
225
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
477
- .eds-overflow-menu__item {
478
- -webkit-appearance: none;
479
- -moz-appearance: none;
480
- appearance: none;
481
- border: none;
482
- font-size: 0.875rem;
483
- font-family: inherit;
484
- color: var(--primary-text-color);
485
- background: #f8f8f8;
486
- display: block;
487
- height: 3rem;
488
- cursor: pointer;
489
- width: 100%;
490
- line-height: 1.375rem;
491
- text-align: left;
492
- padding: 0.75rem 1rem;
493
- opacity: 1;
494
- }
495
- .eds-contrast .eds-overflow-menu__item {
496
- color: #181c56;
497
- }
498
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
499
- background: #e9e9e9;
500
- color: #949494;
501
- }
502
- .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
503
- background: #e9e9e9;
504
- color: #949494;
505
- }
506
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
507
- cursor: not-allowed;
508
- background: #e9e9e9;
509
- color: #949494;
510
- }
511
- .eds-overflow-menu__item .eds-icon {
512
- margin-right: 0.75rem;
513
- }
514
- .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
515
- background: #d1d4e3;
226
+ .eds-breadcrumb {
227
+ list-style: none;
228
+ margin: 0;
229
+ padding: 0;
516
230
  }
517
- .eds-overflow-menu__item:focus {
518
- outline: none;
231
+
232
+ .eds-breadcrumb__item {
233
+ display: inline-block;
519
234
  }
520
235
 
521
- .eds-overflow-menu__item + .eds-overflow-menu__item {
522
- border-top: 0.0625rem solid #e9e9e9;
236
+ .eds-breadcrumb__separator {
237
+ margin: 0 0.25rem 0 0.25rem;
523
238
  }
524
239
 
525
- .eds-overflow-menu__menu-list[data-reach-menu-list] {
526
- border: 0.0625rem solid #e9e9e9;
527
- border-radius: 0.25rem;
528
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
529
- overflow: hidden;
240
+ .eds-breadcrumb__link {
241
+ text-decoration: none;
242
+ color: inherit;
243
+ background-image: linear-gradient(120deg, #181c56 0%, #181c56 100%);
244
+ background-repeat: no-repeat;
245
+ background-size: 100% 0.125rem;
246
+ background-position: 0 100%;
530
247
  }
531
- .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
532
- outline: none;
248
+ .eds-contrast .eds-breadcrumb__link {
249
+ background-image: linear-gradient(120deg, #ffffff 0%, #ffffff 100%);
533
250
  }
534
- .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
535
- box-shadow: 0 0.0625rem 0.1875rem #393d79;
251
+ .eds-breadcrumb__link:hover {
252
+ animation: eds-breadcrumb-underline 0.3s ease-in;
536
253
  }
537
-
538
- .eds-overflow-menu__menu-list[data-reach-menu-list],
539
- .eds-overflow-menu__menu-list[data-reach-menu-items] {
540
- animation: slide-in 0.2s ease-in-out;
254
+ .eds-breadcrumb__link:focus {
255
+ outline: none;
256
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
257
+ outline-offset: 0.125rem;
541
258
  }
542
-
543
- @keyframes slide-in {
544
- 0% {
545
- opacity: 0;
546
- transform: translateY(0.5rem);
259
+ @keyframes eds-breadcrumb-underline {
260
+ from {
261
+ background-size: 0% 0.125rem;
547
262
  }
548
- 100% {
549
- opacity: 1;
550
- transform: translateY(0);
263
+ to {
264
+ background-size: 100% 0.125rem;
551
265
  }
552
266
  }
553
- [data-reach-menu-popover] {
554
- position: absolute;
555
- z-index: 30;
556
- }
557
- [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
558
- position: relative;
559
- right: calc(100% - 2rem);
267
+ .eds-breadcrumb__link--current {
268
+ font-weight: 600;
560
269
  }/* DO NOT CHANGE!*/
561
270
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
562
271
  .eds-stepper {
@@ -633,8 +342,12 @@
633
342
  right: calc(50% - 0.2rem);
634
343
  border-radius: 0.0625rem;
635
344
  bottom: 0.0625rem;
636
- width: calc( 0.5rem - 0.125rem - 0.01rem );
637
- height: calc( 0.5rem - 0.125rem - 0.01rem );
345
+ width: calc(
346
+ 0.5rem - 0.125rem - 0.01rem
347
+ );
348
+ height: calc(
349
+ 0.5rem - 0.125rem - 0.01rem
350
+ );
638
351
  transform: rotate(45deg);
639
352
  }
640
353
  .eds-contrast .eds-stepper__item__square--active:before {
@@ -671,4 +384,296 @@
671
384
  }
672
385
  .eds-contrast .eds-stepper__item__square--has-been {
673
386
  background: #aeb7e2;
387
+ }/* DO NOT CHANGE!*/
388
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
389
+ .eds-pagination {
390
+ align-items: center;
391
+ display: flex;
392
+ flex-wrap: wrap;
393
+ row-gap: 0.75rem;
394
+ justify-content: space-between;
395
+ }
396
+ .eds-pagination__results {
397
+ align-items: center;
398
+ display: flex;
399
+ flex: 1;
400
+ justify-content: flex-start;
401
+ }
402
+ .eds-pagination__results-label {
403
+ margin-right: 0.5rem;
404
+ }
405
+ .eds-pagination__controls {
406
+ align-items: center;
407
+ display: flex;
408
+ justify-content: center;
409
+ }
410
+ .eds-pagination__results:first-of-type:last-of-type, .eds-pagination__controls:first-of-type:last-of-type {
411
+ margin: 0 auto;
412
+ }
413
+
414
+ .eds-pagination-menu__menu-button {
415
+ -webkit-appearance: none;
416
+ -moz-appearance: none;
417
+ appearance: none;
418
+ background: transparent;
419
+ border: 0.0625rem solid #d1d3d3;
420
+ border-radius: 0.25rem;
421
+ color: inherit;
422
+ font-family: inherit;
423
+ display: flex;
424
+ align-items: center;
425
+ justify-content: space-around;
426
+ height: 2rem;
427
+ margin-left: 0.25rem;
428
+ margin-right: 1rem;
429
+ width: 3.5rem;
430
+ }
431
+ .eds-pagination-menu__menu-button--open {
432
+ border-color: currentColor;
433
+ }
434
+ .eds-pagination-menu__menu-button:focus {
435
+ outline: none;
436
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
437
+ }
438
+ .eds-pagination-menu__menu-list {
439
+ width: 3.5rem;
440
+ }
441
+
442
+ .eds-pagination__page {
443
+ align-items: center;
444
+ -webkit-appearance: none;
445
+ -moz-appearance: none;
446
+ appearance: none;
447
+ background: transparent;
448
+ border: 0.0625rem solid #d1d3d3;
449
+ border-color: #d1d3d3;
450
+ border-radius: 0.25rem;
451
+ color: inherit;
452
+ cursor: pointer;
453
+ display: flex;
454
+ font-family: inherit;
455
+ font-size: 0.875rem;
456
+ height: 2rem;
457
+ justify-content: center;
458
+ margin: 0 0.125rem;
459
+ padding: 0 0.25rem;
460
+ transition: background 0.1s ease-out, border-color 0.1s ease-out;
461
+ -webkit-user-select: none;
462
+ -moz-user-select: none;
463
+ user-select: none;
464
+ min-width: 2rem;
465
+ }
466
+ .eds-contrast .eds-pagination__page {
467
+ border-color: #54568c;
468
+ }
469
+ .eds-pagination__page--selected {
470
+ background: #d1d4e3;
471
+ border-color: #181c56;
472
+ color: inherit;
473
+ opacity: 1;
474
+ pointer-events: none;
475
+ }
476
+ .eds-contrast .eds-pagination__page--selected {
477
+ border-color: #ffffff;
478
+ background: #393d79;
479
+ }
480
+ .eds-pagination__page--disabled {
481
+ opacity: 0.5;
482
+ pointer-events: none;
483
+ }
484
+ .eds-pagination__page:hover {
485
+ background-color: #d1d4e3;
486
+ border-color: #d1d4e3;
487
+ }
488
+ .eds-contrast .eds-pagination__page:hover {
489
+ background-color: #393d79;
490
+ border-color: #393d79;
491
+ }
492
+ .eds-pagination__page:focus {
493
+ outline: none;
494
+ border-color: #181c56;
495
+ }
496
+ .eds-contrast .eds-pagination__page:focus {
497
+ border-color: #ffffff;
498
+ }
499
+
500
+ .eds-pagination__ellipsis {
501
+ align-items: baseline;
502
+ cursor: default;
503
+ display: flex;
504
+ font-size: 1.5rem;
505
+ height: 2rem;
506
+ justify-content: center;
507
+ -webkit-user-select: none;
508
+ -moz-user-select: none;
509
+ user-select: none;
510
+ width: 2rem;
511
+ margin: 0 2px;
512
+ }
513
+
514
+ .eds-pagination__input-wrapper {
515
+ white-space: nowrap;
516
+ }
517
+ .eds-pagination__input-label {
518
+ border-left: 0.0625rem solid #d1d3d3;
519
+ color: #656782;
520
+ font-size: 0.875rem;
521
+ margin-left: 0.5rem;
522
+ padding: 0 1rem;
523
+ }
524
+ .eds-contrast .eds-pagination__input-label {
525
+ border-color: #393d79;
526
+ color: #aeb7e2;
527
+ }
528
+ .eds-pagination__input-field {
529
+ -webkit-appearance: none;
530
+ -moz-appearance: none;
531
+ appearance: none;
532
+ background: transparent;
533
+ border: 0.0625rem solid #d1d3d3;
534
+ border-radius: 0.25rem;
535
+ color: inherit;
536
+ font-family: inherit;
537
+ font-size: 0.875rem;
538
+ height: 2rem;
539
+ text-align: center;
540
+ width: 2rem;
541
+ }
542
+ .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
543
+ -webkit-appearance: none;
544
+ appearance: none;
545
+ margin: 0;
546
+ }/* DO NOT CHANGE!*/
547
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
548
+ .eds-overflow-menu__item {
549
+ -webkit-appearance: none;
550
+ -moz-appearance: none;
551
+ appearance: none;
552
+ border: none;
553
+ font-size: 0.875rem;
554
+ font-family: inherit;
555
+ color: var(--primary-text-color);
556
+ background: #f8f8f8;
557
+ display: block;
558
+ height: 3rem;
559
+ cursor: pointer;
560
+ width: 100%;
561
+ line-height: 1.375rem;
562
+ text-align: left;
563
+ padding: 0.75rem 1rem;
564
+ opacity: 1;
565
+ }
566
+ .eds-contrast .eds-overflow-menu__item {
567
+ color: #181c56;
568
+ }
569
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
570
+ background: #e9e9e9;
571
+ color: #949494;
572
+ }
573
+ .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
574
+ background: #e9e9e9;
575
+ color: #949494;
576
+ }
577
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
578
+ cursor: not-allowed;
579
+ background: #e9e9e9;
580
+ color: #949494;
581
+ }
582
+ .eds-overflow-menu__item .eds-icon {
583
+ margin-right: 0.75rem;
584
+ }
585
+ .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
586
+ background: #d1d4e3;
587
+ }
588
+ .eds-overflow-menu__item:focus {
589
+ outline: none;
590
+ }
591
+
592
+ .eds-overflow-menu__item + .eds-overflow-menu__item {
593
+ border-top: 0.0625rem solid #e9e9e9;
594
+ }
595
+
596
+ .eds-overflow-menu__menu-list[data-reach-menu-list] {
597
+ border: 0.0625rem solid #e9e9e9;
598
+ border-radius: 0.25rem;
599
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
600
+ overflow: hidden;
601
+ }
602
+ .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
603
+ outline: none;
604
+ }
605
+ .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
606
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
607
+ }
608
+
609
+ .eds-overflow-menu__menu-list[data-reach-menu-list],
610
+ .eds-overflow-menu__menu-list[data-reach-menu-items] {
611
+ animation: slide-in 0.2s ease-in-out;
612
+ }
613
+
614
+ @keyframes slide-in {
615
+ 0% {
616
+ opacity: 0;
617
+ transform: translateY(0.5rem);
618
+ }
619
+ 100% {
620
+ opacity: 1;
621
+ transform: translateY(0);
622
+ }
623
+ }
624
+ [data-reach-menu-popover] {
625
+ position: absolute;
626
+ z-index: 30;
627
+ }
628
+ [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
629
+ position: relative;
630
+ right: calc(100% - 2rem);
631
+ }/* DO NOT CHANGE!*/
632
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
633
+ .eds-top-navigation-item {
634
+ --show-active-line: 0;
635
+ display: inline-block;
636
+ cursor: pointer;
637
+ color: inherit;
638
+ text-decoration: none;
639
+ position: relative;
640
+ padding: 1rem;
641
+ min-width: 5rem;
642
+ width: -moz-fit-content;
643
+ width: fit-content;
644
+ text-align: center;
645
+ font-family: inherit;
646
+ font-size: 1rem;
647
+ font-weight: 600;
648
+ }
649
+ .eds-top-navigation-item::after {
650
+ content: "";
651
+ display: block;
652
+ bottom: 1rem;
653
+ height: 0.1875rem;
654
+ width: 0;
655
+ margin: 0 auto;
656
+ opacity: var(--show-active-line);
657
+ background: #ff5959;
658
+ transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
659
+ }
660
+ .eds-top-navigation-item:focus {
661
+ outline-offset: 0.125rem;
662
+ outline: none;
663
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
664
+ }
665
+ .eds-contrast .eds-top-navigation-item:focus {
666
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
667
+ }
668
+ .eds-top-navigation-item:hover {
669
+ --show-active-line: 1;
670
+ }
671
+ .eds-top-navigation-item:hover::after {
672
+ width: 2rem;
673
+ }
674
+ .eds-top-navigation-item--active {
675
+ --show-active-line: 1;
676
+ }
677
+ .eds-top-navigation-item--active::after {
678
+ width: 2rem;
674
679
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.1.25",
3
+ "version": "4.1.27",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -22,22 +22,22 @@
22
22
  "test": "dts test",
23
23
  "lint": "dts lint src"
24
24
  },
25
+ "peerDependencies": {
26
+ "react": ">=16.8.0",
27
+ "react-dom": ">=16.8.0"
28
+ },
25
29
  "dependencies": {
26
- "@entur/a11y": "^0.2.56",
27
- "@entur/button": "^2.10.11",
28
- "@entur/expand": "^3.3.32",
29
- "@entur/icons": "^5.5.0",
30
- "@entur/layout": "^2.1.18",
31
- "@entur/tokens": "^3.5.0",
32
- "@entur/typography": "^1.7.7",
33
- "@entur/utils": "^0.5.2",
30
+ "@entur/a11y": "^0.2.58",
31
+ "@entur/button": "^2.10.13",
32
+ "@entur/expand": "^3.3.34",
33
+ "@entur/icons": "^5.7.0",
34
+ "@entur/layout": "^2.1.20",
35
+ "@entur/tokens": "^3.7.0",
36
+ "@entur/typography": "^1.7.9",
37
+ "@entur/utils": "^0.5.4",
34
38
  "@reach/menu-button": "^0.16.1",
35
39
  "@reach/polymorphic": "0.18.0",
36
40
  "classnames": "^2.3.1"
37
41
  },
38
- "peerDependencies": {
39
- "react": ">=16.8.0",
40
- "react-dom": ">=16.8.0"
41
- },
42
- "gitHead": "30b38034aaafba9fb308fb3d8c8bfaab9608d720"
42
+ "gitHead": "0488198c40c8c610f981c97c8a755a9a435044dd"
43
43
  }