@entur/menu 4.1.16 → 4.1.18

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 (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/styles.css +462 -462
  3. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [4.1.18](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.1.17...@entur/menu@4.1.18) (2022-10-31)
7
+
8
+ **Note:** Version bump only for package @entur/menu
9
+
10
+ ## [4.1.17](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.1.16...@entur/menu@4.1.17) (2022-10-31)
11
+
12
+ **Note:** Version bump only for package @entur/menu
13
+
6
14
  ## [4.1.16](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.1.15...@entur/menu@4.1.16) (2022-10-31)
7
15
 
8
16
  **Note:** Version bump only for package @entur/menu
package/dist/styles.css CHANGED
@@ -106,593 +106,593 @@
106
106
  width: 2rem;
107
107
  }/* DO NOT CHANGE!*/
108
108
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
109
- /* DO NOT CHANGE!*/
110
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
111
- .eds-side-navigation,
112
- .eds-side-navigation-group {
113
- --primary-background-color: #f8f8f8;
114
- --primary-text-color: #181c56;
115
- }
116
- .eds-contrast .eds-side-navigation,
117
- .eds-contrast .eds-side-navigation-group {
118
- --primary-background-color: #181c56;
119
- --primary-text-color: colors-brand-white;
120
- }
121
-
122
- .eds-side-navigation__click-target svg {
123
- margin-right: 1rem;
124
- color: #656782;
125
- display: inline-flex;
126
- align-self: center;
127
- position: relative;
128
- top: 0.075em;
129
- }
130
- .eds-contrast .eds-side-navigation__click-target svg {
131
- color: #aeb7e2;
132
- }
133
-
134
- .eds-side-navigation__click-target[disabled] svg {
135
- color: #656782;
136
- }
137
-
138
- .eds-side-navigation {
139
- --padding-vertical: 1rem;
140
- --padding-horizontal: 2.5rem;
141
- background-color: var(--primary-background-color);
142
- color: var(--primary-text-color);
143
- padding: 0;
144
- margin: 0;
145
- list-style: none;
146
- position: relative;
147
- transition: max-width ease-in-out 0.2s;
109
+ .eds-stepper {
110
+ display: flex;
111
+ flex-direction: row;
148
112
  }
149
- .eds-side-navigation__collapse-button {
150
- position: absolute;
151
- right: -0.75rem;
152
- height: 1.5rem;
153
- width: 1.5rem;
154
- border-radius: 50%;
113
+ .eds-stepper__item__container {
155
114
  cursor: pointer;
156
- background: #ffffff;
157
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
158
- border: 0.0625rem solid #d1d3d3;
159
- color: inherit;
115
+ font-family: inherit;
116
+ text-transform: none;
117
+ -webkit-appearance: none;
118
+ -moz-appearance: none;
119
+ appearance: none;
120
+ background: none;
121
+ border: none;
122
+ margin: 0;
160
123
  padding: 0;
124
+ align-items: inherit;
161
125
  display: flex;
162
- align-items: center;
163
- justify-content: center;
164
- border: none;
165
- z-index: 10;
166
- }
167
- .eds-contrast .eds-side-navigation__collapse-button {
168
- background: #393d79;
169
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
170
- border-color: transparent;
126
+ flex-grow: 1;
127
+ flex-basis: 0;
128
+ flex-direction: column;
129
+ margin-left: 0.25rem;
171
130
  }
172
- .eds-side-navigation__collapse-button svg {
173
- margin: 0;
174
- top: 0;
175
- color: #181c56;
131
+ .eds-stepper__item__container--non-interactive {
132
+ cursor: default;
176
133
  }
177
- .eds-contrast .eds-side-navigation__collapse-button svg {
178
- color: #ffffff;
134
+ .eds-stepper__item__container:focus {
135
+ outline-offset: 0.125rem;
136
+ outline: none;
137
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
179
138
  }
180
- .eds-side-navigation__collapse-button:focus {
181
- outline: 2px solid #181c56;
139
+ .eds-contrast .eds-stepper__item__container:focus {
140
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
182
141
  }
183
- .eds-contrast .eds-side-navigation__collapse-button:focus {
184
- outline: 2px solid #ffffff;
142
+ .eds-stepper__item__container:first-child {
143
+ margin-left: 0;
185
144
  }
186
- @media screen and (min-width: 50rem) {
187
- .eds-side-navigation {
188
- max-width: 26rem;
189
- }
145
+ .eds-stepper__item__label {
146
+ cursor: inherit;
147
+ flex-grow: 1;
148
+ flex-direction: column;
149
+ text-align: center;
150
+ font-size: 0.875rem;
151
+ padding: 0.25rem 1rem;
190
152
  }
191
- .eds-side-navigation--small {
192
- --padding-vertical: calc(0.5rem + 0.1875rem);
153
+ .eds-stepper__item__label--active {
154
+ font-weight: 600;
193
155
  }
194
- .eds-side-navigation .eds-side-navigation {
195
- background-color: #f3f3f3;
156
+ .eds-stepper__item__label.eds-stepper__item__label--active {
157
+ color: #181c56;
196
158
  }
197
- .eds-contrast .eds-side-navigation .eds-side-navigation {
198
- background-color: #292b6a;
159
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
160
+ color: #ffffff;
199
161
  }
200
- .eds-side-navigation--collapsed {
201
- max-width: 80px;
162
+ .eds-stepper__item__label.eds-stepper__item__label--has-been {
163
+ color: #181c56;
202
164
  }
203
-
204
- .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target {
205
- padding-left: 3.5rem;
206
- box-shadow: none;
165
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
166
+ color: #ffffff;
207
167
  }
208
- .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
209
- background-color: #d1d4e3;
168
+ .eds-stepper__item__square {
169
+ height: 0.5rem;
210
170
  }
211
- .eds-contrast .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
212
- background-color: #54568c;
171
+ .eds-stepper__item__square--active {
172
+ color: inherit;
173
+ background: #e9e9e9;
174
+ position: relative;
213
175
  }
214
-
215
- .eds-side-navigation__click-target {
216
- -webkit-appearance: none;
217
- -moz-appearance: none;
218
- appearance: none;
219
- background: none;
220
- border: 0;
221
- border-bottom: 0.125rem solid #e9e9e9;
222
- border-radius: 0;
223
- color: var(--primary-text-color);
224
- cursor: pointer;
225
- display: block;
226
- font-family: inherit;
227
- font-size: inherit;
228
- font-weight: 500;
229
- line-height: inherit;
230
- padding: var(--padding-vertical) 2.5rem;
231
- padding-left: 2.5rem;
232
- transition: padding 0.2s ease-in-out;
233
- text-align: left;
234
- text-decoration: none;
235
- width: 100%;
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);
236
186
  }
237
- .eds-contrast .eds-side-navigation__click-target {
238
- border-color: #292b6a;
187
+ .eds-contrast .eds-stepper__item__square--active:before {
188
+ border-left-color: #aeb7e2;
189
+ border-left-color: #aeb7e2;
239
190
  }
240
- .eds-side-navigation--collapsed .eds-side-navigation__click-target {
241
- padding-left: 2rem;
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;
242
199
  }
243
- .eds-side-navigation__click-target--active {
244
- box-shadow: inset 0.25rem 0 0 #181c56;
245
- font-weight: 600;
200
+ .eds-contrast .eds-stepper__item__square--active:after {
201
+ background: #aeb7e2;
246
202
  }
247
- .eds-contrast .eds-side-navigation__click-target--active {
248
- box-shadow: inset 0.25rem 0 0 #ff5959;
203
+ .eds-contrast .eds-stepper__item__square--active {
204
+ background: #aeb7e2;
205
+ background: #393d79;
249
206
  }
250
- .eds-side-navigation__click-target[disabled] {
251
- cursor: not-allowed;
207
+ .eds-stepper__item__square--inactive {
252
208
  color: #656782;
209
+ background: #e9e9e9;
253
210
  }
254
- .eds-side-navigation__click-target:not([disabled]):hover {
255
- background-color: #d1d4e3;
211
+ .eds-contrast .eds-stepper__item__square--inactive {
212
+ color: #aeb7e2;
213
+ background: #393d79;
256
214
  }
257
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
258
- background-color: #393d79;
215
+ .eds-stepper__item__square--has-been {
216
+ color: inherit;
217
+ background: #181c56;
259
218
  }
260
- .eds-side-navigation__click-target:not([disabled]):active, .eds-side-navigation__click-target:not([disabled]):focus {
261
- outline: 2px solid #181c56;
262
- outline-offset: -2px;
263
- background: #ebebf1;
219
+ .eds-contrast .eds-stepper__item__square--has-been {
220
+ background: #aeb7e2;
221
+ }/* DO NOT CHANGE!*/
222
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
223
+ .eds-pagination {
224
+ align-items: center;
225
+ display: flex;
226
+ flex-wrap: wrap;
227
+ row-gap: 0.75rem;
228
+ justify-content: space-between;
264
229
  }
265
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):active, .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus {
266
- background-color: #54568c;
267
- outline: 2px solid #ffffff;
230
+ .eds-pagination__results {
231
+ align-items: center;
232
+ display: flex;
233
+ flex: 1;
234
+ justify-content: flex-start;
268
235
  }
269
-
270
- .eds-side-navigation-group {
271
- background-color: var(--primary-background-color);
272
- color: var(--primary-text-color);
236
+ .eds-pagination__results-label {
237
+ margin-right: 0.5rem;
273
238
  }
274
- .eds-side-navigation-group + .eds-side-navigation-group {
275
- padding-top: 0.5rem;
239
+ .eds-pagination__controls {
240
+ align-items: center;
241
+ display: flex;
242
+ justify-content: center;
276
243
  }
277
- @media screen and (min-width: 50rem) {
278
- .eds-side-navigation-group {
279
- max-width: 26rem;
280
- }
244
+ .eds-pagination__results:first-of-type:last-of-type, .eds-pagination__controls:first-of-type:last-of-type {
245
+ margin: 0 auto;
281
246
  }
282
247
 
283
- .eds-side-navigation-group__trigger {
284
- align-items: center;
248
+ .eds-pagination-menu__menu-button {
285
249
  -webkit-appearance: none;
286
250
  -moz-appearance: none;
287
251
  appearance: none;
288
- background: none;
289
- border: none;
290
- border-radius: 0;
291
- border-bottom: 0.125rem solid #e9e9e9;
292
- color: #656782;
293
- cursor: pointer;
294
- display: flex;
295
- font-size: 0.875rem;
252
+ background: transparent;
253
+ border: 0.0625rem solid #d1d3d3;
254
+ border-radius: 0.25rem;
255
+ color: inherit;
296
256
  font-family: inherit;
297
- font-weight: 500;
298
- height: 3rem;
299
- justify-content: space-between;
300
- letter-spacing: 1px;
301
- line-height: 1.25rem;
302
- padding: 0.75rem 0 0.75rem 2.5rem;
303
- margin: 0;
304
- text-transform: uppercase;
305
- transition: padding 0.2s ease-in-out;
306
- width: 100%;
307
- }
308
- .eds-contrast .eds-side-navigation-group__trigger {
309
- color: #aeb7e2;
310
- border-color: #292b6a;
311
- }
312
- .eds-side-navigation-group__trigger-icon {
313
- margin-right: 0.75rem;
257
+ display: flex;
258
+ align-items: center;
259
+ justify-content: space-around;
260
+ height: 2rem;
261
+ margin-left: 0.25rem;
262
+ margin-right: 1rem;
263
+ width: 3.5rem;
314
264
  }
315
- .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
316
- margin-right: 2.5rem;
265
+ .eds-pagination-menu__menu-button--open {
266
+ border-color: currentColor;
317
267
  }
318
- .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
319
- padding-left: 2rem;
268
+ .eds-pagination-menu__menu-button:focus {
269
+ outline: none;
270
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
320
271
  }
321
- .eds-side-navigation-group__trigger:focus {
322
- outline: 2px solid #181c56;
272
+ .eds-pagination-menu__menu-list {
273
+ width: 3.5rem;
323
274
  }
324
- .eds-contrast .eds-side-navigation-group__trigger:focus {
325
- outline: 2px solid #ffffff;
326
- }/* DO NOT CHANGE!*/
327
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
328
- .eds-overflow-menu__item {
275
+
276
+ .eds-pagination__page {
277
+ align-items: center;
329
278
  -webkit-appearance: none;
330
279
  -moz-appearance: none;
331
280
  appearance: none;
332
- border: none;
333
- font-size: 0.875rem;
334
- font-family: inherit;
335
- color: var(--primary-text-color);
336
- background: #f8f8f8;
337
- display: block;
338
- height: 3rem;
281
+ background: transparent;
282
+ border: 0.0625rem solid #d1d3d3;
283
+ border-color: #d1d3d3;
284
+ border-radius: 0.25rem;
285
+ color: inherit;
339
286
  cursor: pointer;
340
- width: 100%;
341
- line-height: 1.375rem;
342
- text-align: left;
343
- padding: 0.75rem 1rem;
344
- opacity: 1;
287
+ display: flex;
288
+ font-family: inherit;
289
+ font-size: 0.875rem;
290
+ height: 2rem;
291
+ justify-content: center;
292
+ margin: 0 0.125rem;
293
+ padding: 0 0.25rem;
294
+ transition: background 0.1s ease-out, border-color 0.1s ease-out;
295
+ -webkit-user-select: none;
296
+ -moz-user-select: none;
297
+ -ms-user-select: none;
298
+ user-select: none;
299
+ min-width: 2rem;
345
300
  }
346
- .eds-contrast .eds-overflow-menu__item {
347
- color: #181c56;
301
+ .eds-contrast .eds-pagination__page {
302
+ border-color: #54568c;
348
303
  }
349
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
350
- background: #e9e9e9;
351
- color: #949494;
304
+ .eds-pagination__page--selected {
305
+ background: #d1d4e3;
306
+ border-color: #181c56;
307
+ color: inherit;
308
+ opacity: 1;
309
+ pointer-events: none;
352
310
  }
353
- .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
354
- background: #e9e9e9;
355
- color: #949494;
311
+ .eds-contrast .eds-pagination__page--selected {
312
+ border-color: #ffffff;
313
+ background: #393d79;
356
314
  }
357
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
358
- cursor: not-allowed;
359
- background: #e9e9e9;
360
- color: #949494;
315
+ .eds-pagination__page--disabled {
316
+ opacity: 0.5;
317
+ pointer-events: none;
361
318
  }
362
- .eds-overflow-menu__item .eds-icon {
363
- margin-right: 0.75rem;
319
+ .eds-pagination__page:hover {
320
+ background-color: #d1d4e3;
321
+ border-color: #d1d4e3;
364
322
  }
365
- .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
366
- background: #d1d4e3;
323
+ .eds-contrast .eds-pagination__page:hover {
324
+ background-color: #393d79;
325
+ border-color: #393d79;
367
326
  }
368
- .eds-overflow-menu__item:focus {
327
+ .eds-pagination__page:focus {
369
328
  outline: none;
329
+ border-color: #181c56;
330
+ }
331
+ .eds-contrast .eds-pagination__page:focus {
332
+ border-color: #ffffff;
370
333
  }
371
334
 
372
- .eds-overflow-menu__item + .eds-overflow-menu__item {
373
- border-top: 0.0625rem solid #e9e9e9;
335
+ .eds-pagination__ellipsis {
336
+ align-items: baseline;
337
+ cursor: default;
338
+ display: flex;
339
+ font-size: 1.5rem;
340
+ height: 2rem;
341
+ justify-content: center;
342
+ -webkit-user-select: none;
343
+ -moz-user-select: none;
344
+ -ms-user-select: none;
345
+ user-select: none;
346
+ width: 2rem;
347
+ margin: 0 2px;
374
348
  }
375
349
 
376
- .eds-overflow-menu__menu-list[data-reach-menu-list] {
377
- border: 0.0625rem solid #e9e9e9;
350
+ .eds-pagination__input-wrapper {
351
+ white-space: nowrap;
352
+ }
353
+ .eds-pagination__input-label {
354
+ border-left: 0.0625rem solid #d1d3d3;
355
+ color: #656782;
356
+ font-size: 0.875rem;
357
+ margin-left: 0.5rem;
358
+ padding: 0 1rem;
359
+ }
360
+ .eds-contrast .eds-pagination__input-label {
361
+ border-color: #393d79;
362
+ color: #aeb7e2;
363
+ }
364
+ .eds-pagination__input-field {
365
+ -webkit-appearance: none;
366
+ -moz-appearance: none;
367
+ appearance: none;
368
+ background: transparent;
369
+ border: 0.0625rem solid #d1d3d3;
378
370
  border-radius: 0.25rem;
379
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
380
- overflow: hidden;
371
+ color: inherit;
372
+ font-family: inherit;
373
+ font-size: 0.875rem;
374
+ height: 2rem;
375
+ text-align: center;
376
+ width: 2rem;
381
377
  }
382
- .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
383
- outline: none;
378
+ .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
379
+ -webkit-appearance: none;
380
+ appearance: none;
381
+ margin: 0;
382
+ }/* DO NOT CHANGE!*/
383
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
384
+ /* DO NOT CHANGE!*/
385
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
386
+ .eds-side-navigation,
387
+ .eds-side-navigation-group {
388
+ --primary-background-color: #f8f8f8;
389
+ --primary-text-color: #181c56;
384
390
  }
385
- .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
386
- box-shadow: 0 0.0625rem 0.1875rem #393d79;
391
+ .eds-contrast .eds-side-navigation,
392
+ .eds-contrast .eds-side-navigation-group {
393
+ --primary-background-color: #181c56;
394
+ --primary-text-color: colors-brand-white;
387
395
  }
388
396
 
389
- .eds-overflow-menu__menu-list[data-reach-menu-list],
390
- .eds-overflow-menu__menu-list[data-reach-menu-items] {
391
- -webkit-animation: slide-in 0.2s ease-in-out;
392
- animation: slide-in 0.2s ease-in-out;
397
+ .eds-side-navigation__click-target svg {
398
+ margin-right: 1rem;
399
+ color: #656782;
400
+ display: inline-flex;
401
+ align-self: center;
402
+ position: relative;
403
+ top: 0.075em;
393
404
  }
394
-
395
- @-webkit-keyframes slide-in {
396
- 0% {
397
- opacity: 0;
398
- transform: translateY(0.5rem);
399
- }
400
- 100% {
401
- opacity: 1;
402
- transform: translateY(0);
403
- }
405
+ .eds-contrast .eds-side-navigation__click-target svg {
406
+ color: #aeb7e2;
404
407
  }
405
408
 
406
- @keyframes slide-in {
407
- 0% {
408
- opacity: 0;
409
- transform: translateY(0.5rem);
410
- }
411
- 100% {
412
- opacity: 1;
413
- transform: translateY(0);
414
- }
415
- }
416
- [data-reach-menu-popover] {
417
- position: absolute;
418
- z-index: 30;
409
+ .eds-side-navigation__click-target[disabled] svg {
410
+ color: #656782;
419
411
  }
420
- [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
412
+
413
+ .eds-side-navigation {
414
+ --padding-vertical: 1rem;
415
+ --padding-horizontal: 2.5rem;
416
+ background-color: var(--primary-background-color);
417
+ color: var(--primary-text-color);
418
+ padding: 0;
419
+ margin: 0;
420
+ list-style: none;
421
421
  position: relative;
422
- right: calc(100% - 2rem);
423
- }/* DO NOT CHANGE!*/
424
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
425
- .eds-stepper {
426
- display: flex;
427
- flex-direction: row;
422
+ transition: max-width ease-in-out 0.2s;
428
423
  }
429
- .eds-stepper__item__container {
424
+ .eds-side-navigation__collapse-button {
425
+ position: absolute;
426
+ right: -0.75rem;
427
+ height: 1.5rem;
428
+ width: 1.5rem;
429
+ border-radius: 50%;
430
430
  cursor: pointer;
431
- font-family: inherit;
432
- text-transform: none;
433
- -webkit-appearance: none;
434
- -moz-appearance: none;
435
- appearance: none;
436
- background: none;
437
- border: none;
438
- margin: 0;
431
+ background: #ffffff;
432
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
433
+ border: 0.0625rem solid #d1d3d3;
434
+ color: inherit;
439
435
  padding: 0;
440
- align-items: inherit;
441
436
  display: flex;
442
- flex-grow: 1;
443
- flex-basis: 0;
444
- flex-direction: column;
445
- margin-left: 0.25rem;
437
+ align-items: center;
438
+ justify-content: center;
439
+ border: none;
440
+ z-index: 10;
446
441
  }
447
- .eds-stepper__item__container--non-interactive {
448
- cursor: default;
442
+ .eds-contrast .eds-side-navigation__collapse-button {
443
+ background: #393d79;
444
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
445
+ border-color: transparent;
449
446
  }
450
- .eds-stepper__item__container:focus {
451
- outline-offset: 0.125rem;
452
- outline: none;
453
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
447
+ .eds-side-navigation__collapse-button svg {
448
+ margin: 0;
449
+ top: 0;
450
+ color: #181c56;
454
451
  }
455
- .eds-contrast .eds-stepper__item__container:focus {
456
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
452
+ .eds-contrast .eds-side-navigation__collapse-button svg {
453
+ color: #ffffff;
457
454
  }
458
- .eds-stepper__item__container:first-child {
459
- margin-left: 0;
455
+ .eds-side-navigation__collapse-button:focus {
456
+ outline: 2px solid #181c56;
460
457
  }
461
- .eds-stepper__item__label {
462
- cursor: inherit;
463
- flex-grow: 1;
464
- flex-direction: column;
465
- text-align: center;
466
- font-size: 0.875rem;
467
- padding: 0.25rem 1rem;
458
+ .eds-contrast .eds-side-navigation__collapse-button:focus {
459
+ outline: 2px solid #ffffff;
468
460
  }
469
- .eds-stepper__item__label--active {
470
- font-weight: 600;
461
+ @media screen and (min-width: 50rem) {
462
+ .eds-side-navigation {
463
+ max-width: 26rem;
464
+ }
471
465
  }
472
- .eds-stepper__item__label.eds-stepper__item__label--active {
473
- color: #181c56;
466
+ .eds-side-navigation--small {
467
+ --padding-vertical: calc(0.5rem + 0.1875rem);
474
468
  }
475
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
476
- color: #ffffff;
469
+ .eds-side-navigation .eds-side-navigation {
470
+ background-color: #f3f3f3;
477
471
  }
478
- .eds-stepper__item__label.eds-stepper__item__label--has-been {
479
- color: #181c56;
472
+ .eds-contrast .eds-side-navigation .eds-side-navigation {
473
+ background-color: #292b6a;
480
474
  }
481
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
482
- color: #ffffff;
475
+ .eds-side-navigation--collapsed {
476
+ max-width: 80px;
483
477
  }
484
- .eds-stepper__item__square {
485
- height: 0.5rem;
478
+
479
+ .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target {
480
+ padding-left: 3.5rem;
481
+ box-shadow: none;
486
482
  }
487
- .eds-stepper__item__square--active {
488
- color: inherit;
489
- background: #e9e9e9;
490
- position: relative;
483
+ .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
484
+ background-color: #d1d4e3;
491
485
  }
492
- .eds-stepper__item__square--active:before {
493
- background: #181c56;
494
- content: "";
495
- position: absolute;
496
- right: calc(50% - 0.2rem);
497
- border-radius: 0.0625rem;
498
- bottom: 0.0625rem;
499
- width: calc( 0.5rem - 0.125rem - 0.01rem );
500
- height: calc( 0.5rem - 0.125rem - 0.01rem );
501
- transform: rotate(45deg);
486
+ .eds-contrast .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
487
+ background-color: #54568c;
502
488
  }
503
- .eds-contrast .eds-stepper__item__square--active:before {
504
- border-left-color: #aeb7e2;
505
- border-left-color: #aeb7e2;
489
+
490
+ .eds-side-navigation__click-target {
491
+ -webkit-appearance: none;
492
+ -moz-appearance: none;
493
+ appearance: none;
494
+ background: none;
495
+ border: 0;
496
+ border-bottom: 0.125rem solid #e9e9e9;
497
+ border-radius: 0;
498
+ color: var(--primary-text-color);
499
+ cursor: pointer;
500
+ display: block;
501
+ font-family: inherit;
502
+ font-size: inherit;
503
+ font-weight: 500;
504
+ line-height: inherit;
505
+ padding: var(--padding-vertical) 2.5rem;
506
+ padding-left: 2.5rem;
507
+ transition: padding 0.2s ease-in-out;
508
+ text-align: left;
509
+ text-decoration: none;
510
+ width: 100%;
506
511
  }
507
- .eds-stepper__item__square--active:after {
508
- content: "";
509
- position: absolute;
510
- left: 0;
511
- bottom: 0;
512
- width: 50%;
513
- height: 0.5rem;
514
- background: #181c56;
512
+ .eds-contrast .eds-side-navigation__click-target {
513
+ border-color: #292b6a;
515
514
  }
516
- .eds-contrast .eds-stepper__item__square--active:after {
517
- background: #aeb7e2;
515
+ .eds-side-navigation--collapsed .eds-side-navigation__click-target {
516
+ padding-left: 2rem;
518
517
  }
519
- .eds-contrast .eds-stepper__item__square--active {
520
- background: #aeb7e2;
521
- background: #393d79;
518
+ .eds-side-navigation__click-target--active {
519
+ box-shadow: inset 0.25rem 0 0 #181c56;
520
+ font-weight: 600;
522
521
  }
523
- .eds-stepper__item__square--inactive {
522
+ .eds-contrast .eds-side-navigation__click-target--active {
523
+ box-shadow: inset 0.25rem 0 0 #ff5959;
524
+ }
525
+ .eds-side-navigation__click-target[disabled] {
526
+ cursor: not-allowed;
524
527
  color: #656782;
525
- background: #e9e9e9;
526
528
  }
527
- .eds-contrast .eds-stepper__item__square--inactive {
528
- color: #aeb7e2;
529
- background: #393d79;
529
+ .eds-side-navigation__click-target:not([disabled]):hover {
530
+ background-color: #d1d4e3;
530
531
  }
531
- .eds-stepper__item__square--has-been {
532
- color: inherit;
533
- background: #181c56;
532
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
533
+ background-color: #393d79;
534
534
  }
535
- .eds-contrast .eds-stepper__item__square--has-been {
536
- background: #aeb7e2;
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;
535
+ .eds-side-navigation__click-target:not([disabled]):active, .eds-side-navigation__click-target:not([disabled]):focus {
536
+ outline: 2px solid #181c56;
537
+ outline-offset: -2px;
538
+ background: #ebebf1;
545
539
  }
546
- .eds-pagination__results {
547
- align-items: center;
548
- display: flex;
549
- flex: 1;
550
- justify-content: flex-start;
540
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):active, .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus {
541
+ background-color: #54568c;
542
+ outline: 2px solid #ffffff;
551
543
  }
552
- .eds-pagination__results-label {
553
- margin-right: 0.5rem;
544
+
545
+ .eds-side-navigation-group {
546
+ background-color: var(--primary-background-color);
547
+ color: var(--primary-text-color);
554
548
  }
555
- .eds-pagination__controls {
556
- align-items: center;
557
- display: flex;
558
- justify-content: center;
549
+ .eds-side-navigation-group + .eds-side-navigation-group {
550
+ padding-top: 0.5rem;
559
551
  }
560
- .eds-pagination__results:first-of-type:last-of-type, .eds-pagination__controls:first-of-type:last-of-type {
561
- margin: 0 auto;
552
+ @media screen and (min-width: 50rem) {
553
+ .eds-side-navigation-group {
554
+ max-width: 26rem;
555
+ }
562
556
  }
563
557
 
564
- .eds-pagination-menu__menu-button {
558
+ .eds-side-navigation-group__trigger {
559
+ align-items: center;
565
560
  -webkit-appearance: none;
566
561
  -moz-appearance: none;
567
562
  appearance: none;
568
- background: transparent;
569
- border: 0.0625rem solid #d1d3d3;
570
- border-radius: 0.25rem;
571
- color: inherit;
572
- font-family: inherit;
563
+ background: none;
564
+ border: none;
565
+ border-radius: 0;
566
+ border-bottom: 0.125rem solid #e9e9e9;
567
+ color: #656782;
568
+ cursor: pointer;
573
569
  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;
570
+ font-size: 0.875rem;
571
+ font-family: inherit;
572
+ font-weight: 500;
573
+ height: 3rem;
574
+ justify-content: space-between;
575
+ letter-spacing: 1px;
576
+ line-height: 1.25rem;
577
+ padding: 0.75rem 0 0.75rem 2.5rem;
578
+ margin: 0;
579
+ text-transform: uppercase;
580
+ transition: padding 0.2s ease-in-out;
581
+ width: 100%;
580
582
  }
581
- .eds-pagination-menu__menu-button--open {
582
- border-color: currentColor;
583
+ .eds-contrast .eds-side-navigation-group__trigger {
584
+ color: #aeb7e2;
585
+ border-color: #292b6a;
583
586
  }
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
+ .eds-side-navigation-group__trigger-icon {
588
+ margin-right: 0.75rem;
587
589
  }
588
- .eds-pagination-menu__menu-list {
589
- width: 3.5rem;
590
+ .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
591
+ margin-right: 2.5rem;
590
592
  }
591
-
592
- .eds-pagination__page {
593
- align-items: center;
593
+ .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
594
+ padding-left: 2rem;
595
+ }
596
+ .eds-side-navigation-group__trigger:focus {
597
+ outline: 2px solid #181c56;
598
+ }
599
+ .eds-contrast .eds-side-navigation-group__trigger:focus {
600
+ outline: 2px solid #ffffff;
601
+ }/* DO NOT CHANGE!*/
602
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
603
+ .eds-overflow-menu__item {
594
604
  -webkit-appearance: none;
595
605
  -moz-appearance: none;
596
606
  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;
607
+ border: none;
605
608
  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;
609
+ font-family: inherit;
610
+ color: var(--primary-text-color);
611
+ background: #f8f8f8;
612
+ display: block;
613
+ height: 3rem;
614
+ cursor: pointer;
615
+ width: 100%;
616
+ line-height: 1.375rem;
617
+ text-align: left;
618
+ padding: 0.75rem 1rem;
619
+ opacity: 1;
616
620
  }
617
- .eds-contrast .eds-pagination__page {
618
- border-color: #54568c;
621
+ .eds-contrast .eds-overflow-menu__item {
622
+ color: #181c56;
619
623
  }
620
- .eds-pagination__page--selected {
621
- background: #d1d4e3;
622
- border-color: #181c56;
623
- color: inherit;
624
- opacity: 1;
625
- pointer-events: none;
624
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
625
+ background: #e9e9e9;
626
+ color: #949494;
626
627
  }
627
- .eds-contrast .eds-pagination__page--selected {
628
- border-color: #ffffff;
629
- background: #393d79;
628
+ .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
629
+ background: #e9e9e9;
630
+ color: #949494;
630
631
  }
631
- .eds-pagination__page--disabled {
632
- opacity: 0.5;
633
- pointer-events: none;
632
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
633
+ cursor: not-allowed;
634
+ background: #e9e9e9;
635
+ color: #949494;
634
636
  }
635
- .eds-pagination__page:hover {
636
- background-color: #d1d4e3;
637
- border-color: #d1d4e3;
637
+ .eds-overflow-menu__item .eds-icon {
638
+ margin-right: 0.75rem;
638
639
  }
639
- .eds-contrast .eds-pagination__page:hover {
640
- background-color: #393d79;
641
- border-color: #393d79;
640
+ .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
641
+ background: #d1d4e3;
642
642
  }
643
- .eds-pagination__page:focus {
643
+ .eds-overflow-menu__item:focus {
644
644
  outline: none;
645
- border-color: #181c56;
646
645
  }
647
- .eds-contrast .eds-pagination__page:focus {
648
- border-color: #ffffff;
646
+
647
+ .eds-overflow-menu__item + .eds-overflow-menu__item {
648
+ border-top: 0.0625rem solid #e9e9e9;
649
649
  }
650
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;
651
+ .eds-overflow-menu__menu-list[data-reach-menu-list] {
652
+ border: 0.0625rem solid #e9e9e9;
653
+ border-radius: 0.25rem;
654
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
655
+ overflow: hidden;
656
+ }
657
+ .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
658
+ outline: none;
659
+ }
660
+ .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
661
+ box-shadow: 0 0.0625rem 0.1875rem #393d79;
664
662
  }
665
663
 
666
- .eds-pagination__input-wrapper {
667
- white-space: nowrap;
664
+ .eds-overflow-menu__menu-list[data-reach-menu-list],
665
+ .eds-overflow-menu__menu-list[data-reach-menu-items] {
666
+ -webkit-animation: slide-in 0.2s ease-in-out;
667
+ animation: slide-in 0.2s ease-in-out;
668
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;
669
+
670
+ @-webkit-keyframes slide-in {
671
+ 0% {
672
+ opacity: 0;
673
+ transform: translateY(0.5rem);
674
+ }
675
+ 100% {
676
+ opacity: 1;
677
+ transform: translateY(0);
678
+ }
675
679
  }
676
- .eds-contrast .eds-pagination__input-label {
677
- border-color: #393d79;
678
- color: #aeb7e2;
680
+
681
+ @keyframes slide-in {
682
+ 0% {
683
+ opacity: 0;
684
+ transform: translateY(0.5rem);
685
+ }
686
+ 100% {
687
+ opacity: 1;
688
+ transform: translateY(0);
689
+ }
679
690
  }
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;
691
+ [data-reach-menu-popover] {
692
+ position: absolute;
693
+ z-index: 30;
693
694
  }
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;
695
+ [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
696
+ position: relative;
697
+ right: calc(100% - 2rem);
698
698
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.1.16",
3
+ "version": "4.1.18",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -23,14 +23,14 @@
23
23
  "lint": "dts lint"
24
24
  },
25
25
  "dependencies": {
26
- "@entur/a11y": "^0.2.49",
27
- "@entur/button": "^2.10.4",
28
- "@entur/expand": "^3.3.24",
29
- "@entur/icons": "^5.2.0",
30
- "@entur/layout": "^2.1.11",
26
+ "@entur/a11y": "^0.2.50",
27
+ "@entur/button": "^2.10.5",
28
+ "@entur/expand": "^3.3.26",
29
+ "@entur/icons": "^5.2.2",
30
+ "@entur/layout": "^2.1.12",
31
31
  "@entur/tokens": "^3.4.1",
32
- "@entur/typography": "^1.7.0",
33
- "@entur/utils": "^0.4.5",
32
+ "@entur/typography": "^1.7.1",
33
+ "@entur/utils": "^0.4.6",
34
34
  "@reach/menu-button": "^0.16.1",
35
35
  "classnames": "^2.3.1"
36
36
  },
@@ -38,5 +38,5 @@
38
38
  "react": ">=16.8.0",
39
39
  "react-dom": ">=16.8.0"
40
40
  },
41
- "gitHead": "7dfc6f3e46a7bf635e8ec0f0b5ae1d4ba5b8722a"
41
+ "gitHead": "11fde5ffbfd805773572c3a7d999d63f2733e0c7"
42
42
  }