@entur/chip 0.9.7 → 0.9.9-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/styles.css +718 -668
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -1,694 +1,744 @@
1
- /* DO NOT CHANGE!*/
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
1
  [data-color-mode=light],
8
- :root {
9
- --components-chip-contrast-active: #8794d4;
10
- --components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
11
- --components-chip-contrast-border-disabled: #949699;
12
- --components-chip-contrast-default: rgba(255, 255, 255, 0);
13
- --components-chip-contrast-hover: #626493;
14
- --components-chip-contrast-icon-disabled: #b6b8ba;
15
- --components-chip-contrast-icon-selected: #181c56;
16
- --components-chip-contrast-icon-unselected: #ffffff;
17
- --components-chip-contrast-text-disabled: #b6b8ba;
18
- --components-chip-contrast-text-selected: #181c56;
19
- --components-chip-contrast-text-unselected: #ffffff;
20
- --components-chip-standard-active: #aeb7e2;
21
- --components-chip-standard-border: rgba(84, 86, 140, 0.4);
22
- --components-chip-standard-border-disabled: #949699;
23
- --components-chip-standard-default: rgba(255, 255, 255, 0);
24
- --components-chip-standard-hover: #d9ddf2;
25
- --components-chip-standard-icon-disabled: #6e6f73;
26
- --components-chip-standard-icon-selected: #181c56;
27
- --components-chip-standard-icon-unselected: #181c56;
28
- --components-chip-standard-text-disabled: #6e6f73;
29
- --components-chip-standard-text-selected: #181c56;
30
- --components-chip-standard-text-unselected: #181c56;
2
+ :root{
3
+ --components-chip-contrast-active:#8794d4;
4
+ --components-chip-contrast-border:rgba(174, 183, 226, 0.6980392157);
5
+ --components-chip-contrast-border-disabled:#949699;
6
+ --components-chip-contrast-default:rgba(255, 255, 255, 0);
7
+ --components-chip-contrast-hover:#626493;
8
+ --components-chip-contrast-icon-disabled:#b6b8ba;
9
+ --components-chip-contrast-icon-selected:#181c56;
10
+ --components-chip-contrast-icon-unselected:#ffffff;
11
+ --components-chip-contrast-text-disabled:#b6b8ba;
12
+ --components-chip-contrast-text-selected:#181c56;
13
+ --components-chip-contrast-text-unselected:#ffffff;
14
+ --components-chip-standard-active:#aeb7e2;
15
+ --components-chip-standard-border:rgba(84, 86, 140, 0.4);
16
+ --components-chip-standard-border-disabled:#949699;
17
+ --components-chip-standard-default:rgba(255, 255, 255, 0);
18
+ --components-chip-standard-hover:#d9ddf2;
19
+ --components-chip-standard-icon-disabled:#6e6f73;
20
+ --components-chip-standard-icon-selected:#181c56;
21
+ --components-chip-standard-icon-unselected:#181c56;
22
+ --components-chip-standard-text-disabled:#6e6f73;
23
+ --components-chip-standard-text-selected:#181c56;
24
+ --components-chip-standard-text-unselected:#181c56;
31
25
  }
32
26
 
33
- [data-color-mode=dark] {
34
- --components-chip-contrast-active: #8794d4;
35
- --components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
36
- --components-chip-contrast-border-disabled: #949699;
37
- --components-chip-contrast-default: rgba(255, 255, 255, 0);
38
- --components-chip-contrast-hover: #626493;
39
- --components-chip-contrast-icon-disabled: #b6b8ba;
40
- --components-chip-contrast-icon-selected: #08091c;
41
- --components-chip-contrast-icon-unselected: #e5e5e9;
42
- --components-chip-contrast-text-disabled: #b6b8ba;
43
- --components-chip-contrast-text-selected: #08091c;
44
- --components-chip-contrast-text-unselected: #e5e5e9;
45
- --components-chip-standard-active: #8794d4;
46
- --components-chip-standard-border: rgba(174, 183, 226, 0.6980392157);
47
- --components-chip-standard-border-disabled: #949699;
48
- --components-chip-standard-default: rgba(255, 255, 255, 0);
49
- --components-chip-standard-hover: #626493;
50
- --components-chip-standard-icon-disabled: #b6b8ba;
51
- --components-chip-standard-icon-selected: #08091c;
52
- --components-chip-standard-icon-unselected: #e5e5e9;
53
- --components-chip-standard-text-disabled: #b6b8ba;
54
- --components-chip-standard-text-selected: #08091c;
55
- --components-chip-standard-text-unselected: #e5e5e9;
27
+ [data-color-mode=dark]{
28
+ --components-chip-contrast-active:#8794d4;
29
+ --components-chip-contrast-border:rgba(174, 183, 226, 0.6980392157);
30
+ --components-chip-contrast-border-disabled:#949699;
31
+ --components-chip-contrast-default:rgba(255, 255, 255, 0);
32
+ --components-chip-contrast-hover:#626493;
33
+ --components-chip-contrast-icon-disabled:#b6b8ba;
34
+ --components-chip-contrast-icon-selected:#08091c;
35
+ --components-chip-contrast-icon-unselected:#e5e5e9;
36
+ --components-chip-contrast-text-disabled:#b6b8ba;
37
+ --components-chip-contrast-text-selected:#08091c;
38
+ --components-chip-contrast-text-unselected:#e5e5e9;
39
+ --components-chip-standard-active:#8794d4;
40
+ --components-chip-standard-border:rgba(174, 183, 226, 0.6980392157);
41
+ --components-chip-standard-border-disabled:#949699;
42
+ --components-chip-standard-default:rgba(255, 255, 255, 0);
43
+ --components-chip-standard-hover:#626493;
44
+ --components-chip-standard-icon-disabled:#b6b8ba;
45
+ --components-chip-standard-icon-selected:#08091c;
46
+ --components-chip-standard-icon-unselected:#e5e5e9;
47
+ --components-chip-standard-text-disabled:#b6b8ba;
48
+ --components-chip-standard-text-selected:#08091c;
49
+ --components-chip-standard-text-unselected:#e5e5e9;
56
50
  }
57
-
58
- /* DO NOT CHANGE!*/
59
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
60
- /* DO NOT CHANGE!*/
61
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
62
51
  [data-color-mode=light],
63
- :root {
64
- --basecolors-frame-contrast: #181c56;
65
- --basecolors-frame-contrastalt: #393d79;
66
- --basecolors-frame-contrastalt-2: #292b6a;
67
- --basecolors-frame-default: #ffffff;
68
- --basecolors-frame-elevated: #ffffff;
69
- --basecolors-frame-elevatedalt: #f6f6f9;
70
- --basecolors-frame-subdued: #d9dae8;
71
- --basecolors-frame-tint: #f6f6f9;
72
- --basecolors-shape-accent: #181c56;
73
- --basecolors-shape-bicycle-contrast: #00db9b;
74
- --basecolors-shape-bicycle-default: #33826b;
75
- --basecolors-shape-bus-contrast: #ff6392;
76
- --basecolors-shape-bus-default: #c5044e;
77
- --basecolors-shape-cableway-contrast: #b482fb;
78
- --basecolors-shape-cableway-default: #78469a;
79
- --basecolors-shape-disabled: #6e6f73;
80
- --basecolors-shape-disabledalt: #b6b8ba;
81
- --basecolors-shape-ferry-contrast: #6fdfff;
82
- --basecolors-shape-ferry-default: #0c6693;
83
- --basecolors-shape-funicular-contrast: #b482fb;
84
- --basecolors-shape-funicular-default: #78469a;
85
- --basecolors-shape-helicopter-contrast: #fbafea;
86
- --basecolors-shape-helicopter-default: #800664;
87
- --basecolors-shape-highlight: #ff5959;
88
- --basecolors-shape-light: #ffffff;
89
- --basecolors-shape-mask: #ffffff;
90
- --basecolors-shape-maskalt: #ffffff;
91
- --basecolors-shape-metro-contrast: #f08901;
92
- --basecolors-shape-metro-default: #bf5826;
93
- --basecolors-shape-mobility-contrast: #00db9b;
94
- --basecolors-shape-mobility-default: #33826b;
95
- --basecolors-shape-plane-contrast: #fbafea;
96
- --basecolors-shape-plane-default: #800664;
97
- --basecolors-shape-subdued: #626493;
98
- --basecolors-shape-subduedalt: #d9dae8;
99
- --basecolors-shape-taxi-contrast: #ffe082;
100
- --basecolors-shape-taxi-default: #3d3e40;
101
- --basecolors-shape-train-contrast: #42a5f5;
102
- --basecolors-shape-train-default: #00367f;
103
- --basecolors-shape-tram-contrast: #b482fb;
104
- --basecolors-shape-tram-default: #78469a;
105
- --basecolors-shape-walk-contrast: #8284ab;
106
- --basecolors-shape-walk-default: #8d8e9c;
107
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
108
- --basecolors-shape-airportlinkbus-default: #800664;
109
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
110
- --basecolors-shape-airportlinkrail-default: #800664;
111
- --basecolors-stroke-contrast: #aeb7e2;
112
- --basecolors-stroke-default: #181c56;
113
- --basecolors-stroke-disabled: #949699;
114
- --basecolors-stroke-focus-contrast: #aeb7e2;
115
- --basecolors-stroke-focus-standard: #181c56;
116
- --basecolors-stroke-highlight: #ff5959;
117
- --basecolors-stroke-light: #ffffff;
118
- --basecolors-stroke-subdued: #8284ab;
119
- --basecolors-stroke-subduedalt: #e3e6e8;
120
- --basecolors-text-accent: #181c56;
121
- --basecolors-text-disabled: #6e6f73;
122
- --basecolors-text-disabledalt: #b6b8ba;
123
- --basecolors-text-highlight: #ff5959;
124
- --basecolors-text-light: #ffffff;
125
- --basecolors-text-subdued: #626493;
126
- --basecolors-text-subduedalt: #d9dae8;
52
+ :root{
53
+ --basecolors-frame-contrast:#181c56;
54
+ --basecolors-frame-contrastalt:#393d79;
55
+ --basecolors-frame-contrastalt-2:#292b6a;
56
+ --basecolors-frame-default:#ffffff;
57
+ --basecolors-frame-elevated:#ffffff;
58
+ --basecolors-frame-elevatedalt:#f6f6f9;
59
+ --basecolors-frame-subdued:#d9dae8;
60
+ --basecolors-frame-tint:#f6f6f9;
61
+ --basecolors-shape-accent:#181c56;
62
+ --basecolors-shape-bicycle-contrast:#00db9b;
63
+ --basecolors-shape-bicycle-default:#33826b;
64
+ --basecolors-shape-bus-contrast:#ff6392;
65
+ --basecolors-shape-bus-default:#c5044e;
66
+ --basecolors-shape-cableway-contrast:#b482fb;
67
+ --basecolors-shape-cableway-default:#78469a;
68
+ --basecolors-shape-disabled:#6e6f73;
69
+ --basecolors-shape-disabledalt:#b6b8ba;
70
+ --basecolors-shape-ferry-contrast:#6fdfff;
71
+ --basecolors-shape-ferry-default:#0c6693;
72
+ --basecolors-shape-funicular-contrast:#b482fb;
73
+ --basecolors-shape-funicular-default:#78469a;
74
+ --basecolors-shape-helicopter-contrast:#fbafea;
75
+ --basecolors-shape-helicopter-default:#800664;
76
+ --basecolors-shape-highlight:#ff5959;
77
+ --basecolors-shape-light:#ffffff;
78
+ --basecolors-shape-mask:#ffffff;
79
+ --basecolors-shape-maskalt:#ffffff;
80
+ --basecolors-shape-metro-contrast:#f08901;
81
+ --basecolors-shape-metro-default:#bf5826;
82
+ --basecolors-shape-mobility-contrast:#00db9b;
83
+ --basecolors-shape-mobility-default:#33826b;
84
+ --basecolors-shape-plane-contrast:#fbafea;
85
+ --basecolors-shape-plane-default:#800664;
86
+ --basecolors-shape-subdued:#626493;
87
+ --basecolors-shape-subduedalt:#d9dae8;
88
+ --basecolors-shape-taxi-contrast:#ffe082;
89
+ --basecolors-shape-taxi-default:#3d3e40;
90
+ --basecolors-shape-train-contrast:#42a5f5;
91
+ --basecolors-shape-train-default:#00367f;
92
+ --basecolors-shape-tram-contrast:#b482fb;
93
+ --basecolors-shape-tram-default:#78469a;
94
+ --basecolors-shape-walk-contrast:#8284ab;
95
+ --basecolors-shape-walk-default:#8d8e9c;
96
+ --basecolors-shape-airportlinkbus-contrast:#fbafea;
97
+ --basecolors-shape-airportlinkbus-default:#800664;
98
+ --basecolors-shape-airportlinkrail-contrast:#fbafea;
99
+ --basecolors-shape-airportlinkrail-default:#800664;
100
+ --basecolors-stroke-contrast:#aeb7e2;
101
+ --basecolors-stroke-default:#181c56;
102
+ --basecolors-stroke-disabled:#949699;
103
+ --basecolors-stroke-focus-contrast:#aeb7e2;
104
+ --basecolors-stroke-focus-standard:#181c56;
105
+ --basecolors-stroke-highlight:#ff5959;
106
+ --basecolors-stroke-light:#ffffff;
107
+ --basecolors-stroke-subdued:#8284ab;
108
+ --basecolors-stroke-subduedalt:#e3e6e8;
109
+ --basecolors-text-accent:#181c56;
110
+ --basecolors-text-disabled:#6e6f73;
111
+ --basecolors-text-disabledalt:#b6b8ba;
112
+ --basecolors-text-highlight:#ff5959;
113
+ --basecolors-text-light:#ffffff;
114
+ --basecolors-text-subdued:#626493;
115
+ --basecolors-text-subduedalt:#d9dae8;
116
+ }
117
+
118
+ [data-color-mode=dark]{
119
+ --basecolors-frame-contrast:#212233;
120
+ --basecolors-frame-contrastalt:#141527;
121
+ --basecolors-frame-contrastalt-2:#08091c;
122
+ --basecolors-frame-default:#08091c;
123
+ --basecolors-frame-elevated:rgba(229, 229, 233, 0.1490196078);
124
+ --basecolors-frame-elevatedalt:#464755;
125
+ --basecolors-frame-subdued:#2d2e3e;
126
+ --basecolors-frame-tint:#141527;
127
+ --basecolors-shape-accent:#e5e5e9;
128
+ --basecolors-shape-bicycle-contrast:#4db295;
129
+ --basecolors-shape-bicycle-default:#4db295;
130
+ --basecolors-shape-bus-contrast:#ef7398;
131
+ --basecolors-shape-bus-default:#ef7398;
132
+ --basecolors-shape-cableway-contrast:#b898e5;
133
+ --basecolors-shape-cableway-default:#b898e5;
134
+ --basecolors-shape-disabled:#b6b8ba;
135
+ --basecolors-shape-disabledalt:#b3b4bd;
136
+ --basecolors-shape-ferry-contrast:#8ccfe2;
137
+ --basecolors-shape-ferry-default:#8ccfe2;
138
+ --basecolors-shape-funicular-contrast:#b898e5;
139
+ --basecolors-shape-funicular-default:#b898e5;
140
+ --basecolors-shape-helicopter-contrast:#f2b8e5;
141
+ --basecolors-shape-helicopter-default:#f2b8e5;
142
+ --basecolors-shape-highlight:#ff9494;
143
+ --basecolors-shape-light:#e5e5e9;
144
+ --basecolors-shape-mask:#2d2e3e;
145
+ --basecolors-shape-maskalt:#393a49;
146
+ --basecolors-shape-metro-contrast:#dd973c;
147
+ --basecolors-shape-metro-default:#dd973c;
148
+ --basecolors-shape-mobility-contrast:#4db295;
149
+ --basecolors-shape-mobility-default:#4db295;
150
+ --basecolors-shape-plane-contrast:#f2b8e5;
151
+ --basecolors-shape-plane-default:#f2b8e5;
152
+ --basecolors-shape-subdued:#b3b4bd;
153
+ --basecolors-shape-subduedalt:#b3b4bd;
154
+ --basecolors-shape-taxi-contrast:#ffe082;
155
+ --basecolors-shape-taxi-default:#ffe082;
156
+ --basecolors-shape-train-contrast:#60a2d7;
157
+ --basecolors-shape-train-default:#60a2d7;
158
+ --basecolors-shape-tram-contrast:#b898e5;
159
+ --basecolors-shape-tram-default:#b898e5;
160
+ --basecolors-shape-walk-contrast:#8d8e9c;
161
+ --basecolors-shape-walk-default:#8d8e9c;
162
+ --basecolors-shape-airportlinkbus-contrast:#f2b8e5;
163
+ --basecolors-shape-airportlinkbus-default:#f2b8e5;
164
+ --basecolors-shape-airportlinkrail-contrast:#f2b8e5;
165
+ --basecolors-shape-airportlinkrail-default:#f2b8e5;
166
+ --basecolors-stroke-contrast:#aeb7e2;
167
+ --basecolors-stroke-default:#b3b4bd;
168
+ --basecolors-stroke-disabled:#e3e6e8;
169
+ --basecolors-stroke-focus-contrast:#aeb7e2;
170
+ --basecolors-stroke-focus-standard:#aeb7e2;
171
+ --basecolors-stroke-highlight:#ff9494;
172
+ --basecolors-stroke-light:#b3b4bd;
173
+ --basecolors-stroke-subdued:#81828f;
174
+ --basecolors-stroke-subduedalt:#949699;
175
+ --basecolors-text-accent:#e5e5e9;
176
+ --basecolors-text-disabled:#b6b8ba;
177
+ --basecolors-text-disabledalt:#b6b8ba;
178
+ --basecolors-text-highlight:#ff9494;
179
+ --basecolors-text-light:#e5e5e9;
180
+ --basecolors-text-subdued:#b3b4bd;
181
+ --basecolors-text-subduedalt:#b3b4bd;
127
182
  }
128
183
 
129
- [data-color-mode=dark] {
130
- --basecolors-frame-contrast: #212233;
131
- --basecolors-frame-contrastalt: #141527;
132
- --basecolors-frame-contrastalt-2: #08091c;
133
- --basecolors-frame-default: #08091c;
134
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
135
- --basecolors-frame-elevatedalt: #464755;
136
- --basecolors-frame-subdued: #2d2e3e;
137
- --basecolors-frame-tint: #141527;
138
- --basecolors-shape-accent: #e5e5e9;
139
- --basecolors-shape-bicycle-contrast: #4db295;
140
- --basecolors-shape-bicycle-default: #4db295;
141
- --basecolors-shape-bus-contrast: #ef7398;
142
- --basecolors-shape-bus-default: #ef7398;
143
- --basecolors-shape-cableway-contrast: #b898e5;
144
- --basecolors-shape-cableway-default: #b898e5;
145
- --basecolors-shape-disabled: #b6b8ba;
146
- --basecolors-shape-disabledalt: #b3b4bd;
147
- --basecolors-shape-ferry-contrast: #8ccfe2;
148
- --basecolors-shape-ferry-default: #8ccfe2;
149
- --basecolors-shape-funicular-contrast: #b898e5;
150
- --basecolors-shape-funicular-default: #b898e5;
151
- --basecolors-shape-helicopter-contrast: #f2b8e5;
152
- --basecolors-shape-helicopter-default: #f2b8e5;
153
- --basecolors-shape-highlight: #ff9494;
154
- --basecolors-shape-light: #e5e5e9;
155
- --basecolors-shape-mask: #2d2e3e;
156
- --basecolors-shape-maskalt: #393a49;
157
- --basecolors-shape-metro-contrast: #dd973c;
158
- --basecolors-shape-metro-default: #dd973c;
159
- --basecolors-shape-mobility-contrast: #4db295;
160
- --basecolors-shape-mobility-default: #4db295;
161
- --basecolors-shape-plane-contrast: #f2b8e5;
162
- --basecolors-shape-plane-default: #f2b8e5;
163
- --basecolors-shape-subdued: #b3b4bd;
164
- --basecolors-shape-subduedalt: #b3b4bd;
165
- --basecolors-shape-taxi-contrast: #ffe082;
166
- --basecolors-shape-taxi-default: #ffe082;
167
- --basecolors-shape-train-contrast: #60a2d7;
168
- --basecolors-shape-train-default: #60a2d7;
169
- --basecolors-shape-tram-contrast: #b898e5;
170
- --basecolors-shape-tram-default: #b898e5;
171
- --basecolors-shape-walk-contrast: #8d8e9c;
172
- --basecolors-shape-walk-default: #8d8e9c;
173
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
174
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
175
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
176
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
177
- --basecolors-stroke-contrast: #aeb7e2;
178
- --basecolors-stroke-default: #b3b4bd;
179
- --basecolors-stroke-disabled: #e3e6e8;
180
- --basecolors-stroke-focus-contrast: #aeb7e2;
181
- --basecolors-stroke-focus-standard: #aeb7e2;
182
- --basecolors-stroke-highlight: #ff9494;
183
- --basecolors-stroke-light: #b3b4bd;
184
- --basecolors-stroke-subdued: #81828f;
185
- --basecolors-stroke-subduedalt: #949699;
186
- --basecolors-text-accent: #e5e5e9;
187
- --basecolors-text-disabled: #b6b8ba;
188
- --basecolors-text-disabledalt: #b6b8ba;
189
- --basecolors-text-highlight: #ff9494;
190
- --basecolors-text-light: #e5e5e9;
191
- --basecolors-text-subdued: #b3b4bd;
192
- --basecolors-text-subduedalt: #b3b4bd;
184
+ :root{
185
+ --eds-chip:1;
186
+ }.eds-chip{
187
+ background:transparent;
188
+ border:0.0625rem solid var(--components-chip-standard-border);
189
+ -webkit-border-radius:1rem;
190
+ -moz-border-radius:1rem;
191
+ border-radius:1rem;
192
+ color:var(--components-chip-standard-text-unselected);
193
+ font-family:inherit;
194
+ -webkit-transition:background 0.1s ease-out, border 0.1s ease-out;
195
+ -o-transition:background 0.1s ease-out, border 0.1s ease-out;
196
+ -moz-transition:background 0.1s ease-out, border 0.1s ease-out;
197
+ transition:background 0.1s ease-out, border 0.1s ease-out;
198
+ display:-webkit-box;
199
+ display:-webkit-flex;
200
+ display:-moz-box;
201
+ display:flex;
202
+ -webkit-box-pack:center;
203
+ -webkit-justify-content:center;
204
+ -moz-box-pack:center;
205
+ justify-content:center;
206
+ -webkit-box-align:center;
207
+ -webkit-align-items:center;
208
+ -moz-box-align:center;
209
+ align-items:center;
210
+ white-space:nowrap;
211
+ }
212
+ .eds-chip svg{
213
+ font-size:0.875rem;
214
+ }
215
+ .eds-contrast .eds-chip{
216
+ background-color:transparent;
217
+ color:var(--components-chip-contrast-text-unselected);
218
+ border-color:var(--components-chip-contrast-border);
219
+ }
220
+ .eds-chip--size-small{
221
+ height:1.5rem;
222
+ min-width:2.5rem;
223
+ padding:0 0.5rem;
224
+ font-size:0.75rem;
225
+ }
226
+ .eds-chip--size-small .eds-tag-chip__close-button svg{
227
+ width:1rem;
228
+ height:1rem;
229
+ }
230
+ .eds-chip--size-medium{
231
+ height:2rem;
232
+ min-width:3rem;
233
+ padding:0 0.75rem;
234
+ font-size:0.875rem;
235
+ }
236
+ .eds-chip--leading-icon > svg:first-of-type{
237
+ margin-right:0.25rem;
238
+ }
239
+ .eds-chip--trailing-icon > svg:last-of-type{
240
+ margin-left:0.25rem;
241
+ }.eds-choice-chip{
242
+ cursor:pointer;
243
+ display:inline-block;
244
+ margin-right:0.75rem;
245
+ position:relative;
246
+ -webkit-transition:all 0.1s ease-out;
247
+ -o-transition:all 0.1s ease-out;
248
+ -moz-transition:all 0.1s ease-out;
249
+ transition:all 0.1s ease-out;
250
+ }
251
+ .eds-choice-chip__input{
252
+ -webkit-appearance:none;
253
+ -moz-appearance:none;
254
+ appearance:none;
255
+ height:0;
256
+ position:absolute;
257
+ width:0;
258
+ }
259
+ .eds-choice-chip__input ~ .eds-chip{
260
+ background-color:var(--components-chip-standard-default);
261
+ color:var(--components-chip-standard-text-unselected);
262
+ border-color:var(--components-chip-standard-border);
263
+ }
264
+ .eds-contrast .eds-choice-chip__input ~ .eds-chip{
265
+ border-color:var(--components-chip-contrast-border);
266
+ color:var(--components-chip-contrast-text-unselected);
267
+ background-color:var(--components-chip-contrast-default);
268
+ }
269
+ .eds-choice-chip__input:checked ~ .eds-chip{
270
+ background-color:var(--components-chip-standard-active);
271
+ color:var(--components-chip-standard-text-selected);
272
+ border-color:transparent;
273
+ }
274
+ .eds-contrast .eds-choice-chip__input:checked ~ .eds-chip{
275
+ background-color:var(--components-chip-contrast-active);
276
+ }
277
+ .eds-contrast .eds-choice-chip__input:checked ~ .eds-chip:hover{
278
+ color:var(--components-chip-contrast-text-unselected);
279
+ }
280
+ .eds-choice-chip__input:focus-visible ~ .eds-chip{
281
+ outline:2px solid #181c56;
282
+ outline-color:var(--basecolors-stroke-focus-standard);
283
+ outline-offset:0.125rem;
284
+ }
285
+ .eds-contrast .eds-choice-chip__input:focus-visible ~ .eds-chip{
286
+ outline-color:var(--basecolors-stroke-focus-contrast);
287
+ }
288
+ .eds-choice-chip__input:not(:disabled):hover ~ .eds-chip{
289
+ border-color:var(--components-chip-standard-border);
290
+ background-color:var(--components-chip-standard-hover);
291
+ color:var(--components-chip-standard-text-unselected);
292
+ }
293
+ .eds-contrast .eds-choice-chip__input:not(:disabled):hover ~ .eds-chip{
294
+ border-color:transparent;
295
+ background-color:var(--components-chip-contrast-hover);
296
+ color:var(--components-chip-contrast-text-unselected);
297
+ }
298
+ .eds-choice-chip__input:not(:disabled):active ~ .eds-chip{
299
+ background-color:var(--components-chip-standard-active);
300
+ border-color:transparent;
301
+ color:var(--components-chip-contrast-text-selected);
302
+ }
303
+ .eds-contrast .eds-choice-chip__input:not(:disabled):active ~ .eds-chip{
304
+ background-color:var(--components-chip-contrast-active);
305
+ }
306
+ .eds-choice-chip .eds-chip--disabled{
307
+ border-style:dashed;
308
+ cursor:not-allowed;
309
+ color:var(--components-chip-standard-text-disabled);
310
+ }
311
+ .eds-contrast .eds-choice-chip .eds-chip--disabled{
312
+ opacity:1;
313
+ border-color:var(--components-chip-contrast-border-disabled);
314
+ color:var(--components-chip-contrast-text-disabled);
315
+ }[data-color-mode=light],
316
+ :root{
317
+ --components-chip-contrast-active:#8794d4;
318
+ --components-chip-contrast-border:rgba(174, 183, 226, 0.6980392157);
319
+ --components-chip-contrast-border-disabled:#949699;
320
+ --components-chip-contrast-default:rgba(255, 255, 255, 0);
321
+ --components-chip-contrast-hover:#626493;
322
+ --components-chip-contrast-icon-disabled:#b6b8ba;
323
+ --components-chip-contrast-icon-selected:#181c56;
324
+ --components-chip-contrast-icon-unselected:#ffffff;
325
+ --components-chip-contrast-text-disabled:#b6b8ba;
326
+ --components-chip-contrast-text-selected:#181c56;
327
+ --components-chip-contrast-text-unselected:#ffffff;
328
+ --components-chip-standard-active:#aeb7e2;
329
+ --components-chip-standard-border:rgba(84, 86, 140, 0.4);
330
+ --components-chip-standard-border-disabled:#949699;
331
+ --components-chip-standard-default:rgba(255, 255, 255, 0);
332
+ --components-chip-standard-hover:#d9ddf2;
333
+ --components-chip-standard-icon-disabled:#6e6f73;
334
+ --components-chip-standard-icon-selected:#181c56;
335
+ --components-chip-standard-icon-unselected:#181c56;
336
+ --components-chip-standard-text-disabled:#6e6f73;
337
+ --components-chip-standard-text-selected:#181c56;
338
+ --components-chip-standard-text-unselected:#181c56;
193
339
  }
194
340
 
195
- :root {
196
- --eds-chip: 1;
197
- }/* DO NOT CHANGE!*/
198
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
199
- .eds-chip {
200
- background: transparent;
201
- border: 0.0625rem solid var(--components-chip-standard-border);
202
- border-radius: 1rem;
203
- color: var(--components-chip-standard-text-unselected);
204
- font-family: inherit;
205
- transition: background 0.1s ease-out, border 0.1s ease-out;
206
- display: flex;
207
- justify-content: center;
208
- align-items: center;
209
- white-space: nowrap;
210
- }
211
- .eds-chip svg {
212
- font-size: 0.875rem;
213
- }
214
- .eds-contrast .eds-chip {
215
- background-color: transparent;
216
- color: var(--components-chip-contrast-text-unselected);
217
- border-color: var(--components-chip-contrast-border);
218
- }
219
- .eds-chip--size-small {
220
- height: 1.5rem;
221
- min-width: 2.5rem;
222
- padding: 0 0.5rem;
223
- font-size: 0.75rem;
224
- }
225
- .eds-chip--size-small .eds-tag-chip__close-button svg {
226
- width: 1rem;
227
- height: 1rem;
228
- }
229
- .eds-chip--size-medium {
230
- height: 2rem;
231
- min-width: 3rem;
232
- padding: 0 0.75rem;
233
- font-size: 0.875rem;
234
- }
235
- .eds-chip--leading-icon > svg:first-of-type {
236
- margin-right: 0.25rem;
237
- }
238
- .eds-chip--trailing-icon > svg:last-of-type {
239
- margin-left: 0.25rem;
240
- }/* DO NOT CHANGE!*/
241
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
242
- .eds-choice-chip {
243
- cursor: pointer;
244
- display: inline-block;
245
- margin-right: 0.75rem;
246
- position: relative;
247
- transition: all 0.1s ease-out;
248
- }
249
- .eds-choice-chip__input {
250
- appearance: none;
251
- height: 0;
252
- position: absolute;
253
- width: 0;
254
- -webkit-appearance: none;
255
- }
256
- .eds-choice-chip__input ~ .eds-chip {
257
- background-color: var(--components-chip-standard-default);
258
- color: var(--components-chip-standard-text-unselected);
259
- border-color: var(--components-chip-standard-border);
260
- }
261
- .eds-contrast .eds-choice-chip__input ~ .eds-chip {
262
- border-color: var(--components-chip-contrast-border);
263
- color: var(--components-chip-contrast-text-unselected);
264
- background-color: var(--components-chip-contrast-default);
265
- }
266
- .eds-choice-chip__input:checked ~ .eds-chip {
267
- background-color: var(--components-chip-standard-active);
268
- color: var(--components-chip-standard-text-selected);
269
- border-color: transparent;
270
- }
271
- .eds-contrast .eds-choice-chip__input:checked ~ .eds-chip {
272
- background-color: var(--components-chip-contrast-active);
273
- }
274
- .eds-contrast .eds-choice-chip__input:checked ~ .eds-chip:hover {
275
- color: var(--components-chip-contrast-text-unselected);
276
- }
277
- .eds-choice-chip__input:focus-visible ~ .eds-chip {
278
- outline: 2px solid #181c56;
279
- outline-color: var(--basecolors-stroke-focus-standard);
280
- outline-offset: 0.125rem;
281
- }
282
- .eds-contrast .eds-choice-chip__input:focus-visible ~ .eds-chip {
283
- outline-color: var(--basecolors-stroke-focus-contrast);
284
- }
285
- .eds-choice-chip__input:not(:disabled):hover ~ .eds-chip {
286
- border-color: var(--components-chip-standard-border);
287
- background-color: var(--components-chip-standard-hover);
288
- color: var(--components-chip-standard-text-unselected);
289
- }
290
- .eds-contrast .eds-choice-chip__input:not(:disabled):hover ~ .eds-chip {
291
- border-color: transparent;
292
- background-color: var(--components-chip-contrast-hover);
293
- color: var(--components-chip-contrast-text-unselected);
294
- }
295
- .eds-choice-chip__input:not(:disabled):active ~ .eds-chip {
296
- background-color: var(--components-chip-standard-active);
297
- border-color: transparent;
298
- color: var(--components-chip-contrast-text-selected);
299
- }
300
- .eds-contrast .eds-choice-chip__input:not(:disabled):active ~ .eds-chip {
301
- background-color: var(--components-chip-contrast-active);
302
- }
303
- .eds-choice-chip .eds-chip--disabled {
304
- border-style: dashed;
305
- cursor: not-allowed;
306
- color: var(--components-chip-standard-text-disabled);
307
- }
308
- .eds-contrast .eds-choice-chip .eds-chip--disabled {
309
- opacity: 1;
310
- border-color: var(--components-chip-contrast-border-disabled);
311
- color: var(--components-chip-contrast-text-disabled);
312
- }/* DO NOT CHANGE!*/
313
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
314
- /* DO NOT CHANGE!*/
315
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
316
- /* DO NOT CHANGE!*/
317
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
318
- /* DO NOT CHANGE!*/
319
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
341
+ [data-color-mode=dark]{
342
+ --components-chip-contrast-active:#8794d4;
343
+ --components-chip-contrast-border:rgba(174, 183, 226, 0.6980392157);
344
+ --components-chip-contrast-border-disabled:#949699;
345
+ --components-chip-contrast-default:rgba(255, 255, 255, 0);
346
+ --components-chip-contrast-hover:#626493;
347
+ --components-chip-contrast-icon-disabled:#b6b8ba;
348
+ --components-chip-contrast-icon-selected:#08091c;
349
+ --components-chip-contrast-icon-unselected:#e5e5e9;
350
+ --components-chip-contrast-text-disabled:#b6b8ba;
351
+ --components-chip-contrast-text-selected:#08091c;
352
+ --components-chip-contrast-text-unselected:#e5e5e9;
353
+ --components-chip-standard-active:#8794d4;
354
+ --components-chip-standard-border:rgba(174, 183, 226, 0.6980392157);
355
+ --components-chip-standard-border-disabled:#949699;
356
+ --components-chip-standard-default:rgba(255, 255, 255, 0);
357
+ --components-chip-standard-hover:#626493;
358
+ --components-chip-standard-icon-disabled:#b6b8ba;
359
+ --components-chip-standard-icon-selected:#08091c;
360
+ --components-chip-standard-icon-unselected:#e5e5e9;
361
+ --components-chip-standard-text-disabled:#b6b8ba;
362
+ --components-chip-standard-text-selected:#08091c;
363
+ --components-chip-standard-text-unselected:#e5e5e9;
364
+ }
320
365
  [data-color-mode=light],
321
- :root {
322
- --components-chip-contrast-active: #8794d4;
323
- --components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
324
- --components-chip-contrast-border-disabled: #949699;
325
- --components-chip-contrast-default: rgba(255, 255, 255, 0);
326
- --components-chip-contrast-hover: #626493;
327
- --components-chip-contrast-icon-disabled: #b6b8ba;
328
- --components-chip-contrast-icon-selected: #181c56;
329
- --components-chip-contrast-icon-unselected: #ffffff;
330
- --components-chip-contrast-text-disabled: #b6b8ba;
331
- --components-chip-contrast-text-selected: #181c56;
332
- --components-chip-contrast-text-unselected: #ffffff;
333
- --components-chip-standard-active: #aeb7e2;
334
- --components-chip-standard-border: rgba(84, 86, 140, 0.4);
335
- --components-chip-standard-border-disabled: #949699;
336
- --components-chip-standard-default: rgba(255, 255, 255, 0);
337
- --components-chip-standard-hover: #d9ddf2;
338
- --components-chip-standard-icon-disabled: #6e6f73;
339
- --components-chip-standard-icon-selected: #181c56;
340
- --components-chip-standard-icon-unselected: #181c56;
341
- --components-chip-standard-text-disabled: #6e6f73;
342
- --components-chip-standard-text-selected: #181c56;
343
- --components-chip-standard-text-unselected: #181c56;
366
+ :root{
367
+ --basecolors-frame-contrast:#181c56;
368
+ --basecolors-frame-contrastalt:#393d79;
369
+ --basecolors-frame-contrastalt-2:#292b6a;
370
+ --basecolors-frame-default:#ffffff;
371
+ --basecolors-frame-elevated:#ffffff;
372
+ --basecolors-frame-elevatedalt:#f6f6f9;
373
+ --basecolors-frame-subdued:#d9dae8;
374
+ --basecolors-frame-tint:#f6f6f9;
375
+ --basecolors-shape-accent:#181c56;
376
+ --basecolors-shape-bicycle-contrast:#00db9b;
377
+ --basecolors-shape-bicycle-default:#33826b;
378
+ --basecolors-shape-bus-contrast:#ff6392;
379
+ --basecolors-shape-bus-default:#c5044e;
380
+ --basecolors-shape-cableway-contrast:#b482fb;
381
+ --basecolors-shape-cableway-default:#78469a;
382
+ --basecolors-shape-disabled:#6e6f73;
383
+ --basecolors-shape-disabledalt:#b6b8ba;
384
+ --basecolors-shape-ferry-contrast:#6fdfff;
385
+ --basecolors-shape-ferry-default:#0c6693;
386
+ --basecolors-shape-funicular-contrast:#b482fb;
387
+ --basecolors-shape-funicular-default:#78469a;
388
+ --basecolors-shape-helicopter-contrast:#fbafea;
389
+ --basecolors-shape-helicopter-default:#800664;
390
+ --basecolors-shape-highlight:#ff5959;
391
+ --basecolors-shape-light:#ffffff;
392
+ --basecolors-shape-mask:#ffffff;
393
+ --basecolors-shape-maskalt:#ffffff;
394
+ --basecolors-shape-metro-contrast:#f08901;
395
+ --basecolors-shape-metro-default:#bf5826;
396
+ --basecolors-shape-mobility-contrast:#00db9b;
397
+ --basecolors-shape-mobility-default:#33826b;
398
+ --basecolors-shape-plane-contrast:#fbafea;
399
+ --basecolors-shape-plane-default:#800664;
400
+ --basecolors-shape-subdued:#626493;
401
+ --basecolors-shape-subduedalt:#d9dae8;
402
+ --basecolors-shape-taxi-contrast:#ffe082;
403
+ --basecolors-shape-taxi-default:#3d3e40;
404
+ --basecolors-shape-train-contrast:#42a5f5;
405
+ --basecolors-shape-train-default:#00367f;
406
+ --basecolors-shape-tram-contrast:#b482fb;
407
+ --basecolors-shape-tram-default:#78469a;
408
+ --basecolors-shape-walk-contrast:#8284ab;
409
+ --basecolors-shape-walk-default:#8d8e9c;
410
+ --basecolors-shape-airportlinkbus-contrast:#fbafea;
411
+ --basecolors-shape-airportlinkbus-default:#800664;
412
+ --basecolors-shape-airportlinkrail-contrast:#fbafea;
413
+ --basecolors-shape-airportlinkrail-default:#800664;
414
+ --basecolors-stroke-contrast:#aeb7e2;
415
+ --basecolors-stroke-default:#181c56;
416
+ --basecolors-stroke-disabled:#949699;
417
+ --basecolors-stroke-focus-contrast:#aeb7e2;
418
+ --basecolors-stroke-focus-standard:#181c56;
419
+ --basecolors-stroke-highlight:#ff5959;
420
+ --basecolors-stroke-light:#ffffff;
421
+ --basecolors-stroke-subdued:#8284ab;
422
+ --basecolors-stroke-subduedalt:#e3e6e8;
423
+ --basecolors-text-accent:#181c56;
424
+ --basecolors-text-disabled:#6e6f73;
425
+ --basecolors-text-disabledalt:#b6b8ba;
426
+ --basecolors-text-highlight:#ff5959;
427
+ --basecolors-text-light:#ffffff;
428
+ --basecolors-text-subdued:#626493;
429
+ --basecolors-text-subduedalt:#d9dae8;
344
430
  }
345
431
 
346
- [data-color-mode=dark] {
347
- --components-chip-contrast-active: #8794d4;
348
- --components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
349
- --components-chip-contrast-border-disabled: #949699;
350
- --components-chip-contrast-default: rgba(255, 255, 255, 0);
351
- --components-chip-contrast-hover: #626493;
352
- --components-chip-contrast-icon-disabled: #b6b8ba;
353
- --components-chip-contrast-icon-selected: #08091c;
354
- --components-chip-contrast-icon-unselected: #e5e5e9;
355
- --components-chip-contrast-text-disabled: #b6b8ba;
356
- --components-chip-contrast-text-selected: #08091c;
357
- --components-chip-contrast-text-unselected: #e5e5e9;
358
- --components-chip-standard-active: #8794d4;
359
- --components-chip-standard-border: rgba(174, 183, 226, 0.6980392157);
360
- --components-chip-standard-border-disabled: #949699;
361
- --components-chip-standard-default: rgba(255, 255, 255, 0);
362
- --components-chip-standard-hover: #626493;
363
- --components-chip-standard-icon-disabled: #b6b8ba;
364
- --components-chip-standard-icon-selected: #08091c;
365
- --components-chip-standard-icon-unselected: #e5e5e9;
366
- --components-chip-standard-text-disabled: #b6b8ba;
367
- --components-chip-standard-text-selected: #08091c;
368
- --components-chip-standard-text-unselected: #e5e5e9;
432
+ [data-color-mode=dark]{
433
+ --basecolors-frame-contrast:#212233;
434
+ --basecolors-frame-contrastalt:#141527;
435
+ --basecolors-frame-contrastalt-2:#08091c;
436
+ --basecolors-frame-default:#08091c;
437
+ --basecolors-frame-elevated:rgba(229, 229, 233, 0.1490196078);
438
+ --basecolors-frame-elevatedalt:#464755;
439
+ --basecolors-frame-subdued:#2d2e3e;
440
+ --basecolors-frame-tint:#141527;
441
+ --basecolors-shape-accent:#e5e5e9;
442
+ --basecolors-shape-bicycle-contrast:#4db295;
443
+ --basecolors-shape-bicycle-default:#4db295;
444
+ --basecolors-shape-bus-contrast:#ef7398;
445
+ --basecolors-shape-bus-default:#ef7398;
446
+ --basecolors-shape-cableway-contrast:#b898e5;
447
+ --basecolors-shape-cableway-default:#b898e5;
448
+ --basecolors-shape-disabled:#b6b8ba;
449
+ --basecolors-shape-disabledalt:#b3b4bd;
450
+ --basecolors-shape-ferry-contrast:#8ccfe2;
451
+ --basecolors-shape-ferry-default:#8ccfe2;
452
+ --basecolors-shape-funicular-contrast:#b898e5;
453
+ --basecolors-shape-funicular-default:#b898e5;
454
+ --basecolors-shape-helicopter-contrast:#f2b8e5;
455
+ --basecolors-shape-helicopter-default:#f2b8e5;
456
+ --basecolors-shape-highlight:#ff9494;
457
+ --basecolors-shape-light:#e5e5e9;
458
+ --basecolors-shape-mask:#2d2e3e;
459
+ --basecolors-shape-maskalt:#393a49;
460
+ --basecolors-shape-metro-contrast:#dd973c;
461
+ --basecolors-shape-metro-default:#dd973c;
462
+ --basecolors-shape-mobility-contrast:#4db295;
463
+ --basecolors-shape-mobility-default:#4db295;
464
+ --basecolors-shape-plane-contrast:#f2b8e5;
465
+ --basecolors-shape-plane-default:#f2b8e5;
466
+ --basecolors-shape-subdued:#b3b4bd;
467
+ --basecolors-shape-subduedalt:#b3b4bd;
468
+ --basecolors-shape-taxi-contrast:#ffe082;
469
+ --basecolors-shape-taxi-default:#ffe082;
470
+ --basecolors-shape-train-contrast:#60a2d7;
471
+ --basecolors-shape-train-default:#60a2d7;
472
+ --basecolors-shape-tram-contrast:#b898e5;
473
+ --basecolors-shape-tram-default:#b898e5;
474
+ --basecolors-shape-walk-contrast:#8d8e9c;
475
+ --basecolors-shape-walk-default:#8d8e9c;
476
+ --basecolors-shape-airportlinkbus-contrast:#f2b8e5;
477
+ --basecolors-shape-airportlinkbus-default:#f2b8e5;
478
+ --basecolors-shape-airportlinkrail-contrast:#f2b8e5;
479
+ --basecolors-shape-airportlinkrail-default:#f2b8e5;
480
+ --basecolors-stroke-contrast:#aeb7e2;
481
+ --basecolors-stroke-default:#b3b4bd;
482
+ --basecolors-stroke-disabled:#e3e6e8;
483
+ --basecolors-stroke-focus-contrast:#aeb7e2;
484
+ --basecolors-stroke-focus-standard:#aeb7e2;
485
+ --basecolors-stroke-highlight:#ff9494;
486
+ --basecolors-stroke-light:#b3b4bd;
487
+ --basecolors-stroke-subdued:#81828f;
488
+ --basecolors-stroke-subduedalt:#949699;
489
+ --basecolors-text-accent:#e5e5e9;
490
+ --basecolors-text-disabled:#b6b8ba;
491
+ --basecolors-text-disabledalt:#b6b8ba;
492
+ --basecolors-text-highlight:#ff9494;
493
+ --basecolors-text-light:#e5e5e9;
494
+ --basecolors-text-subdued:#b3b4bd;
495
+ --basecolors-text-subduedalt:#b3b4bd;
369
496
  }
370
497
 
371
- /* DO NOT CHANGE!*/
372
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
373
- /* DO NOT CHANGE!*/
374
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
375
- [data-color-mode=light],
376
- :root {
377
- --basecolors-frame-contrast: #181c56;
378
- --basecolors-frame-contrastalt: #393d79;
379
- --basecolors-frame-contrastalt-2: #292b6a;
380
- --basecolors-frame-default: #ffffff;
381
- --basecolors-frame-elevated: #ffffff;
382
- --basecolors-frame-elevatedalt: #f6f6f9;
383
- --basecolors-frame-subdued: #d9dae8;
384
- --basecolors-frame-tint: #f6f6f9;
385
- --basecolors-shape-accent: #181c56;
386
- --basecolors-shape-bicycle-contrast: #00db9b;
387
- --basecolors-shape-bicycle-default: #33826b;
388
- --basecolors-shape-bus-contrast: #ff6392;
389
- --basecolors-shape-bus-default: #c5044e;
390
- --basecolors-shape-cableway-contrast: #b482fb;
391
- --basecolors-shape-cableway-default: #78469a;
392
- --basecolors-shape-disabled: #6e6f73;
393
- --basecolors-shape-disabledalt: #b6b8ba;
394
- --basecolors-shape-ferry-contrast: #6fdfff;
395
- --basecolors-shape-ferry-default: #0c6693;
396
- --basecolors-shape-funicular-contrast: #b482fb;
397
- --basecolors-shape-funicular-default: #78469a;
398
- --basecolors-shape-helicopter-contrast: #fbafea;
399
- --basecolors-shape-helicopter-default: #800664;
400
- --basecolors-shape-highlight: #ff5959;
401
- --basecolors-shape-light: #ffffff;
402
- --basecolors-shape-mask: #ffffff;
403
- --basecolors-shape-maskalt: #ffffff;
404
- --basecolors-shape-metro-contrast: #f08901;
405
- --basecolors-shape-metro-default: #bf5826;
406
- --basecolors-shape-mobility-contrast: #00db9b;
407
- --basecolors-shape-mobility-default: #33826b;
408
- --basecolors-shape-plane-contrast: #fbafea;
409
- --basecolors-shape-plane-default: #800664;
410
- --basecolors-shape-subdued: #626493;
411
- --basecolors-shape-subduedalt: #d9dae8;
412
- --basecolors-shape-taxi-contrast: #ffe082;
413
- --basecolors-shape-taxi-default: #3d3e40;
414
- --basecolors-shape-train-contrast: #42a5f5;
415
- --basecolors-shape-train-default: #00367f;
416
- --basecolors-shape-tram-contrast: #b482fb;
417
- --basecolors-shape-tram-default: #78469a;
418
- --basecolors-shape-walk-contrast: #8284ab;
419
- --basecolors-shape-walk-default: #8d8e9c;
420
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
421
- --basecolors-shape-airportlinkbus-default: #800664;
422
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
423
- --basecolors-shape-airportlinkrail-default: #800664;
424
- --basecolors-stroke-contrast: #aeb7e2;
425
- --basecolors-stroke-default: #181c56;
426
- --basecolors-stroke-disabled: #949699;
427
- --basecolors-stroke-focus-contrast: #aeb7e2;
428
- --basecolors-stroke-focus-standard: #181c56;
429
- --basecolors-stroke-highlight: #ff5959;
430
- --basecolors-stroke-light: #ffffff;
431
- --basecolors-stroke-subdued: #8284ab;
432
- --basecolors-stroke-subduedalt: #e3e6e8;
433
- --basecolors-text-accent: #181c56;
434
- --basecolors-text-disabled: #6e6f73;
435
- --basecolors-text-disabledalt: #b6b8ba;
436
- --basecolors-text-highlight: #ff5959;
437
- --basecolors-text-light: #ffffff;
438
- --basecolors-text-subdued: #626493;
439
- --basecolors-text-subduedalt: #d9dae8;
498
+ :root{
499
+ --eds-chip:1;
440
500
  }
441
501
 
442
- [data-color-mode=dark] {
443
- --basecolors-frame-contrast: #212233;
444
- --basecolors-frame-contrastalt: #141527;
445
- --basecolors-frame-contrastalt-2: #08091c;
446
- --basecolors-frame-default: #08091c;
447
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
448
- --basecolors-frame-elevatedalt: #464755;
449
- --basecolors-frame-subdued: #2d2e3e;
450
- --basecolors-frame-tint: #141527;
451
- --basecolors-shape-accent: #e5e5e9;
452
- --basecolors-shape-bicycle-contrast: #4db295;
453
- --basecolors-shape-bicycle-default: #4db295;
454
- --basecolors-shape-bus-contrast: #ef7398;
455
- --basecolors-shape-bus-default: #ef7398;
456
- --basecolors-shape-cableway-contrast: #b898e5;
457
- --basecolors-shape-cableway-default: #b898e5;
458
- --basecolors-shape-disabled: #b6b8ba;
459
- --basecolors-shape-disabledalt: #b3b4bd;
460
- --basecolors-shape-ferry-contrast: #8ccfe2;
461
- --basecolors-shape-ferry-default: #8ccfe2;
462
- --basecolors-shape-funicular-contrast: #b898e5;
463
- --basecolors-shape-funicular-default: #b898e5;
464
- --basecolors-shape-helicopter-contrast: #f2b8e5;
465
- --basecolors-shape-helicopter-default: #f2b8e5;
466
- --basecolors-shape-highlight: #ff9494;
467
- --basecolors-shape-light: #e5e5e9;
468
- --basecolors-shape-mask: #2d2e3e;
469
- --basecolors-shape-maskalt: #393a49;
470
- --basecolors-shape-metro-contrast: #dd973c;
471
- --basecolors-shape-metro-default: #dd973c;
472
- --basecolors-shape-mobility-contrast: #4db295;
473
- --basecolors-shape-mobility-default: #4db295;
474
- --basecolors-shape-plane-contrast: #f2b8e5;
475
- --basecolors-shape-plane-default: #f2b8e5;
476
- --basecolors-shape-subdued: #b3b4bd;
477
- --basecolors-shape-subduedalt: #b3b4bd;
478
- --basecolors-shape-taxi-contrast: #ffe082;
479
- --basecolors-shape-taxi-default: #ffe082;
480
- --basecolors-shape-train-contrast: #60a2d7;
481
- --basecolors-shape-train-default: #60a2d7;
482
- --basecolors-shape-tram-contrast: #b898e5;
483
- --basecolors-shape-tram-default: #b898e5;
484
- --basecolors-shape-walk-contrast: #8d8e9c;
485
- --basecolors-shape-walk-default: #8d8e9c;
486
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
487
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
488
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
489
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
490
- --basecolors-stroke-contrast: #aeb7e2;
491
- --basecolors-stroke-default: #b3b4bd;
492
- --basecolors-stroke-disabled: #e3e6e8;
493
- --basecolors-stroke-focus-contrast: #aeb7e2;
494
- --basecolors-stroke-focus-standard: #aeb7e2;
495
- --basecolors-stroke-highlight: #ff9494;
496
- --basecolors-stroke-light: #b3b4bd;
497
- --basecolors-stroke-subdued: #81828f;
498
- --basecolors-stroke-subduedalt: #949699;
499
- --basecolors-text-accent: #e5e5e9;
500
- --basecolors-text-disabled: #b6b8ba;
501
- --basecolors-text-disabledalt: #b6b8ba;
502
- --basecolors-text-highlight: #ff9494;
503
- --basecolors-text-light: #e5e5e9;
504
- --basecolors-text-subdued: #b3b4bd;
505
- --basecolors-text-subduedalt: #b3b4bd;
502
+ .eds-action-chip{
503
+ cursor:pointer;
504
+ }
505
+ .eds-action-chip:focus-visible{
506
+ outline:2px solid #181c56;
507
+ outline-color:#181c56;
508
+ outline-color:var(--basecolors-stroke-focus-standard);
509
+ outline-offset:0.125rem;
510
+ }
511
+ .eds-contrast .eds-action-chip:focus-visible{
512
+ outline-color:#aeb7e2;
513
+ outline-color:var(--basecolors-stroke-focus-contrast);
514
+ }
515
+ .eds-action-chip:hover{
516
+ border-color:rgba(84, 86, 140, 0.4);
517
+ border-color:var(--components-chip-standard-border);
518
+ background-color:#d9ddf2;
519
+ background-color:var(--components-chip-standard-hover);
520
+ }
521
+ .eds-contrast .eds-action-chip:hover{
522
+ border-color:transparent;
523
+ background-color:#626493;
524
+ background-color:var(--components-chip-contrast-hover);
525
+ }
526
+ .eds-action-chip:active{
527
+ background-color:#aeb7e2;
528
+ background-color:var(--components-chip-standard-active);
529
+ border-color:transparent;
530
+ }
531
+ .eds-contrast .eds-action-chip:active{
532
+ background-color:#8794d4;
533
+ background-color:var(--components-chip-contrast-active);
534
+ color:#181c56;
535
+ color:var(--components-chip-contrast-text-selected);
536
+ }
537
+ .eds-action-chip--disabled{
538
+ opacity:0.5;
539
+ pointer-events:none;
540
+ }
541
+ .eds-action-chip--disabled__wrapper{
542
+ cursor:not-allowed;
543
+ width:-webkit-fit-content;
544
+ width:-moz-fit-content;
545
+ width:fit-content;
546
+ }
547
+ .eds-contrast .eds-action-chip__loading-dots .eds-loading-dots__dot{
548
+ background-color:var(--colors-brand-white);
549
+ }.eds-tag-chip{
550
+ cursor:default;
551
+ padding-right:0.125rem;
552
+ width:-webkit-fit-content;
553
+ width:-moz-fit-content;
554
+ width:fit-content;
555
+ }
556
+ .eds-tag-chip__close-button{
557
+ -webkit-appearance:none;
558
+ -moz-appearance:none;
559
+ appearance:none;
560
+ background:none;
561
+ border:none;
562
+ -webkit-border-radius:50%;
563
+ -moz-border-radius:50%;
564
+ border-radius:50%;
565
+ cursor:pointer;
566
+ display:-webkit-box;
567
+ display:-webkit-flex;
568
+ display:-moz-box;
569
+ display:flex;
570
+ color:inherit;
571
+ font-size:0.875rem;
572
+ padding:0.0625rem;
573
+ margin-left:0.25rem;
574
+ -webkit-transition:background 0.1s ease-in-out, -webkit-box-shadow 0.1s ease-in-out;
575
+ transition:background 0.1s ease-in-out, -webkit-box-shadow 0.1s ease-in-out;
576
+ -o-transition:box-shadow 0.1s ease-in-out, background 0.1s ease-in-out;
577
+ -moz-transition:box-shadow 0.1s ease-in-out, background 0.1s ease-in-out, -moz-box-shadow 0.1s ease-in-out;
578
+ transition:box-shadow 0.1s ease-in-out, background 0.1s ease-in-out;
579
+ transition:box-shadow 0.1s ease-in-out, background 0.1s ease-in-out, -webkit-box-shadow 0.1s ease-in-out, -moz-box-shadow 0.1s ease-in-out;
580
+ }
581
+ .eds-tag-chip__close-button svg{
582
+ width:1.5rem;
583
+ height:1.5rem;
584
+ }
585
+ .eds-tag-chip__close-button:focus-visible{
586
+ outline:2px solid #181c56;
587
+ outline-color:var(--basecolors-stroke-focus-standard);
588
+ outline-offset:0.125rem;
589
+ }
590
+ .eds-contrast .eds-tag-chip__close-button:focus-visible{
591
+ outline-color:var(--basecolors-stroke-focus-contrast);
592
+ }
593
+ .eds-tag-chip__close-button:hover{
594
+ border-color:var(--components-chip-standard-border);
595
+ background-color:var(--components-chip-standard-hover);
596
+ }
597
+ .eds-contrast .eds-tag-chip__close-button:hover{
598
+ border-color:transparent;
599
+ background-color:var(--components-chip-contrast-hover);
600
+ }
601
+ .eds-tag-chip__close-button:active{
602
+ background-color:var(--components-chip-standard-active);
603
+ border-color:transparent;
604
+ }
605
+ .eds-contrast .eds-tag-chip__close-button:active{
606
+ background-color:var(--components-chip-contrast-active);
607
+ color:var(--components-chip-contrast-text-selected);
608
+ }.eds-filter-chip{
609
+ cursor:pointer;
610
+ width:-webkit-fit-content;
611
+ width:-moz-fit-content;
612
+ width:fit-content;
613
+ display:-webkit-box;
614
+ display:-webkit-flex;
615
+ display:-moz-box;
616
+ display:flex;
617
+ }
618
+ .eds-filter-chip__input{
619
+ position:absolute;
620
+ opacity:0;
621
+ height:0;
622
+ width:0;
623
+ }
624
+ .eds-filter-chip__input:checked ~ .eds-chip{
625
+ background-color:var(--components-chip-standard-active);
626
+ color:var(--components-chip-standard-text-selected);
627
+ border-color:transparent;
628
+ }
629
+ .eds-contrast .eds-filter-chip__input:checked ~ .eds-chip{
630
+ background-color:var(--components-chip-contrast-active);
631
+ }
632
+ .eds-filter-chip__input:checked ~ .eds-chip:hover{
633
+ color:var(--components-chip-standard-text-unselected);
634
+ }
635
+ .eds-filter-chip__input:checked ~ .eds-chip:hover .eds-filter-chip-icon .eds-filter-chip-icon__path{
636
+ stroke:var(--components-chip-standard-icon-unselected);
637
+ }
638
+ .eds-contrast .eds-filter-chip__input:checked ~ .eds-chip:hover{
639
+ color:var(--components-chip-contrast-text-unselected);
640
+ }
641
+ .eds-contrast .eds-filter-chip__input:checked ~ .eds-chip:hover .eds-filter-chip-icon .eds-filter-chip-icon__path{
642
+ stroke:var(--components-chip-contrast-icon-unselected);
643
+ }
644
+ .eds-filter-chip__input:checked ~ .eds-chip .eds-filter-chip__icon{
645
+ display:-webkit-inline-box;
646
+ display:-webkit-inline-flex;
647
+ display:-moz-inline-box;
648
+ display:inline-flex;
649
+ margin-right:0.25rem;
650
+ }
651
+ .eds-filter-chip__input:checked ~ .eds-chip .eds-filter-chip__icon .eds-filter-chip-icon__path{
652
+ stroke:var(--components-chip-contrast-icon-selected);
653
+ -webkit-animation:stroke ease-in-out 0.5s 0.1s forwards;
654
+ -moz-animation:stroke ease-in-out 0.5s 0.1s forwards;
655
+ -o-animation:stroke ease-in-out 0.5s 0.1s forwards;
656
+ animation:stroke ease-in-out 0.5s 0.1s forwards;
657
+ }
658
+ .eds-filter-chip__input:focus-visible ~ .eds-chip{
659
+ outline:2px solid #181c56;
660
+ outline-color:var(--basecolors-stroke-focus-standard);
661
+ outline-offset:0.125rem;
662
+ }
663
+ .eds-contrast .eds-filter-chip__input:focus-visible ~ .eds-chip{
664
+ outline-color:var(--basecolors-stroke-focus-contrast);
665
+ }
666
+ .eds-filter-chip__input:hover ~ .eds-chip{
667
+ border-color:var(--components-chip-standard-border);
668
+ background-color:var(--components-chip-standard-hover);
669
+ }
670
+ .eds-contrast .eds-filter-chip__input:hover ~ .eds-chip{
671
+ border-color:transparent;
672
+ background-color:var(--components-chip-contrast-hover);
673
+ }
674
+ .eds-contrast .eds-filter-chip__input:hover ~ .eds-chip .eds-filter-chip__icon .eds-filter-chip-icon__path{
675
+ stroke:var(--components-chip-contrast-icon-unselected);
676
+ }
677
+ .eds-filter-chip__input:active ~ .eds-chip{
678
+ background-color:var(--components-chip-standard-active);
679
+ border-color:transparent;
680
+ color:var(--components-chip-standard-text-selected);
681
+ }
682
+ .eds-contrast .eds-filter-chip__input:active ~ .eds-chip{
683
+ background-color:var(--components-chip-contrast-active);
684
+ color:var(--components-chip-contrast-text-selected);
506
685
  }
507
686
 
508
- :root {
509
- --eds-chip: 1;
687
+ .eds-chip .eds-filter-chip__icon{
688
+ display:none;
689
+ -webkit-box-pack:center;
690
+ -webkit-justify-content:center;
691
+ -moz-box-pack:center;
692
+ justify-content:center;
693
+ -webkit-box-align:center;
694
+ -webkit-align-items:center;
695
+ -moz-box-align:center;
696
+ align-items:center;
697
+ position:relative;
698
+ stroke:var(--components-chip-contrast-icon-selected);
699
+ }
700
+ .eds-chip .eds-filter-chip__icon .eds-filter-chip-icon{
701
+ height:1rem;
702
+ width:1rem;
703
+ }
704
+ .eds-chip .eds-filter-chip__icon .eds-filter-chip-icon__path{
705
+ -webkit-transform-origin:50% 50%;
706
+ -moz-transform-origin:50% 50%;
707
+ -o-transform-origin:50% 50%;
708
+ transform-origin:50% 50%;
709
+ stroke-dasharray:48;
710
+ stroke-dashoffset:48;
711
+ stroke-width:0.125rem;
510
712
  }
511
713
 
512
- .eds-action-chip {
513
- cursor: pointer;
514
- }
515
- .eds-action-chip:focus-visible {
516
- outline: 2px solid #181c56;
517
- outline-color: var(--basecolors-stroke-focus-standard);
518
- outline-offset: 0.125rem;
519
- }
520
- .eds-contrast .eds-action-chip:focus-visible {
521
- outline-color: var(--basecolors-stroke-focus-contrast);
522
- }
523
- .eds-action-chip:hover {
524
- border-color: var(--components-chip-standard-border);
525
- background-color: var(--components-chip-standard-hover);
526
- }
527
- .eds-contrast .eds-action-chip:hover {
528
- border-color: transparent;
529
- background-color: var(--components-chip-contrast-hover);
530
- }
531
- .eds-action-chip:active {
532
- background-color: var(--components-chip-standard-active);
533
- border-color: transparent;
534
- }
535
- .eds-contrast .eds-action-chip:active {
536
- background-color: var(--components-chip-contrast-active);
537
- color: var(--components-chip-contrast-text-selected);
538
- }
539
- .eds-action-chip--disabled {
540
- opacity: 0.5;
541
- pointer-events: none;
542
- }
543
- .eds-action-chip--disabled__wrapper {
544
- cursor: not-allowed;
545
- width: fit-content;
546
- }
547
- .eds-contrast .eds-action-chip__loading-dots .eds-loading-dots__dot {
548
- background-color: var(--colors-brand-white);
549
- }/* DO NOT CHANGE!*/
550
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
551
- .eds-tag-chip {
552
- cursor: default;
553
- padding-right: 0.125rem;
554
- width: fit-content;
555
- }
556
- .eds-tag-chip__close-button {
557
- appearance: none;
558
- background: none;
559
- border: none;
560
- border-radius: 50%;
561
- cursor: pointer;
562
- display: flex;
563
- color: inherit;
564
- font-size: 0.875rem;
565
- padding: 0.0625rem;
566
- margin-left: 0.25rem;
567
- transition: box-shadow 0.1s ease-in-out, background 0.1s ease-in-out;
568
- }
569
- .eds-tag-chip__close-button svg {
570
- width: 1.5rem;
571
- height: 1.5rem;
572
- }
573
- .eds-tag-chip__close-button:focus-visible {
574
- outline: 2px solid #181c56;
575
- outline-color: var(--basecolors-stroke-focus-standard);
576
- outline-offset: 0.125rem;
577
- }
578
- .eds-contrast .eds-tag-chip__close-button:focus-visible {
579
- outline-color: var(--basecolors-stroke-focus-contrast);
580
- }
581
- .eds-tag-chip__close-button:hover {
582
- border-color: var(--components-chip-standard-border);
583
- background-color: var(--components-chip-standard-hover);
584
- }
585
- .eds-contrast .eds-tag-chip__close-button:hover {
586
- border-color: transparent;
587
- background-color: var(--components-chip-contrast-hover);
588
- }
589
- .eds-tag-chip__close-button:active {
590
- background-color: var(--components-chip-standard-active);
591
- border-color: transparent;
592
- }
593
- .eds-contrast .eds-tag-chip__close-button:active {
594
- background-color: var(--components-chip-contrast-active);
595
- color: var(--components-chip-contrast-text-selected);
596
- }/* DO NOT CHANGE!*/
597
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
598
- .eds-filter-chip {
599
- cursor: pointer;
600
- width: fit-content;
601
- display: flex;
602
- }
603
- .eds-filter-chip__input {
604
- position: absolute;
605
- opacity: 0;
606
- height: 0;
607
- width: 0;
608
- }
609
- .eds-filter-chip__input:checked ~ .eds-chip {
610
- background-color: var(--components-chip-standard-active);
611
- color: var(--components-chip-standard-text-selected);
612
- border-color: transparent;
613
- }
614
- .eds-contrast .eds-filter-chip__input:checked ~ .eds-chip {
615
- background-color: var(--components-chip-contrast-active);
616
- }
617
- .eds-filter-chip__input:checked ~ .eds-chip:hover {
618
- color: var(--components-chip-standard-text-unselected);
619
- }
620
- .eds-filter-chip__input:checked ~ .eds-chip:hover .eds-filter-chip-icon .eds-filter-chip-icon__path {
621
- stroke: var(--components-chip-standard-icon-unselected);
622
- }
623
- .eds-contrast .eds-filter-chip__input:checked ~ .eds-chip:hover {
624
- color: var(--components-chip-contrast-text-unselected);
625
- }
626
- .eds-contrast .eds-filter-chip__input:checked ~ .eds-chip:hover .eds-filter-chip-icon .eds-filter-chip-icon__path {
627
- stroke: var(--components-chip-contrast-icon-unselected);
628
- }
629
- .eds-filter-chip__input:checked ~ .eds-chip .eds-filter-chip__icon {
630
- display: inline-flex;
631
- margin-right: 0.25rem;
632
- }
633
- .eds-filter-chip__input:checked ~ .eds-chip .eds-filter-chip__icon .eds-filter-chip-icon__path {
634
- stroke: var(--components-chip-contrast-icon-selected);
635
- animation: stroke ease-in-out 0.5s 0.1s forwards;
636
- }
637
- .eds-filter-chip__input:focus-visible ~ .eds-chip {
638
- outline: 2px solid #181c56;
639
- outline-color: var(--basecolors-stroke-focus-standard);
640
- outline-offset: 0.125rem;
641
- }
642
- .eds-contrast .eds-filter-chip__input:focus-visible ~ .eds-chip {
643
- outline-color: var(--basecolors-stroke-focus-contrast);
644
- }
645
- .eds-filter-chip__input:hover ~ .eds-chip {
646
- border-color: var(--components-chip-standard-border);
647
- background-color: var(--components-chip-standard-hover);
648
- }
649
- .eds-contrast .eds-filter-chip__input:hover ~ .eds-chip {
650
- border-color: transparent;
651
- background-color: var(--components-chip-contrast-hover);
652
- }
653
- .eds-contrast .eds-filter-chip__input:hover ~ .eds-chip .eds-filter-chip__icon .eds-filter-chip-icon__path {
654
- stroke: var(--components-chip-contrast-icon-unselected);
655
- }
656
- .eds-filter-chip__input:active ~ .eds-chip {
657
- background-color: var(--components-chip-standard-active);
658
- border-color: transparent;
659
- color: var(--components-chip-standard-text-selected);
660
- }
661
- .eds-contrast .eds-filter-chip__input:active ~ .eds-chip {
662
- background-color: var(--components-chip-contrast-active);
663
- color: var(--components-chip-contrast-text-selected);
714
+ @-webkit-keyframes stroke{
715
+ 100%{
716
+ stroke-dashoffset:0;
717
+ }
664
718
  }
665
719
 
666
- .eds-chip .eds-filter-chip__icon {
667
- display: none;
668
- justify-content: center;
669
- align-items: center;
670
- position: relative;
671
- stroke: var(--components-chip-contrast-icon-selected);
672
- }
673
- .eds-chip .eds-filter-chip__icon .eds-filter-chip-icon {
674
- height: 1rem;
675
- width: 1rem;
676
- }
677
- .eds-chip .eds-filter-chip__icon .eds-filter-chip-icon__path {
678
- transform-origin: 50% 50%;
679
- stroke-dasharray: 48;
680
- stroke-dashoffset: 48;
681
- stroke-width: 0.125rem;
720
+ @-moz-keyframes stroke{
721
+ 100%{
722
+ stroke-dashoffset:0;
723
+ }
724
+ }
725
+
726
+ @-o-keyframes stroke{
727
+ 100%{
728
+ stroke-dashoffset:0;
729
+ }
682
730
  }
683
731
 
684
- @keyframes stroke {
685
- 100% {
686
- stroke-dashoffset: 0;
732
+ @keyframes stroke{
733
+ 100%{
734
+ stroke-dashoffset:0;
687
735
  }
688
- }/* DO NOT CHANGE!*/
689
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
690
- :where(.eds-choice-chips-group) {
691
- display: flex;
692
- row-gap: 0.5rem;
693
- flex-wrap: wrap;
736
+ }:where(.eds-choice-chips-group){
737
+ display:-webkit-box;
738
+ display:-webkit-flex;
739
+ display:-moz-box;
740
+ display:flex;
741
+ row-gap:0.5rem;
742
+ -webkit-flex-wrap:wrap;
743
+ flex-wrap:wrap;
694
744
  }