@entur/menu 5.2.1-beta.1 → 5.2.1-beta.11

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 (26) hide show
  1. package/dist/BreadcrumbItem.d.ts +19 -0
  2. package/dist/BreadcrumbNavigation.d.ts +11 -0
  3. package/dist/CollapsibleSideNavigation.d.ts +27 -0
  4. package/dist/OverflowMenu.d.ts +55 -0
  5. package/dist/Pagination.d.ts +69 -0
  6. package/dist/PaginationInput.d.ts +8 -0
  7. package/dist/PaginationPage.d.ts +17 -0
  8. package/dist/SideNavigation.d.ts +16 -0
  9. package/dist/SideNavigationGroup.d.ts +20 -0
  10. package/dist/SideNavigationItem.d.ts +33 -0
  11. package/dist/Stepper.d.ts +39 -0
  12. package/dist/TopNavigationItem.d.ts +21 -0
  13. package/dist/index.d.ts +11 -352
  14. package/dist/index.js +8 -0
  15. package/dist/menu.cjs.development.js +793 -0
  16. package/dist/menu.cjs.development.js.map +1 -0
  17. package/dist/menu.cjs.production.min.js +2 -0
  18. package/dist/menu.cjs.production.min.js.map +1 -0
  19. package/dist/menu.esm.js +669 -712
  20. package/dist/menu.esm.js.map +1 -1
  21. package/dist/styles.css +736 -707
  22. package/dist/useControllableProp.d.ts +6 -0
  23. package/dist/useShowDelayedLabel.d.ts +1 -0
  24. package/package.json +20 -38
  25. package/dist/menu.cjs.js +0 -820
  26. package/dist/menu.cjs.js.map +0 -1
package/dist/styles.css CHANGED
@@ -1,345 +1,279 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
+ .eds-overflow-menu__menu-list {
4
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
5
+ overflow: hidden;
6
+ border-radius: 0.25rem;
7
+ border: 0.0625rem solid var(--components-menu-overflowmenu-border);
8
+ z-index: 20;
9
+ }
10
+ .eds-overflow-menu__menu-list.eds-contrast {
11
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
12
+ }
13
+ .eds-overflow-menu__item {
14
+ display: block;
15
+ width: 100%;
16
+ -webkit-appearance: none;
17
+ -moz-appearance: none;
18
+ appearance: none;
19
+ padding: 0.75rem;
20
+ border: none;
21
+ outline: none;
22
+ font-size: 1rem;
23
+ line-height: 1.375rem;
24
+ text-align: left;
25
+ -webkit-text-decoration: none;
26
+ text-decoration: none;
27
+ color: var(--components-menu-overflowmenu-text);
28
+ background: var(--components-menu-overflowmenu-fill-default);
29
+ cursor: pointer;
30
+ }
31
+ .eds-overflow-menu__item--highlighted {
32
+ background: var(--components-menu-overflowmenu-fill-hover);
33
+ }
34
+ .eds-overflow-menu__item:active {
35
+ background: var(--components-menu-overflowmenu-fill-active);
36
+ color: var(--components-menu-overflowmenu-text-active);
37
+ }
38
+ .eds-overflow-menu__item--disabled {
39
+ background: var(--components-menu-overflowmenu-fill-default);
40
+ color: var(--components-menu-overflowmenu-text-disabled);
41
+ cursor: not-allowed;
42
+ }
43
+ .eds-overflow-menu__item svg {
44
+ margin-right: 0.75rem;
45
+ }
3
46
  /* DO NOT CHANGE!*/
4
47
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
- /* DO NOT CHANGE!*/
6
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
7
- [data-color-mode=light],
8
- :root {
9
- --components-menu-breadcrumb-contrast-icon: #ffffff;
10
- --components-menu-breadcrumb-contrast-text: #ffffff;
11
- --components-menu-breadcrumb-standard-icon: #181c56;
12
- --components-menu-breadcrumb-standard-text: #181c56;
13
- --components-menu-navigationbar-contrast-background: #393d79;
14
- --components-menu-navigationbar-contrast-divide: rgba(255, 255, 255, 0);
15
- --components-menu-navigationbar-contrast-icon-selected: #ffffff;
16
- --components-menu-navigationbar-contrast-icon-unselected: #d9dae8;
17
- --components-menu-navigationbar-contrast-stroke-selected: #ff5959;
18
- --components-menu-navigationbar-contrast-text-selected: #ffffff;
19
- --components-menu-navigationbar-contrast-text-unselected: #d9dae8;
20
- --components-menu-navigationbar-standard-background: #ffffff;
21
- --components-menu-navigationbar-standard-divide: #e3e6e8;
22
- --components-menu-navigationbar-standard-icon-selected: #181c56;
23
- --components-menu-navigationbar-standard-icon-unselected: #626493;
24
- --components-menu-navigationbar-standard-stroke-selected: #ff5959;
25
- --components-menu-navigationbar-standard-text-selected: #181c56;
26
- --components-menu-navigationbar-standard-text-unselected: #626493;
27
- --components-menu-navigationlink-contrast-icon: #ffffff;
28
- --components-menu-navigationlink-contrast-text: #ffffff;
29
- --components-menu-navigationlink-standard-icon: #181c56;
30
- --components-menu-navigationlink-standard-text: #181c56;
31
- --components-menu-overflowmenu-border: #8284ab;
32
- --components-menu-overflowmenu-fill-active: #aeb7e2;
33
- --components-menu-overflowmenu-fill-default: #f2f5f7;
34
- --components-menu-overflowmenu-fill-hover: #d9ddf2;
35
- --components-menu-overflowmenu-icon: #181c56;
36
- --components-menu-overflowmenu-icon-disabled: #6e6f73;
37
- --components-menu-overflowmenu-text: #181c56;
38
- --components-menu-overflowmenu-text-disabled: #6e6f73;
39
- --components-menu-pagination-contrast-active: #8794d4;
40
- --components-menu-pagination-contrast-border-selected: #ffffff;
41
- --components-menu-pagination-contrast-border-unselected: rgba(174, 183, 226, 0.6980392157);
42
- --components-menu-pagination-contrast-default: rgba(255, 255, 255, 0);
43
- --components-menu-pagination-contrast-hover: #626493;
44
- --components-menu-pagination-contrast-icon: #ffffff;
45
- --components-menu-pagination-contrast-text-selected: #181c56;
46
- --components-menu-pagination-contrast-text-subdued: #d9dae8;
47
- --components-menu-pagination-contrast-text-unselected: #ffffff;
48
- --components-menu-pagination-standard-active: #aeb7e2;
49
- --components-menu-pagination-standard-border-selected: #181c56;
50
- --components-menu-pagination-standard-border-unselected: rgba(84, 86, 140, 0.4);
51
- --components-menu-pagination-standard-default: rgba(255, 255, 255, 0);
52
- --components-menu-pagination-standard-hover: #d9ddf2;
53
- --components-menu-pagination-standard-icon: #181c56;
54
- --components-menu-pagination-standard-text-selected: #181c56;
55
- --components-menu-pagination-standard-text-subdued: #626493;
56
- --components-menu-pagination-standard-text-unselected: #181c56;
57
- --components-menu-sidenavigation-contrast-avatar: #393d79;
58
- --components-menu-sidenavigation-contrast-background: #181c56;
59
- --components-menu-sidenavigation-contrast-divide: #8284ab;
60
- --components-menu-sidenavigation-contrast-fill-active: rgba(255, 255, 255, 0);
61
- --components-menu-sidenavigation-contrast-fill-default: rgba(255, 255, 255, 0);
62
- --components-menu-sidenavigation-contrast-fill-hover: #393d79;
63
- --components-menu-sidenavigation-contrast-icon: #ffffff;
64
- --components-menu-sidenavigation-contrast-icon-disabled: #b6b8ba;
65
- --components-menu-sidenavigation-contrast-icon-label: #aeb7e2;
66
- --components-menu-sidenavigation-contrast-label: #aeb7e2;
67
- --components-menu-sidenavigation-contrast-stroke-selected: #ff5959;
68
- --components-menu-sidenavigation-contrast-text: #ffffff;
69
- --components-menu-sidenavigation-contrast-text-disabled: #b6b8ba;
70
- --components-menu-sidenavigation-standard-avatar: #ffffff;
71
- --components-menu-sidenavigation-standard-background: #f2f5f7;
72
- --components-menu-sidenavigation-standard-divide: #e3e6e8;
73
- --components-menu-sidenavigation-standard-fill-active: rgba(255, 255, 255, 0);
74
- --components-menu-sidenavigation-standard-fill-default: rgba(255, 255, 255, 0);
75
- --components-menu-sidenavigation-standard-fill-hover: #d9dae8;
76
- --components-menu-sidenavigation-standard-icon: #181c56;
77
- --components-menu-sidenavigation-standard-icon-disabled: #6e6f73;
78
- --components-menu-sidenavigation-standard-icon-label: #626493;
79
- --components-menu-sidenavigation-standard-label: #626493;
80
- --components-menu-sidenavigation-standard-stroke-selected: #181c56;
81
- --components-menu-sidenavigation-standard-text: #181c56;
82
- --components-menu-sidenavigation-standard-text-disabled: #6e6f73;
83
- --components-menu-stepper-contrast-background: #626493;
84
- --components-menu-stepper-contrast-progressbar: #aeb7e2;
85
- --components-menu-stepper-contrast-text-completed: #ffffff;
86
- --components-menu-stepper-contrast-text-uncompleted: #aeb7e2;
87
- --components-menu-stepper-standard-background: #e3e6e8;
88
- --components-menu-stepper-standard-progressbar: #181c56;
89
- --components-menu-stepper-standard-text-completed: #181c56;
90
- --components-menu-stepper-standard-text-uncompleted: #6e6f73;
91
- --components-menu-tableofcontent-contrast-icon-selected: #ffffff;
92
- --components-menu-tableofcontent-contrast-icon-unselected: #d9dae8;
93
- --components-menu-tableofcontent-contrast-stroke-selected: #ff5959;
94
- --components-menu-tableofcontent-contrast-stroke-unselected: #54568c;
95
- --components-menu-tableofcontent-contrast-text-selected: #ffffff;
96
- --components-menu-tableofcontent-contrast-text-unselected: #d9dae8;
97
- --components-menu-tableofcontent-standard-icon-selected: #181c56;
98
- --components-menu-tableofcontent-standard-icon-unselected: #626493;
99
- --components-menu-tableofcontent-standard-stroke-selected: #ff5959;
100
- --components-menu-tableofcontent-standard-stroke-unselected: #e3e6e8;
101
- --components-menu-tableofcontent-standard-text-selected: #181c56;
102
- --components-menu-tableofcontent-standard-text-unselected: #626493;
48
+ .eds-side-navigation,
49
+ .eds-side-navigation-group {
50
+ color: var(--components-menu-sidenavigation-standard-text);
51
+ }
52
+ .eds-contrast .eds-side-navigation,
53
+ .eds-contrast .eds-side-navigation-group {
54
+ color: var(--components-menu-sidenavigation-contrast-text);
103
55
  }
104
56
 
105
- [data-color-mode=dark] {
106
- --components-menu-breadcrumb-contrast-icon: #e5e5e9;
107
- --components-menu-breadcrumb-contrast-text: #e5e5e9;
108
- --components-menu-breadcrumb-standard-icon: #e5e5e9;
109
- --components-menu-breadcrumb-standard-text: #e5e5e9;
110
- --components-menu-navigationbar-contrast-background: #393a49;
111
- --components-menu-navigationbar-contrast-divide: rgba(255, 255, 255, 0);
112
- --components-menu-navigationbar-contrast-icon-selected: #e5e5e9;
113
- --components-menu-navigationbar-contrast-icon-unselected: #b6b8ba;
114
- --components-menu-navigationbar-contrast-stroke-selected: #ff9494;
115
- --components-menu-navigationbar-contrast-text-selected: #e5e5e9;
116
- --components-menu-navigationbar-contrast-text-unselected: #b6b8ba;
117
- --components-menu-navigationbar-standard-background: #393a49;
118
- --components-menu-navigationbar-standard-divide: rgba(255, 255, 255, 0);
119
- --components-menu-navigationbar-standard-icon-selected: #e5e5e9;
120
- --components-menu-navigationbar-standard-icon-unselected: #b6b8ba;
121
- --components-menu-navigationbar-standard-stroke-selected: #ff9494;
122
- --components-menu-navigationbar-standard-text-selected: #e5e5e9;
123
- --components-menu-navigationbar-standard-text-unselected: #b6b8ba;
124
- --components-menu-navigationlink-contrast-icon: #e5e5e9;
125
- --components-menu-navigationlink-contrast-text: #e5e5e9;
126
- --components-menu-navigationlink-standard-icon: #e5e5e9;
127
- --components-menu-navigationlink-standard-text: #e5e5e9;
128
- --components-menu-overflowmenu-border: rgba(255, 255, 255, 0);
129
- --components-menu-overflowmenu-fill-active: #8794d4;
130
- --components-menu-overflowmenu-fill-default: #464755;
131
- --components-menu-overflowmenu-fill-hover: #626493;
132
- --components-menu-overflowmenu-icon: #e5e5e9;
133
- --components-menu-overflowmenu-icon-disabled: #949699;
134
- --components-menu-overflowmenu-text: #e5e5e9;
135
- --components-menu-overflowmenu-text-disabled: #949699;
136
- --components-menu-pagination-contrast-active: #8794d4;
137
- --components-menu-pagination-contrast-border-selected: #e5e5e9;
138
- --components-menu-pagination-contrast-border-unselected: rgba(174, 183, 226, 0.6980392157);
139
- --components-menu-pagination-contrast-default: rgba(255, 255, 255, 0);
140
- --components-menu-pagination-contrast-hover: #626493;
141
- --components-menu-pagination-contrast-icon: #e5e5e9;
142
- --components-menu-pagination-contrast-text-selected: #08091c;
143
- --components-menu-pagination-contrast-text-subdued: #b3b4bd;
144
- --components-menu-pagination-contrast-text-unselected: #e5e5e9;
145
- --components-menu-pagination-standard-active: #8794d4;
146
- --components-menu-pagination-standard-border-selected: #e5e5e9;
147
- --components-menu-pagination-standard-border-unselected: rgba(174, 183, 226, 0.6980392157);
148
- --components-menu-pagination-standard-default: rgba(255, 255, 255, 0);
149
- --components-menu-pagination-standard-hover: #626493;
150
- --components-menu-pagination-standard-icon: #e5e5e9;
151
- --components-menu-pagination-standard-text-selected: #08091c;
152
- --components-menu-pagination-standard-text-subdued: #b3b4bd;
153
- --components-menu-pagination-standard-text-unselected: #e5e5e9;
154
- --components-menu-sidenavigation-contrast-avatar: rgba(229, 229, 233, 0.1490196078);
155
- --components-menu-sidenavigation-contrast-background: #212233;
156
- --components-menu-sidenavigation-contrast-divide: #81828f;
157
- --components-menu-sidenavigation-contrast-fill-active: rgba(255, 255, 255, 0);
158
- --components-menu-sidenavigation-contrast-fill-default: rgba(255, 255, 255, 0);
159
- --components-menu-sidenavigation-contrast-fill-hover: rgba(229, 229, 233, 0.1490196078);
160
- --components-menu-sidenavigation-contrast-icon: #e5e5e9;
161
- --components-menu-sidenavigation-contrast-icon-disabled: #949699;
162
- --components-menu-sidenavigation-contrast-icon-label: #b3b4bd;
163
- --components-menu-sidenavigation-contrast-label: #b3b4bd;
164
- --components-menu-sidenavigation-contrast-stroke-selected: #ff9494;
165
- --components-menu-sidenavigation-contrast-text: #e5e5e9;
166
- --components-menu-sidenavigation-contrast-text-disabled: #949699;
167
- --components-menu-sidenavigation-standard-avatar: rgba(229, 229, 233, 0.1490196078);
168
- --components-menu-sidenavigation-standard-background: #212233;
169
- --components-menu-sidenavigation-standard-divide: #81828f;
170
- --components-menu-sidenavigation-standard-fill-active: rgba(255, 255, 255, 0);
171
- --components-menu-sidenavigation-standard-fill-default: rgba(255, 255, 255, 0);
172
- --components-menu-sidenavigation-standard-fill-hover: rgba(229, 229, 233, 0.1490196078);
173
- --components-menu-sidenavigation-standard-icon: #e5e5e9;
174
- --components-menu-sidenavigation-standard-icon-disabled: #949699;
175
- --components-menu-sidenavigation-standard-icon-label: #b3b4bd;
176
- --components-menu-sidenavigation-standard-label: #b3b4bd;
177
- --components-menu-sidenavigation-standard-stroke-selected: #ff9494;
178
- --components-menu-sidenavigation-standard-text: #e5e5e9;
179
- --components-menu-sidenavigation-standard-text-disabled: #949699;
180
- --components-menu-stepper-contrast-background: #626493;
181
- --components-menu-stepper-contrast-progressbar: #aeb7e2;
182
- --components-menu-stepper-contrast-text-completed: #e5e5e9;
183
- --components-menu-stepper-contrast-text-uncompleted: #b6b8ba;
184
- --components-menu-stepper-standard-background: #626493;
185
- --components-menu-stepper-standard-progressbar: #aeb7e2;
186
- --components-menu-stepper-standard-text-completed: #e5e5e9;
187
- --components-menu-stepper-standard-text-uncompleted: #b6b8ba;
188
- --components-menu-tableofcontent-contrast-icon-selected: #e5e5e9;
189
- --components-menu-tableofcontent-contrast-icon-unselected: #b3b4bd;
190
- --components-menu-tableofcontent-contrast-stroke-selected: #ff9494;
191
- --components-menu-tableofcontent-contrast-stroke-unselected: rgba(84, 86, 140, 0.4);
192
- --components-menu-tableofcontent-contrast-text-selected: #e5e5e9;
193
- --components-menu-tableofcontent-contrast-text-unselected: #b3b4bd;
194
- --components-menu-tableofcontent-standard-icon-selected: #e5e5e9;
195
- --components-menu-tableofcontent-standard-icon-unselected: #b3b4bd;
196
- --components-menu-tableofcontent-standard-stroke-selected: #ff9494;
197
- --components-menu-tableofcontent-standard-stroke-unselected: rgba(84, 86, 140, 0.4);
198
- --components-menu-tableofcontent-standard-text-selected: #e5e5e9;
199
- --components-menu-tableofcontent-standard-text-unselected: #b3b4bd;
57
+ .eds-side-navigation__click-target svg {
58
+ margin-right: 1rem;
59
+ color: var(--components-menu-sidenavigation-standard-icon);
60
+ display: inline-flex;
61
+ align-self: center;
62
+ position: relative;
63
+ top: 0.075em;
64
+ }
65
+ .eds-contrast .eds-side-navigation__click-target svg {
66
+ color: var(--components-menu-sidenavigation-contrast-icon);
67
+ }
68
+
69
+ .eds-side-navigation__click-target[disabled] svg {
70
+ color: var(--components-menu-sidenavigation-standard-icon-disabled);
71
+ }
72
+ .eds-contrast .eds-side-navigation__click-target[disabled] svg {
73
+ color: var(--components-menu-sidenavigation-contrast-icon-disabled);
74
+ }
75
+
76
+ .eds-side-navigation {
77
+ --padding-vertical: 1rem;
78
+ --padding-horizontal: 2.5rem;
79
+ background-color: var(--components-menu-sidenavigation-standard-background);
80
+ color: var(--components-menu-sidenavigation-standard-text);
81
+ padding: 0;
82
+ margin: 0;
83
+ list-style: none;
84
+ position: relative;
85
+ transition: max-width ease-in-out 0.2s;
86
+ }
87
+ .eds-contrast .eds-side-navigation {
88
+ background-color: var(--components-menu-sidenavigation-contrast-background);
89
+ color: var(--components-menu-sidenavigation-contrast-text);
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%;
97
+ border: none;
98
+ cursor: pointer;
99
+ background-color: var(--components-menu-sidenavigation-standard-background);
100
+ color: var(--components-menu-sidenavigation-standard-text);
101
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
102
+ padding: 0;
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ z-index: 10;
107
+ }
108
+ .eds-contrast .eds-side-navigation__collapse-button {
109
+ background-color: var(--components-menu-sidenavigation-contrast-background);
110
+ color: var(--components-menu-sidenavigation-contast-text);
111
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
112
+ }
113
+ .eds-side-navigation__collapse-button svg {
114
+ margin: 0;
115
+ top: 0;
116
+ color: var(--components-menu-sidenavigation-standard-icon);
117
+ }
118
+ .eds-contrast .eds-side-navigation__collapse-button svg {
119
+ color: var(--components-menu-sidenavigation-contrast-icon);
120
+ }
121
+ .eds-side-navigation__collapse-button:focus-visible {
122
+ outline: 2px solid #181c56;
123
+ outline-color: var(--basecolors-stroke-focus-standard);
124
+ outline-offset: 0.125rem;
125
+ }
126
+ .eds-contrast .eds-side-navigation__collapse-button:focus-visible {
127
+ outline-color: var(--basecolors-stroke-focus-contrast);
128
+ }
129
+ @media screen and (min-width: 50rem) {
130
+ .eds-side-navigation {
131
+ max-width: 26rem;
132
+ }
133
+ }
134
+ .eds-side-navigation--small {
135
+ --padding-vertical: calc(0.5rem + 0.1875rem);
136
+ }
137
+ .eds-side-navigation .eds-side-navigation {
138
+ background-color: var(--components-menu-sidenavigation-standard-background);
139
+ }
140
+ .eds-contrast .eds-side-navigation .eds-side-navigation {
141
+ background-color: var(--components-menu-sidenavigation-contrast-background);
142
+ }
143
+ .eds-side-navigation--collapsed {
144
+ max-width: 80px;
145
+ }
146
+
147
+ .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target {
148
+ padding-left: 3.5rem;
149
+ box-shadow: none;
150
+ }
151
+ .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
152
+ background-color: var(--components-menu-sidenavigation-standard-fill-active);
153
+ }
154
+ .eds-contrast .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
155
+ background-color: var(--components-menu-sidenavigation-contrast-fill-active);
156
+ }
157
+
158
+ .eds-side-navigation__click-target {
159
+ -webkit-appearance: none;
160
+ -moz-appearance: none;
161
+ appearance: none;
162
+ background: none;
163
+ border: 0;
164
+ border-bottom: 0.0625rem solid var(--components-menu-sidenavigation-standard-divide);
165
+ border-radius: 0;
166
+ color: var(--components-menu-sidenavigation-standard-text);
167
+ cursor: pointer;
168
+ display: block;
169
+ font-size: 1rem;
170
+ font-family: inherit;
171
+ font-weight: 500;
172
+ line-height: inherit;
173
+ padding: var(--padding-vertical) 2.5rem;
174
+ padding-left: 2.5rem;
175
+ transition: padding 0.2s ease-in-out;
176
+ text-align: left;
177
+ -webkit-text-decoration: none;
178
+ text-decoration: none;
179
+ width: 100%;
180
+ }
181
+ .eds-contrast .eds-side-navigation__click-target {
182
+ color: var(--components-menu-sidenavigation-contrast-text);
183
+ border-color: var(--components-menu-sidenavigation-contrast-divide);
184
+ }
185
+ .eds-side-navigation--collapsed .eds-side-navigation__click-target {
186
+ padding-left: 2rem;
187
+ }
188
+ .eds-side-navigation__click-target--active {
189
+ box-shadow: inset 0.25rem 0 0 var(--components-menu-sidenavigation-standard-stroke-selected);
190
+ font-weight: 600;
191
+ }
192
+ .eds-contrast .eds-side-navigation__click-target--active {
193
+ box-shadow: inset 0.25rem 0 0 var(--components-menu-sidenavigation-contrast-stroke-selected);
200
194
  }
201
-
202
- /* DO NOT CHANGE!*/
203
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
204
- /* DO NOT CHANGE!*/
205
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
206
- [data-color-mode=light],
207
- :root {
208
- --basecolors-frame-contrast: #181c56;
209
- --basecolors-frame-contrastalt: #393d79;
210
- --basecolors-frame-contrastalt-2: #292b6a;
211
- --basecolors-frame-default: #ffffff;
212
- --basecolors-frame-elevated: #ffffff;
213
- --basecolors-frame-elevatedalt: #f6f6f9;
214
- --basecolors-frame-subdued: #d9dae8;
215
- --basecolors-frame-tint: #f6f6f9;
216
- --basecolors-shape-accent: #181c56;
217
- --basecolors-shape-bicycle-contrast: #00db9b;
218
- --basecolors-shape-bicycle-default: #388f76;
219
- --basecolors-shape-bus-contrast: #ff6392;
220
- --basecolors-shape-bus-default: #c5044e;
221
- --basecolors-shape-cableway-contrast: #b482fb;
222
- --basecolors-shape-cableway-default: #78469a;
223
- --basecolors-shape-disabled: #6e6f73;
224
- --basecolors-shape-disabledalt: #b6b8ba;
225
- --basecolors-shape-ferry-contrast: #6fdfff;
226
- --basecolors-shape-ferry-default: #0c6693;
227
- --basecolors-shape-funicular-contrast: #b482fb;
228
- --basecolors-shape-funicular-default: #78469a;
229
- --basecolors-shape-helicopter-contrast: #fbafea;
230
- --basecolors-shape-helicopter-default: #800664;
231
- --basecolors-shape-highlight: #ff5959;
232
- --basecolors-shape-light: #ffffff;
233
- --basecolors-shape-mask: #ffffff;
234
- --basecolors-shape-maskalt: #ffffff;
235
- --basecolors-shape-metro-contrast: #f08901;
236
- --basecolors-shape-metro-default: #bf5826;
237
- --basecolors-shape-mobility-contrast: #00db9b;
238
- --basecolors-shape-mobility-default: #388f76;
239
- --basecolors-shape-plane-contrast: #fbafea;
240
- --basecolors-shape-plane-default: #800664;
241
- --basecolors-shape-subdued: #626493;
242
- --basecolors-shape-subduedalt: #d9dae8;
243
- --basecolors-shape-taxi-contrast: #ffe082;
244
- --basecolors-shape-taxi-default: #3d3e40;
245
- --basecolors-shape-train-contrast: #42a5f5;
246
- --basecolors-shape-train-default: #00367f;
247
- --basecolors-shape-tram-contrast: #b482fb;
248
- --basecolors-shape-tram-default: #78469a;
249
- --basecolors-shape-walk-contrast: #8284ab;
250
- --basecolors-shape-walk-default: #8d8e9c;
251
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
252
- --basecolors-shape-airportlinkbus-default: #800664;
253
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
254
- --basecolors-shape-airportlinkrail-default: #800664;
255
- --basecolors-stroke-contrast: #aeb7e2;
256
- --basecolors-stroke-default: #181c56;
257
- --basecolors-stroke-disabled: #949699;
258
- --basecolors-stroke-focus-contrast: #aeb7e2;
259
- --basecolors-stroke-focus-standard: #181c56;
260
- --basecolors-stroke-highlight: #ff5959;
261
- --basecolors-stroke-light: #ffffff;
262
- --basecolors-stroke-subdued: #8284ab;
263
- --basecolors-stroke-subduedalt: #e3e6e8;
264
- --basecolors-text-accent: #181c56;
265
- --basecolors-text-disabled: #6e6f73;
266
- --basecolors-text-disabledalt: #b6b8ba;
267
- --basecolors-text-highlight: #ff5959;
268
- --basecolors-text-light: #ffffff;
269
- --basecolors-text-subdued: #626493;
270
- --basecolors-text-subduedalt: #d9dae8;
195
+ .eds-side-navigation__click-target[disabled] {
196
+ cursor: not-allowed;
197
+ color: var(--components-menu-sidenavigation-standard-text-disabled);
198
+ }
199
+ .eds-contrast .eds-side-navigation__click-target[disabled] {
200
+ color: var(--components-menu-sidenavigation-contrast-text-disabled);
201
+ }
202
+ .eds-side-navigation__click-target:not([disabled]):hover {
203
+ background-color: var(--components-menu-sidenavigation-standard-fill-hover);
204
+ }
205
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
206
+ background-color: var(--components-menu-sidenavigation-contrast-fill-hover);
207
+ }
208
+ .eds-side-navigation__click-target:not([disabled]):focus-visible {
209
+ outline: 2px solid #181c56;
210
+ outline-color: var(--basecolors-stroke-focus-standard);
211
+ outline-offset: 0.125rem;
212
+ }
213
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus-visible {
214
+ outline-color: var(--basecolors-stroke-focus-contrast);
271
215
  }
272
216
 
273
- [data-color-mode=dark] {
274
- --basecolors-frame-contrast: #212233;
275
- --basecolors-frame-contrastalt: #141527;
276
- --basecolors-frame-contrastalt-2: #08091c;
277
- --basecolors-frame-default: #08091c;
278
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
279
- --basecolors-frame-elevatedalt: #464755;
280
- --basecolors-frame-subdued: #2d2e3e;
281
- --basecolors-frame-tint: #141527;
282
- --basecolors-shape-accent: #e5e5e9;
283
- --basecolors-shape-bicycle-contrast: #4db295;
284
- --basecolors-shape-bicycle-default: #4db295;
285
- --basecolors-shape-bus-contrast: #ef7398;
286
- --basecolors-shape-bus-default: #ef7398;
287
- --basecolors-shape-cableway-contrast: #b898e5;
288
- --basecolors-shape-cableway-default: #b898e5;
289
- --basecolors-shape-disabled: #b6b8ba;
290
- --basecolors-shape-disabledalt: #b3b4bd;
291
- --basecolors-shape-ferry-contrast: #8ccfe2;
292
- --basecolors-shape-ferry-default: #8ccfe2;
293
- --basecolors-shape-funicular-contrast: #b898e5;
294
- --basecolors-shape-funicular-default: #b898e5;
295
- --basecolors-shape-helicopter-contrast: #f2b8e5;
296
- --basecolors-shape-helicopter-default: #f2b8e5;
297
- --basecolors-shape-highlight: #ff9494;
298
- --basecolors-shape-light: #e5e5e9;
299
- --basecolors-shape-mask: #2d2e3e;
300
- --basecolors-shape-maskalt: #393a49;
301
- --basecolors-shape-metro-contrast: #dd973c;
302
- --basecolors-shape-metro-default: #dd973c;
303
- --basecolors-shape-mobility-contrast: #4db295;
304
- --basecolors-shape-mobility-default: #4db295;
305
- --basecolors-shape-plane-contrast: #f2b8e5;
306
- --basecolors-shape-plane-default: #f2b8e5;
307
- --basecolors-shape-subdued: #b3b4bd;
308
- --basecolors-shape-subduedalt: #b3b4bd;
309
- --basecolors-shape-taxi-contrast: #ffe082;
310
- --basecolors-shape-taxi-default: #ffe082;
311
- --basecolors-shape-train-contrast: #60a2d7;
312
- --basecolors-shape-train-default: #60a2d7;
313
- --basecolors-shape-tram-contrast: #b898e5;
314
- --basecolors-shape-tram-default: #b898e5;
315
- --basecolors-shape-walk-contrast: #8d8e9c;
316
- --basecolors-shape-walk-default: #8d8e9c;
317
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
318
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
319
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
320
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
321
- --basecolors-stroke-contrast: #aeb7e2;
322
- --basecolors-stroke-default: #b3b4bd;
323
- --basecolors-stroke-disabled: #e3e6e8;
324
- --basecolors-stroke-focus-contrast: #aeb7e2;
325
- --basecolors-stroke-focus-standard: #aeb7e2;
326
- --basecolors-stroke-highlight: #ff9494;
327
- --basecolors-stroke-light: #b3b4bd;
328
- --basecolors-stroke-subdued: #81828f;
329
- --basecolors-stroke-subduedalt: #949699;
330
- --basecolors-text-accent: #e5e5e9;
331
- --basecolors-text-disabled: #b6b8ba;
332
- --basecolors-text-disabledalt: #b6b8ba;
333
- --basecolors-text-highlight: #ff9494;
334
- --basecolors-text-light: #e5e5e9;
335
- --basecolors-text-subdued: #b3b4bd;
336
- --basecolors-text-subduedalt: #b3b4bd;
217
+ .eds-side-navigation-group + .eds-side-navigation-group {
218
+ padding-top: 0.5rem;
219
+ }
220
+ @media screen and (min-width: 50rem) {
221
+ .eds-side-navigation-group {
222
+ max-width: 26rem;
223
+ }
337
224
  }
338
225
 
339
- :root {
340
- --eds-menu: 1;
341
- --reach-menu-button: 1;
342
- }/* DO NOT CHANGE!*/
226
+ .eds-side-navigation-group__trigger {
227
+ align-items: center;
228
+ -webkit-appearance: none;
229
+ -moz-appearance: none;
230
+ appearance: none;
231
+ background-color: var(--components-menu-sidenavigation-standard-background);
232
+ border: none;
233
+ border-bottom: 0.0625rem solid var(--components-menu-sidenavigation-standard-divide);
234
+ color: var(--components-menu-sidenavigation-standard-label);
235
+ cursor: pointer;
236
+ display: flex;
237
+ font-size: 0.875rem;
238
+ font-family: inherit;
239
+ font-weight: 500;
240
+ height: 3rem;
241
+ justify-content: space-between;
242
+ letter-spacing: 1px;
243
+ line-height: 1.25rem;
244
+ padding: 0.75rem 0 0.75rem 2.5rem;
245
+ margin: 0;
246
+ text-transform: uppercase;
247
+ transition: padding 0.2s ease-in-out;
248
+ width: 100%;
249
+ }
250
+ .eds-contrast .eds-side-navigation-group__trigger {
251
+ color: var(--components-menu-sidenavigation-contrast-label);
252
+ background-color: var(--components-menu-sidenavigation-contrast-background);
253
+ border-color: var(--components-menu-sidenavigation-contrast-divide);
254
+ }
255
+ .eds-side-navigation-group__trigger-icon {
256
+ margin-right: 0.75rem;
257
+ }
258
+ .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
259
+ margin-right: 2.5rem;
260
+ color: var(--components-menu-sidenavigation-standard-icon-label);
261
+ }
262
+ .eds-contrast .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
263
+ color: var(--components-menu-sidenavigation-contrast-icon-label);
264
+ }
265
+ .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
266
+ padding-left: 2rem;
267
+ }
268
+ .eds-side-navigation-group__trigger:focus-visible {
269
+ outline: 2px solid #181c56;
270
+ outline-color: var(--basecolors-stroke-focus-standard);
271
+ outline-offset: 0.125rem;
272
+ }
273
+ .eds-contrast .eds-side-navigation-group__trigger:focus-visible {
274
+ outline-color: var(--basecolors-stroke-focus-contrast);
275
+ }
276
+ /* DO NOT CHANGE!*/
343
277
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
344
278
  .eds-breadcrumb {
345
279
  list-style: none;
@@ -360,6 +294,7 @@
360
294
  }
361
295
 
362
296
  .eds-breadcrumb__link {
297
+ -webkit-text-decoration: none;
363
298
  text-decoration: none;
364
299
  color: var(--components-menu-breadcrumb-standard-text);
365
300
  background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-standard-text) 0%, var(--components-menu-breadcrumb-standard-text) 100%);
@@ -374,66 +309,26 @@
374
309
  .eds-breadcrumb__link:hover {
375
310
  animation: eds-breadcrumb-underline 0.3s ease-in;
376
311
  }
377
- .eds-breadcrumb__link:focus-visible {
378
- outline: 2px solid #181c56;
379
- outline-color: var(--basecolors-stroke-focus-standard);
380
- outline-offset: 0.125rem;
381
- }
382
- .eds-contrast .eds-breadcrumb__link:focus-visible {
383
- outline-color: var(--basecolors-stroke-focus-contrast);
384
- }
385
- @keyframes eds-breadcrumb-underline {
386
- from {
387
- background-size: 0% 0.125rem;
388
- }
389
- to {
390
- background-size: 100% 0.125rem;
391
- }
392
- }
393
- .eds-breadcrumb__link--current {
394
- font-weight: 600;
395
- }/* DO NOT CHANGE!*/
396
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
397
- .eds-overflow-menu__menu-list {
398
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
399
- overflow: hidden;
400
- border-radius: 0.25rem;
401
- border: 0.0625rem solid var(--components-menu-overflowmenu-border);
402
- z-index: 20;
403
- }
404
- .eds-overflow-menu__menu-list.eds-contrast {
405
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
406
- }
407
- .eds-overflow-menu__item {
408
- display: block;
409
- width: 100%;
410
- appearance: none;
411
- padding: 0.75rem;
412
- border: none;
413
- outline: none;
414
- font-size: 1rem;
415
- line-height: 1.375rem;
416
- text-align: left;
417
- text-decoration: none;
418
- color: var(--components-menu-overflowmenu-text);
419
- background: var(--components-menu-overflowmenu-fill-default);
420
- cursor: pointer;
421
- }
422
- .eds-overflow-menu__item--highlighted {
423
- background: var(--components-menu-overflowmenu-fill-hover);
312
+ .eds-breadcrumb__link:focus-visible {
313
+ outline: 2px solid #181c56;
314
+ outline-color: var(--basecolors-stroke-focus-standard);
315
+ outline-offset: 0.125rem;
424
316
  }
425
- .eds-overflow-menu__item:active {
426
- background: var(--components-menu-overflowmenu-fill-active);
427
- color: var(--components-menu-overflowmenu-text-active);
317
+ .eds-contrast .eds-breadcrumb__link:focus-visible {
318
+ outline-color: var(--basecolors-stroke-focus-contrast);
428
319
  }
429
- .eds-overflow-menu__item--disabled {
430
- background: var(--components-menu-overflowmenu-fill-default);
431
- color: var(--components-menu-overflowmenu-text-disabled);
432
- cursor: not-allowed;
320
+ @keyframes eds-breadcrumb-underline {
321
+ from {
322
+ background-size: 0% 0.125rem;
323
+ }
324
+ to {
325
+ background-size: 100% 0.125rem;
326
+ }
433
327
  }
434
- .eds-overflow-menu__item svg {
435
- margin-right: 0.75rem;
436
- }/* DO NOT CHANGE!*/
328
+ .eds-breadcrumb__link--current {
329
+ font-weight: 600;
330
+ }
331
+ /* DO NOT CHANGE!*/
437
332
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
438
333
  .eds-pagination {
439
334
  align-items: center;
@@ -473,7 +368,9 @@
473
368
  }
474
369
  .eds-pagination__controls__page {
475
370
  align-items: center;
476
- appearance: none;
371
+ -webkit-appearance: none;
372
+ -moz-appearance: none;
373
+ appearance: none;
477
374
  background-color: var(--components-menu-pagination-standard-default);
478
375
  border: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
479
376
  border-radius: 0.25rem;
@@ -487,7 +384,9 @@
487
384
  margin: 0 0.125rem;
488
385
  padding: 0 0.25rem;
489
386
  transition: background 0.1s ease-out, border-color 0.1s ease-out;
490
- user-select: none;
387
+ -webkit-user-select: none;
388
+ -moz-user-select: none;
389
+ user-select: none;
491
390
  min-width: 2rem;
492
391
  }
493
392
  .eds-contrast .eds-pagination__controls__page {
@@ -535,7 +434,9 @@
535
434
  font-size: 1.5rem;
536
435
  height: 2rem;
537
436
  justify-content: center;
538
- user-select: none;
437
+ -webkit-user-select: none;
438
+ -moz-user-select: none;
439
+ user-select: none;
539
440
  width: 2rem;
540
441
  margin: 0 2px;
541
442
  }
@@ -557,7 +458,9 @@
557
458
  color: var(--components-menu-pagination-contrast-text-subdued);
558
459
  }
559
460
  .eds-pagination__controls__input__field {
560
- appearance: none;
461
+ -webkit-appearance: none;
462
+ -moz-appearance: none;
463
+ appearance: none;
561
464
  background-color: var(--components-menu-pagination-standard-default);
562
465
  border: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
563
466
  border-radius: 0.25rem;
@@ -574,7 +477,8 @@
574
477
  color: var(--components-menu-pagination-contrast-text-unselected);
575
478
  }
576
479
  .eds-pagination__controls__input__field::-webkit-inner-spin-button, .eds-pagination__controls__input__field::-webkit-outer-spin-button {
577
- appearance: none;
480
+ -webkit-appearance: none;
481
+ appearance: none;
578
482
  margin: 0;
579
483
  }
580
484
  .eds-pagination__controls__input__field:focus-visible {
@@ -584,355 +488,480 @@
584
488
  }
585
489
  .eds-contrast .eds-pagination__controls__input__field:focus-visible {
586
490
  outline-color: var(--basecolors-stroke-focus-contrast);
587
- }/* DO NOT CHANGE!*/
588
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
589
- .eds-side-navigation,
590
- .eds-side-navigation-group {
591
- color: var(--components-menu-sidenavigation-standard-text);
592
- }
593
- .eds-contrast .eds-side-navigation,
594
- .eds-contrast .eds-side-navigation-group {
595
- color: var(--components-menu-sidenavigation-contrast-text);
596
- }
597
-
598
- .eds-side-navigation__click-target svg {
599
- margin-right: 1rem;
600
- color: var(--components-menu-sidenavigation-standard-icon);
601
- display: inline-flex;
602
- align-self: center;
603
- position: relative;
604
- top: 0.075em;
605
- }
606
- .eds-contrast .eds-side-navigation__click-target svg {
607
- color: var(--components-menu-sidenavigation-contrast-icon);
608
- }
609
-
610
- .eds-side-navigation__click-target[disabled] svg {
611
- color: var(--components-menu-sidenavigation-standard-icon-disabled);
612
- }
613
- .eds-contrast .eds-side-navigation__click-target[disabled] svg {
614
- color: var(--components-menu-sidenavigation-contrast-icon-disabled);
615
- }
616
-
617
- .eds-side-navigation {
618
- --padding-vertical: 1rem;
619
- --padding-horizontal: 2.5rem;
620
- background-color: var(--components-menu-sidenavigation-standard-background);
621
- color: var(--components-menu-sidenavigation-standard-text);
622
- padding: 0;
623
- margin: 0;
624
- list-style: none;
625
- position: relative;
626
- transition: max-width ease-in-out 0.2s;
627
- }
628
- .eds-contrast .eds-side-navigation {
629
- background-color: var(--components-menu-sidenavigation-contrast-background);
630
- color: var(--components-menu-sidenavigation-contrast-text);
631
491
  }
632
- .eds-side-navigation__collapse-button {
633
- position: absolute;
634
- right: -0.75rem;
635
- height: 1.5rem;
636
- width: 1.5rem;
637
- border-radius: 50%;
638
- border: none;
639
- cursor: pointer;
640
- background-color: var(--components-menu-sidenavigation-standard-background);
641
- color: var(--components-menu-sidenavigation-standard-text);
642
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
643
- padding: 0;
492
+ /* DO NOT CHANGE!*/
493
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
494
+ .eds-stepper {
495
+ --text-color: var(--components-menu-stepper-standard-text-uncompleted);
496
+ --line-color: var(--components-menu-stepper-standard-background);
497
+ --label-font-weight: 500;
498
+ --display-active-line: none;
644
499
  display: flex;
645
- align-items: center;
646
- justify-content: center;
647
- z-index: 10;
648
- }
649
- .eds-contrast .eds-side-navigation__collapse-button {
650
- background-color: var(--components-menu-sidenavigation-contrast-background);
651
- color: var(--components-menu-sidenavigation-contast-text);
652
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
653
- }
654
- .eds-side-navigation__collapse-button svg {
655
- margin: 0;
656
- top: 0;
657
- color: var(--components-menu-sidenavigation-standard-icon);
658
- }
659
- .eds-contrast .eds-side-navigation__collapse-button svg {
660
- color: var(--components-menu-sidenavigation-contrast-icon);
661
- }
662
- .eds-side-navigation__collapse-button:focus-visible {
663
- outline: 2px solid #181c56;
664
- outline-color: var(--basecolors-stroke-focus-standard);
665
- outline-offset: 0.125rem;
666
- }
667
- .eds-contrast .eds-side-navigation__collapse-button:focus-visible {
668
- outline-color: var(--basecolors-stroke-focus-contrast);
669
- }
670
- @media screen and (min-width: 50rem) {
671
- .eds-side-navigation {
672
- max-width: 26rem;
673
- }
674
- }
675
- .eds-side-navigation--small {
676
- --padding-vertical: calc(0.5rem + 0.1875rem);
677
- }
678
- .eds-side-navigation .eds-side-navigation {
679
- background-color: var(--components-menu-sidenavigation-standard-background);
680
- }
681
- .eds-contrast .eds-side-navigation .eds-side-navigation {
682
- background-color: var(--components-menu-sidenavigation-contrast-background);
683
- }
684
- .eds-side-navigation--collapsed {
685
- max-width: 80px;
686
- }
687
-
688
- .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target {
689
- padding-left: 3.5rem;
690
- box-shadow: none;
691
- }
692
- .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
693
- background-color: var(--components-menu-sidenavigation-standard-fill-active);
694
- }
695
- .eds-contrast .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
696
- background-color: var(--components-menu-sidenavigation-contrast-fill-active);
500
+ flex-direction: row;
501
+ width: 100%;
502
+ list-style-type: none;
697
503
  }
698
-
699
- .eds-side-navigation__click-target {
700
- appearance: none;
504
+ .eds-stepper__step {
505
+ display: flex;
506
+ flex-grow: 1;
507
+ flex-basis: 0;
508
+ flex-direction: column;
509
+ align-items: inherit;
510
+ -webkit-appearance: none;
511
+ -moz-appearance: none;
512
+ appearance: none;
701
513
  background: none;
702
- border: 0;
703
- border-bottom: 0.0625rem solid var(--components-menu-sidenavigation-standard-divide);
704
- border-radius: 0;
705
- color: var(--components-menu-sidenavigation-standard-text);
706
- cursor: pointer;
707
- display: block;
708
- font-size: 1rem;
514
+ border: none;
709
515
  font-family: inherit;
710
- font-weight: 500;
711
- line-height: inherit;
712
- padding: var(--padding-vertical) 2.5rem;
713
- padding-left: 2.5rem;
714
- transition: padding 0.2s ease-in-out;
715
- text-align: left;
716
- text-decoration: none;
717
- width: 100%;
718
- }
719
- .eds-contrast .eds-side-navigation__click-target {
720
- color: var(--components-menu-sidenavigation-contrast-text);
721
- border-color: var(--components-menu-sidenavigation-contrast-divide);
722
- }
723
- .eds-side-navigation--collapsed .eds-side-navigation__click-target {
724
- padding-left: 2rem;
725
- }
726
- .eds-side-navigation__click-target--active {
727
- box-shadow: inset 0.25rem 0 0 var(--components-menu-sidenavigation-standard-stroke-selected);
728
- font-weight: 600;
516
+ text-transform: none;
729
517
  }
730
- .eds-contrast .eds-side-navigation__click-target--active {
731
- box-shadow: inset 0.25rem 0 0 var(--components-menu-sidenavigation-contrast-stroke-selected);
518
+ .eds-stepper__step:focus-visible .eds-stepper__step__label {
519
+ outline-offset: 0.125rem;
520
+ outline: 2px solid #181c56;
732
521
  }
733
- .eds-side-navigation__click-target[disabled] {
734
- cursor: not-allowed;
735
- color: var(--components-menu-sidenavigation-standard-text-disabled);
522
+ .eds-contrast .eds-stepper__step:focus-visible .eds-stepper__step__label {
523
+ outline: 2px solid #ffffff;
736
524
  }
737
- .eds-contrast .eds-side-navigation__click-target[disabled] {
738
- color: var(--components-menu-sidenavigation-contrast-text-disabled);
525
+ .eds-contrast .eds-stepper__step {
526
+ --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
527
+ --line-color: var(--components-menu-stepper-contrast-background);
739
528
  }
740
- .eds-side-navigation__click-target:not([disabled]):hover {
741
- background-color: var(--components-menu-sidenavigation-standard-fill-hover);
529
+ .eds-stepper__step__wrapper {
530
+ flex-grow: 1;
742
531
  }
743
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
744
- background-color: var(--components-menu-sidenavigation-contrast-fill-hover);
532
+ .eds-stepper__step--interactive {
533
+ all: unset;
534
+ display: flex;
535
+ flex-direction: column;
536
+ width: 100%;
537
+ cursor: pointer;
745
538
  }
746
- .eds-side-navigation__click-target:not([disabled]):focus-visible {
747
- outline: 2px solid #181c56;
748
- outline-color: var(--basecolors-stroke-focus-standard);
749
- outline-offset: 0.125rem;
539
+ .eds-stepper__step--active {
540
+ --text-color: var(--components-menu-stepper-standard-text-uncompleted);
541
+ --label-font-weight: 600;
542
+ --display-active-line: block;
750
543
  }
751
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus-visible {
752
- outline-color: var(--basecolors-stroke-focus-contrast);
544
+ .eds-contrast .eds-stepper__step--active {
545
+ --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
753
546
  }
754
-
755
- .eds-side-navigation-group + .eds-side-navigation-group {
756
- padding-top: 0.5rem;
547
+ .eds-stepper__step--completed {
548
+ --text-color: var(--components-menu-stepper-standard-text-completed);
549
+ --line-color: var(--components-menu-stepper-standard-progressbar);
757
550
  }
758
- @media screen and (min-width: 50rem) {
759
- .eds-side-navigation-group {
760
- max-width: 26rem;
761
- }
551
+ .eds-contrast .eds-stepper__step--completed {
552
+ --text-color: var(--components-menu-stepper-contrast-text-completed);
553
+ --line-color: var(--components-menu-stepper-contrast-progressbar);
762
554
  }
763
-
764
- .eds-side-navigation-group__trigger {
765
- align-items: center;
766
- appearance: none;
767
- background-color: var(--components-menu-sidenavigation-standard-background);
768
- border: none;
769
- border-bottom: 0.0625rem solid var(--components-menu-sidenavigation-standard-divide);
770
- color: var(--components-menu-sidenavigation-standard-label);
771
- cursor: pointer;
772
- display: flex;
773
- font-size: 0.875rem;
774
- font-family: inherit;
775
- font-weight: 500;
776
- height: 3rem;
777
- justify-content: space-between;
778
- letter-spacing: 1px;
779
- line-height: 1.25rem;
780
- padding: 0.75rem 0 0.75rem 2.5rem;
781
- margin: 0;
782
- text-transform: uppercase;
783
- transition: padding 0.2s ease-in-out;
784
- width: 100%;
555
+ .eds-stepper__step__label {
556
+ flex-grow: 1;
557
+ flex-direction: column;
558
+ align-self: center;
559
+ text-align: center;
560
+ font-size: 0.875rem;
561
+ margin: 0.5rem 0 0;
562
+ padding: 0 0.5rem;
563
+ width: -moz-fit-content;
564
+ width: fit-content;
565
+ border-radius: 0.0625rem;
566
+ color: var(--text-color);
567
+ font-weight: var(--label-font-weight);
785
568
  }
786
- .eds-contrast .eds-side-navigation-group__trigger {
787
- color: var(--components-menu-sidenavigation-contrast-label);
788
- background-color: var(--components-menu-sidenavigation-contrast-background);
789
- border-color: var(--components-menu-sidenavigation-contrast-divide);
569
+ .eds-stepper__step--interactive:hover .eds-stepper__step__label {
570
+ background-color: var(--components-menu-stepper-standard-background);
571
+ color: var(--components-menu-stepper-standard-text-completed);
790
572
  }
791
- .eds-side-navigation-group__trigger-icon {
792
- margin-right: 0.75rem;
573
+ .eds-contrast .eds-stepper__step--interactive:hover .eds-stepper__step__label {
574
+ background-color: var(--components-menu-stepper-contrast-background);
575
+ color: var(--components-menu-stepper-contrast-text-completed);
793
576
  }
794
- .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
795
- margin-right: 2.5rem;
796
- color: var(--components-menu-sidenavigation-standard-icon-label);
577
+ .eds-stepper__step__line {
578
+ height: 0.5rem;
579
+ background: var(--line-color);
580
+ position: relative;
797
581
  }
798
- .eds-contrast .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
799
- color: var(--components-menu-sidenavigation-contrast-icon-label);
582
+ .eds-stepper__step__line:before {
583
+ display: var(--display-active-line);
584
+ content: "";
585
+ position: absolute;
586
+ right: calc(50% - 0.2rem);
587
+ bottom: 0.0625rem;
588
+ border-radius: 0.0625rem;
589
+ background: var(--components-menu-stepper-standard-progressbar);
590
+ width: calc(0.5rem - 0.125rem - 0.01rem);
591
+ height: calc(0.5rem - 0.125rem - 0.01rem);
592
+ transform: rotate(45deg);
800
593
  }
801
- .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
802
- padding-left: 2rem;
594
+ .eds-contrast .eds-stepper__step__line:before {
595
+ background: var(--components-menu-stepper-contrast-progressbar);
803
596
  }
804
- .eds-side-navigation-group__trigger:focus-visible {
805
- outline: 2px solid #181c56;
806
- outline-color: var(--basecolors-stroke-focus-standard);
807
- outline-offset: 0.125rem;
597
+ .eds-stepper__step__line:after {
598
+ display: var(--display-active-line);
599
+ content: "";
600
+ position: absolute;
601
+ left: 0;
602
+ bottom: 0;
603
+ width: 50%;
604
+ height: 0.5rem;
605
+ background: var(--components-menu-stepper-standard-progressbar);
606
+ }
607
+ .eds-contrast .eds-stepper__step__line:after {
608
+ background: var(--components-menu-stepper-contrast-progressbar);
609
+ }
610
+ /* DO NOT CHANGE!*/
611
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
612
+ /* DO NOT CHANGE!*/
613
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
614
+ /* DO NOT CHANGE!*/
615
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
616
+ [data-color-mode=light],
617
+ :root {
618
+ --components-menu-breadcrumb-contrast-icon: #ffffff;
619
+ --components-menu-breadcrumb-contrast-text: #ffffff;
620
+ --components-menu-breadcrumb-standard-icon: #181c56;
621
+ --components-menu-breadcrumb-standard-text: #181c56;
622
+ --components-menu-navigationbar-contrast-background: #393d79;
623
+ --components-menu-navigationbar-contrast-divide: rgba(255, 255, 255, 0);
624
+ --components-menu-navigationbar-contrast-icon-selected: #ffffff;
625
+ --components-menu-navigationbar-contrast-icon-unselected: #d9dae8;
626
+ --components-menu-navigationbar-contrast-stroke-selected: #ff5959;
627
+ --components-menu-navigationbar-contrast-text-selected: #ffffff;
628
+ --components-menu-navigationbar-contrast-text-unselected: #d9dae8;
629
+ --components-menu-navigationbar-standard-background: #ffffff;
630
+ --components-menu-navigationbar-standard-divide: #e3e6e8;
631
+ --components-menu-navigationbar-standard-icon-selected: #181c56;
632
+ --components-menu-navigationbar-standard-icon-unselected: #626493;
633
+ --components-menu-navigationbar-standard-stroke-selected: #ff5959;
634
+ --components-menu-navigationbar-standard-text-selected: #181c56;
635
+ --components-menu-navigationbar-standard-text-unselected: #626493;
636
+ --components-menu-navigationlink-contrast-icon: #ffffff;
637
+ --components-menu-navigationlink-contrast-text: #ffffff;
638
+ --components-menu-navigationlink-standard-icon: #181c56;
639
+ --components-menu-navigationlink-standard-text: #181c56;
640
+ --components-menu-overflowmenu-border: #8284ab;
641
+ --components-menu-overflowmenu-fill-active: #aeb7e2;
642
+ --components-menu-overflowmenu-fill-default: #f2f5f7;
643
+ --components-menu-overflowmenu-fill-hover: #d9ddf2;
644
+ --components-menu-overflowmenu-icon: #181c56;
645
+ --components-menu-overflowmenu-icon-disabled: #6e6f73;
646
+ --components-menu-overflowmenu-text: #181c56;
647
+ --components-menu-overflowmenu-text-disabled: #6e6f73;
648
+ --components-menu-pagination-contrast-active: #8794d4;
649
+ --components-menu-pagination-contrast-border-selected: #ffffff;
650
+ --components-menu-pagination-contrast-border-unselected: rgba(174, 183, 226, 0.6980392157);
651
+ --components-menu-pagination-contrast-default: rgba(255, 255, 255, 0);
652
+ --components-menu-pagination-contrast-hover: #626493;
653
+ --components-menu-pagination-contrast-icon: #ffffff;
654
+ --components-menu-pagination-contrast-text-selected: #181c56;
655
+ --components-menu-pagination-contrast-text-subdued: #d9dae8;
656
+ --components-menu-pagination-contrast-text-unselected: #ffffff;
657
+ --components-menu-pagination-standard-active: #aeb7e2;
658
+ --components-menu-pagination-standard-border-selected: #181c56;
659
+ --components-menu-pagination-standard-border-unselected: rgba(84, 86, 140, 0.4);
660
+ --components-menu-pagination-standard-default: rgba(255, 255, 255, 0);
661
+ --components-menu-pagination-standard-hover: #d9ddf2;
662
+ --components-menu-pagination-standard-icon: #181c56;
663
+ --components-menu-pagination-standard-text-selected: #181c56;
664
+ --components-menu-pagination-standard-text-subdued: #626493;
665
+ --components-menu-pagination-standard-text-unselected: #181c56;
666
+ --components-menu-sidenavigation-contrast-avatar: #393d79;
667
+ --components-menu-sidenavigation-contrast-background: #181c56;
668
+ --components-menu-sidenavigation-contrast-divide: #8284ab;
669
+ --components-menu-sidenavigation-contrast-fill-active: rgba(255, 255, 255, 0);
670
+ --components-menu-sidenavigation-contrast-fill-default: rgba(255, 255, 255, 0);
671
+ --components-menu-sidenavigation-contrast-fill-hover: #393d79;
672
+ --components-menu-sidenavigation-contrast-icon: #ffffff;
673
+ --components-menu-sidenavigation-contrast-icon-disabled: #b6b8ba;
674
+ --components-menu-sidenavigation-contrast-icon-label: #aeb7e2;
675
+ --components-menu-sidenavigation-contrast-label: #aeb7e2;
676
+ --components-menu-sidenavigation-contrast-stroke-selected: #ff5959;
677
+ --components-menu-sidenavigation-contrast-text: #ffffff;
678
+ --components-menu-sidenavigation-contrast-text-disabled: #b6b8ba;
679
+ --components-menu-sidenavigation-standard-avatar: #ffffff;
680
+ --components-menu-sidenavigation-standard-background: #f2f5f7;
681
+ --components-menu-sidenavigation-standard-divide: #e3e6e8;
682
+ --components-menu-sidenavigation-standard-fill-active: rgba(255, 255, 255, 0);
683
+ --components-menu-sidenavigation-standard-fill-default: rgba(255, 255, 255, 0);
684
+ --components-menu-sidenavigation-standard-fill-hover: #d9dae8;
685
+ --components-menu-sidenavigation-standard-icon: #181c56;
686
+ --components-menu-sidenavigation-standard-icon-disabled: #6e6f73;
687
+ --components-menu-sidenavigation-standard-icon-label: #626493;
688
+ --components-menu-sidenavigation-standard-label: #626493;
689
+ --components-menu-sidenavigation-standard-stroke-selected: #181c56;
690
+ --components-menu-sidenavigation-standard-text: #181c56;
691
+ --components-menu-sidenavigation-standard-text-disabled: #6e6f73;
692
+ --components-menu-stepper-contrast-background: #626493;
693
+ --components-menu-stepper-contrast-progressbar: #aeb7e2;
694
+ --components-menu-stepper-contrast-text-completed: #ffffff;
695
+ --components-menu-stepper-contrast-text-uncompleted: #aeb7e2;
696
+ --components-menu-stepper-standard-background: #e3e6e8;
697
+ --components-menu-stepper-standard-progressbar: #181c56;
698
+ --components-menu-stepper-standard-text-completed: #181c56;
699
+ --components-menu-stepper-standard-text-uncompleted: #6e6f73;
700
+ --components-menu-tableofcontent-contrast-icon-selected: #ffffff;
701
+ --components-menu-tableofcontent-contrast-icon-unselected: #d9dae8;
702
+ --components-menu-tableofcontent-contrast-stroke-selected: #ff5959;
703
+ --components-menu-tableofcontent-contrast-stroke-unselected: #54568c;
704
+ --components-menu-tableofcontent-contrast-text-selected: #ffffff;
705
+ --components-menu-tableofcontent-contrast-text-unselected: #d9dae8;
706
+ --components-menu-tableofcontent-standard-icon-selected: #181c56;
707
+ --components-menu-tableofcontent-standard-icon-unselected: #626493;
708
+ --components-menu-tableofcontent-standard-stroke-selected: #ff5959;
709
+ --components-menu-tableofcontent-standard-stroke-unselected: #e3e6e8;
710
+ --components-menu-tableofcontent-standard-text-selected: #181c56;
711
+ --components-menu-tableofcontent-standard-text-unselected: #626493;
712
+ }
713
+
714
+ [data-color-mode=dark] {
715
+ --components-menu-breadcrumb-contrast-icon: #e5e5e9;
716
+ --components-menu-breadcrumb-contrast-text: #e5e5e9;
717
+ --components-menu-breadcrumb-standard-icon: #e5e5e9;
718
+ --components-menu-breadcrumb-standard-text: #e5e5e9;
719
+ --components-menu-navigationbar-contrast-background: #393a49;
720
+ --components-menu-navigationbar-contrast-divide: rgba(255, 255, 255, 0);
721
+ --components-menu-navigationbar-contrast-icon-selected: #e5e5e9;
722
+ --components-menu-navigationbar-contrast-icon-unselected: #b6b8ba;
723
+ --components-menu-navigationbar-contrast-stroke-selected: #ff9494;
724
+ --components-menu-navigationbar-contrast-text-selected: #e5e5e9;
725
+ --components-menu-navigationbar-contrast-text-unselected: #b6b8ba;
726
+ --components-menu-navigationbar-standard-background: #393a49;
727
+ --components-menu-navigationbar-standard-divide: rgba(255, 255, 255, 0);
728
+ --components-menu-navigationbar-standard-icon-selected: #e5e5e9;
729
+ --components-menu-navigationbar-standard-icon-unselected: #b6b8ba;
730
+ --components-menu-navigationbar-standard-stroke-selected: #ff9494;
731
+ --components-menu-navigationbar-standard-text-selected: #e5e5e9;
732
+ --components-menu-navigationbar-standard-text-unselected: #b6b8ba;
733
+ --components-menu-navigationlink-contrast-icon: #e5e5e9;
734
+ --components-menu-navigationlink-contrast-text: #e5e5e9;
735
+ --components-menu-navigationlink-standard-icon: #e5e5e9;
736
+ --components-menu-navigationlink-standard-text: #e5e5e9;
737
+ --components-menu-overflowmenu-border: rgba(255, 255, 255, 0);
738
+ --components-menu-overflowmenu-fill-active: #8794d4;
739
+ --components-menu-overflowmenu-fill-default: #464755;
740
+ --components-menu-overflowmenu-fill-hover: #626493;
741
+ --components-menu-overflowmenu-icon: #e5e5e9;
742
+ --components-menu-overflowmenu-icon-disabled: #949699;
743
+ --components-menu-overflowmenu-text: #e5e5e9;
744
+ --components-menu-overflowmenu-text-disabled: #949699;
745
+ --components-menu-pagination-contrast-active: #8794d4;
746
+ --components-menu-pagination-contrast-border-selected: #e5e5e9;
747
+ --components-menu-pagination-contrast-border-unselected: rgba(174, 183, 226, 0.6980392157);
748
+ --components-menu-pagination-contrast-default: rgba(255, 255, 255, 0);
749
+ --components-menu-pagination-contrast-hover: #626493;
750
+ --components-menu-pagination-contrast-icon: #e5e5e9;
751
+ --components-menu-pagination-contrast-text-selected: #08091c;
752
+ --components-menu-pagination-contrast-text-subdued: #b3b4bd;
753
+ --components-menu-pagination-contrast-text-unselected: #e5e5e9;
754
+ --components-menu-pagination-standard-active: #8794d4;
755
+ --components-menu-pagination-standard-border-selected: #e5e5e9;
756
+ --components-menu-pagination-standard-border-unselected: rgba(174, 183, 226, 0.6980392157);
757
+ --components-menu-pagination-standard-default: rgba(255, 255, 255, 0);
758
+ --components-menu-pagination-standard-hover: #626493;
759
+ --components-menu-pagination-standard-icon: #e5e5e9;
760
+ --components-menu-pagination-standard-text-selected: #08091c;
761
+ --components-menu-pagination-standard-text-subdued: #b3b4bd;
762
+ --components-menu-pagination-standard-text-unselected: #e5e5e9;
763
+ --components-menu-sidenavigation-contrast-avatar: rgba(229, 229, 233, 0.1490196078);
764
+ --components-menu-sidenavigation-contrast-background: #212233;
765
+ --components-menu-sidenavigation-contrast-divide: #81828f;
766
+ --components-menu-sidenavigation-contrast-fill-active: rgba(255, 255, 255, 0);
767
+ --components-menu-sidenavigation-contrast-fill-default: rgba(255, 255, 255, 0);
768
+ --components-menu-sidenavigation-contrast-fill-hover: rgba(229, 229, 233, 0.1490196078);
769
+ --components-menu-sidenavigation-contrast-icon: #e5e5e9;
770
+ --components-menu-sidenavigation-contrast-icon-disabled: #949699;
771
+ --components-menu-sidenavigation-contrast-icon-label: #b3b4bd;
772
+ --components-menu-sidenavigation-contrast-label: #b3b4bd;
773
+ --components-menu-sidenavigation-contrast-stroke-selected: #ff9494;
774
+ --components-menu-sidenavigation-contrast-text: #e5e5e9;
775
+ --components-menu-sidenavigation-contrast-text-disabled: #949699;
776
+ --components-menu-sidenavigation-standard-avatar: rgba(229, 229, 233, 0.1490196078);
777
+ --components-menu-sidenavigation-standard-background: #212233;
778
+ --components-menu-sidenavigation-standard-divide: #81828f;
779
+ --components-menu-sidenavigation-standard-fill-active: rgba(255, 255, 255, 0);
780
+ --components-menu-sidenavigation-standard-fill-default: rgba(255, 255, 255, 0);
781
+ --components-menu-sidenavigation-standard-fill-hover: rgba(229, 229, 233, 0.1490196078);
782
+ --components-menu-sidenavigation-standard-icon: #e5e5e9;
783
+ --components-menu-sidenavigation-standard-icon-disabled: #949699;
784
+ --components-menu-sidenavigation-standard-icon-label: #b3b4bd;
785
+ --components-menu-sidenavigation-standard-label: #b3b4bd;
786
+ --components-menu-sidenavigation-standard-stroke-selected: #ff9494;
787
+ --components-menu-sidenavigation-standard-text: #e5e5e9;
788
+ --components-menu-sidenavigation-standard-text-disabled: #949699;
789
+ --components-menu-stepper-contrast-background: #626493;
790
+ --components-menu-stepper-contrast-progressbar: #aeb7e2;
791
+ --components-menu-stepper-contrast-text-completed: #e5e5e9;
792
+ --components-menu-stepper-contrast-text-uncompleted: #b6b8ba;
793
+ --components-menu-stepper-standard-background: #626493;
794
+ --components-menu-stepper-standard-progressbar: #aeb7e2;
795
+ --components-menu-stepper-standard-text-completed: #e5e5e9;
796
+ --components-menu-stepper-standard-text-uncompleted: #b6b8ba;
797
+ --components-menu-tableofcontent-contrast-icon-selected: #e5e5e9;
798
+ --components-menu-tableofcontent-contrast-icon-unselected: #b3b4bd;
799
+ --components-menu-tableofcontent-contrast-stroke-selected: #ff9494;
800
+ --components-menu-tableofcontent-contrast-stroke-unselected: rgba(84, 86, 140, 0.4);
801
+ --components-menu-tableofcontent-contrast-text-selected: #e5e5e9;
802
+ --components-menu-tableofcontent-contrast-text-unselected: #b3b4bd;
803
+ --components-menu-tableofcontent-standard-icon-selected: #e5e5e9;
804
+ --components-menu-tableofcontent-standard-icon-unselected: #b3b4bd;
805
+ --components-menu-tableofcontent-standard-stroke-selected: #ff9494;
806
+ --components-menu-tableofcontent-standard-stroke-unselected: rgba(84, 86, 140, 0.4);
807
+ --components-menu-tableofcontent-standard-text-selected: #e5e5e9;
808
+ --components-menu-tableofcontent-standard-text-unselected: #b3b4bd;
808
809
  }
809
- .eds-contrast .eds-side-navigation-group__trigger:focus-visible {
810
- outline-color: var(--basecolors-stroke-focus-contrast);
811
- }/* DO NOT CHANGE!*/
810
+
811
+ /* DO NOT CHANGE!*/
812
812
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
813
- .eds-stepper {
814
- --text-color: var(--components-menu-stepper-standard-text-uncompleted);
815
- --line-color: var(--components-menu-stepper-standard-background);
816
- --label-font-weight: 500;
817
- --display-active-line: none;
818
- display: flex;
819
- flex-direction: row;
820
- width: 100%;
821
- list-style-type: none;
822
- }
823
- .eds-stepper__step {
824
- display: flex;
825
- flex-grow: 1;
826
- flex-basis: 0;
827
- flex-direction: column;
828
- align-items: inherit;
829
- appearance: none;
830
- background: none;
831
- border: none;
832
- font-family: inherit;
833
- text-transform: none;
834
- }
835
- .eds-stepper__step:focus-visible .eds-stepper__step__label {
836
- outline-offset: 0.125rem;
837
- outline: 2px solid #181c56;
838
- }
839
- .eds-contrast .eds-stepper__step:focus-visible .eds-stepper__step__label {
840
- outline: 2px solid #ffffff;
841
- }
842
- .eds-contrast .eds-stepper__step {
843
- --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
844
- --line-color: var(--components-menu-stepper-contrast-background);
845
- }
846
- .eds-stepper__step__wrapper {
847
- flex-grow: 1;
848
- }
849
- .eds-stepper__step--interactive {
850
- all: unset;
851
- display: flex;
852
- flex-direction: column;
853
- width: 100%;
854
- cursor: pointer;
855
- }
856
- .eds-stepper__step--active {
857
- --text-color: var(--components-menu-stepper-standard-text-uncompleted);
858
- --label-font-weight: 600;
859
- --display-active-line: block;
860
- }
861
- .eds-contrast .eds-stepper__step--active {
862
- --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
863
- }
864
- .eds-stepper__step--completed {
865
- --text-color: var(--components-menu-stepper-standard-text-completed);
866
- --line-color: var(--components-menu-stepper-standard-progressbar);
867
- }
868
- .eds-contrast .eds-stepper__step--completed {
869
- --text-color: var(--components-menu-stepper-contrast-text-completed);
870
- --line-color: var(--components-menu-stepper-contrast-progressbar);
871
- }
872
- .eds-stepper__step__label {
873
- flex-grow: 1;
874
- flex-direction: column;
875
- align-self: center;
876
- text-align: center;
877
- font-size: 0.875rem;
878
- margin: 0.5rem 0 0;
879
- padding: 0 0.5rem;
880
- width: fit-content;
881
- border-radius: 0.0625rem;
882
- color: var(--text-color);
883
- font-weight: var(--label-font-weight);
884
- }
885
- .eds-stepper__step--interactive:hover .eds-stepper__step__label {
886
- background-color: var(--components-menu-stepper-standard-background);
887
- color: var(--components-menu-stepper-standard-text-completed);
888
- }
889
- .eds-contrast .eds-stepper__step--interactive:hover .eds-stepper__step__label {
890
- background-color: var(--components-menu-stepper-contrast-background);
891
- color: var(--components-menu-stepper-contrast-text-completed);
892
- }
893
- .eds-stepper__step__line {
894
- height: 0.5rem;
895
- background: var(--line-color);
896
- position: relative;
897
- }
898
- .eds-stepper__step__line:before {
899
- display: var(--display-active-line);
900
- content: "";
901
- position: absolute;
902
- right: calc(50% - 0.2rem);
903
- bottom: 0.0625rem;
904
- border-radius: 0.0625rem;
905
- background: var(--components-menu-stepper-standard-progressbar);
906
- width: calc(0.5rem - 0.125rem - 0.01rem);
907
- height: calc(0.5rem - 0.125rem - 0.01rem);
908
- transform: rotate(45deg);
813
+ /* DO NOT CHANGE!*/
814
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
815
+ [data-color-mode=light],
816
+ :root {
817
+ --basecolors-frame-contrast: #181c56;
818
+ --basecolors-frame-contrastalt: #393d79;
819
+ --basecolors-frame-contrastalt-2: #292b6a;
820
+ --basecolors-frame-default: #ffffff;
821
+ --basecolors-frame-elevated: #ffffff;
822
+ --basecolors-frame-elevatedalt: #f6f6f9;
823
+ --basecolors-frame-subdued: #d9dae8;
824
+ --basecolors-frame-tint: #f6f6f9;
825
+ --basecolors-shape-accent: #181c56;
826
+ --basecolors-shape-bicycle-contrast: #00db9b;
827
+ --basecolors-shape-bicycle-default: #388f76;
828
+ --basecolors-shape-bus-contrast: #ff6392;
829
+ --basecolors-shape-bus-default: #c5044e;
830
+ --basecolors-shape-cableway-contrast: #b482fb;
831
+ --basecolors-shape-cableway-default: #78469a;
832
+ --basecolors-shape-disabled: #6e6f73;
833
+ --basecolors-shape-disabledalt: #b6b8ba;
834
+ --basecolors-shape-ferry-contrast: #6fdfff;
835
+ --basecolors-shape-ferry-default: #0c6693;
836
+ --basecolors-shape-funicular-contrast: #b482fb;
837
+ --basecolors-shape-funicular-default: #78469a;
838
+ --basecolors-shape-helicopter-contrast: #fbafea;
839
+ --basecolors-shape-helicopter-default: #800664;
840
+ --basecolors-shape-highlight: #ff5959;
841
+ --basecolors-shape-light: #ffffff;
842
+ --basecolors-shape-mask: #ffffff;
843
+ --basecolors-shape-maskalt: #ffffff;
844
+ --basecolors-shape-metro-contrast: #f08901;
845
+ --basecolors-shape-metro-default: #bf5826;
846
+ --basecolors-shape-mobility-contrast: #00db9b;
847
+ --basecolors-shape-mobility-default: #388f76;
848
+ --basecolors-shape-plane-contrast: #fbafea;
849
+ --basecolors-shape-plane-default: #800664;
850
+ --basecolors-shape-subdued: #626493;
851
+ --basecolors-shape-subduedalt: #d9dae8;
852
+ --basecolors-shape-taxi-contrast: #ffe082;
853
+ --basecolors-shape-taxi-default: #3d3e40;
854
+ --basecolors-shape-train-contrast: #42a5f5;
855
+ --basecolors-shape-train-default: #00367f;
856
+ --basecolors-shape-tram-contrast: #b482fb;
857
+ --basecolors-shape-tram-default: #78469a;
858
+ --basecolors-shape-walk-contrast: #8284ab;
859
+ --basecolors-shape-walk-default: #8d8e9c;
860
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
861
+ --basecolors-shape-airportlinkbus-default: #800664;
862
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
863
+ --basecolors-shape-airportlinkrail-default: #800664;
864
+ --basecolors-stroke-contrast: #aeb7e2;
865
+ --basecolors-stroke-default: #181c56;
866
+ --basecolors-stroke-disabled: #949699;
867
+ --basecolors-stroke-focus-contrast: #aeb7e2;
868
+ --basecolors-stroke-focus-standard: #181c56;
869
+ --basecolors-stroke-highlight: #ff5959;
870
+ --basecolors-stroke-light: #ffffff;
871
+ --basecolors-stroke-subdued: #8284ab;
872
+ --basecolors-stroke-subduedalt: #e3e6e8;
873
+ --basecolors-text-accent: #181c56;
874
+ --basecolors-text-disabled: #6e6f73;
875
+ --basecolors-text-disabledalt: #b6b8ba;
876
+ --basecolors-text-highlight: #ff5959;
877
+ --basecolors-text-light: #ffffff;
878
+ --basecolors-text-subdued: #626493;
879
+ --basecolors-text-subduedalt: #d9dae8;
909
880
  }
910
- .eds-contrast .eds-stepper__step__line:before {
911
- background: var(--components-menu-stepper-contrast-progressbar);
881
+
882
+ [data-color-mode=dark] {
883
+ --basecolors-frame-contrast: #212233;
884
+ --basecolors-frame-contrastalt: #141527;
885
+ --basecolors-frame-contrastalt-2: #08091c;
886
+ --basecolors-frame-default: #08091c;
887
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
888
+ --basecolors-frame-elevatedalt: #464755;
889
+ --basecolors-frame-subdued: #2d2e3e;
890
+ --basecolors-frame-tint: #141527;
891
+ --basecolors-shape-accent: #e5e5e9;
892
+ --basecolors-shape-bicycle-contrast: #4db295;
893
+ --basecolors-shape-bicycle-default: #4db295;
894
+ --basecolors-shape-bus-contrast: #ef7398;
895
+ --basecolors-shape-bus-default: #ef7398;
896
+ --basecolors-shape-cableway-contrast: #b898e5;
897
+ --basecolors-shape-cableway-default: #b898e5;
898
+ --basecolors-shape-disabled: #b6b8ba;
899
+ --basecolors-shape-disabledalt: #b3b4bd;
900
+ --basecolors-shape-ferry-contrast: #8ccfe2;
901
+ --basecolors-shape-ferry-default: #8ccfe2;
902
+ --basecolors-shape-funicular-contrast: #b898e5;
903
+ --basecolors-shape-funicular-default: #b898e5;
904
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
905
+ --basecolors-shape-helicopter-default: #f2b8e5;
906
+ --basecolors-shape-highlight: #ff9494;
907
+ --basecolors-shape-light: #e5e5e9;
908
+ --basecolors-shape-mask: #2d2e3e;
909
+ --basecolors-shape-maskalt: #393a49;
910
+ --basecolors-shape-metro-contrast: #dd973c;
911
+ --basecolors-shape-metro-default: #dd973c;
912
+ --basecolors-shape-mobility-contrast: #4db295;
913
+ --basecolors-shape-mobility-default: #4db295;
914
+ --basecolors-shape-plane-contrast: #f2b8e5;
915
+ --basecolors-shape-plane-default: #f2b8e5;
916
+ --basecolors-shape-subdued: #b3b4bd;
917
+ --basecolors-shape-subduedalt: #b3b4bd;
918
+ --basecolors-shape-taxi-contrast: #ffe082;
919
+ --basecolors-shape-taxi-default: #ffe082;
920
+ --basecolors-shape-train-contrast: #60a2d7;
921
+ --basecolors-shape-train-default: #60a2d7;
922
+ --basecolors-shape-tram-contrast: #b898e5;
923
+ --basecolors-shape-tram-default: #b898e5;
924
+ --basecolors-shape-walk-contrast: #8d8e9c;
925
+ --basecolors-shape-walk-default: #8d8e9c;
926
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
927
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
928
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
929
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
930
+ --basecolors-stroke-contrast: #aeb7e2;
931
+ --basecolors-stroke-default: #b3b4bd;
932
+ --basecolors-stroke-disabled: #e3e6e8;
933
+ --basecolors-stroke-focus-contrast: #aeb7e2;
934
+ --basecolors-stroke-focus-standard: #aeb7e2;
935
+ --basecolors-stroke-highlight: #ff9494;
936
+ --basecolors-stroke-light: #b3b4bd;
937
+ --basecolors-stroke-subdued: #81828f;
938
+ --basecolors-stroke-subduedalt: #949699;
939
+ --basecolors-text-accent: #e5e5e9;
940
+ --basecolors-text-disabled: #b6b8ba;
941
+ --basecolors-text-disabledalt: #b6b8ba;
942
+ --basecolors-text-highlight: #ff9494;
943
+ --basecolors-text-light: #e5e5e9;
944
+ --basecolors-text-subdued: #b3b4bd;
945
+ --basecolors-text-subduedalt: #b3b4bd;
912
946
  }
913
- .eds-stepper__step__line:after {
914
- display: var(--display-active-line);
915
- content: "";
916
- position: absolute;
917
- left: 0;
918
- bottom: 0;
919
- width: 50%;
920
- height: 0.5rem;
921
- background: var(--components-menu-stepper-standard-progressbar);
947
+
948
+ :root {
949
+ --eds-menu: 1;
950
+ --reach-menu-button: 1;
922
951
  }
923
- .eds-contrast .eds-stepper__step__line:after {
924
- background: var(--components-menu-stepper-contrast-progressbar);
925
- }/* DO NOT CHANGE!*/
952
+ /* DO NOT CHANGE!*/
926
953
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
927
954
  .eds-top-navigation-item {
928
955
  --show-active-line: 0;
929
956
  display: inline-block;
930
957
  cursor: pointer;
931
958
  color: var(--components-menu-navigationbar-standard-text-unselected);
959
+ -webkit-text-decoration: none;
932
960
  text-decoration: none;
933
961
  position: relative;
934
962
  padding: 1rem;
935
963
  min-width: 5rem;
964
+ width: -moz-fit-content;
936
965
  width: fit-content;
937
966
  text-align: center;
938
967
  font-family: inherit;
@@ -976,4 +1005,4 @@
976
1005
  }
977
1006
  .eds-contrast .eds-top-navigation-item--active {
978
1007
  color: var(--components-menu-navigationbar-contrast-text-selected);
979
- }
1008
+ }