@entur/menu 4.0.4 → 4.0.7

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 (11) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/BreadcrumbItem.d.ts +1 -3
  3. package/dist/TopNavigationItem.d.ts +1 -3
  4. package/dist/menu.cjs.development.js +125 -109
  5. package/dist/menu.cjs.development.js.map +1 -1
  6. package/dist/menu.cjs.production.min.js +1 -1
  7. package/dist/menu.cjs.production.min.js.map +1 -1
  8. package/dist/menu.esm.js +47 -33
  9. package/dist/menu.esm.js.map +1 -1
  10. package/dist/styles.css +297 -297
  11. package/package.json +13 -13
package/dist/styles.css CHANGED
@@ -3,53 +3,6 @@
3
3
  --reach-menu-button: 1;
4
4
  }/* DO NOT CHANGE!*/
5
5
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
6
- .eds-top-navigation-item {
7
- --show-active-line: 0;
8
- display: inline-block;
9
- cursor: pointer;
10
- color: inherit;
11
- text-decoration: none;
12
- position: relative;
13
- padding: 1rem;
14
- min-width: 5rem;
15
- width: fit-content;
16
- text-align: center;
17
- font-family: inherit;
18
- font-size: 1rem;
19
- font-weight: 600;
20
- }
21
- .eds-top-navigation-item::after {
22
- content: "";
23
- display: block;
24
- bottom: 1rem;
25
- height: 0.1875rem;
26
- width: 0;
27
- margin: 0 auto;
28
- opacity: var(--show-active-line);
29
- background: #ff5959;
30
- transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
31
- }
32
- .eds-top-navigation-item:focus {
33
- outline-offset: 0.125rem;
34
- outline: none;
35
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
36
- }
37
- .eds-contrast .eds-top-navigation-item:focus {
38
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
39
- }
40
- .eds-top-navigation-item:hover {
41
- --show-active-line: 1;
42
- }
43
- .eds-top-navigation-item:hover::after {
44
- width: 2rem;
45
- }
46
- .eds-top-navigation-item--active {
47
- --show-active-line: 1;
48
- }
49
- .eds-top-navigation-item--active::after {
50
- width: 2rem;
51
- }/* DO NOT CHANGE!*/
52
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
53
6
  .eds-breadcrumb {
54
7
  list-style: none;
55
8
  margin: 0;
@@ -95,87 +48,266 @@
95
48
  font-weight: 600;
96
49
  }/* DO NOT CHANGE!*/
97
50
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
98
- .eds-overflow-menu__item {
99
- appearance: none;
100
- border: none;
101
- font-size: 0.875rem;
102
- font-family: inherit;
51
+ /* DO NOT CHANGE!*/
52
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
53
+ .eds-side-navigation,
54
+ .eds-side-navigation-group {
55
+ --primary-background-color: #f8f8f8;
56
+ --primary-text-color: #181c56;
57
+ }
58
+ .eds-contrast .eds-side-navigation,
59
+ .eds-contrast .eds-side-navigation-group {
60
+ --primary-background-color: #181c56;
61
+ --primary-text-color: colors-brand-white;
62
+ }
63
+
64
+ .eds-side-navigation__click-target svg {
65
+ margin-right: 1rem;
66
+ color: #656782;
67
+ display: inline-flex;
68
+ align-self: center;
69
+ position: relative;
70
+ top: 0.075em;
71
+ }
72
+ .eds-contrast .eds-side-navigation__click-target svg {
73
+ color: #aeb7e2;
74
+ }
75
+
76
+ .eds-side-navigation__click-target[disabled] svg {
77
+ color: #656782;
78
+ }
79
+
80
+ .eds-side-navigation {
81
+ --padding-vertical: 1rem;
82
+ --padding-horizontal: 2.5rem;
83
+ background-color: var(--primary-background-color);
103
84
  color: var(--primary-text-color);
104
- background: #f8f8f8;
105
- display: block;
106
- height: 3rem;
85
+ padding: 0;
86
+ margin: 0;
87
+ list-style: none;
88
+ position: relative;
89
+ transition: max-width ease-in-out 0.2s;
90
+ }
91
+ .eds-side-navigation__collapse-button {
92
+ position: absolute;
93
+ right: -0.75rem;
94
+ height: 1.5rem;
95
+ width: 1.5rem;
96
+ border-radius: 50%;
107
97
  cursor: pointer;
108
- width: 100%;
109
- line-height: 1.375rem;
110
- text-align: left;
111
- padding: 0.75rem 1rem;
112
- opacity: 1;
98
+ background: #ffffff;
99
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
100
+ border: 0.0625rem solid #d1d3d3;
101
+ color: inherit;
102
+ padding: 0;
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ border: none;
107
+ z-index: 10;
113
108
  }
114
- .eds-contrast .eds-overflow-menu__item {
109
+ .eds-contrast .eds-side-navigation__collapse-button {
110
+ background: #393d79;
111
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
112
+ border-color: transparent;
113
+ }
114
+ .eds-side-navigation__collapse-button svg {
115
+ margin: 0;
116
+ top: 0;
115
117
  color: #181c56;
116
118
  }
117
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
118
- background: #e9e9e9;
119
- color: #949494;
119
+ .eds-contrast .eds-side-navigation__collapse-button svg {
120
+ color: #ffffff;
120
121
  }
121
- .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
122
- background: #e9e9e9;
123
- color: #949494;
122
+ .eds-side-navigation__collapse-button:focus {
123
+ outline: 2px solid #181c56;
124
124
  }
125
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
126
- cursor: not-allowed;
127
- background: #e9e9e9;
128
- color: #949494;
125
+ .eds-contrast .eds-side-navigation__collapse-button:focus {
126
+ outline: 2px solid #ffffff;
129
127
  }
130
- .eds-overflow-menu__item .eds-icon {
131
- margin-right: 0.75rem;
128
+ @media screen and (min-width: 50rem) {
129
+ .eds-side-navigation {
130
+ max-width: 26rem;
131
+ }
132
132
  }
133
- .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
134
- background: #d1d4e3;
133
+ .eds-side-navigation--small {
134
+ --padding-vertical: calc(0.5rem + 0.1875rem);
135
135
  }
136
- .eds-overflow-menu__item:focus {
137
- outline: none;
136
+ .eds-side-navigation .eds-side-navigation {
137
+ background-color: #f3f3f3;
138
138
  }
139
-
140
- .eds-overflow-menu__item + .eds-overflow-menu__item {
141
- border-top: 0.0625rem solid #e9e9e9;
139
+ .eds-contrast .eds-side-navigation .eds-side-navigation {
140
+ background-color: #292b6a;
141
+ }
142
+ .eds-side-navigation--collapsed {
143
+ max-width: 80px;
142
144
  }
143
145
 
144
- .eds-overflow-menu__menu-list[data-reach-menu-list] {
145
- border: 0.0625rem solid #e9e9e9;
146
- border-radius: 0.25rem;
147
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
148
- overflow: hidden;
146
+ .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target {
147
+ padding-left: 3.5rem;
148
+ box-shadow: none;
149
149
  }
150
- .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
151
- outline: none;
150
+ .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
151
+ background-color: #d1d4e3;
152
152
  }
153
- .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
154
- box-shadow: 0 0.0625rem 0.1875rem #393d79;
153
+ .eds-contrast .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
154
+ background-color: #54568c;
155
155
  }
156
156
 
157
- .eds-overflow-menu__menu-list[data-reach-menu-list],
158
- .eds-overflow-menu__menu-list[data-reach-menu-items] {
159
- animation: slide-in 0.2s ease-in-out;
157
+ .eds-side-navigation__click-target {
158
+ appearance: none;
159
+ background: none;
160
+ border: 0;
161
+ border-bottom: 0.125rem solid #e9e9e9;
162
+ border-radius: 0;
163
+ color: var(--primary-text-color);
164
+ cursor: pointer;
165
+ display: block;
166
+ font-family: inherit;
167
+ font-size: inherit;
168
+ font-weight: 500;
169
+ line-height: inherit;
170
+ padding: var(--padding-vertical) 2.5rem;
171
+ padding-left: 2.5rem;
172
+ transition: padding 0.2s ease-in-out;
173
+ text-align: left;
174
+ text-decoration: none;
175
+ width: 100%;
176
+ }
177
+ .eds-contrast .eds-side-navigation__click-target {
178
+ border-color: #292b6a;
179
+ }
180
+ .eds-side-navigation--collapsed .eds-side-navigation__click-target {
181
+ padding-left: 2rem;
182
+ }
183
+ .eds-side-navigation__click-target--active {
184
+ box-shadow: inset 0.25rem 0 0 #181c56;
185
+ font-weight: 600;
186
+ }
187
+ .eds-contrast .eds-side-navigation__click-target--active {
188
+ box-shadow: inset 0.25rem 0 0 #ff5959;
189
+ }
190
+ .eds-side-navigation__click-target[disabled] {
191
+ cursor: default;
192
+ color: #656782;
193
+ }
194
+ .eds-side-navigation__click-target:not([disabled]):hover {
195
+ background-color: #d1d4e3;
196
+ }
197
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
198
+ background-color: #393d79;
199
+ }
200
+ .eds-side-navigation__click-target:not([disabled]):active, .eds-side-navigation__click-target:not([disabled]):focus {
201
+ outline: 2px solid #181c56;
202
+ outline-offset: -2px;
203
+ background: #ebebf1;
204
+ }
205
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):active, .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus {
206
+ background-color: #54568c;
207
+ outline: 2px solid #ffffff;
160
208
  }
161
209
 
162
- @keyframes slide-in {
163
- 0% {
164
- opacity: 0;
165
- transform: translateY(0.5rem);
166
- }
167
- 100% {
168
- opacity: 1;
169
- transform: translateY(0);
210
+ .eds-side-navigation-group {
211
+ background-color: var(--primary-background-color);
212
+ color: var(--primary-text-color);
213
+ }
214
+ .eds-side-navigation-group + .eds-side-navigation-group {
215
+ padding-top: 0.5rem;
216
+ }
217
+ @media screen and (min-width: 50rem) {
218
+ .eds-side-navigation-group {
219
+ max-width: 26rem;
170
220
  }
171
221
  }
172
- [data-reach-menu-popover] {
173
- position: absolute;
174
- z-index: 30;
222
+
223
+ .eds-side-navigation-group__trigger {
224
+ align-items: center;
225
+ appearance: none;
226
+ background: none;
227
+ border: none;
228
+ border-radius: 0;
229
+ border-bottom: 0.125rem solid #e9e9e9;
230
+ color: #656782;
231
+ cursor: pointer;
232
+ display: flex;
233
+ font-size: 0.875rem;
234
+ font-family: inherit;
235
+ font-weight: 500;
236
+ height: 3rem;
237
+ justify-content: space-between;
238
+ letter-spacing: 1px;
239
+ line-height: 1.25rem;
240
+ padding: 0.75rem 0 0.75rem 2.5rem;
241
+ margin: 0;
242
+ text-transform: uppercase;
243
+ transition: padding 0.2s ease-in-out;
244
+ width: 100%;
245
+ }
246
+ .eds-contrast .eds-side-navigation-group__trigger {
247
+ color: #aeb7e2;
248
+ border-color: #292b6a;
249
+ }
250
+ .eds-side-navigation-group__trigger-icon {
251
+ margin-right: 0.75rem;
252
+ }
253
+ .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
254
+ margin-right: 2.5rem;
255
+ }
256
+ .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
257
+ padding-left: 2rem;
258
+ }
259
+ .eds-side-navigation-group__trigger:focus {
260
+ outline: 2px solid #181c56;
261
+ }
262
+ .eds-contrast .eds-side-navigation-group__trigger:focus {
263
+ outline: 2px solid #ffffff;
264
+ }/* DO NOT CHANGE!*/
265
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
266
+ .eds-top-navigation-item {
267
+ --show-active-line: 0;
268
+ display: inline-block;
269
+ cursor: pointer;
270
+ color: inherit;
271
+ text-decoration: none;
272
+ position: relative;
273
+ padding: 1rem;
274
+ min-width: 5rem;
275
+ width: fit-content;
276
+ text-align: center;
277
+ font-family: inherit;
278
+ font-size: 1rem;
279
+ font-weight: 600;
280
+ }
281
+ .eds-top-navigation-item::after {
282
+ content: "";
283
+ display: block;
284
+ bottom: 1rem;
285
+ height: 0.1875rem;
286
+ width: 0;
287
+ margin: 0 auto;
288
+ opacity: var(--show-active-line);
289
+ background: #ff5959;
290
+ transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
291
+ }
292
+ .eds-top-navigation-item:focus {
293
+ outline-offset: 0.125rem;
294
+ outline: none;
295
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
296
+ }
297
+ .eds-contrast .eds-top-navigation-item:focus {
298
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
299
+ }
300
+ .eds-top-navigation-item:hover {
301
+ --show-active-line: 1;
302
+ }
303
+ .eds-top-navigation-item:hover::after {
304
+ width: 2rem;
305
+ }
306
+ .eds-top-navigation-item--active {
307
+ --show-active-line: 1;
175
308
  }
176
- [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
177
- position: relative;
178
- right: calc(100% - 2rem);
309
+ .eds-top-navigation-item--active::after {
310
+ width: 2rem;
179
311
  }/* DO NOT CHANGE!*/
180
312
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
181
313
  .eds-stepper {
@@ -428,217 +560,85 @@
428
560
  margin: 0;
429
561
  }/* DO NOT CHANGE!*/
430
562
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
431
- /* DO NOT CHANGE!*/
432
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
433
- .eds-side-navigation,
434
- .eds-side-navigation-group {
435
- --primary-background-color: #f8f8f8;
436
- --primary-text-color: #181c56;
437
- }
438
- .eds-contrast .eds-side-navigation,
439
- .eds-contrast .eds-side-navigation-group {
440
- --primary-background-color: #181c56;
441
- --primary-text-color: colors-brand-white;
442
- }
443
-
444
- .eds-side-navigation__click-target svg {
445
- margin-right: 1rem;
446
- color: #656782;
447
- display: inline-flex;
448
- align-self: center;
449
- position: relative;
450
- top: 0.075em;
451
- }
452
- .eds-contrast .eds-side-navigation__click-target svg {
453
- color: #aeb7e2;
454
- }
455
-
456
- .eds-side-navigation__click-target[disabled] svg {
457
- color: #656782;
458
- }
459
-
460
- .eds-side-navigation {
461
- --padding-vertical: 1rem;
462
- --padding-horizontal: 2.5rem;
463
- background-color: var(--primary-background-color);
563
+ .eds-overflow-menu__item {
564
+ appearance: none;
565
+ border: none;
566
+ font-size: 0.875rem;
567
+ font-family: inherit;
464
568
  color: var(--primary-text-color);
465
- padding: 0;
466
- margin: 0;
467
- list-style: none;
468
- position: relative;
469
- transition: max-width ease-in-out 0.2s;
470
- }
471
- .eds-side-navigation__collapse-button {
472
- position: absolute;
473
- right: -0.75rem;
474
- height: 1.5rem;
475
- width: 1.5rem;
476
- border-radius: 50%;
569
+ background: #f8f8f8;
570
+ display: block;
571
+ height: 3rem;
477
572
  cursor: pointer;
478
- background: #ffffff;
479
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
480
- border: 0.0625rem solid #d1d3d3;
481
- color: inherit;
482
- padding: 0;
483
- display: flex;
484
- align-items: center;
485
- justify-content: center;
486
- border: none;
487
- z-index: 10;
488
- }
489
- .eds-contrast .eds-side-navigation__collapse-button {
490
- background: #393d79;
491
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
492
- border-color: transparent;
573
+ width: 100%;
574
+ line-height: 1.375rem;
575
+ text-align: left;
576
+ padding: 0.75rem 1rem;
577
+ opacity: 1;
493
578
  }
494
- .eds-side-navigation__collapse-button svg {
495
- margin: 0;
496
- top: 0;
579
+ .eds-contrast .eds-overflow-menu__item {
497
580
  color: #181c56;
498
581
  }
499
- .eds-contrast .eds-side-navigation__collapse-button svg {
500
- color: #ffffff;
501
- }
502
- .eds-side-navigation__collapse-button:focus {
503
- outline: 2px solid #181c56;
504
- }
505
- .eds-contrast .eds-side-navigation__collapse-button:focus {
506
- outline: 2px solid #ffffff;
582
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
583
+ background: #e9e9e9;
584
+ color: #949494;
507
585
  }
508
- @media screen and (min-width: 50rem) {
509
- .eds-side-navigation {
510
- max-width: 26rem;
511
- }
586
+ .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
587
+ background: #e9e9e9;
588
+ color: #949494;
512
589
  }
513
- .eds-side-navigation--small {
514
- --padding-vertical: calc(0.5rem + 0.1875rem);
590
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
591
+ cursor: not-allowed;
592
+ background: #e9e9e9;
593
+ color: #949494;
515
594
  }
516
- .eds-side-navigation .eds-side-navigation {
517
- background-color: #f3f3f3;
595
+ .eds-overflow-menu__item .eds-icon {
596
+ margin-right: 0.75rem;
518
597
  }
519
- .eds-contrast .eds-side-navigation .eds-side-navigation {
520
- background-color: #292b6a;
598
+ .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
599
+ background: #d1d4e3;
521
600
  }
522
- .eds-side-navigation--collapsed {
523
- max-width: 80px;
601
+ .eds-overflow-menu__item:focus {
602
+ outline: none;
524
603
  }
525
604
 
526
- .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target {
527
- padding-left: 3.5rem;
528
- box-shadow: none;
529
- }
530
- .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
531
- background-color: #d1d4e3;
532
- }
533
- .eds-contrast .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
534
- background-color: #54568c;
605
+ .eds-overflow-menu__item + .eds-overflow-menu__item {
606
+ border-top: 0.0625rem solid #e9e9e9;
535
607
  }
536
608
 
537
- .eds-side-navigation__click-target {
538
- appearance: none;
539
- background: none;
540
- border: 0;
541
- border-bottom: 0.125rem solid #e9e9e9;
542
- border-radius: 0;
543
- color: var(--primary-text-color);
544
- cursor: pointer;
545
- display: block;
546
- font-family: inherit;
547
- font-size: inherit;
548
- font-weight: 500;
549
- line-height: inherit;
550
- padding: var(--padding-vertical) 2.5rem;
551
- padding-left: 2.5rem;
552
- transition: padding 0.2s ease-in-out;
553
- text-align: left;
554
- text-decoration: none;
555
- width: 100%;
556
- }
557
- .eds-contrast .eds-side-navigation__click-target {
558
- border-color: #292b6a;
559
- }
560
- .eds-side-navigation--collapsed .eds-side-navigation__click-target {
561
- padding-left: 2rem;
562
- }
563
- .eds-side-navigation__click-target--active {
564
- box-shadow: inset 0.25rem 0 0 #181c56;
565
- font-weight: 600;
566
- }
567
- .eds-contrast .eds-side-navigation__click-target--active {
568
- box-shadow: inset 0.25rem 0 0 #ff5959;
569
- }
570
- .eds-side-navigation__click-target[disabled] {
571
- cursor: default;
572
- color: #656782;
573
- }
574
- .eds-side-navigation__click-target:not([disabled]):hover {
575
- background-color: #d1d4e3;
576
- }
577
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
578
- background-color: #393d79;
609
+ .eds-overflow-menu__menu-list[data-reach-menu-list] {
610
+ border: 0.0625rem solid #e9e9e9;
611
+ border-radius: 0.25rem;
612
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
613
+ overflow: hidden;
579
614
  }
580
- .eds-side-navigation__click-target:not([disabled]):active, .eds-side-navigation__click-target:not([disabled]):focus {
581
- outline: 2px solid #181c56;
582
- outline-offset: -2px;
583
- background: #ebebf1;
615
+ .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
616
+ outline: none;
584
617
  }
585
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):active, .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus {
586
- background-color: #54568c;
587
- outline: 2px solid #ffffff;
618
+ .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
619
+ box-shadow: 0 0.0625rem 0.1875rem #393d79;
588
620
  }
589
621
 
590
- .eds-side-navigation-group {
591
- background-color: var(--primary-background-color);
592
- color: var(--primary-text-color);
593
- }
594
- .eds-side-navigation-group + .eds-side-navigation-group {
595
- padding-top: 0.5rem;
596
- }
597
- @media screen and (min-width: 50rem) {
598
- .eds-side-navigation-group {
599
- max-width: 26rem;
600
- }
622
+ .eds-overflow-menu__menu-list[data-reach-menu-list],
623
+ .eds-overflow-menu__menu-list[data-reach-menu-items] {
624
+ animation: slide-in 0.2s ease-in-out;
601
625
  }
602
626
 
603
- .eds-side-navigation-group__trigger {
604
- align-items: center;
605
- appearance: none;
606
- background: none;
607
- border: none;
608
- border-radius: 0;
609
- border-bottom: 0.125rem solid #e9e9e9;
610
- color: #656782;
611
- cursor: pointer;
612
- display: flex;
613
- font-size: 0.875rem;
614
- font-family: inherit;
615
- font-weight: 500;
616
- height: 3rem;
617
- justify-content: space-between;
618
- letter-spacing: 1px;
619
- line-height: 1.25rem;
620
- padding: 0.75rem 0 0.75rem 2.5rem;
621
- margin: 0;
622
- text-transform: uppercase;
623
- transition: padding 0.2s ease-in-out;
624
- width: 100%;
625
- }
626
- .eds-contrast .eds-side-navigation-group__trigger {
627
- color: #aeb7e2;
628
- border-color: #292b6a;
629
- }
630
- .eds-side-navigation-group__trigger-icon {
631
- margin-right: 0.75rem;
632
- }
633
- .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
634
- margin-right: 2.5rem;
635
- }
636
- .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
637
- padding-left: 2rem;
627
+ @keyframes slide-in {
628
+ 0% {
629
+ opacity: 0;
630
+ transform: translateY(0.5rem);
631
+ }
632
+ 100% {
633
+ opacity: 1;
634
+ transform: translateY(0);
635
+ }
638
636
  }
639
- .eds-side-navigation-group__trigger:focus {
640
- outline: 2px solid #181c56;
637
+ [data-reach-menu-popover] {
638
+ position: absolute;
639
+ z-index: 30;
641
640
  }
642
- .eds-contrast .eds-side-navigation-group__trigger:focus {
643
- outline: 2px solid #ffffff;
641
+ [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
642
+ position: relative;
643
+ right: calc(100% - 2rem);
644
644
  }