@entur/alert 0.17.13-beta.9 → 0.17.13

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.
package/dist/styles.css CHANGED
@@ -1,5 +1,289 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
+ /* DO NOT CHANGE!*/
4
+ /* 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-alert-alertbox-information-contrast-border: #067eb2;
10
+ --components-alert-alertbox-information-contrast-filldefault: #acd7f1;
11
+ --components-alert-alertbox-information-contrast-filltoast: #acd7f1;
12
+ --components-alert-alertbox-information-contrast-icondefault: #181c56;
13
+ --components-alert-alertbox-information-contrast-icontoast: #181c56;
14
+ --components-alert-alertbox-information-contrast-textdefault: #181c56;
15
+ --components-alert-alertbox-information-contrast-texttoast: #181c56;
16
+ --components-alert-alertbox-information-standard-border: #067eb2;
17
+ --components-alert-alertbox-information-standard-filldefault: #e1eff8;
18
+ --components-alert-alertbox-information-standard-filltoast: #e1eff8;
19
+ --components-alert-alertbox-information-standard-icondefault: #067eb2;
20
+ --components-alert-alertbox-information-standard-icontoast: #067eb2;
21
+ --components-alert-alertbox-information-standard-textdefault: #181c56;
22
+ --components-alert-alertbox-information-standard-texttoast: #181c56;
23
+ --components-alert-alertbox-negative-contrast-border: #d31b1b;
24
+ --components-alert-alertbox-negative-contrast-filldefault: #ff9494;
25
+ --components-alert-alertbox-negative-contrast-filltoast: #ff9494;
26
+ --components-alert-alertbox-negative-contrast-icondefault: #181c56;
27
+ --components-alert-alertbox-negative-contrast-icontoast: #181c56;
28
+ --components-alert-alertbox-negative-contrast-textdefault: #181c56;
29
+ --components-alert-alertbox-negative-contrast-texttoast: #181c56;
30
+ --components-alert-alertbox-negative-standard-border: #d31b1b;
31
+ --components-alert-alertbox-negative-standard-filldefault: #ffcece;
32
+ --components-alert-alertbox-negative-standard-filltoast: #ffcece;
33
+ --components-alert-alertbox-negative-standard-icondefault: #d31b1b;
34
+ --components-alert-alertbox-negative-standard-icontoast: #d31b1b;
35
+ --components-alert-alertbox-negative-standard-textdefault: #181c56;
36
+ --components-alert-alertbox-negative-standard-texttoast: #181c56;
37
+ --components-alert-alertbox-success-contrast-border: #1a8e60;
38
+ --components-alert-alertbox-success-contrast-filldefault: #9cd9c2;
39
+ --components-alert-alertbox-success-contrast-filltoast: #9cd9c2;
40
+ --components-alert-alertbox-success-contrast-icondefault: #181c56;
41
+ --components-alert-alertbox-success-contrast-icontoast: #181c56;
42
+ --components-alert-alertbox-success-contrast-textdefault: #181c56;
43
+ --components-alert-alertbox-success-contrast-texttoast: #181c56;
44
+ --components-alert-alertbox-success-standard-border: #1a8e60;
45
+ --components-alert-alertbox-success-standard-filldefault: #d0f1e3;
46
+ --components-alert-alertbox-success-standard-filltoast: #d0f1e3;
47
+ --components-alert-alertbox-success-standard-icondefault: #1a8e60;
48
+ --components-alert-alertbox-success-standard-icontoast: #1a8e60;
49
+ --components-alert-alertbox-success-standard-textdefault: #181c56;
50
+ --components-alert-alertbox-success-standard-texttoast: #181c56;
51
+ --components-alert-alertbox-warning-contrast-border: #e9b10c;
52
+ --components-alert-alertbox-warning-contrast-filldefault: #ffeeb3;
53
+ --components-alert-alertbox-warning-contrast-filltoast: #ffeeb3;
54
+ --components-alert-alertbox-warning-contrast-icondefault: #181c56;
55
+ --components-alert-alertbox-warning-contrast-icontoast: #181c56;
56
+ --components-alert-alertbox-warning-contrast-textdefault: #181c56;
57
+ --components-alert-alertbox-warning-contrast-textdefault2: #181c56;
58
+ --components-alert-alertbox-warning-standard-border: #e9b10c;
59
+ --components-alert-alertbox-warning-standard-filldefault: #fff4cd;
60
+ --components-alert-alertbox-warning-standard-filltoast: #fff4cd;
61
+ --components-alert-alertbox-warning-standard-icondefault: #181c56;
62
+ --components-alert-alertbox-warning-standard-icontoast: #181c56;
63
+ --components-alert-alertbox-warning-standard-textdefault: #181c56;
64
+ --components-alert-alertbox-warning-standard-texttoast: #181c56;
65
+ --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
66
+ --components-alert-copyabletext-contrast-border-interactive: #aeb7e2;
67
+ --components-alert-copyabletext-contrast-fill: #f6f6f9;
68
+ --components-alert-copyabletext-contrast-icon: #181c56;
69
+ --components-alert-copyabletext-contrast-text: #181c56;
70
+ --components-alert-copyabletext-standard-border: rgba(84, 86, 140, 0.4);
71
+ --components-alert-copyabletext-standard-border-interactive: #181c56;
72
+ --components-alert-copyabletext-standard-fill: #f6f6f9;
73
+ --components-alert-copyabletext-standard-icon: #181c56;
74
+ --components-alert-copyabletext-standard-text: #181c56;
75
+ }
76
+
77
+ [data-color-mode=dark] {
78
+ --components-alert-alertbox-information-contrast-border: #067eb2;
79
+ --components-alert-alertbox-information-contrast-filldefault: rgba(45, 152, 210, 0.2);
80
+ --components-alert-alertbox-information-contrast-filltoast: #acd7f1;
81
+ --components-alert-alertbox-information-contrast-icondefault: #acd7f1;
82
+ --components-alert-alertbox-information-contrast-icontoast: #181c56;
83
+ --components-alert-alertbox-information-contrast-textdefault: #e5e5e9;
84
+ --components-alert-alertbox-information-contrast-texttoast: #181c56;
85
+ --components-alert-alertbox-information-standard-border: #067eb2;
86
+ --components-alert-alertbox-information-standard-filldefault: rgba(45, 152, 210, 0.2);
87
+ --components-alert-alertbox-information-standard-filltoast: #acd7f1;
88
+ --components-alert-alertbox-information-standard-icondefault: #acd7f1;
89
+ --components-alert-alertbox-information-standard-icontoast: #067eb2;
90
+ --components-alert-alertbox-information-standard-textdefault: #e5e5e9;
91
+ --components-alert-alertbox-information-standard-texttoast: #181c56;
92
+ --components-alert-alertbox-negative-contrast-border: #d31b1b;
93
+ --components-alert-alertbox-negative-contrast-filldefault: rgba(255, 148, 148, 0.2);
94
+ --components-alert-alertbox-negative-contrast-filltoast: #ff9494;
95
+ --components-alert-alertbox-negative-contrast-icondefault: #ff9494;
96
+ --components-alert-alertbox-negative-contrast-icontoast: #181c56;
97
+ --components-alert-alertbox-negative-contrast-textdefault: #e5e5e9;
98
+ --components-alert-alertbox-negative-contrast-texttoast: #181c56;
99
+ --components-alert-alertbox-negative-standard-border: #d31b1b;
100
+ --components-alert-alertbox-negative-standard-filldefault: rgba(255, 148, 148, 0.2);
101
+ --components-alert-alertbox-negative-standard-filltoast: #ff9494;
102
+ --components-alert-alertbox-negative-standard-icondefault: #ff9494;
103
+ --components-alert-alertbox-negative-standard-icontoast: #d31b1b;
104
+ --components-alert-alertbox-negative-standard-textdefault: #e5e5e9;
105
+ --components-alert-alertbox-negative-standard-texttoast: #181c56;
106
+ --components-alert-alertbox-success-contrast-border: #1a8e60;
107
+ --components-alert-alertbox-success-contrast-filldefault: rgba(90, 195, 154, 0.2);
108
+ --components-alert-alertbox-success-contrast-filltoast: #9cd9c2;
109
+ --components-alert-alertbox-success-contrast-icondefault: #9cd9c2;
110
+ --components-alert-alertbox-success-contrast-icontoast: #181c56;
111
+ --components-alert-alertbox-success-contrast-textdefault: #e5e5e9;
112
+ --components-alert-alertbox-success-contrast-texttoast: #181c56;
113
+ --components-alert-alertbox-success-standard-border: #1a8e60;
114
+ --components-alert-alertbox-success-standard-filldefault: rgba(90, 195, 154, 0.2);
115
+ --components-alert-alertbox-success-standard-filltoast: #9cd9c2;
116
+ --components-alert-alertbox-success-standard-icondefault: #9cd9c2;
117
+ --components-alert-alertbox-success-standard-icontoast: #1a8e60;
118
+ --components-alert-alertbox-success-standard-textdefault: #e5e5e9;
119
+ --components-alert-alertbox-success-standard-texttoast: #181c56;
120
+ --components-alert-alertbox-warning-contrast-border: #e9b10c;
121
+ --components-alert-alertbox-warning-contrast-filldefault: rgba(255, 224, 130, 0.2509803922);
122
+ --components-alert-alertbox-warning-contrast-filltoast: #ffeeb3;
123
+ --components-alert-alertbox-warning-contrast-icondefault: #181c56;
124
+ --components-alert-alertbox-warning-contrast-icontoast: #181c56;
125
+ --components-alert-alertbox-warning-contrast-textdefault: #e5e5e9;
126
+ --components-alert-alertbox-warning-contrast-textdefault2: #e5e5e9;
127
+ --components-alert-alertbox-warning-standard-border: #e9b10c;
128
+ --components-alert-alertbox-warning-standard-filldefault: rgba(255, 224, 130, 0.2509803922);
129
+ --components-alert-alertbox-warning-standard-filltoast: #ffeeb3;
130
+ --components-alert-alertbox-warning-standard-icondefault: #ffeeb3;
131
+ --components-alert-alertbox-warning-standard-icontoast: #181c56;
132
+ --components-alert-alertbox-warning-standard-textdefault: #e5e5e9;
133
+ --components-alert-alertbox-warning-standard-texttoast: #181c56;
134
+ --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
135
+ --components-alert-copyabletext-contrast-border-interactive: #e5e5e9;
136
+ --components-alert-copyabletext-contrast-fill: #393a49;
137
+ --components-alert-copyabletext-contrast-icon: #e5e5e9;
138
+ --components-alert-copyabletext-contrast-text: #e5e5e9;
139
+ --components-alert-copyabletext-standard-border: rgba(255, 255, 255, 0);
140
+ --components-alert-copyabletext-standard-border-interactive: #e5e5e9;
141
+ --components-alert-copyabletext-standard-fill: #393a49;
142
+ --components-alert-copyabletext-standard-icon: #e5e5e9;
143
+ --components-alert-copyabletext-standard-text: #e5e5e9;
144
+ }
145
+
146
+ /* DO NOT CHANGE!*/
147
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
148
+ /* DO NOT CHANGE!*/
149
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
150
+ [data-color-mode=light],
151
+ :root {
152
+ --basecolors-frame-contrast: #181c56;
153
+ --basecolors-frame-contrastalt: #393d79;
154
+ --basecolors-frame-contrastalt-2: #292b6a;
155
+ --basecolors-frame-default: #ffffff;
156
+ --basecolors-frame-elevated: #ffffff;
157
+ --basecolors-frame-elevatedalt: #f6f6f9;
158
+ --basecolors-frame-subdued: #d9dae8;
159
+ --basecolors-frame-tint: #f6f6f9;
160
+ --basecolors-shape-accent: #181c56;
161
+ --basecolors-shape-bicycle-contrast: #00db9b;
162
+ --basecolors-shape-bicycle-default: #388f76;
163
+ --basecolors-shape-bus-contrast: #ff6392;
164
+ --basecolors-shape-bus-default: #c5044e;
165
+ --basecolors-shape-cableway-contrast: #b482fb;
166
+ --basecolors-shape-cableway-default: #78469a;
167
+ --basecolors-shape-disabled: #6e6f73;
168
+ --basecolors-shape-disabledalt: #b6b8ba;
169
+ --basecolors-shape-ferry-contrast: #6fdfff;
170
+ --basecolors-shape-ferry-default: #0c6693;
171
+ --basecolors-shape-funicular-contrast: #b482fb;
172
+ --basecolors-shape-funicular-default: #78469a;
173
+ --basecolors-shape-helicopter-contrast: #fbafea;
174
+ --basecolors-shape-helicopter-default: #800664;
175
+ --basecolors-shape-highlight: #ff5959;
176
+ --basecolors-shape-light: #ffffff;
177
+ --basecolors-shape-mask: #ffffff;
178
+ --basecolors-shape-maskalt: #ffffff;
179
+ --basecolors-shape-metro-contrast: #f08901;
180
+ --basecolors-shape-metro-default: #bf5826;
181
+ --basecolors-shape-mobility-contrast: #00db9b;
182
+ --basecolors-shape-mobility-default: #388f76;
183
+ --basecolors-shape-plane-contrast: #fbafea;
184
+ --basecolors-shape-plane-default: #800664;
185
+ --basecolors-shape-subdued: #626493;
186
+ --basecolors-shape-subduedalt: #d9dae8;
187
+ --basecolors-shape-taxi-contrast: #ffe082;
188
+ --basecolors-shape-taxi-default: #3d3e40;
189
+ --basecolors-shape-train-contrast: #42a5f5;
190
+ --basecolors-shape-train-default: #00367f;
191
+ --basecolors-shape-tram-contrast: #b482fb;
192
+ --basecolors-shape-tram-default: #78469a;
193
+ --basecolors-shape-walk-contrast: #8284ab;
194
+ --basecolors-shape-walk-default: #8d8e9c;
195
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
196
+ --basecolors-shape-airportlinkbus-default: #800664;
197
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
198
+ --basecolors-shape-airportlinkrail-default: #800664;
199
+ --basecolors-stroke-contrast: #aeb7e2;
200
+ --basecolors-stroke-default: #181c56;
201
+ --basecolors-stroke-disabled: #949699;
202
+ --basecolors-stroke-focus-contrast: #aeb7e2;
203
+ --basecolors-stroke-focus-standard: #181c56;
204
+ --basecolors-stroke-highlight: #ff5959;
205
+ --basecolors-stroke-light: #ffffff;
206
+ --basecolors-stroke-subdued: #8284ab;
207
+ --basecolors-stroke-subduedalt: #e3e6e8;
208
+ --basecolors-text-accent: #181c56;
209
+ --basecolors-text-disabled: #6e6f73;
210
+ --basecolors-text-disabledalt: #b6b8ba;
211
+ --basecolors-text-highlight: #ff5959;
212
+ --basecolors-text-light: #ffffff;
213
+ --basecolors-text-subdued: #626493;
214
+ --basecolors-text-subduedalt: #d9dae8;
215
+ }
216
+
217
+ [data-color-mode=dark] {
218
+ --basecolors-frame-contrast: #212233;
219
+ --basecolors-frame-contrastalt: #141527;
220
+ --basecolors-frame-contrastalt-2: #08091c;
221
+ --basecolors-frame-default: #08091c;
222
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
223
+ --basecolors-frame-elevatedalt: #464755;
224
+ --basecolors-frame-subdued: #2d2e3e;
225
+ --basecolors-frame-tint: #141527;
226
+ --basecolors-shape-accent: #e5e5e9;
227
+ --basecolors-shape-bicycle-contrast: #4db295;
228
+ --basecolors-shape-bicycle-default: #4db295;
229
+ --basecolors-shape-bus-contrast: #ef7398;
230
+ --basecolors-shape-bus-default: #ef7398;
231
+ --basecolors-shape-cableway-contrast: #b898e5;
232
+ --basecolors-shape-cableway-default: #b898e5;
233
+ --basecolors-shape-disabled: #b6b8ba;
234
+ --basecolors-shape-disabledalt: #b3b4bd;
235
+ --basecolors-shape-ferry-contrast: #8ccfe2;
236
+ --basecolors-shape-ferry-default: #8ccfe2;
237
+ --basecolors-shape-funicular-contrast: #b898e5;
238
+ --basecolors-shape-funicular-default: #b898e5;
239
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
240
+ --basecolors-shape-helicopter-default: #f2b8e5;
241
+ --basecolors-shape-highlight: #ff9494;
242
+ --basecolors-shape-light: #e5e5e9;
243
+ --basecolors-shape-mask: #2d2e3e;
244
+ --basecolors-shape-maskalt: #393a49;
245
+ --basecolors-shape-metro-contrast: #dd973c;
246
+ --basecolors-shape-metro-default: #dd973c;
247
+ --basecolors-shape-mobility-contrast: #4db295;
248
+ --basecolors-shape-mobility-default: #4db295;
249
+ --basecolors-shape-plane-contrast: #f2b8e5;
250
+ --basecolors-shape-plane-default: #f2b8e5;
251
+ --basecolors-shape-subdued: #b3b4bd;
252
+ --basecolors-shape-subduedalt: #b3b4bd;
253
+ --basecolors-shape-taxi-contrast: #ffe082;
254
+ --basecolors-shape-taxi-default: #ffe082;
255
+ --basecolors-shape-train-contrast: #60a2d7;
256
+ --basecolors-shape-train-default: #60a2d7;
257
+ --basecolors-shape-tram-contrast: #b898e5;
258
+ --basecolors-shape-tram-default: #b898e5;
259
+ --basecolors-shape-walk-contrast: #8d8e9c;
260
+ --basecolors-shape-walk-default: #8d8e9c;
261
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
262
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
263
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
264
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
265
+ --basecolors-stroke-contrast: #aeb7e2;
266
+ --basecolors-stroke-default: #b3b4bd;
267
+ --basecolors-stroke-disabled: #e3e6e8;
268
+ --basecolors-stroke-focus-contrast: #aeb7e2;
269
+ --basecolors-stroke-focus-standard: #aeb7e2;
270
+ --basecolors-stroke-highlight: #ff9494;
271
+ --basecolors-stroke-light: #b3b4bd;
272
+ --basecolors-stroke-subdued: #81828f;
273
+ --basecolors-stroke-subduedalt: #949699;
274
+ --basecolors-text-accent: #e5e5e9;
275
+ --basecolors-text-disabled: #b6b8ba;
276
+ --basecolors-text-disabledalt: #b6b8ba;
277
+ --basecolors-text-highlight: #ff9494;
278
+ --basecolors-text-light: #e5e5e9;
279
+ --basecolors-text-subdued: #b3b4bd;
280
+ --basecolors-text-subduedalt: #b3b4bd;
281
+ }
282
+
283
+ :root {
284
+ --eds-alert: 1;
285
+ }/* DO NOT CHANGE!*/
286
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
287
  .eds-alert-box {
4
288
  border: 0.0625rem solid transparent;
5
289
  border-radius: 0.25rem;
@@ -24,7 +308,6 @@
24
308
  @media screen and (min-width: 50rem) {
25
309
  .eds-alert-box--toast {
26
310
  min-width: 18rem;
27
- width: -moz-fit-content;
28
311
  width: fit-content;
29
312
  }
30
313
  }
@@ -35,7 +318,6 @@
35
318
  font-size: 0.875rem;
36
319
  }
37
320
  .eds-alert-box--fit-content {
38
- width: -moz-fit-content;
39
321
  width: fit-content;
40
322
  }
41
323
  .eds-alert-box--success {
@@ -176,509 +458,213 @@
176
458
  }
177
459
  }
178
460
  .eds-alert-box__title {
179
- font-weight: 600;
180
- margin: 0;
181
- }
182
- .eds-alert-box__content {
183
- flex: 1;
184
- word-break: break-word;
185
- -webkit-hyphens: auto;
186
- hyphens: auto;
187
- }
188
- .eds-alert-box__content--no-children {
189
- display: flex;
190
- align-items: center;
191
- }
192
- .eds-alert-box--banner .eds-alert-box__content, .eds-alert-box--toast .eds-alert-box__content {
193
- margin-right: 2rem;
194
- }
195
- .eds-alert-box__content > *:first-child {
196
- margin-top: 0;
197
- }
198
- .eds-alert-box__content > *:last-child {
199
- margin-bottom: 0;
200
- }
201
- .eds-alert-box .eds-alert-box__close-button {
202
- margin-top: -0.3125rem;
203
- margin-left: 0.5rem;
204
- height: -moz-fit-content;
205
- height: fit-content;
206
- width: -moz-fit-content;
207
- width: fit-content;
208
- }
209
- .eds-contrast .eds-alert-box .eds-alert-box__close-button {
210
- color: var(--components-button-iconbutton-standard-text);
211
- }
212
- .eds-contrast .eds-alert-box .eds-alert-box__close-button:hover {
213
- background: var(--components-button-iconbutton-standard-hover);
214
- }
215
- .eds-contrast .eds-alert-box .eds-alert-box__close-button:active {
216
- background: var(--components-button-iconbutton-standard-active);
217
- }
218
- .eds-contrast .eds-alert-box .eds-alert-box__close-button:focus-visible {
219
- outline: 2px solid #181c56;
220
- outline-color: var(--basecolors-stroke-focus-standard);
221
- }
222
- .eds-contrast .eds-alert-box .eds-alert-box__tooltip {
223
- background: var(--components-tooltip-tooltip-standard-fill);
224
- color: var(--components-tooltip-tooltip-standard-text);
225
- }
226
- .eds-contrast .eds-alert-box .eds-alert-box__tooltip::after {
227
- background: var(--components-tooltip-tooltip-standard-fill);
228
- }
229
- /* DO NOT CHANGE!*/
230
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
231
- .eds-toast-container {
232
- position: fixed;
233
- z-index: 50;
234
- display: flex;
235
- align-items: flex-end;
236
- flex-direction: column;
237
- }
238
- .eds-toast-container .eds-alert-box__close-button {
239
- position: absolute;
240
- top: 0.75rem;
241
- right: 0.75rem;
242
- }
243
- .eds-toast-container--bottom-right {
244
- bottom: 1.5rem;
245
- right: 1.5rem;
246
- left: 1.5rem;
247
- }
248
- .eds-toast-container--top-right {
249
- top: 1.5rem;
250
- right: 1.5rem;
251
- left: 1.5rem;
252
- }
253
- .eds-toast-container > * + * {
254
- margin-top: 1rem;
255
- }
256
- @media screen and (min-width: 50rem) {
257
- .eds-toast-container {
258
- left: auto;
259
- left: initial;
260
- }
261
- }
262
-
263
- @keyframes bounceInRight {
264
- from, 60%, 75%, 90%, to {
265
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
266
- }
267
- from {
268
- opacity: 0;
269
- transform: translate3d(3000px, 0, 0) scaleX(3);
270
- }
271
- 60% {
272
- opacity: 1;
273
- transform: translate3d(-25px, 0, 0) scaleX(1);
274
- }
275
- 75% {
276
- transform: translate3d(10px, 0, 0) scaleX(0.98);
277
- }
278
- 90% {
279
- transform: translate3d(-5px, 0, 0) scaleX(0.995);
280
- }
281
- to {
282
- transform: translate3d(0, 0, 0);
283
- }
284
- }
285
- @keyframes bounceOutRight {
286
- 20% {
287
- opacity: 1;
288
- transform: translate3d(-20px, 0, 0) scaleX(0.9);
289
- }
290
- to {
291
- opacity: 0;
292
- transform: translate3d(2000px, 0, 0) scaleX(2);
293
- }
294
- }
295
- /* DO NOT CHANGE!*/
296
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
297
- .eds-copyable-text,
298
- .eds-contrast .eds-copyable-text {
299
- -webkit-appearance: none;
300
- -moz-appearance: none;
301
- appearance: none;
302
- background: none;
303
- border: 0;
304
- border-radius: 0;
305
- color: inherit;
306
- cursor: pointer;
307
- display: block;
308
- font-size: inherit;
309
- padding: 0;
310
- position: relative;
311
- margin: 0 0 1rem 0;
312
- text-align: left;
313
- width: 100%;
314
- }
315
- .eds-copyable-text__preformatted-text,
316
- .eds-contrast .eds-copyable-text__preformatted-text {
461
+ font-weight: 600;
317
462
  margin: 0;
463
+ }
464
+ .eds-alert-box__content {
465
+ flex: 1;
466
+ word-break: break-word;
467
+ hyphens: auto;
468
+ }
469
+ .eds-alert-box__content--no-children {
318
470
  display: flex;
319
- justify-content: space-between;
320
471
  align-items: center;
321
- transition: border-color 0.1s;
322
472
  }
323
- .eds-copyable-text__preformatted-text:hover,
324
- .eds-contrast .eds-copyable-text__preformatted-text:hover {
325
- border-color: var(--components-alert-copyabletext-standard-border-interactive);
473
+ .eds-alert-box--banner .eds-alert-box__content, .eds-alert-box--toast .eds-alert-box__content {
474
+ margin-right: 2rem;
326
475
  }
327
- .eds-contrast .eds-copyable-text__preformatted-text:hover,
328
- .eds-contrast .eds-contrast .eds-copyable-text__preformatted-text:hover {
329
- border-color: var(--components-alert-copyabletext-contrast-border-interactive);
476
+ .eds-alert-box__content > *:first-child {
477
+ margin-top: 0;
330
478
  }
331
- .eds-copyable-text__displayed-text,
332
- .eds-contrast .eds-copyable-text__displayed-text {
333
- overflow-x: hidden;
334
- text-overflow: ellipsis;
335
- text-wrap: nowrap;
479
+ .eds-alert-box__content > *:last-child {
480
+ margin-bottom: 0;
336
481
  }
337
- .eds-copyable-text .eds-copyable-text__button,
338
- .eds-copyable-text .eds-contrast .eds-copyable-text__button,
339
- .eds-contrast .eds-copyable-text .eds-copyable-text__button,
340
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button {
341
- color: var(--components-alert-copyabletext-standard-text);
342
- margin: -0.5rem;
482
+ .eds-alert-box .eds-alert-box__close-button {
483
+ margin-top: -0.3125rem;
343
484
  margin-left: 0.5rem;
344
- width: -moz-fit-content;
345
- width: fit-content;
346
- height: -moz-fit-content;
347
485
  height: fit-content;
486
+ width: fit-content;
348
487
  }
349
- .eds-copyable-text .eds-copyable-text__button, .eds-contrast .eds-copyable-text .eds-copyable-text__button,
350
- .eds-copyable-text .eds-contrast .eds-copyable-text__button,
351
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button,
352
- .eds-contrast .eds-copyable-text .eds-copyable-text__button,
353
- .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button,
354
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button,
355
- .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button {
356
- color: var(--components-alert-copyabletext-standard-text);
488
+ .eds-contrast .eds-alert-box .eds-alert-box__close-button {
489
+ color: var(--components-button-iconbutton-standard-text);
357
490
  }
358
- .eds-copyable-text .eds-copyable-text__button:hover, .eds-contrast .eds-copyable-text .eds-copyable-text__button:hover,
359
- .eds-copyable-text .eds-contrast .eds-copyable-text__button:hover,
360
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:hover,
361
- .eds-contrast .eds-copyable-text .eds-copyable-text__button:hover,
362
- .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:hover,
363
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:hover,
364
- .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:hover {
491
+ .eds-contrast .eds-alert-box .eds-alert-box__close-button:hover {
365
492
  background: var(--components-button-iconbutton-standard-hover);
366
493
  }
367
- .eds-copyable-text .eds-copyable-text__button:active, .eds-contrast .eds-copyable-text .eds-copyable-text__button:active,
368
- .eds-copyable-text .eds-contrast .eds-copyable-text__button:active,
369
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:active,
370
- .eds-contrast .eds-copyable-text .eds-copyable-text__button:active,
371
- .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:active,
372
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:active,
373
- .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:active {
494
+ .eds-contrast .eds-alert-box .eds-alert-box__close-button:active {
374
495
  background: var(--components-button-iconbutton-standard-active);
375
496
  }
376
- .eds-copyable-text .eds-copyable-text__button:focus-visible, .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
377
- .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
378
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
379
- .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
380
- .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
381
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
382
- .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible {
497
+ .eds-contrast .eds-alert-box .eds-alert-box__close-button:focus-visible {
383
498
  outline: 2px solid #181c56;
384
499
  outline-color: var(--basecolors-stroke-focus-standard);
385
- outline-offset: 0.125rem;
386
500
  }
387
- .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible, .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
388
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
389
- .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
390
- .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
391
- .eds-contrast .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
392
- .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
393
- .eds-contrast .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible {
394
- outline-color: var(--basecolors-stroke-focus-standard);
501
+ .eds-contrast .eds-alert-box .eds-alert-box__tooltip {
502
+ background: var(--components-tooltip-tooltip-standard-fill);
503
+ color: var(--components-tooltip-tooltip-standard-text);
395
504
  }
396
- /* DO NOT CHANGE!*/
397
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
398
- /* DO NOT CHANGE!*/
399
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
400
- /* DO NOT CHANGE!*/
505
+ .eds-contrast .eds-alert-box .eds-alert-box__tooltip::after {
506
+ background: var(--components-tooltip-tooltip-standard-fill);
507
+ }/* DO NOT CHANGE!*/
401
508
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
402
- [data-color-mode=light],
403
- :root {
404
- --components-alert-alertbox-information-contrast-border: #067eb2;
405
- --components-alert-alertbox-information-contrast-filldefault: #acd7f1;
406
- --components-alert-alertbox-information-contrast-filltoast: #acd7f1;
407
- --components-alert-alertbox-information-contrast-icondefault: #181c56;
408
- --components-alert-alertbox-information-contrast-icontoast: #181c56;
409
- --components-alert-alertbox-information-contrast-textdefault: #181c56;
410
- --components-alert-alertbox-information-contrast-texttoast: #181c56;
411
- --components-alert-alertbox-information-standard-border: #067eb2;
412
- --components-alert-alertbox-information-standard-filldefault: #e1eff8;
413
- --components-alert-alertbox-information-standard-filltoast: #e1eff8;
414
- --components-alert-alertbox-information-standard-icondefault: #067eb2;
415
- --components-alert-alertbox-information-standard-icontoast: #067eb2;
416
- --components-alert-alertbox-information-standard-textdefault: #181c56;
417
- --components-alert-alertbox-information-standard-texttoast: #181c56;
418
- --components-alert-alertbox-negative-contrast-border: #d31b1b;
419
- --components-alert-alertbox-negative-contrast-filldefault: #ff9494;
420
- --components-alert-alertbox-negative-contrast-filltoast: #ff9494;
421
- --components-alert-alertbox-negative-contrast-icondefault: #181c56;
422
- --components-alert-alertbox-negative-contrast-icontoast: #181c56;
423
- --components-alert-alertbox-negative-contrast-textdefault: #181c56;
424
- --components-alert-alertbox-negative-contrast-texttoast: #181c56;
425
- --components-alert-alertbox-negative-standard-border: #d31b1b;
426
- --components-alert-alertbox-negative-standard-filldefault: #ffcece;
427
- --components-alert-alertbox-negative-standard-filltoast: #ffcece;
428
- --components-alert-alertbox-negative-standard-icondefault: #d31b1b;
429
- --components-alert-alertbox-negative-standard-icontoast: #d31b1b;
430
- --components-alert-alertbox-negative-standard-textdefault: #181c56;
431
- --components-alert-alertbox-negative-standard-texttoast: #181c56;
432
- --components-alert-alertbox-success-contrast-border: #1a8e60;
433
- --components-alert-alertbox-success-contrast-filldefault: #9cd9c2;
434
- --components-alert-alertbox-success-contrast-filltoast: #9cd9c2;
435
- --components-alert-alertbox-success-contrast-icondefault: #181c56;
436
- --components-alert-alertbox-success-contrast-icontoast: #181c56;
437
- --components-alert-alertbox-success-contrast-textdefault: #181c56;
438
- --components-alert-alertbox-success-contrast-texttoast: #181c56;
439
- --components-alert-alertbox-success-standard-border: #1a8e60;
440
- --components-alert-alertbox-success-standard-filldefault: #d0f1e3;
441
- --components-alert-alertbox-success-standard-filltoast: #d0f1e3;
442
- --components-alert-alertbox-success-standard-icondefault: #1a8e60;
443
- --components-alert-alertbox-success-standard-icontoast: #1a8e60;
444
- --components-alert-alertbox-success-standard-textdefault: #181c56;
445
- --components-alert-alertbox-success-standard-texttoast: #181c56;
446
- --components-alert-alertbox-warning-contrast-border: #e9b10c;
447
- --components-alert-alertbox-warning-contrast-filldefault: #ffeeb3;
448
- --components-alert-alertbox-warning-contrast-filltoast: #ffeeb3;
449
- --components-alert-alertbox-warning-contrast-icondefault: #181c56;
450
- --components-alert-alertbox-warning-contrast-icontoast: #181c56;
451
- --components-alert-alertbox-warning-contrast-textdefault: #181c56;
452
- --components-alert-alertbox-warning-contrast-textdefault2: #181c56;
453
- --components-alert-alertbox-warning-standard-border: #e9b10c;
454
- --components-alert-alertbox-warning-standard-filldefault: #fff4cd;
455
- --components-alert-alertbox-warning-standard-filltoast: #fff4cd;
456
- --components-alert-alertbox-warning-standard-icondefault: #181c56;
457
- --components-alert-alertbox-warning-standard-icontoast: #181c56;
458
- --components-alert-alertbox-warning-standard-textdefault: #181c56;
459
- --components-alert-alertbox-warning-standard-texttoast: #181c56;
460
- --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
461
- --components-alert-copyabletext-contrast-border-interactive: #aeb7e2;
462
- --components-alert-copyabletext-contrast-fill: #f6f6f9;
463
- --components-alert-copyabletext-contrast-icon: #181c56;
464
- --components-alert-copyabletext-contrast-text: #181c56;
465
- --components-alert-copyabletext-standard-border: rgba(84, 86, 140, 0.4);
466
- --components-alert-copyabletext-standard-border-interactive: #181c56;
467
- --components-alert-copyabletext-standard-fill: #f6f6f9;
468
- --components-alert-copyabletext-standard-icon: #181c56;
469
- --components-alert-copyabletext-standard-text: #181c56;
509
+ .eds-toast-container {
510
+ position: fixed;
511
+ z-index: 50;
512
+ display: flex;
513
+ align-items: flex-end;
514
+ flex-direction: column;
515
+ }
516
+ .eds-toast-container .eds-alert-box__close-button {
517
+ position: absolute;
518
+ top: 0.75rem;
519
+ right: 0.75rem;
520
+ }
521
+ .eds-toast-container--bottom-right {
522
+ bottom: 1.5rem;
523
+ right: 1.5rem;
524
+ left: 1.5rem;
525
+ }
526
+ .eds-toast-container--top-right {
527
+ top: 1.5rem;
528
+ right: 1.5rem;
529
+ left: 1.5rem;
530
+ }
531
+ .eds-toast-container > * + * {
532
+ margin-top: 1rem;
533
+ }
534
+ @media screen and (min-width: 50rem) {
535
+ .eds-toast-container {
536
+ left: initial;
537
+ }
470
538
  }
471
539
 
472
- [data-color-mode=dark] {
473
- --components-alert-alertbox-information-contrast-border: #067eb2;
474
- --components-alert-alertbox-information-contrast-filldefault: rgba(45, 152, 210, 0.2);
475
- --components-alert-alertbox-information-contrast-filltoast: #acd7f1;
476
- --components-alert-alertbox-information-contrast-icondefault: #acd7f1;
477
- --components-alert-alertbox-information-contrast-icontoast: #181c56;
478
- --components-alert-alertbox-information-contrast-textdefault: #e5e5e9;
479
- --components-alert-alertbox-information-contrast-texttoast: #181c56;
480
- --components-alert-alertbox-information-standard-border: #067eb2;
481
- --components-alert-alertbox-information-standard-filldefault: rgba(45, 152, 210, 0.2);
482
- --components-alert-alertbox-information-standard-filltoast: #acd7f1;
483
- --components-alert-alertbox-information-standard-icondefault: #acd7f1;
484
- --components-alert-alertbox-information-standard-icontoast: #067eb2;
485
- --components-alert-alertbox-information-standard-textdefault: #e5e5e9;
486
- --components-alert-alertbox-information-standard-texttoast: #181c56;
487
- --components-alert-alertbox-negative-contrast-border: #d31b1b;
488
- --components-alert-alertbox-negative-contrast-filldefault: rgba(255, 148, 148, 0.2);
489
- --components-alert-alertbox-negative-contrast-filltoast: #ff9494;
490
- --components-alert-alertbox-negative-contrast-icondefault: #ff9494;
491
- --components-alert-alertbox-negative-contrast-icontoast: #181c56;
492
- --components-alert-alertbox-negative-contrast-textdefault: #e5e5e9;
493
- --components-alert-alertbox-negative-contrast-texttoast: #181c56;
494
- --components-alert-alertbox-negative-standard-border: #d31b1b;
495
- --components-alert-alertbox-negative-standard-filldefault: rgba(255, 148, 148, 0.2);
496
- --components-alert-alertbox-negative-standard-filltoast: #ff9494;
497
- --components-alert-alertbox-negative-standard-icondefault: #ff9494;
498
- --components-alert-alertbox-negative-standard-icontoast: #d31b1b;
499
- --components-alert-alertbox-negative-standard-textdefault: #e5e5e9;
500
- --components-alert-alertbox-negative-standard-texttoast: #181c56;
501
- --components-alert-alertbox-success-contrast-border: #1a8e60;
502
- --components-alert-alertbox-success-contrast-filldefault: rgba(90, 195, 154, 0.2);
503
- --components-alert-alertbox-success-contrast-filltoast: #9cd9c2;
504
- --components-alert-alertbox-success-contrast-icondefault: #9cd9c2;
505
- --components-alert-alertbox-success-contrast-icontoast: #181c56;
506
- --components-alert-alertbox-success-contrast-textdefault: #e5e5e9;
507
- --components-alert-alertbox-success-contrast-texttoast: #181c56;
508
- --components-alert-alertbox-success-standard-border: #1a8e60;
509
- --components-alert-alertbox-success-standard-filldefault: rgba(90, 195, 154, 0.2);
510
- --components-alert-alertbox-success-standard-filltoast: #9cd9c2;
511
- --components-alert-alertbox-success-standard-icondefault: #9cd9c2;
512
- --components-alert-alertbox-success-standard-icontoast: #1a8e60;
513
- --components-alert-alertbox-success-standard-textdefault: #e5e5e9;
514
- --components-alert-alertbox-success-standard-texttoast: #181c56;
515
- --components-alert-alertbox-warning-contrast-border: #e9b10c;
516
- --components-alert-alertbox-warning-contrast-filldefault: rgba(255, 224, 130, 0.2509803922);
517
- --components-alert-alertbox-warning-contrast-filltoast: #ffeeb3;
518
- --components-alert-alertbox-warning-contrast-icondefault: #181c56;
519
- --components-alert-alertbox-warning-contrast-icontoast: #181c56;
520
- --components-alert-alertbox-warning-contrast-textdefault: #e5e5e9;
521
- --components-alert-alertbox-warning-contrast-textdefault2: #e5e5e9;
522
- --components-alert-alertbox-warning-standard-border: #e9b10c;
523
- --components-alert-alertbox-warning-standard-filldefault: rgba(255, 224, 130, 0.2509803922);
524
- --components-alert-alertbox-warning-standard-filltoast: #ffeeb3;
525
- --components-alert-alertbox-warning-standard-icondefault: #ffeeb3;
526
- --components-alert-alertbox-warning-standard-icontoast: #181c56;
527
- --components-alert-alertbox-warning-standard-textdefault: #e5e5e9;
528
- --components-alert-alertbox-warning-standard-texttoast: #181c56;
529
- --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
530
- --components-alert-copyabletext-contrast-border-interactive: #e5e5e9;
531
- --components-alert-copyabletext-contrast-fill: #393a49;
532
- --components-alert-copyabletext-contrast-icon: #e5e5e9;
533
- --components-alert-copyabletext-contrast-text: #e5e5e9;
534
- --components-alert-copyabletext-standard-border: rgba(255, 255, 255, 0);
535
- --components-alert-copyabletext-standard-border-interactive: #e5e5e9;
536
- --components-alert-copyabletext-standard-fill: #393a49;
537
- --components-alert-copyabletext-standard-icon: #e5e5e9;
538
- --components-alert-copyabletext-standard-text: #e5e5e9;
540
+ @keyframes bounceInRight {
541
+ from, 60%, 75%, 90%, to {
542
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
543
+ }
544
+ from {
545
+ opacity: 0;
546
+ transform: translate3d(3000px, 0, 0) scaleX(3);
547
+ }
548
+ 60% {
549
+ opacity: 1;
550
+ transform: translate3d(-25px, 0, 0) scaleX(1);
551
+ }
552
+ 75% {
553
+ transform: translate3d(10px, 0, 0) scaleX(0.98);
554
+ }
555
+ 90% {
556
+ transform: translate3d(-5px, 0, 0) scaleX(0.995);
557
+ }
558
+ to {
559
+ transform: translate3d(0, 0, 0);
560
+ }
539
561
  }
540
-
541
- /* DO NOT CHANGE!*/
542
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
543
- /* DO NOT CHANGE!*/
562
+ @keyframes bounceOutRight {
563
+ 20% {
564
+ opacity: 1;
565
+ transform: translate3d(-20px, 0, 0) scaleX(0.9);
566
+ }
567
+ to {
568
+ opacity: 0;
569
+ transform: translate3d(2000px, 0, 0) scaleX(2);
570
+ }
571
+ }/* DO NOT CHANGE!*/
544
572
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
545
- [data-color-mode=light],
546
- :root {
547
- --basecolors-frame-contrast: #181c56;
548
- --basecolors-frame-contrastalt: #393d79;
549
- --basecolors-frame-contrastalt-2: #292b6a;
550
- --basecolors-frame-default: #ffffff;
551
- --basecolors-frame-elevated: #ffffff;
552
- --basecolors-frame-elevatedalt: #f6f6f9;
553
- --basecolors-frame-subdued: #d9dae8;
554
- --basecolors-frame-tint: #f6f6f9;
555
- --basecolors-shape-accent: #181c56;
556
- --basecolors-shape-bicycle-contrast: #00db9b;
557
- --basecolors-shape-bicycle-default: #388f76;
558
- --basecolors-shape-bus-contrast: #ff6392;
559
- --basecolors-shape-bus-default: #c5044e;
560
- --basecolors-shape-cableway-contrast: #b482fb;
561
- --basecolors-shape-cableway-default: #78469a;
562
- --basecolors-shape-disabled: #6e6f73;
563
- --basecolors-shape-disabledalt: #b6b8ba;
564
- --basecolors-shape-ferry-contrast: #6fdfff;
565
- --basecolors-shape-ferry-default: #0c6693;
566
- --basecolors-shape-funicular-contrast: #b482fb;
567
- --basecolors-shape-funicular-default: #78469a;
568
- --basecolors-shape-helicopter-contrast: #fbafea;
569
- --basecolors-shape-helicopter-default: #800664;
570
- --basecolors-shape-highlight: #ff5959;
571
- --basecolors-shape-light: #ffffff;
572
- --basecolors-shape-mask: #ffffff;
573
- --basecolors-shape-maskalt: #ffffff;
574
- --basecolors-shape-metro-contrast: #f08901;
575
- --basecolors-shape-metro-default: #bf5826;
576
- --basecolors-shape-mobility-contrast: #00db9b;
577
- --basecolors-shape-mobility-default: #388f76;
578
- --basecolors-shape-plane-contrast: #fbafea;
579
- --basecolors-shape-plane-default: #800664;
580
- --basecolors-shape-subdued: #626493;
581
- --basecolors-shape-subduedalt: #d9dae8;
582
- --basecolors-shape-taxi-contrast: #ffe082;
583
- --basecolors-shape-taxi-default: #3d3e40;
584
- --basecolors-shape-train-contrast: #42a5f5;
585
- --basecolors-shape-train-default: #00367f;
586
- --basecolors-shape-tram-contrast: #b482fb;
587
- --basecolors-shape-tram-default: #78469a;
588
- --basecolors-shape-walk-contrast: #8284ab;
589
- --basecolors-shape-walk-default: #8d8e9c;
590
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
591
- --basecolors-shape-airportlinkbus-default: #800664;
592
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
593
- --basecolors-shape-airportlinkrail-default: #800664;
594
- --basecolors-stroke-contrast: #aeb7e2;
595
- --basecolors-stroke-default: #181c56;
596
- --basecolors-stroke-disabled: #949699;
597
- --basecolors-stroke-focus-contrast: #aeb7e2;
598
- --basecolors-stroke-focus-standard: #181c56;
599
- --basecolors-stroke-highlight: #ff5959;
600
- --basecolors-stroke-light: #ffffff;
601
- --basecolors-stroke-subdued: #8284ab;
602
- --basecolors-stroke-subduedalt: #e3e6e8;
603
- --basecolors-text-accent: #181c56;
604
- --basecolors-text-disabled: #6e6f73;
605
- --basecolors-text-disabledalt: #b6b8ba;
606
- --basecolors-text-highlight: #ff5959;
607
- --basecolors-text-light: #ffffff;
608
- --basecolors-text-subdued: #626493;
609
- --basecolors-text-subduedalt: #d9dae8;
573
+ .eds-copyable-text,
574
+ .eds-contrast .eds-copyable-text {
575
+ appearance: none;
576
+ background: none;
577
+ border: 0;
578
+ border-radius: 0;
579
+ color: inherit;
580
+ cursor: pointer;
581
+ display: block;
582
+ font-size: inherit;
583
+ padding: 0;
584
+ position: relative;
585
+ margin: 0 0 1rem 0;
586
+ text-align: left;
587
+ width: 100%;
610
588
  }
611
-
612
- [data-color-mode=dark] {
613
- --basecolors-frame-contrast: #212233;
614
- --basecolors-frame-contrastalt: #141527;
615
- --basecolors-frame-contrastalt-2: #08091c;
616
- --basecolors-frame-default: #08091c;
617
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
618
- --basecolors-frame-elevatedalt: #464755;
619
- --basecolors-frame-subdued: #2d2e3e;
620
- --basecolors-frame-tint: #141527;
621
- --basecolors-shape-accent: #e5e5e9;
622
- --basecolors-shape-bicycle-contrast: #4db295;
623
- --basecolors-shape-bicycle-default: #4db295;
624
- --basecolors-shape-bus-contrast: #ef7398;
625
- --basecolors-shape-bus-default: #ef7398;
626
- --basecolors-shape-cableway-contrast: #b898e5;
627
- --basecolors-shape-cableway-default: #b898e5;
628
- --basecolors-shape-disabled: #b6b8ba;
629
- --basecolors-shape-disabledalt: #b3b4bd;
630
- --basecolors-shape-ferry-contrast: #8ccfe2;
631
- --basecolors-shape-ferry-default: #8ccfe2;
632
- --basecolors-shape-funicular-contrast: #b898e5;
633
- --basecolors-shape-funicular-default: #b898e5;
634
- --basecolors-shape-helicopter-contrast: #f2b8e5;
635
- --basecolors-shape-helicopter-default: #f2b8e5;
636
- --basecolors-shape-highlight: #ff9494;
637
- --basecolors-shape-light: #e5e5e9;
638
- --basecolors-shape-mask: #2d2e3e;
639
- --basecolors-shape-maskalt: #393a49;
640
- --basecolors-shape-metro-contrast: #dd973c;
641
- --basecolors-shape-metro-default: #dd973c;
642
- --basecolors-shape-mobility-contrast: #4db295;
643
- --basecolors-shape-mobility-default: #4db295;
644
- --basecolors-shape-plane-contrast: #f2b8e5;
645
- --basecolors-shape-plane-default: #f2b8e5;
646
- --basecolors-shape-subdued: #b3b4bd;
647
- --basecolors-shape-subduedalt: #b3b4bd;
648
- --basecolors-shape-taxi-contrast: #ffe082;
649
- --basecolors-shape-taxi-default: #ffe082;
650
- --basecolors-shape-train-contrast: #60a2d7;
651
- --basecolors-shape-train-default: #60a2d7;
652
- --basecolors-shape-tram-contrast: #b898e5;
653
- --basecolors-shape-tram-default: #b898e5;
654
- --basecolors-shape-walk-contrast: #8d8e9c;
655
- --basecolors-shape-walk-default: #8d8e9c;
656
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
657
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
658
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
659
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
660
- --basecolors-stroke-contrast: #aeb7e2;
661
- --basecolors-stroke-default: #b3b4bd;
662
- --basecolors-stroke-disabled: #e3e6e8;
663
- --basecolors-stroke-focus-contrast: #aeb7e2;
664
- --basecolors-stroke-focus-standard: #aeb7e2;
665
- --basecolors-stroke-highlight: #ff9494;
666
- --basecolors-stroke-light: #b3b4bd;
667
- --basecolors-stroke-subdued: #81828f;
668
- --basecolors-stroke-subduedalt: #949699;
669
- --basecolors-text-accent: #e5e5e9;
670
- --basecolors-text-disabled: #b6b8ba;
671
- --basecolors-text-disabledalt: #b6b8ba;
672
- --basecolors-text-highlight: #ff9494;
673
- --basecolors-text-light: #e5e5e9;
674
- --basecolors-text-subdued: #b3b4bd;
675
- --basecolors-text-subduedalt: #b3b4bd;
589
+ .eds-copyable-text__preformatted-text,
590
+ .eds-contrast .eds-copyable-text__preformatted-text {
591
+ margin: 0;
592
+ display: flex;
593
+ justify-content: space-between;
594
+ align-items: center;
595
+ transition: border-color 0.1s;
676
596
  }
677
-
678
- :root {
679
- --eds-alert: 1;
597
+ .eds-copyable-text__preformatted-text:hover,
598
+ .eds-contrast .eds-copyable-text__preformatted-text:hover {
599
+ border-color: var(--components-alert-copyabletext-standard-border-interactive);
680
600
  }
681
- /* DO NOT CHANGE!*/
601
+ .eds-contrast .eds-copyable-text__preformatted-text:hover,
602
+ .eds-contrast .eds-contrast .eds-copyable-text__preformatted-text:hover {
603
+ border-color: var(--components-alert-copyabletext-contrast-border-interactive);
604
+ }
605
+ .eds-copyable-text__displayed-text,
606
+ .eds-contrast .eds-copyable-text__displayed-text {
607
+ overflow-x: hidden;
608
+ text-overflow: ellipsis;
609
+ text-wrap: nowrap;
610
+ }
611
+ .eds-copyable-text .eds-copyable-text__button,
612
+ .eds-copyable-text .eds-contrast .eds-copyable-text__button,
613
+ .eds-contrast .eds-copyable-text .eds-copyable-text__button,
614
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button {
615
+ color: var(--components-alert-copyabletext-standard-text);
616
+ margin: -0.5rem;
617
+ margin-left: 0.5rem;
618
+ width: fit-content;
619
+ height: fit-content;
620
+ }
621
+ .eds-copyable-text .eds-copyable-text__button, .eds-contrast .eds-copyable-text .eds-copyable-text__button,
622
+ .eds-copyable-text .eds-contrast .eds-copyable-text__button,
623
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button,
624
+ .eds-contrast .eds-copyable-text .eds-copyable-text__button,
625
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button,
626
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button,
627
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button {
628
+ color: var(--components-alert-copyabletext-standard-text);
629
+ }
630
+ .eds-copyable-text .eds-copyable-text__button:hover, .eds-contrast .eds-copyable-text .eds-copyable-text__button:hover,
631
+ .eds-copyable-text .eds-contrast .eds-copyable-text__button:hover,
632
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:hover,
633
+ .eds-contrast .eds-copyable-text .eds-copyable-text__button:hover,
634
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:hover,
635
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:hover,
636
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:hover {
637
+ background: var(--components-button-iconbutton-standard-hover);
638
+ }
639
+ .eds-copyable-text .eds-copyable-text__button:active, .eds-contrast .eds-copyable-text .eds-copyable-text__button:active,
640
+ .eds-copyable-text .eds-contrast .eds-copyable-text__button:active,
641
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:active,
642
+ .eds-contrast .eds-copyable-text .eds-copyable-text__button:active,
643
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:active,
644
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:active,
645
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:active {
646
+ background: var(--components-button-iconbutton-standard-active);
647
+ }
648
+ .eds-copyable-text .eds-copyable-text__button:focus-visible, .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
649
+ .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
650
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
651
+ .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
652
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
653
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
654
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible {
655
+ outline: 2px solid #181c56;
656
+ outline-color: var(--basecolors-stroke-focus-standard);
657
+ outline-offset: 0.125rem;
658
+ }
659
+ .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible, .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
660
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
661
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
662
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
663
+ .eds-contrast .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
664
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
665
+ .eds-contrast .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible {
666
+ outline-color: var(--basecolors-stroke-focus-standard);
667
+ }/* DO NOT CHANGE!*/
682
668
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
683
669
  .eds-expandable-alert-box .eds-alert-box__content {
684
670
  width: 100%;
@@ -724,4 +710,4 @@
724
710
  font-size: 1rem;
725
711
  padding-left: 0.25rem;
726
712
  color: var(--components-button-iconbutton-standard-text);
727
- }
713
+ }