@entur/menu 5.1.9 → 5.1.10-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/styles.css +230 -230
  2. package/package.json +8 -8
package/dist/styles.css CHANGED
@@ -1,235 +1,5 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-side-navigation,
4
- .eds-side-navigation-group {
5
- color: var(--components-menu-sidenavigation-standard-text);
6
- }
7
- .eds-contrast .eds-side-navigation,
8
- .eds-contrast .eds-side-navigation-group {
9
- color: var(--components-menu-sidenavigation-contrast-text);
10
- }
11
-
12
- .eds-side-navigation__click-target svg {
13
- margin-right: 1rem;
14
- color: var(--components-menu-sidenavigation-standard-icon);
15
- display: inline-flex;
16
- align-self: center;
17
- position: relative;
18
- top: 0.075em;
19
- }
20
- .eds-contrast .eds-side-navigation__click-target svg {
21
- color: var(--components-menu-sidenavigation-contrast-icon);
22
- }
23
-
24
- .eds-side-navigation__click-target[disabled] svg {
25
- color: var(--components-menu-sidenavigation-standard-icon-disabled);
26
- }
27
- .eds-contrast .eds-side-navigation__click-target[disabled] svg {
28
- color: var(--components-menu-sidenavigation-contrast-icon-disabled);
29
- }
30
-
31
- .eds-side-navigation {
32
- --padding-vertical: 1rem;
33
- --padding-horizontal: 2.5rem;
34
- background-color: var(--components-menu-sidenavigation-standard-background);
35
- color: var(--components-menu-sidenavigation-standard-text);
36
- padding: 0;
37
- margin: 0;
38
- list-style: none;
39
- position: relative;
40
- transition: max-width ease-in-out 0.2s;
41
- }
42
- .eds-contrast .eds-side-navigation {
43
- background-color: var(--components-menu-sidenavigation-contrast-background);
44
- color: var(--components-menu-sidenavigation-contrast-text);
45
- }
46
- .eds-side-navigation__collapse-button {
47
- position: absolute;
48
- right: -0.75rem;
49
- height: 1.5rem;
50
- width: 1.5rem;
51
- border-radius: 50%;
52
- border: none;
53
- cursor: pointer;
54
- background-color: var(--components-menu-sidenavigation-standard-background);
55
- color: var(--components-menu-sidenavigation-standard-text);
56
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
57
- padding: 0;
58
- display: flex;
59
- align-items: center;
60
- justify-content: center;
61
- z-index: 10;
62
- }
63
- .eds-contrast .eds-side-navigation__collapse-button {
64
- background-color: var(--components-menu-sidenavigation-contrast-background);
65
- color: var(--components-menu-sidenavigation-contast-text);
66
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
67
- }
68
- .eds-side-navigation__collapse-button svg {
69
- margin: 0;
70
- top: 0;
71
- color: var(--components-menu-sidenavigation-standard-icon);
72
- }
73
- .eds-contrast .eds-side-navigation__collapse-button svg {
74
- color: var(--components-menu-sidenavigation-contrast-icon);
75
- }
76
- .eds-side-navigation__collapse-button:focus-visible {
77
- outline: 2px solid #181c56;
78
- outline-color: var(--basecolors-stroke-focus-standard);
79
- outline-offset: 0.125rem;
80
- }
81
- .eds-contrast .eds-side-navigation__collapse-button:focus-visible {
82
- outline-color: var(--basecolors-stroke-focus-contrast);
83
- }
84
- @media screen and (min-width: 50rem) {
85
- .eds-side-navigation {
86
- max-width: 26rem;
87
- }
88
- }
89
- .eds-side-navigation--small {
90
- --padding-vertical: calc(0.5rem + 0.1875rem);
91
- }
92
- .eds-side-navigation .eds-side-navigation {
93
- background-color: var(--components-menu-sidenavigation-standard-background);
94
- }
95
- .eds-contrast .eds-side-navigation .eds-side-navigation {
96
- background-color: var(--components-menu-sidenavigation-contrast-background);
97
- }
98
- .eds-side-navigation--collapsed {
99
- max-width: 80px;
100
- }
101
-
102
- .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target {
103
- padding-left: 3.5rem;
104
- box-shadow: none;
105
- }
106
- .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
107
- background-color: var(--components-menu-sidenavigation-standard-fill-active);
108
- }
109
- .eds-contrast .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
110
- background-color: var(--components-menu-sidenavigation-contrast-fill-active);
111
- }
112
-
113
- .eds-side-navigation__click-target {
114
- -webkit-appearance: none;
115
- -moz-appearance: none;
116
- appearance: none;
117
- background: none;
118
- border: 0;
119
- border-bottom: 0.0625rem solid var(--components-menu-sidenavigation-standard-divide);
120
- border-radius: 0;
121
- color: var(--components-menu-sidenavigation-standard-text);
122
- cursor: pointer;
123
- display: block;
124
- font-size: 1rem;
125
- font-family: inherit;
126
- font-weight: 500;
127
- line-height: inherit;
128
- padding: var(--padding-vertical) 2.5rem;
129
- padding-left: 2.5rem;
130
- transition: padding 0.2s ease-in-out;
131
- text-align: left;
132
- -webkit-text-decoration: none;
133
- text-decoration: none;
134
- width: 100%;
135
- }
136
- .eds-contrast .eds-side-navigation__click-target {
137
- color: var(--components-menu-sidenavigation-contrast-text);
138
- border-color: var(--components-menu-sidenavigation-contrast-divide);
139
- }
140
- .eds-side-navigation--collapsed .eds-side-navigation__click-target {
141
- padding-left: 2rem;
142
- }
143
- .eds-side-navigation__click-target--active {
144
- box-shadow: inset 0.25rem 0 0 var(--components-menu-sidenavigation-standard-stroke-selected);
145
- font-weight: 600;
146
- }
147
- .eds-contrast .eds-side-navigation__click-target--active {
148
- box-shadow: inset 0.25rem 0 0 var(--components-menu-sidenavigation-contrast-stroke-selected);
149
- }
150
- .eds-side-navigation__click-target[disabled] {
151
- cursor: not-allowed;
152
- color: var(--components-menu-sidenavigation-standard-text-disabled);
153
- }
154
- .eds-contrast .eds-side-navigation__click-target[disabled] {
155
- color: var(--components-menu-sidenavigation-contrast-text-disabled);
156
- }
157
- .eds-side-navigation__click-target:not([disabled]):hover {
158
- background-color: var(--components-menu-sidenavigation-standard-fill-hover);
159
- }
160
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
161
- background-color: var(--components-menu-sidenavigation-contrast-fill-hover);
162
- }
163
- .eds-side-navigation__click-target:not([disabled]):focus-visible {
164
- outline: 2px solid #181c56;
165
- outline-color: var(--basecolors-stroke-focus-standard);
166
- outline-offset: 0.125rem;
167
- }
168
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus-visible {
169
- outline-color: var(--basecolors-stroke-focus-contrast);
170
- }
171
-
172
- .eds-side-navigation-group + .eds-side-navigation-group {
173
- padding-top: 0.5rem;
174
- }
175
- @media screen and (min-width: 50rem) {
176
- .eds-side-navigation-group {
177
- max-width: 26rem;
178
- }
179
- }
180
-
181
- .eds-side-navigation-group__trigger {
182
- align-items: center;
183
- -webkit-appearance: none;
184
- -moz-appearance: none;
185
- appearance: none;
186
- background-color: var(--components-menu-sidenavigation-standard-background);
187
- border: none;
188
- border-bottom: 0.0625rem solid var(--components-menu-sidenavigation-standard-divide);
189
- color: var(--components-menu-sidenavigation-standard-label);
190
- cursor: pointer;
191
- display: flex;
192
- font-size: 0.875rem;
193
- font-family: inherit;
194
- font-weight: 500;
195
- height: 3rem;
196
- justify-content: space-between;
197
- letter-spacing: 1px;
198
- line-height: 1.25rem;
199
- padding: 0.75rem 0 0.75rem 2.5rem;
200
- margin: 0;
201
- text-transform: uppercase;
202
- transition: padding 0.2s ease-in-out;
203
- width: 100%;
204
- }
205
- .eds-contrast .eds-side-navigation-group__trigger {
206
- color: var(--components-menu-sidenavigation-contrast-label);
207
- background-color: var(--components-menu-sidenavigation-contrast-background);
208
- border-color: var(--components-menu-sidenavigation-contrast-divide);
209
- }
210
- .eds-side-navigation-group__trigger-icon {
211
- margin-right: 0.75rem;
212
- }
213
- .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
214
- margin-right: 2.5rem;
215
- color: var(--components-menu-sidenavigation-standard-icon-label);
216
- }
217
- .eds-contrast .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
218
- color: var(--components-menu-sidenavigation-contrast-icon-label);
219
- }
220
- .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
221
- padding-left: 2rem;
222
- }
223
- .eds-side-navigation-group__trigger:focus-visible {
224
- outline: 2px solid #181c56;
225
- outline-color: var(--basecolors-stroke-focus-standard);
226
- outline-offset: 0.125rem;
227
- }
228
- .eds-contrast .eds-side-navigation-group__trigger:focus-visible {
229
- outline-color: var(--basecolors-stroke-focus-contrast);
230
- }
231
- /* DO NOT CHANGE!*/
232
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
233
3
  .eds-overflow-menu__menu-list {
234
4
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
235
5
  overflow: hidden;
@@ -491,6 +261,236 @@
491
261
  }
492
262
  /* DO NOT CHANGE!*/
493
263
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
264
+ .eds-side-navigation,
265
+ .eds-side-navigation-group {
266
+ color: var(--components-menu-sidenavigation-standard-text);
267
+ }
268
+ .eds-contrast .eds-side-navigation,
269
+ .eds-contrast .eds-side-navigation-group {
270
+ color: var(--components-menu-sidenavigation-contrast-text);
271
+ }
272
+
273
+ .eds-side-navigation__click-target svg {
274
+ margin-right: 1rem;
275
+ color: var(--components-menu-sidenavigation-standard-icon);
276
+ display: inline-flex;
277
+ align-self: center;
278
+ position: relative;
279
+ top: 0.075em;
280
+ }
281
+ .eds-contrast .eds-side-navigation__click-target svg {
282
+ color: var(--components-menu-sidenavigation-contrast-icon);
283
+ }
284
+
285
+ .eds-side-navigation__click-target[disabled] svg {
286
+ color: var(--components-menu-sidenavigation-standard-icon-disabled);
287
+ }
288
+ .eds-contrast .eds-side-navigation__click-target[disabled] svg {
289
+ color: var(--components-menu-sidenavigation-contrast-icon-disabled);
290
+ }
291
+
292
+ .eds-side-navigation {
293
+ --padding-vertical: 1rem;
294
+ --padding-horizontal: 2.5rem;
295
+ background-color: var(--components-menu-sidenavigation-standard-background);
296
+ color: var(--components-menu-sidenavigation-standard-text);
297
+ padding: 0;
298
+ margin: 0;
299
+ list-style: none;
300
+ position: relative;
301
+ transition: max-width ease-in-out 0.2s;
302
+ }
303
+ .eds-contrast .eds-side-navigation {
304
+ background-color: var(--components-menu-sidenavigation-contrast-background);
305
+ color: var(--components-menu-sidenavigation-contrast-text);
306
+ }
307
+ .eds-side-navigation__collapse-button {
308
+ position: absolute;
309
+ right: -0.75rem;
310
+ height: 1.5rem;
311
+ width: 1.5rem;
312
+ border-radius: 50%;
313
+ border: none;
314
+ cursor: pointer;
315
+ background-color: var(--components-menu-sidenavigation-standard-background);
316
+ color: var(--components-menu-sidenavigation-standard-text);
317
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
318
+ padding: 0;
319
+ display: flex;
320
+ align-items: center;
321
+ justify-content: center;
322
+ z-index: 10;
323
+ }
324
+ .eds-contrast .eds-side-navigation__collapse-button {
325
+ background-color: var(--components-menu-sidenavigation-contrast-background);
326
+ color: var(--components-menu-sidenavigation-contast-text);
327
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
328
+ }
329
+ .eds-side-navigation__collapse-button svg {
330
+ margin: 0;
331
+ top: 0;
332
+ color: var(--components-menu-sidenavigation-standard-icon);
333
+ }
334
+ .eds-contrast .eds-side-navigation__collapse-button svg {
335
+ color: var(--components-menu-sidenavigation-contrast-icon);
336
+ }
337
+ .eds-side-navigation__collapse-button:focus-visible {
338
+ outline: 2px solid #181c56;
339
+ outline-color: var(--basecolors-stroke-focus-standard);
340
+ outline-offset: 0.125rem;
341
+ }
342
+ .eds-contrast .eds-side-navigation__collapse-button:focus-visible {
343
+ outline-color: var(--basecolors-stroke-focus-contrast);
344
+ }
345
+ @media screen and (min-width: 50rem) {
346
+ .eds-side-navigation {
347
+ max-width: 26rem;
348
+ }
349
+ }
350
+ .eds-side-navigation--small {
351
+ --padding-vertical: calc(0.5rem + 0.1875rem);
352
+ }
353
+ .eds-side-navigation .eds-side-navigation {
354
+ background-color: var(--components-menu-sidenavigation-standard-background);
355
+ }
356
+ .eds-contrast .eds-side-navigation .eds-side-navigation {
357
+ background-color: var(--components-menu-sidenavigation-contrast-background);
358
+ }
359
+ .eds-side-navigation--collapsed {
360
+ max-width: 80px;
361
+ }
362
+
363
+ .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target {
364
+ padding-left: 3.5rem;
365
+ box-shadow: none;
366
+ }
367
+ .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
368
+ background-color: var(--components-menu-sidenavigation-standard-fill-active);
369
+ }
370
+ .eds-contrast .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
371
+ background-color: var(--components-menu-sidenavigation-contrast-fill-active);
372
+ }
373
+
374
+ .eds-side-navigation__click-target {
375
+ -webkit-appearance: none;
376
+ -moz-appearance: none;
377
+ appearance: none;
378
+ background: none;
379
+ border: 0;
380
+ border-bottom: 0.0625rem solid var(--components-menu-sidenavigation-standard-divide);
381
+ border-radius: 0;
382
+ color: var(--components-menu-sidenavigation-standard-text);
383
+ cursor: pointer;
384
+ display: block;
385
+ font-size: 1rem;
386
+ font-family: inherit;
387
+ font-weight: 500;
388
+ line-height: inherit;
389
+ padding: var(--padding-vertical) 2.5rem;
390
+ padding-left: 2.5rem;
391
+ transition: padding 0.2s ease-in-out;
392
+ text-align: left;
393
+ -webkit-text-decoration: none;
394
+ text-decoration: none;
395
+ width: 100%;
396
+ }
397
+ .eds-contrast .eds-side-navigation__click-target {
398
+ color: var(--components-menu-sidenavigation-contrast-text);
399
+ border-color: var(--components-menu-sidenavigation-contrast-divide);
400
+ }
401
+ .eds-side-navigation--collapsed .eds-side-navigation__click-target {
402
+ padding-left: 2rem;
403
+ }
404
+ .eds-side-navigation__click-target--active {
405
+ box-shadow: inset 0.25rem 0 0 var(--components-menu-sidenavigation-standard-stroke-selected);
406
+ font-weight: 600;
407
+ }
408
+ .eds-contrast .eds-side-navigation__click-target--active {
409
+ box-shadow: inset 0.25rem 0 0 var(--components-menu-sidenavigation-contrast-stroke-selected);
410
+ }
411
+ .eds-side-navigation__click-target[disabled] {
412
+ cursor: not-allowed;
413
+ color: var(--components-menu-sidenavigation-standard-text-disabled);
414
+ }
415
+ .eds-contrast .eds-side-navigation__click-target[disabled] {
416
+ color: var(--components-menu-sidenavigation-contrast-text-disabled);
417
+ }
418
+ .eds-side-navigation__click-target:not([disabled]):hover {
419
+ background-color: var(--components-menu-sidenavigation-standard-fill-hover);
420
+ }
421
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
422
+ background-color: var(--components-menu-sidenavigation-contrast-fill-hover);
423
+ }
424
+ .eds-side-navigation__click-target:not([disabled]):focus-visible {
425
+ outline: 2px solid #181c56;
426
+ outline-color: var(--basecolors-stroke-focus-standard);
427
+ outline-offset: 0.125rem;
428
+ }
429
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus-visible {
430
+ outline-color: var(--basecolors-stroke-focus-contrast);
431
+ }
432
+
433
+ .eds-side-navigation-group + .eds-side-navigation-group {
434
+ padding-top: 0.5rem;
435
+ }
436
+ @media screen and (min-width: 50rem) {
437
+ .eds-side-navigation-group {
438
+ max-width: 26rem;
439
+ }
440
+ }
441
+
442
+ .eds-side-navigation-group__trigger {
443
+ align-items: center;
444
+ -webkit-appearance: none;
445
+ -moz-appearance: none;
446
+ appearance: none;
447
+ background-color: var(--components-menu-sidenavigation-standard-background);
448
+ border: none;
449
+ border-bottom: 0.0625rem solid var(--components-menu-sidenavigation-standard-divide);
450
+ color: var(--components-menu-sidenavigation-standard-label);
451
+ cursor: pointer;
452
+ display: flex;
453
+ font-size: 0.875rem;
454
+ font-family: inherit;
455
+ font-weight: 500;
456
+ height: 3rem;
457
+ justify-content: space-between;
458
+ letter-spacing: 1px;
459
+ line-height: 1.25rem;
460
+ padding: 0.75rem 0 0.75rem 2.5rem;
461
+ margin: 0;
462
+ text-transform: uppercase;
463
+ transition: padding 0.2s ease-in-out;
464
+ width: 100%;
465
+ }
466
+ .eds-contrast .eds-side-navigation-group__trigger {
467
+ color: var(--components-menu-sidenavigation-contrast-label);
468
+ background-color: var(--components-menu-sidenavigation-contrast-background);
469
+ border-color: var(--components-menu-sidenavigation-contrast-divide);
470
+ }
471
+ .eds-side-navigation-group__trigger-icon {
472
+ margin-right: 0.75rem;
473
+ }
474
+ .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
475
+ margin-right: 2.5rem;
476
+ color: var(--components-menu-sidenavigation-standard-icon-label);
477
+ }
478
+ .eds-contrast .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
479
+ color: var(--components-menu-sidenavigation-contrast-icon-label);
480
+ }
481
+ .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
482
+ padding-left: 2rem;
483
+ }
484
+ .eds-side-navigation-group__trigger:focus-visible {
485
+ outline: 2px solid #181c56;
486
+ outline-color: var(--basecolors-stroke-focus-standard);
487
+ outline-offset: 0.125rem;
488
+ }
489
+ .eds-contrast .eds-side-navigation-group__trigger:focus-visible {
490
+ outline-color: var(--basecolors-stroke-focus-contrast);
491
+ }
492
+ /* DO NOT CHANGE!*/
493
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
494
494
  .eds-stepper {
495
495
  --text-color: var(--components-menu-stepper-standard-text-uncompleted);
496
496
  --line-color: var(--components-menu-stepper-standard-background);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "5.1.9",
3
+ "version": "5.1.10-beta.0",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -28,13 +28,13 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@entur/a11y": "^0.2.99",
31
- "@entur/button": "^3.3.9",
32
- "@entur/expand": "^3.6.9",
33
- "@entur/icons": "^7.12.0",
34
- "@entur/layout": "^3.1.5",
31
+ "@entur/button": "^3.3.10-beta.0",
32
+ "@entur/expand": "^3.6.10-beta.0",
33
+ "@entur/icons": "^7.13.0-beta.0",
34
+ "@entur/layout": "^3.1.6-beta.0",
35
35
  "@entur/tokens": "^3.19.1",
36
- "@entur/tooltip": "^5.2.9",
37
- "@entur/typography": "^1.9.9",
36
+ "@entur/tooltip": "^5.2.10-beta.0",
37
+ "@entur/typography": "^1.9.10-beta.0",
38
38
  "@entur/utils": "^0.12.3",
39
39
  "@floating-ui/react": "^0.26.23",
40
40
  "classnames": "^2.3.1"
@@ -42,5 +42,5 @@
42
42
  "devDependencies": {
43
43
  "dts-cli": "2.0.5"
44
44
  },
45
- "gitHead": "db5f805386b0e22e938d3d0fbc6d283088502658"
45
+ "gitHead": "395ed0106e0bd13be76da11ee8ae35b3197ab218"
46
46
  }