@entur/menu 4.1.29-beta.1 → 4.1.29

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 +201 -201
  2. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -3,49 +3,52 @@
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-breadcrumb {
7
- list-style: none;
8
- margin: 0;
9
- padding: 0;
10
- }
11
-
12
- .eds-breadcrumb__item {
6
+ .eds-top-navigation-item {
7
+ --show-active-line: 0;
13
8
  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;
9
+ cursor: pointer;
22
10
  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%);
11
+ text-decoration: none;
12
+ position: relative;
13
+ padding: 1rem;
14
+ min-width: 5rem;
15
+ width: -moz-fit-content;
16
+ width: fit-content;
17
+ text-align: center;
18
+ font-family: inherit;
19
+ font-size: 1rem;
20
+ font-weight: 600;
30
21
  }
31
- .eds-breadcrumb__link:hover {
32
- animation: eds-breadcrumb-underline 0.3s ease-in;
22
+ .eds-top-navigation-item::after {
23
+ content: "";
24
+ display: block;
25
+ bottom: 1rem;
26
+ height: 0.1875rem;
27
+ width: 0;
28
+ margin: 0 auto;
29
+ opacity: var(--show-active-line);
30
+ background: #ff5959;
31
+ transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
33
32
  }
34
- .eds-breadcrumb__link:focus {
33
+ .eds-top-navigation-item:focus {
34
+ outline-offset: 0.125rem;
35
35
  outline: none;
36
36
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
37
- outline-offset: 0.125rem;
38
37
  }
39
- @keyframes eds-breadcrumb-underline {
40
- from {
41
- background-size: 0% 0.125rem;
42
- }
43
- to {
44
- background-size: 100% 0.125rem;
45
- }
38
+ .eds-contrast .eds-top-navigation-item:focus {
39
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
46
40
  }
47
- .eds-breadcrumb__link--current {
48
- font-weight: 600;
41
+ .eds-top-navigation-item:hover {
42
+ --show-active-line: 1;
43
+ }
44
+ .eds-top-navigation-item:hover::after {
45
+ width: 2rem;
46
+ }
47
+ .eds-top-navigation-item--active {
48
+ --show-active-line: 1;
49
+ }
50
+ .eds-top-navigation-item--active::after {
51
+ width: 2rem;
49
52
  }/* DO NOT CHANGE!*/
50
53
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
51
54
  /* DO NOT CHANGE!*/
@@ -267,172 +270,6 @@
267
270
  outline: 2px solid #ffffff;
268
271
  }/* DO NOT CHANGE!*/
269
272
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
270
- .eds-top-navigation-item {
271
- --show-active-line: 0;
272
- display: inline-block;
273
- cursor: pointer;
274
- color: inherit;
275
- text-decoration: none;
276
- position: relative;
277
- padding: 1rem;
278
- min-width: 5rem;
279
- width: -moz-fit-content;
280
- width: fit-content;
281
- text-align: center;
282
- font-family: inherit;
283
- font-size: 1rem;
284
- font-weight: 600;
285
- }
286
- .eds-top-navigation-item::after {
287
- content: "";
288
- display: block;
289
- bottom: 1rem;
290
- height: 0.1875rem;
291
- width: 0;
292
- margin: 0 auto;
293
- opacity: var(--show-active-line);
294
- background: #ff5959;
295
- transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
296
- }
297
- .eds-top-navigation-item:focus {
298
- outline-offset: 0.125rem;
299
- outline: none;
300
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
301
- }
302
- .eds-contrast .eds-top-navigation-item:focus {
303
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
304
- }
305
- .eds-top-navigation-item:hover {
306
- --show-active-line: 1;
307
- }
308
- .eds-top-navigation-item:hover::after {
309
- width: 2rem;
310
- }
311
- .eds-top-navigation-item--active {
312
- --show-active-line: 1;
313
- }
314
- .eds-top-navigation-item--active::after {
315
- width: 2rem;
316
- }/* DO NOT CHANGE!*/
317
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
318
- .eds-stepper {
319
- display: flex;
320
- flex-direction: row;
321
- }
322
- .eds-stepper__item__container {
323
- cursor: pointer;
324
- font-family: inherit;
325
- text-transform: none;
326
- -webkit-appearance: none;
327
- -moz-appearance: none;
328
- appearance: none;
329
- background: none;
330
- border: none;
331
- margin: 0;
332
- padding: 0;
333
- align-items: inherit;
334
- display: flex;
335
- flex-grow: 1;
336
- flex-basis: 0;
337
- flex-direction: column;
338
- margin-left: 0.25rem;
339
- }
340
- .eds-stepper__item__container--non-interactive {
341
- cursor: default;
342
- }
343
- .eds-stepper__item__container:focus {
344
- outline-offset: 0.125rem;
345
- outline: none;
346
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
347
- }
348
- .eds-contrast .eds-stepper__item__container:focus {
349
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
350
- }
351
- .eds-stepper__item__container:first-child {
352
- margin-left: 0;
353
- }
354
- .eds-stepper__item__label {
355
- cursor: inherit;
356
- flex-grow: 1;
357
- flex-direction: column;
358
- text-align: center;
359
- font-size: 0.875rem;
360
- padding: 0.25rem 1rem;
361
- }
362
- .eds-stepper__item__label--active {
363
- font-weight: 600;
364
- }
365
- .eds-stepper__item__label.eds-stepper__item__label--active {
366
- color: #181c56;
367
- }
368
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
369
- color: #ffffff;
370
- }
371
- .eds-stepper__item__label.eds-stepper__item__label--has-been {
372
- color: #181c56;
373
- }
374
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
375
- color: #ffffff;
376
- }
377
- .eds-stepper__item__square {
378
- height: 0.5rem;
379
- }
380
- .eds-stepper__item__square--active {
381
- color: inherit;
382
- background: #e9e9e9;
383
- position: relative;
384
- }
385
- .eds-stepper__item__square--active:before {
386
- background: #181c56;
387
- content: "";
388
- position: absolute;
389
- right: calc(50% - 0.2rem);
390
- border-radius: 0.0625rem;
391
- bottom: 0.0625rem;
392
- width: calc(
393
- 0.5rem - 0.125rem - 0.01rem
394
- );
395
- height: calc(
396
- 0.5rem - 0.125rem - 0.01rem
397
- );
398
- transform: rotate(45deg);
399
- }
400
- .eds-contrast .eds-stepper__item__square--active:before {
401
- border-left-color: #aeb7e2;
402
- border-left-color: #aeb7e2;
403
- }
404
- .eds-stepper__item__square--active:after {
405
- content: "";
406
- position: absolute;
407
- left: 0;
408
- bottom: 0;
409
- width: 50%;
410
- height: 0.5rem;
411
- background: #181c56;
412
- }
413
- .eds-contrast .eds-stepper__item__square--active:after {
414
- background: #aeb7e2;
415
- }
416
- .eds-contrast .eds-stepper__item__square--active {
417
- background: #aeb7e2;
418
- background: #393d79;
419
- }
420
- .eds-stepper__item__square--inactive {
421
- color: #656782;
422
- background: #e9e9e9;
423
- }
424
- .eds-contrast .eds-stepper__item__square--inactive {
425
- color: #aeb7e2;
426
- background: #393d79;
427
- }
428
- .eds-stepper__item__square--has-been {
429
- color: inherit;
430
- background: #181c56;
431
- }
432
- .eds-contrast .eds-stepper__item__square--has-been {
433
- background: #aeb7e2;
434
- }/* DO NOT CHANGE!*/
435
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
436
273
  .eds-pagination {
437
274
  align-items: center;
438
275
  display: flex;
@@ -592,6 +429,124 @@
592
429
  margin: 0;
593
430
  }/* DO NOT CHANGE!*/
594
431
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
432
+ .eds-stepper {
433
+ display: flex;
434
+ flex-direction: row;
435
+ }
436
+ .eds-stepper__item__container {
437
+ cursor: pointer;
438
+ font-family: inherit;
439
+ text-transform: none;
440
+ -webkit-appearance: none;
441
+ -moz-appearance: none;
442
+ appearance: none;
443
+ background: none;
444
+ border: none;
445
+ margin: 0;
446
+ padding: 0;
447
+ align-items: inherit;
448
+ display: flex;
449
+ flex-grow: 1;
450
+ flex-basis: 0;
451
+ flex-direction: column;
452
+ margin-left: 0.25rem;
453
+ }
454
+ .eds-stepper__item__container--non-interactive {
455
+ cursor: default;
456
+ }
457
+ .eds-stepper__item__container:focus {
458
+ outline-offset: 0.125rem;
459
+ outline: none;
460
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
461
+ }
462
+ .eds-contrast .eds-stepper__item__container:focus {
463
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
464
+ }
465
+ .eds-stepper__item__container:first-child {
466
+ margin-left: 0;
467
+ }
468
+ .eds-stepper__item__label {
469
+ cursor: inherit;
470
+ flex-grow: 1;
471
+ flex-direction: column;
472
+ text-align: center;
473
+ font-size: 0.875rem;
474
+ padding: 0.25rem 1rem;
475
+ }
476
+ .eds-stepper__item__label--active {
477
+ font-weight: 600;
478
+ }
479
+ .eds-stepper__item__label.eds-stepper__item__label--active {
480
+ color: #181c56;
481
+ }
482
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
483
+ color: #ffffff;
484
+ }
485
+ .eds-stepper__item__label.eds-stepper__item__label--has-been {
486
+ color: #181c56;
487
+ }
488
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
489
+ color: #ffffff;
490
+ }
491
+ .eds-stepper__item__square {
492
+ height: 0.5rem;
493
+ }
494
+ .eds-stepper__item__square--active {
495
+ color: inherit;
496
+ background: #e9e9e9;
497
+ position: relative;
498
+ }
499
+ .eds-stepper__item__square--active:before {
500
+ background: #181c56;
501
+ content: "";
502
+ position: absolute;
503
+ right: calc(50% - 0.2rem);
504
+ border-radius: 0.0625rem;
505
+ bottom: 0.0625rem;
506
+ width: calc(
507
+ 0.5rem - 0.125rem - 0.01rem
508
+ );
509
+ height: calc(
510
+ 0.5rem - 0.125rem - 0.01rem
511
+ );
512
+ transform: rotate(45deg);
513
+ }
514
+ .eds-contrast .eds-stepper__item__square--active:before {
515
+ border-left-color: #aeb7e2;
516
+ border-left-color: #aeb7e2;
517
+ }
518
+ .eds-stepper__item__square--active:after {
519
+ content: "";
520
+ position: absolute;
521
+ left: 0;
522
+ bottom: 0;
523
+ width: 50%;
524
+ height: 0.5rem;
525
+ background: #181c56;
526
+ }
527
+ .eds-contrast .eds-stepper__item__square--active:after {
528
+ background: #aeb7e2;
529
+ }
530
+ .eds-contrast .eds-stepper__item__square--active {
531
+ background: #aeb7e2;
532
+ background: #393d79;
533
+ }
534
+ .eds-stepper__item__square--inactive {
535
+ color: #656782;
536
+ background: #e9e9e9;
537
+ }
538
+ .eds-contrast .eds-stepper__item__square--inactive {
539
+ color: #aeb7e2;
540
+ background: #393d79;
541
+ }
542
+ .eds-stepper__item__square--has-been {
543
+ color: inherit;
544
+ background: #181c56;
545
+ }
546
+ .eds-contrast .eds-stepper__item__square--has-been {
547
+ background: #aeb7e2;
548
+ }/* DO NOT CHANGE!*/
549
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
595
550
  .eds-overflow-menu__item {
596
551
  -webkit-appearance: none;
597
552
  -moz-appearance: none;
@@ -675,4 +630,49 @@
675
630
  [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
676
631
  position: relative;
677
632
  right: calc(100% - 2rem);
633
+ }/* DO NOT CHANGE!*/
634
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
635
+ .eds-breadcrumb {
636
+ list-style: none;
637
+ margin: 0;
638
+ padding: 0;
639
+ }
640
+
641
+ .eds-breadcrumb__item {
642
+ display: inline-block;
643
+ }
644
+
645
+ .eds-breadcrumb__separator {
646
+ margin: 0 0.25rem 0 0.25rem;
647
+ }
648
+
649
+ .eds-breadcrumb__link {
650
+ text-decoration: none;
651
+ color: inherit;
652
+ background-image: linear-gradient(120deg, #181c56 0%, #181c56 100%);
653
+ background-repeat: no-repeat;
654
+ background-size: 100% 0.125rem;
655
+ background-position: 0 100%;
656
+ }
657
+ .eds-contrast .eds-breadcrumb__link {
658
+ background-image: linear-gradient(120deg, #ffffff 0%, #ffffff 100%);
659
+ }
660
+ .eds-breadcrumb__link:hover {
661
+ animation: eds-breadcrumb-underline 0.3s ease-in;
662
+ }
663
+ .eds-breadcrumb__link:focus {
664
+ outline: none;
665
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
666
+ outline-offset: 0.125rem;
667
+ }
668
+ @keyframes eds-breadcrumb-underline {
669
+ from {
670
+ background-size: 0% 0.125rem;
671
+ }
672
+ to {
673
+ background-size: 100% 0.125rem;
674
+ }
675
+ }
676
+ .eds-breadcrumb__link--current {
677
+ font-weight: 600;
678
678
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.1.29-beta.1",
3
+ "version": "4.1.29",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -39,5 +39,5 @@
39
39
  "@reach/polymorphic": "0.18.0",
40
40
  "classnames": "^2.3.1"
41
41
  },
42
- "gitHead": "8442e00a4b18aeba3c3e6d59f46fd808fcc4fd80"
42
+ "gitHead": "d66e9c3a3708ce61a6a72671e974eb1ce4a13a45"
43
43
  }