@entur/menu 5.2.0 → 5.2.1-beta.1

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/index.d.ts +352 -11
  2. package/dist/menu.cjs.js +820 -0
  3. package/dist/menu.cjs.js.map +1 -0
  4. package/dist/menu.esm.js +712 -669
  5. package/dist/menu.esm.js.map +1 -1
  6. package/dist/styles.css +720 -749
  7. package/package.json +38 -20
  8. package/dist/BreadcrumbItem.d.ts +0 -19
  9. package/dist/BreadcrumbNavigation.d.ts +0 -11
  10. package/dist/CollapsibleSideNavigation.d.ts +0 -27
  11. package/dist/OverflowMenu.d.ts +0 -55
  12. package/dist/Pagination.d.ts +0 -69
  13. package/dist/PaginationInput.d.ts +0 -8
  14. package/dist/PaginationPage.d.ts +0 -17
  15. package/dist/SideNavigation.d.ts +0 -16
  16. package/dist/SideNavigationGroup.d.ts +0 -20
  17. package/dist/SideNavigationItem.d.ts +0 -33
  18. package/dist/Stepper.d.ts +0 -39
  19. package/dist/TopNavigationItem.d.ts +0 -21
  20. package/dist/index.js +0 -8
  21. package/dist/menu.cjs.development.js +0 -793
  22. package/dist/menu.cjs.development.js.map +0 -1
  23. package/dist/menu.cjs.production.min.js +0 -2
  24. package/dist/menu.cjs.production.min.js.map +0 -1
  25. package/dist/useControllableProp.d.ts +0 -6
  26. package/dist/useShowDelayedLabel.d.ts +0 -1
package/dist/styles.css CHANGED
@@ -1,334 +1,439 @@
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
- }
46
3
  /* DO NOT CHANGE!*/
47
4
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
48
- .eds-breadcrumb {
49
- list-style: none;
50
- margin: 0;
51
- padding: 0;
52
- }
53
-
54
- .eds-breadcrumb__item {
55
- display: inline-block;
56
- color: var(--components-menu-breadcrumb-standard-text);
57
- }
58
- .eds-contrast .eds-breadcrumb__item {
59
- color: var(--components-menu-breadcrumb-contrast-text);
60
- }
61
-
62
- .eds-breadcrumb__separator {
63
- margin: 0 0.25rem 0 0.25rem;
64
- }
65
-
66
- .eds-breadcrumb__link {
67
- -webkit-text-decoration: none;
68
- text-decoration: none;
69
- color: var(--components-menu-breadcrumb-standard-text);
70
- background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-standard-text) 0%, var(--components-menu-breadcrumb-standard-text) 100%);
71
- background-repeat: no-repeat;
72
- background-size: 100% 0.125rem;
73
- background-position: 0 100%;
74
- }
75
- .eds-contrast .eds-breadcrumb__link {
76
- color: var(--components-menu-breadcrumb-contrast-text);
77
- background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-contrast-text) 0%, var(--components-menu-breadcrumb-contrast-text) 100%);
78
- }
79
- .eds-breadcrumb__link:hover {
80
- animation: eds-breadcrumb-underline 0.3s ease-in;
81
- }
82
- .eds-breadcrumb__link:focus-visible {
83
- outline: 2px solid #181c56;
84
- outline-color: var(--basecolors-stroke-focus-standard);
85
- outline-offset: 0.125rem;
86
- }
87
- .eds-contrast .eds-breadcrumb__link:focus-visible {
88
- outline-color: var(--basecolors-stroke-focus-contrast);
89
- }
90
- @keyframes eds-breadcrumb-underline {
91
- from {
92
- background-size: 0% 0.125rem;
93
- }
94
- to {
95
- background-size: 100% 0.125rem;
96
- }
97
- }
98
- .eds-breadcrumb__link--current {
99
- font-weight: 600;
100
- }
101
5
  /* DO NOT CHANGE!*/
102
6
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
103
- .eds-side-navigation,
104
- .eds-side-navigation-group {
105
- color: var(--components-menu-sidenavigation-standard-text);
106
- }
107
- .eds-contrast .eds-side-navigation,
108
- .eds-contrast .eds-side-navigation-group {
109
- color: var(--components-menu-sidenavigation-contrast-text);
110
- }
111
-
112
- .eds-side-navigation__click-target svg {
113
- margin-right: 1rem;
114
- color: var(--components-menu-sidenavigation-standard-icon);
115
- display: inline-flex;
116
- align-self: center;
117
- position: relative;
118
- top: 0.075em;
119
- }
120
- .eds-contrast .eds-side-navigation__click-target svg {
121
- color: var(--components-menu-sidenavigation-contrast-icon);
122
- }
123
-
124
- .eds-side-navigation__click-target[disabled] svg {
125
- color: var(--components-menu-sidenavigation-standard-icon-disabled);
126
- }
127
- .eds-contrast .eds-side-navigation__click-target[disabled] svg {
128
- color: var(--components-menu-sidenavigation-contrast-icon-disabled);
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;
129
103
  }
130
104
 
131
- .eds-side-navigation {
132
- --padding-vertical: 1rem;
133
- --padding-horizontal: 2.5rem;
134
- background-color: var(--components-menu-sidenavigation-standard-background);
135
- color: var(--components-menu-sidenavigation-standard-text);
136
- padding: 0;
137
- margin: 0;
138
- list-style: none;
139
- position: relative;
140
- transition: max-width ease-in-out 0.2s;
141
- }
142
- .eds-contrast .eds-side-navigation {
143
- background-color: var(--components-menu-sidenavigation-contrast-background);
144
- color: var(--components-menu-sidenavigation-contrast-text);
145
- }
146
- .eds-side-navigation__collapse-button {
147
- position: absolute;
148
- right: -0.75rem;
149
- height: 1.5rem;
150
- width: 1.5rem;
151
- border-radius: 50%;
152
- border: none;
153
- cursor: pointer;
154
- background-color: var(--components-menu-sidenavigation-standard-background);
155
- color: var(--components-menu-sidenavigation-standard-text);
156
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
157
- padding: 0;
158
- display: flex;
159
- align-items: center;
160
- justify-content: center;
161
- z-index: 10;
162
- }
163
- .eds-contrast .eds-side-navigation__collapse-button {
164
- background-color: var(--components-menu-sidenavigation-contrast-background);
165
- color: var(--components-menu-sidenavigation-contast-text);
166
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
167
- }
168
- .eds-side-navigation__collapse-button svg {
169
- margin: 0;
170
- top: 0;
171
- color: var(--components-menu-sidenavigation-standard-icon);
172
- }
173
- .eds-contrast .eds-side-navigation__collapse-button svg {
174
- color: var(--components-menu-sidenavigation-contrast-icon);
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;
175
200
  }
176
- .eds-side-navigation__collapse-button:focus-visible {
177
- outline: 2px solid #181c56;
178
- outline-color: var(--basecolors-stroke-focus-standard);
179
- outline-offset: 0.125rem;
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;
180
271
  }
181
- .eds-contrast .eds-side-navigation__collapse-button:focus-visible {
182
- outline-color: var(--basecolors-stroke-focus-contrast);
272
+
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;
183
337
  }
184
- @media screen and (min-width: 50rem) {
185
- .eds-side-navigation {
186
- max-width: 26rem;
187
- }
338
+
339
+ :root {
340
+ --eds-menu: 1;
341
+ --reach-menu-button: 1;
342
+ }/* DO NOT CHANGE!*/
343
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
344
+ .eds-breadcrumb {
345
+ list-style: none;
346
+ margin: 0;
347
+ padding: 0;
188
348
  }
189
- .eds-side-navigation--small {
190
- --padding-vertical: calc(0.5rem + 0.1875rem);
349
+
350
+ .eds-breadcrumb__item {
351
+ display: inline-block;
352
+ color: var(--components-menu-breadcrumb-standard-text);
191
353
  }
192
- .eds-side-navigation .eds-side-navigation {
193
- background-color: var(--components-menu-sidenavigation-standard-background);
194
- }
195
- .eds-contrast .eds-side-navigation .eds-side-navigation {
196
- background-color: var(--components-menu-sidenavigation-contrast-background);
197
- }
198
- .eds-side-navigation--collapsed {
199
- max-width: 80px;
354
+ .eds-contrast .eds-breadcrumb__item {
355
+ color: var(--components-menu-breadcrumb-contrast-text);
200
356
  }
201
357
 
202
- .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target {
203
- padding-left: 3.5rem;
204
- box-shadow: none;
205
- }
206
- .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
207
- background-color: var(--components-menu-sidenavigation-standard-fill-active);
208
- }
209
- .eds-contrast .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
210
- background-color: var(--components-menu-sidenavigation-contrast-fill-active);
358
+ .eds-breadcrumb__separator {
359
+ margin: 0 0.25rem 0 0.25rem;
211
360
  }
212
361
 
213
- .eds-side-navigation__click-target {
214
- -webkit-appearance: none;
215
- -moz-appearance: none;
216
- appearance: none;
217
- background: none;
218
- border: 0;
219
- border-bottom: 0.0625rem solid var(--components-menu-sidenavigation-standard-divide);
220
- border-radius: 0;
221
- color: var(--components-menu-sidenavigation-standard-text);
222
- cursor: pointer;
223
- display: block;
224
- font-size: 1rem;
225
- font-family: inherit;
226
- font-weight: 500;
227
- line-height: inherit;
228
- padding: var(--padding-vertical) 2.5rem;
229
- padding-left: 2.5rem;
230
- transition: padding 0.2s ease-in-out;
231
- text-align: left;
232
- -webkit-text-decoration: none;
362
+ .eds-breadcrumb__link {
233
363
  text-decoration: none;
234
- width: 100%;
235
- }
236
- .eds-contrast .eds-side-navigation__click-target {
237
- color: var(--components-menu-sidenavigation-contrast-text);
238
- border-color: var(--components-menu-sidenavigation-contrast-divide);
239
- }
240
- .eds-side-navigation--collapsed .eds-side-navigation__click-target {
241
- padding-left: 2rem;
242
- }
243
- .eds-side-navigation__click-target--active {
244
- box-shadow: inset 0.25rem 0 0 var(--components-menu-sidenavigation-standard-stroke-selected);
245
- font-weight: 600;
246
- }
247
- .eds-contrast .eds-side-navigation__click-target--active {
248
- box-shadow: inset 0.25rem 0 0 var(--components-menu-sidenavigation-contrast-stroke-selected);
249
- }
250
- .eds-side-navigation__click-target[disabled] {
251
- cursor: not-allowed;
252
- color: var(--components-menu-sidenavigation-standard-text-disabled);
253
- }
254
- .eds-contrast .eds-side-navigation__click-target[disabled] {
255
- color: var(--components-menu-sidenavigation-contrast-text-disabled);
364
+ color: var(--components-menu-breadcrumb-standard-text);
365
+ background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-standard-text) 0%, var(--components-menu-breadcrumb-standard-text) 100%);
366
+ background-repeat: no-repeat;
367
+ background-size: 100% 0.125rem;
368
+ background-position: 0 100%;
256
369
  }
257
- .eds-side-navigation__click-target:not([disabled]):hover {
258
- background-color: var(--components-menu-sidenavigation-standard-fill-hover);
370
+ .eds-contrast .eds-breadcrumb__link {
371
+ color: var(--components-menu-breadcrumb-contrast-text);
372
+ background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-contrast-text) 0%, var(--components-menu-breadcrumb-contrast-text) 100%);
259
373
  }
260
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
261
- background-color: var(--components-menu-sidenavigation-contrast-fill-hover);
374
+ .eds-breadcrumb__link:hover {
375
+ animation: eds-breadcrumb-underline 0.3s ease-in;
262
376
  }
263
- .eds-side-navigation__click-target:not([disabled]):focus-visible {
377
+ .eds-breadcrumb__link:focus-visible {
264
378
  outline: 2px solid #181c56;
265
379
  outline-color: var(--basecolors-stroke-focus-standard);
266
380
  outline-offset: 0.125rem;
267
381
  }
268
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus-visible {
382
+ .eds-contrast .eds-breadcrumb__link:focus-visible {
269
383
  outline-color: var(--basecolors-stroke-focus-contrast);
270
384
  }
271
-
272
- .eds-side-navigation-group + .eds-side-navigation-group {
273
- padding-top: 0.5rem;
274
- }
275
- @media screen and (min-width: 50rem) {
276
- .eds-side-navigation-group {
277
- max-width: 26rem;
385
+ @keyframes eds-breadcrumb-underline {
386
+ from {
387
+ background-size: 0% 0.125rem;
388
+ }
389
+ to {
390
+ background-size: 100% 0.125rem;
278
391
  }
279
392
  }
280
-
281
- .eds-side-navigation-group__trigger {
282
- align-items: center;
283
- -webkit-appearance: none;
284
- -moz-appearance: none;
285
- appearance: none;
286
- background-color: var(--components-menu-sidenavigation-standard-background);
287
- border: none;
288
- border-bottom: 0.0625rem solid var(--components-menu-sidenavigation-standard-divide);
289
- color: var(--components-menu-sidenavigation-standard-label);
290
- cursor: pointer;
291
- display: flex;
292
- font-size: 0.875rem;
293
- font-family: inherit;
294
- font-weight: 500;
295
- height: 3rem;
296
- justify-content: space-between;
297
- letter-spacing: 1px;
298
- line-height: 1.25rem;
299
- padding: 0.75rem 0 0.75rem 2.5rem;
300
- margin: 0;
301
- text-transform: uppercase;
302
- transition: padding 0.2s ease-in-out;
303
- width: 100%;
304
- }
305
- .eds-contrast .eds-side-navigation-group__trigger {
306
- color: var(--components-menu-sidenavigation-contrast-label);
307
- background-color: var(--components-menu-sidenavigation-contrast-background);
308
- border-color: var(--components-menu-sidenavigation-contrast-divide);
309
- }
310
- .eds-side-navigation-group__trigger-icon {
311
- margin-right: 0.75rem;
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;
312
403
  }
313
- .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
314
- margin-right: 2.5rem;
315
- color: var(--components-menu-sidenavigation-standard-icon-label);
404
+ .eds-overflow-menu__menu-list.eds-contrast {
405
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
316
406
  }
317
- .eds-contrast .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
318
- color: var(--components-menu-sidenavigation-contrast-icon-label);
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;
319
421
  }
320
- .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
321
- padding-left: 2rem;
422
+ .eds-overflow-menu__item--highlighted {
423
+ background: var(--components-menu-overflowmenu-fill-hover);
322
424
  }
323
- .eds-side-navigation-group__trigger:focus-visible {
324
- outline: 2px solid #181c56;
325
- outline-color: var(--basecolors-stroke-focus-standard);
326
- outline-offset: 0.125rem;
425
+ .eds-overflow-menu__item:active {
426
+ background: var(--components-menu-overflowmenu-fill-active);
427
+ color: var(--components-menu-overflowmenu-text-active);
327
428
  }
328
- .eds-contrast .eds-side-navigation-group__trigger:focus-visible {
329
- outline-color: var(--basecolors-stroke-focus-contrast);
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;
330
433
  }
331
- /* DO NOT CHANGE!*/
434
+ .eds-overflow-menu__item svg {
435
+ margin-right: 0.75rem;
436
+ }/* DO NOT CHANGE!*/
332
437
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
333
438
  .eds-pagination {
334
439
  align-items: center;
@@ -368,9 +473,7 @@
368
473
  }
369
474
  .eds-pagination__controls__page {
370
475
  align-items: center;
371
- -webkit-appearance: none;
372
- -moz-appearance: none;
373
- appearance: none;
476
+ appearance: none;
374
477
  background-color: var(--components-menu-pagination-standard-default);
375
478
  border: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
376
479
  border-radius: 0.25rem;
@@ -384,9 +487,7 @@
384
487
  margin: 0 0.125rem;
385
488
  padding: 0 0.25rem;
386
489
  transition: background 0.1s ease-out, border-color 0.1s ease-out;
387
- -webkit-user-select: none;
388
- -moz-user-select: none;
389
- user-select: none;
490
+ user-select: none;
390
491
  min-width: 2rem;
391
492
  }
392
493
  .eds-contrast .eds-pagination__controls__page {
@@ -434,9 +535,7 @@
434
535
  font-size: 1.5rem;
435
536
  height: 2rem;
436
537
  justify-content: center;
437
- -webkit-user-select: none;
438
- -moz-user-select: none;
439
- user-select: none;
538
+ user-select: none;
440
539
  width: 2rem;
441
540
  margin: 0 2px;
442
541
  }
@@ -458,9 +557,7 @@
458
557
  color: var(--components-menu-pagination-contrast-text-subdued);
459
558
  }
460
559
  .eds-pagination__controls__input__field {
461
- -webkit-appearance: none;
462
- -moz-appearance: none;
463
- appearance: none;
560
+ appearance: none;
464
561
  background-color: var(--components-menu-pagination-standard-default);
465
562
  border: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
466
563
  border-radius: 0.25rem;
@@ -477,8 +574,7 @@
477
574
  color: var(--components-menu-pagination-contrast-text-unselected);
478
575
  }
479
576
  .eds-pagination__controls__input__field::-webkit-inner-spin-button, .eds-pagination__controls__input__field::-webkit-outer-spin-button {
480
- -webkit-appearance: none;
481
- appearance: none;
577
+ appearance: none;
482
578
  margin: 0;
483
579
  }
484
580
  .eds-pagination__controls__input__field:focus-visible {
@@ -488,480 +584,355 @@
488
584
  }
489
585
  .eds-contrast .eds-pagination__controls__input__field:focus-visible {
490
586
  outline-color: var(--basecolors-stroke-focus-contrast);
491
- }
492
- /* DO NOT CHANGE!*/
587
+ }/* DO NOT CHANGE!*/
493
588
  /* 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;
499
- display: flex;
500
- flex-direction: row;
501
- width: 100%;
502
- list-style-type: none;
503
- }
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;
513
- background: none;
514
- border: none;
515
- font-family: inherit;
516
- text-transform: none;
517
- }
518
- .eds-stepper__step:focus-visible .eds-stepper__step__label {
519
- outline-offset: 0.125rem;
520
- outline: 2px solid #181c56;
521
- }
522
- .eds-contrast .eds-stepper__step:focus-visible .eds-stepper__step__label {
523
- outline: 2px solid #ffffff;
589
+ .eds-side-navigation,
590
+ .eds-side-navigation-group {
591
+ color: var(--components-menu-sidenavigation-standard-text);
524
592
  }
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);
593
+ .eds-contrast .eds-side-navigation,
594
+ .eds-contrast .eds-side-navigation-group {
595
+ color: var(--components-menu-sidenavigation-contrast-text);
528
596
  }
529
- .eds-stepper__step__wrapper {
530
- flex-grow: 1;
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;
531
605
  }
532
- .eds-stepper__step--interactive {
533
- all: unset;
534
- display: flex;
535
- flex-direction: column;
536
- width: 100%;
537
- cursor: pointer;
606
+ .eds-contrast .eds-side-navigation__click-target svg {
607
+ color: var(--components-menu-sidenavigation-contrast-icon);
538
608
  }
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;
609
+
610
+ .eds-side-navigation__click-target[disabled] svg {
611
+ color: var(--components-menu-sidenavigation-standard-icon-disabled);
543
612
  }
544
- .eds-contrast .eds-stepper__step--active {
545
- --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
613
+ .eds-contrast .eds-side-navigation__click-target[disabled] svg {
614
+ color: var(--components-menu-sidenavigation-contrast-icon-disabled);
546
615
  }
547
- .eds-stepper__step--completed {
548
- --text-color: var(--components-menu-stepper-standard-text-completed);
549
- --line-color: var(--components-menu-stepper-standard-progressbar);
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;
550
627
  }
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);
628
+ .eds-contrast .eds-side-navigation {
629
+ background-color: var(--components-menu-sidenavigation-contrast-background);
630
+ color: var(--components-menu-sidenavigation-contrast-text);
554
631
  }
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);
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;
644
+ display: flex;
645
+ align-items: center;
646
+ justify-content: center;
647
+ z-index: 10;
568
648
  }
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);
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);
572
653
  }
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);
654
+ .eds-side-navigation__collapse-button svg {
655
+ margin: 0;
656
+ top: 0;
657
+ color: var(--components-menu-sidenavigation-standard-icon);
576
658
  }
577
- .eds-stepper__step__line {
578
- height: 0.5rem;
579
- background: var(--line-color);
580
- position: relative;
659
+ .eds-contrast .eds-side-navigation__collapse-button svg {
660
+ color: var(--components-menu-sidenavigation-contrast-icon);
581
661
  }
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);
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;
593
666
  }
594
- .eds-contrast .eds-stepper__step__line:before {
595
- background: var(--components-menu-stepper-contrast-progressbar);
667
+ .eds-contrast .eds-side-navigation__collapse-button:focus-visible {
668
+ outline-color: var(--basecolors-stroke-focus-contrast);
596
669
  }
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);
670
+ @media screen and (min-width: 50rem) {
671
+ .eds-side-navigation {
672
+ max-width: 26rem;
673
+ }
606
674
  }
607
- .eds-contrast .eds-stepper__step__line:after {
608
- background: var(--components-menu-stepper-contrast-progressbar);
675
+ .eds-side-navigation--small {
676
+ --padding-vertical: calc(0.5rem + 0.1875rem);
609
677
  }
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;
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;
712
686
  }
713
687
 
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;
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);
809
697
  }
810
698
 
811
- /* DO NOT CHANGE!*/
812
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
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;
699
+ .eds-side-navigation__click-target {
700
+ appearance: none;
701
+ 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;
709
+ 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;
729
+ }
730
+ .eds-contrast .eds-side-navigation__click-target--active {
731
+ box-shadow: inset 0.25rem 0 0 var(--components-menu-sidenavigation-contrast-stroke-selected);
732
+ }
733
+ .eds-side-navigation__click-target[disabled] {
734
+ cursor: not-allowed;
735
+ color: var(--components-menu-sidenavigation-standard-text-disabled);
736
+ }
737
+ .eds-contrast .eds-side-navigation__click-target[disabled] {
738
+ color: var(--components-menu-sidenavigation-contrast-text-disabled);
739
+ }
740
+ .eds-side-navigation__click-target:not([disabled]):hover {
741
+ background-color: var(--components-menu-sidenavigation-standard-fill-hover);
742
+ }
743
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
744
+ background-color: var(--components-menu-sidenavigation-contrast-fill-hover);
745
+ }
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;
750
+ }
751
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus-visible {
752
+ outline-color: var(--basecolors-stroke-focus-contrast);
880
753
  }
881
754
 
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;
755
+ .eds-side-navigation-group + .eds-side-navigation-group {
756
+ padding-top: 0.5rem;
757
+ }
758
+ @media screen and (min-width: 50rem) {
759
+ .eds-side-navigation-group {
760
+ max-width: 26rem;
761
+ }
946
762
  }
947
763
 
948
- :root {
949
- --eds-menu: 1;
950
- --reach-menu-button: 1;
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%;
951
785
  }
952
- /* DO NOT CHANGE!*/
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);
790
+ }
791
+ .eds-side-navigation-group__trigger-icon {
792
+ margin-right: 0.75rem;
793
+ }
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);
797
+ }
798
+ .eds-contrast .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
799
+ color: var(--components-menu-sidenavigation-contrast-icon-label);
800
+ }
801
+ .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
802
+ padding-left: 2rem;
803
+ }
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;
808
+ }
809
+ .eds-contrast .eds-side-navigation-group__trigger:focus-visible {
810
+ outline-color: var(--basecolors-stroke-focus-contrast);
811
+ }/* DO NOT CHANGE!*/
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);
909
+ }
910
+ .eds-contrast .eds-stepper__step__line:before {
911
+ background: var(--components-menu-stepper-contrast-progressbar);
912
+ }
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);
922
+ }
923
+ .eds-contrast .eds-stepper__step__line:after {
924
+ background: var(--components-menu-stepper-contrast-progressbar);
925
+ }/* DO NOT CHANGE!*/
953
926
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
954
927
  .eds-top-navigation-item {
955
928
  --show-active-line: 0;
956
929
  display: inline-block;
957
930
  cursor: pointer;
958
931
  color: var(--components-menu-navigationbar-standard-text-unselected);
959
- -webkit-text-decoration: none;
960
932
  text-decoration: none;
961
933
  position: relative;
962
934
  padding: 1rem;
963
935
  min-width: 5rem;
964
- width: -moz-fit-content;
965
936
  width: fit-content;
966
937
  text-align: center;
967
938
  font-family: inherit;
@@ -1005,4 +976,4 @@
1005
976
  }
1006
977
  .eds-contrast .eds-top-navigation-item--active {
1007
978
  color: var(--components-menu-navigationbar-contrast-text-selected);
1008
- }
979
+ }