@entur/button 3.3.18 → 3.4.0-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 +1053 -862
  2. package/package.json +4 -3
package/dist/styles.css CHANGED
@@ -1,882 +1,1073 @@
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-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1490196078);
10
- --components-button-disabled-contrast-icon-disabled: #b6b8ba;
11
- --components-button-disabled-contrast-text-disabled: #b6b8ba;
12
- --components-button-disabled-standard-fill: #cfd2d4;
13
- --components-button-disabled-standard-icon-disabled: #515254;
14
- --components-button-disabled-standard-text-disabled: #515254;
15
- --components-button-floating-contrast-active: #d9dae8;
16
- --components-button-floating-contrast-default: #ffffff;
17
- --components-button-floating-contrast-hover: #f6f6f9;
18
- --components-button-floating-contrast-icon: #181c56;
19
- --components-button-floating-contrast-text: #181c56;
20
- --components-button-floating-standard-active: #11143c;
21
- --components-button-floating-standard-default: #181c56;
22
- --components-button-floating-standard-hover: #393d79;
23
- --components-button-floating-standard-icon: #ffffff;
24
- --components-button-floating-standard-text: #ffffff;
25
- --components-button-iconbutton-contrast-active: #8794d4;
26
- --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
27
- --components-button-iconbutton-contrast-hover: #626493;
28
- --components-button-iconbutton-contrast-icon: #ffffff;
29
- --components-button-iconbutton-contrast-icon-active: #181c56;
30
- --components-button-iconbutton-contrast-text: #ffffff;
31
- --components-button-iconbutton-contrast-text-active: #181c56;
32
- --components-button-iconbutton-standard-active: #aeb7e2;
33
- --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
34
- --components-button-iconbutton-standard-hover: #d9ddf2;
35
- --components-button-iconbutton-standard-icon: #181c56;
36
- --components-button-iconbutton-standard-icon-active: #181c56;
37
- --components-button-iconbutton-standard-text: #181c56;
38
- --components-button-iconbutton-standard-text-active: #181c56;
39
- --components-button-negative-contrast-active: #ff9494;
40
- --components-button-negative-contrast-border: #ff9494;
41
- --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
42
- --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
43
- --components-button-negative-contrast-icon: #ffffff;
44
- --components-button-negative-contrast-icon-active: #181c56;
45
- --components-button-negative-contrast-text: #ffffff;
46
- --components-button-negative-contrast-text-active: #181c56;
47
- --components-button-negative-standard-active: #d31b1b;
48
- --components-button-negative-standard-border: #d31b1b;
49
- --components-button-negative-standard-default: rgba(255, 255, 255, 0);
50
- --components-button-negative-standard-hover: #ffcece;
51
- --components-button-negative-standard-icon: #d31b1b;
52
- --components-button-negative-standard-icon-active: #ffffff;
53
- --components-button-negative-standard-text: #d31b1b;
54
- --components-button-negative-standard-text-active: #ffffff;
55
- --components-button-primary-contrast-active: #8794d4;
56
- --components-button-primary-contrast-default: #aeb7e2;
57
- --components-button-primary-contrast-hover: #c7cdeb;
58
- --components-button-primary-contrast-icon: #181c56;
59
- --components-button-primary-contrast-text: #181c56;
60
- --components-button-primary-standard-active: #11143c;
61
- --components-button-primary-standard-default: #181c56;
62
- --components-button-primary-standard-hover: #393d79;
63
- --components-button-primary-standard-icon: #ffffff;
64
- --components-button-primary-standard-text: #ffffff;
65
- --components-button-secondary-contrast-active: #8794d4;
66
- --components-button-secondary-contrast-border: #8284ab;
67
- --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
68
- --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
69
- --components-button-secondary-contrast-hover: #626493;
70
- --components-button-secondary-contrast-icon: #ffffff;
71
- --components-button-secondary-contrast-icon-active: #181c56;
72
- --components-button-secondary-contrast-text: #ffffff;
73
- --components-button-secondary-contrast-text-active: #181c56;
74
- --components-button-secondary-standard-active: #aeb7e2;
75
- --components-button-secondary-standard-border: #8284ab;
76
- --components-button-secondary-standard-border-active: #181c56;
77
- --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
78
- --components-button-secondary-standard-hover: #d9ddf2;
79
- --components-button-secondary-standard-icon: #181c56;
80
- --components-button-secondary-standard-icon-active: #181c56;
81
- --components-button-secondary-standard-text: #181c56;
82
- --components-button-secondary-standard-text-active: #181c56;
83
- --components-button-squaresecondary-contrast-active: #8794d4;
84
- --components-button-squaresecondary-contrast-border: #8284ab;
85
- --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
86
- --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
87
- --components-button-squaresecondary-contrast-hover: #d9ddf2;
88
- --components-button-squaresecondary-contrast-icon-active: #181c56;
89
- --components-button-squaresecondary-contrast-icon-default: #ffffff;
90
- --components-button-squaresecondary-contrast-icon-hover: #181c56;
91
- --components-button-squaresecondary-contrast-label: #ffffff;
92
- --components-button-squaresecondary-standard-active: #aeb7e2;
93
- --components-button-squaresecondary-standard-border: #8284ab;
94
- --components-button-squaresecondary-standard-border-active: #181c56;
95
- --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
96
- --components-button-squaresecondary-standard-hover: #d9ddf2;
97
- --components-button-squaresecondary-standard-icon: #181c56;
98
- --components-button-squaresecondary-standard-icon-active: #181c56;
99
- --components-button-squaresecondary-standard-text: #181c56;
100
- --components-button-squaresuccess-contrast-active: #37ab83;
101
- --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
102
- --components-button-squaresuccess-contrast-default: #5ac39a;
103
- --components-button-squaresuccess-contrast-hover: #9cd9c2;
104
- --components-button-squaresuccess-contrast-icon: #181c56;
105
- --components-button-squaresuccess-contrast-label: #ffffff;
106
- --components-button-squaresuccess-standard-active: #37ab83;
107
- --components-button-squaresuccess-standard-border: #181c56;
108
- --components-button-squaresuccess-standard-default: #5ac39a;
109
- --components-button-squaresuccess-standard-hover: #9cd9c2;
110
- --components-button-squaresuccess-standard-icon: #181c56;
111
- --components-button-squaresuccess-standard-label: #181c56;
112
- --components-button-success-contrast-active: #37ab83;
113
- --components-button-success-contrast-border: rgba(255, 255, 255, 0);
114
- --components-button-success-contrast-default: #5ac39a;
115
- --components-button-success-contrast-hover: #9cd9c2;
116
- --components-button-success-contrast-icon: #181c56;
117
- --components-button-success-contrast-text: #181c56;
118
- --components-button-success-standard-active: #37ab83;
119
- --components-button-success-standard-border: #181c56;
120
- --components-button-success-standard-default: #5ac39a;
121
- --components-button-success-standard-hover: #9cd9c2;
122
- --components-button-success-standard-icon: #181c56;
123
- --components-button-success-standard-text: #181c56;
2
+ :root{
3
+ --components-button-disabled-contrast-fill:rgba(207, 210, 212, 0.1490196078);
4
+ --components-button-disabled-contrast-icon-disabled:#b6b8ba;
5
+ --components-button-disabled-contrast-text-disabled:#b6b8ba;
6
+ --components-button-disabled-standard-fill:#cfd2d4;
7
+ --components-button-disabled-standard-icon-disabled:#515254;
8
+ --components-button-disabled-standard-text-disabled:#515254;
9
+ --components-button-floating-contrast-active:#d9dae8;
10
+ --components-button-floating-contrast-default:#ffffff;
11
+ --components-button-floating-contrast-hover:#f6f6f9;
12
+ --components-button-floating-contrast-icon:#181c56;
13
+ --components-button-floating-contrast-text:#181c56;
14
+ --components-button-floating-standard-active:#11143c;
15
+ --components-button-floating-standard-default:#181c56;
16
+ --components-button-floating-standard-hover:#393d79;
17
+ --components-button-floating-standard-icon:#ffffff;
18
+ --components-button-floating-standard-text:#ffffff;
19
+ --components-button-iconbutton-contrast-active:#8794d4;
20
+ --components-button-iconbutton-contrast-default:rgba(255, 255, 255, 0);
21
+ --components-button-iconbutton-contrast-hover:#626493;
22
+ --components-button-iconbutton-contrast-icon:#ffffff;
23
+ --components-button-iconbutton-contrast-icon-active:#181c56;
24
+ --components-button-iconbutton-contrast-text:#ffffff;
25
+ --components-button-iconbutton-contrast-text-active:#181c56;
26
+ --components-button-iconbutton-standard-active:#aeb7e2;
27
+ --components-button-iconbutton-standard-default:rgba(255, 255, 255, 0);
28
+ --components-button-iconbutton-standard-hover:#d9ddf2;
29
+ --components-button-iconbutton-standard-icon:#181c56;
30
+ --components-button-iconbutton-standard-icon-active:#181c56;
31
+ --components-button-iconbutton-standard-text:#181c56;
32
+ --components-button-iconbutton-standard-text-active:#181c56;
33
+ --components-button-negative-contrast-active:#ff9494;
34
+ --components-button-negative-contrast-border:#ff9494;
35
+ --components-button-negative-contrast-default:rgba(255, 255, 255, 0);
36
+ --components-button-negative-contrast-hover:rgba(255, 148, 148, 0.2);
37
+ --components-button-negative-contrast-icon:#ffffff;
38
+ --components-button-negative-contrast-icon-active:#181c56;
39
+ --components-button-negative-contrast-text:#ffffff;
40
+ --components-button-negative-contrast-text-active:#181c56;
41
+ --components-button-negative-standard-active:#d31b1b;
42
+ --components-button-negative-standard-border:#d31b1b;
43
+ --components-button-negative-standard-default:rgba(255, 255, 255, 0);
44
+ --components-button-negative-standard-hover:#ffcece;
45
+ --components-button-negative-standard-icon:#d31b1b;
46
+ --components-button-negative-standard-icon-active:#ffffff;
47
+ --components-button-negative-standard-text:#d31b1b;
48
+ --components-button-negative-standard-text-active:#ffffff;
49
+ --components-button-primary-contrast-active:#8794d4;
50
+ --components-button-primary-contrast-default:#aeb7e2;
51
+ --components-button-primary-contrast-hover:#c7cdeb;
52
+ --components-button-primary-contrast-icon:#181c56;
53
+ --components-button-primary-contrast-text:#181c56;
54
+ --components-button-primary-standard-active:#11143c;
55
+ --components-button-primary-standard-default:#181c56;
56
+ --components-button-primary-standard-hover:#393d79;
57
+ --components-button-primary-standard-icon:#ffffff;
58
+ --components-button-primary-standard-text:#ffffff;
59
+ --components-button-secondary-contrast-active:#8794d4;
60
+ --components-button-secondary-contrast-border:#8284ab;
61
+ --components-button-secondary-contrast-border-active:rgba(255, 255, 255, 0);
62
+ --components-button-secondary-contrast-default:rgba(255, 255, 255, 0);
63
+ --components-button-secondary-contrast-hover:#626493;
64
+ --components-button-secondary-contrast-icon:#ffffff;
65
+ --components-button-secondary-contrast-icon-active:#181c56;
66
+ --components-button-secondary-contrast-text:#ffffff;
67
+ --components-button-secondary-contrast-text-active:#181c56;
68
+ --components-button-secondary-standard-active:#aeb7e2;
69
+ --components-button-secondary-standard-border:#8284ab;
70
+ --components-button-secondary-standard-border-active:#181c56;
71
+ --components-button-secondary-standard-default:rgba(255, 255, 255, 0);
72
+ --components-button-secondary-standard-hover:#d9ddf2;
73
+ --components-button-secondary-standard-icon:#181c56;
74
+ --components-button-secondary-standard-icon-active:#181c56;
75
+ --components-button-secondary-standard-text:#181c56;
76
+ --components-button-secondary-standard-text-active:#181c56;
77
+ --components-button-squaresecondary-contrast-active:#8794d4;
78
+ --components-button-squaresecondary-contrast-border:#8284ab;
79
+ --components-button-squaresecondary-contrast-border-active:rgba(255, 255, 255, 0);
80
+ --components-button-squaresecondary-contrast-default:rgba(255, 255, 255, 0);
81
+ --components-button-squaresecondary-contrast-hover:#d9ddf2;
82
+ --components-button-squaresecondary-contrast-icon-active:#181c56;
83
+ --components-button-squaresecondary-contrast-icon-default:#ffffff;
84
+ --components-button-squaresecondary-contrast-icon-hover:#181c56;
85
+ --components-button-squaresecondary-contrast-label:#ffffff;
86
+ --components-button-squaresecondary-standard-active:#aeb7e2;
87
+ --components-button-squaresecondary-standard-border:#8284ab;
88
+ --components-button-squaresecondary-standard-border-active:#181c56;
89
+ --components-button-squaresecondary-standard-default:rgba(255, 255, 255, 0);
90
+ --components-button-squaresecondary-standard-hover:#d9ddf2;
91
+ --components-button-squaresecondary-standard-icon:#181c56;
92
+ --components-button-squaresecondary-standard-icon-active:#181c56;
93
+ --components-button-squaresecondary-standard-text:#181c56;
94
+ --components-button-squaresuccess-contrast-active:#37ab83;
95
+ --components-button-squaresuccess-contrast-border:rgba(255, 255, 255, 0);
96
+ --components-button-squaresuccess-contrast-default:#5ac39a;
97
+ --components-button-squaresuccess-contrast-hover:#9cd9c2;
98
+ --components-button-squaresuccess-contrast-icon:#181c56;
99
+ --components-button-squaresuccess-contrast-label:#ffffff;
100
+ --components-button-squaresuccess-standard-active:#37ab83;
101
+ --components-button-squaresuccess-standard-border:#181c56;
102
+ --components-button-squaresuccess-standard-default:#5ac39a;
103
+ --components-button-squaresuccess-standard-hover:#9cd9c2;
104
+ --components-button-squaresuccess-standard-icon:#181c56;
105
+ --components-button-squaresuccess-standard-label:#181c56;
106
+ --components-button-success-contrast-active:#37ab83;
107
+ --components-button-success-contrast-border:rgba(255, 255, 255, 0);
108
+ --components-button-success-contrast-default:#5ac39a;
109
+ --components-button-success-contrast-hover:#9cd9c2;
110
+ --components-button-success-contrast-icon:#181c56;
111
+ --components-button-success-contrast-text:#181c56;
112
+ --components-button-success-standard-active:#37ab83;
113
+ --components-button-success-standard-border:#181c56;
114
+ --components-button-success-standard-default:#5ac39a;
115
+ --components-button-success-standard-hover:#9cd9c2;
116
+ --components-button-success-standard-icon:#181c56;
117
+ --components-button-success-standard-text:#181c56;
124
118
  }
125
119
 
126
- [data-color-mode=dark] {
127
- --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1019607843);
128
- --components-button-disabled-contrast-icon-disabled: #b6b8ba;
129
- --components-button-disabled-contrast-text-disabled: #b6b8ba;
130
- --components-button-disabled-standard-fill: rgba(207, 210, 212, 0.1019607843);
131
- --components-button-disabled-standard-icon-disabled: #b6b8ba;
132
- --components-button-disabled-standard-text-disabled: #b6b8ba;
133
- --components-button-floating-contrast-active: #8794d4;
134
- --components-button-floating-contrast-default: #aeb7e2;
135
- --components-button-floating-contrast-hover: #c7cdeb;
136
- --components-button-floating-contrast-icon: #08091c;
137
- --components-button-floating-contrast-text: #08091c;
138
- --components-button-floating-standard-active: #8794d4;
139
- --components-button-floating-standard-default: #aeb7e2;
140
- --components-button-floating-standard-hover: #c7cdeb;
141
- --components-button-floating-standard-icon: #08091c;
142
- --components-button-floating-standard-text: #08091c;
143
- --components-button-iconbutton-contrast-active: #8794d4;
144
- --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
145
- --components-button-iconbutton-contrast-hover: #626493;
146
- --components-button-iconbutton-contrast-icon: #e5e5e9;
147
- --components-button-iconbutton-contrast-icon-active: #08091c;
148
- --components-button-iconbutton-contrast-text: #e5e5e9;
149
- --components-button-iconbutton-contrast-text-active: #08091c;
150
- --components-button-iconbutton-standard-active: #8794d4;
151
- --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
152
- --components-button-iconbutton-standard-hover: #626493;
153
- --components-button-iconbutton-standard-icon: #e5e5e9;
154
- --components-button-iconbutton-standard-icon-active: #08091c;
155
- --components-button-iconbutton-standard-text: #e5e5e9;
156
- --components-button-iconbutton-standard-text-active: #08091c;
157
- --components-button-negative-contrast-active: #ff9494;
158
- --components-button-negative-contrast-border: #ff9494;
159
- --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
160
- --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
161
- --components-button-negative-contrast-icon: #e5e5e9;
162
- --components-button-negative-contrast-icon-active: #08091c;
163
- --components-button-negative-contrast-text: #e5e5e9;
164
- --components-button-negative-contrast-text-active: #08091c;
165
- --components-button-negative-standard-active: #ff9494;
166
- --components-button-negative-standard-border: #ff9494;
167
- --components-button-negative-standard-default: rgba(255, 255, 255, 0);
168
- --components-button-negative-standard-hover: rgba(255, 148, 148, 0.2);
169
- --components-button-negative-standard-icon: #e5e5e9;
170
- --components-button-negative-standard-icon-active: #08091c;
171
- --components-button-negative-standard-text: #e5e5e9;
172
- --components-button-negative-standard-text-active: #08091c;
173
- --components-button-primary-contrast-active: #8794d4;
174
- --components-button-primary-contrast-default: #aeb7e2;
175
- --components-button-primary-contrast-hover: #c7cdeb;
176
- --components-button-primary-contrast-icon: #08091c;
177
- --components-button-primary-contrast-text: #08091c;
178
- --components-button-primary-standard-active: #8794d4;
179
- --components-button-primary-standard-default: #aeb7e2;
180
- --components-button-primary-standard-hover: #c7cdeb;
181
- --components-button-primary-standard-icon: #08091c;
182
- --components-button-primary-standard-text: #08091c;
183
- --components-button-secondary-contrast-active: #8794d4;
184
- --components-button-secondary-contrast-border: #8284ab;
185
- --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
186
- --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
187
- --components-button-secondary-contrast-hover: #626493;
188
- --components-button-secondary-contrast-icon: #e5e5e9;
189
- --components-button-secondary-contrast-icon-active: #08091c;
190
- --components-button-secondary-contrast-text: #e5e5e9;
191
- --components-button-secondary-contrast-text-active: #08091c;
192
- --components-button-secondary-standard-active: #8794d4;
193
- --components-button-secondary-standard-border: #8284ab;
194
- --components-button-secondary-standard-border-active: rgba(255, 255, 255, 0);
195
- --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
196
- --components-button-secondary-standard-hover: #626493;
197
- --components-button-secondary-standard-icon: #e5e5e9;
198
- --components-button-secondary-standard-icon-active: #08091c;
199
- --components-button-secondary-standard-text: #e5e5e9;
200
- --components-button-secondary-standard-text-active: #08091c;
201
- --components-button-squaresecondary-contrast-active: #8794d4;
202
- --components-button-squaresecondary-contrast-border: #8284ab;
203
- --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
204
- --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
205
- --components-button-squaresecondary-contrast-hover: #626493;
206
- --components-button-squaresecondary-contrast-icon-active: #08091c;
207
- --components-button-squaresecondary-contrast-icon-default: #e5e5e9;
208
- --components-button-squaresecondary-contrast-icon-hover: #e5e5e9;
209
- --components-button-squaresecondary-contrast-label: #e5e5e9;
210
- --components-button-squaresecondary-standard-active: #8794d4;
211
- --components-button-squaresecondary-standard-border: #8284ab;
212
- --components-button-squaresecondary-standard-border-active: rgba(255, 255, 255, 0);
213
- --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
214
- --components-button-squaresecondary-standard-hover: #626493;
215
- --components-button-squaresecondary-standard-icon: #e5e5e9;
216
- --components-button-squaresecondary-standard-icon-active: #08091c;
217
- --components-button-squaresecondary-standard-text: #e5e5e9;
218
- --components-button-squaresuccess-contrast-active: #5ac39a;
219
- --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
220
- --components-button-squaresuccess-contrast-default: #5ac39a;
221
- --components-button-squaresuccess-contrast-hover: #9cd9c2;
222
- --components-button-squaresuccess-contrast-icon: #08091c;
223
- --components-button-squaresuccess-contrast-label: #e5e5e9;
224
- --components-button-squaresuccess-standard-active: #37ab83;
225
- --components-button-squaresuccess-standard-border: rgba(255, 255, 255, 0);
226
- --components-button-squaresuccess-standard-default: #5ac39a;
227
- --components-button-squaresuccess-standard-hover: #9cd9c2;
228
- --components-button-squaresuccess-standard-icon: #08091c;
229
- --components-button-squaresuccess-standard-label: #e5e5e9;
230
- --components-button-success-contrast-active: #37ab83;
231
- --components-button-success-contrast-border: rgba(255, 255, 255, 0);
232
- --components-button-success-contrast-default: #5ac39a;
233
- --components-button-success-contrast-hover: #9cd9c2;
234
- --components-button-success-contrast-icon: #08091c;
235
- --components-button-success-contrast-text: #08091c;
236
- --components-button-success-standard-active: #37ab83;
237
- --components-button-success-standard-border: rgba(255, 255, 255, 0);
238
- --components-button-success-standard-default: #5ac39a;
239
- --components-button-success-standard-hover: #9cd9c2;
240
- --components-button-success-standard-icon: #08091c;
241
- --components-button-success-standard-text: #08091c;
120
+ [data-color-mode=dark]{
121
+ --components-button-disabled-contrast-fill:rgba(207, 210, 212, 0.1019607843);
122
+ --components-button-disabled-contrast-icon-disabled:#b6b8ba;
123
+ --components-button-disabled-contrast-text-disabled:#b6b8ba;
124
+ --components-button-disabled-standard-fill:rgba(207, 210, 212, 0.1019607843);
125
+ --components-button-disabled-standard-icon-disabled:#b6b8ba;
126
+ --components-button-disabled-standard-text-disabled:#b6b8ba;
127
+ --components-button-floating-contrast-active:#8794d4;
128
+ --components-button-floating-contrast-default:#aeb7e2;
129
+ --components-button-floating-contrast-hover:#c7cdeb;
130
+ --components-button-floating-contrast-icon:#08091c;
131
+ --components-button-floating-contrast-text:#08091c;
132
+ --components-button-floating-standard-active:#8794d4;
133
+ --components-button-floating-standard-default:#aeb7e2;
134
+ --components-button-floating-standard-hover:#c7cdeb;
135
+ --components-button-floating-standard-icon:#08091c;
136
+ --components-button-floating-standard-text:#08091c;
137
+ --components-button-iconbutton-contrast-active:#8794d4;
138
+ --components-button-iconbutton-contrast-default:rgba(255, 255, 255, 0);
139
+ --components-button-iconbutton-contrast-hover:#626493;
140
+ --components-button-iconbutton-contrast-icon:#e5e5e9;
141
+ --components-button-iconbutton-contrast-icon-active:#08091c;
142
+ --components-button-iconbutton-contrast-text:#e5e5e9;
143
+ --components-button-iconbutton-contrast-text-active:#08091c;
144
+ --components-button-iconbutton-standard-active:#8794d4;
145
+ --components-button-iconbutton-standard-default:rgba(255, 255, 255, 0);
146
+ --components-button-iconbutton-standard-hover:#626493;
147
+ --components-button-iconbutton-standard-icon:#e5e5e9;
148
+ --components-button-iconbutton-standard-icon-active:#08091c;
149
+ --components-button-iconbutton-standard-text:#e5e5e9;
150
+ --components-button-iconbutton-standard-text-active:#08091c;
151
+ --components-button-negative-contrast-active:#ff9494;
152
+ --components-button-negative-contrast-border:#ff9494;
153
+ --components-button-negative-contrast-default:rgba(255, 255, 255, 0);
154
+ --components-button-negative-contrast-hover:rgba(255, 148, 148, 0.2);
155
+ --components-button-negative-contrast-icon:#e5e5e9;
156
+ --components-button-negative-contrast-icon-active:#08091c;
157
+ --components-button-negative-contrast-text:#e5e5e9;
158
+ --components-button-negative-contrast-text-active:#08091c;
159
+ --components-button-negative-standard-active:#ff9494;
160
+ --components-button-negative-standard-border:#ff9494;
161
+ --components-button-negative-standard-default:rgba(255, 255, 255, 0);
162
+ --components-button-negative-standard-hover:rgba(255, 148, 148, 0.2);
163
+ --components-button-negative-standard-icon:#e5e5e9;
164
+ --components-button-negative-standard-icon-active:#08091c;
165
+ --components-button-negative-standard-text:#e5e5e9;
166
+ --components-button-negative-standard-text-active:#08091c;
167
+ --components-button-primary-contrast-active:#8794d4;
168
+ --components-button-primary-contrast-default:#aeb7e2;
169
+ --components-button-primary-contrast-hover:#c7cdeb;
170
+ --components-button-primary-contrast-icon:#08091c;
171
+ --components-button-primary-contrast-text:#08091c;
172
+ --components-button-primary-standard-active:#8794d4;
173
+ --components-button-primary-standard-default:#aeb7e2;
174
+ --components-button-primary-standard-hover:#c7cdeb;
175
+ --components-button-primary-standard-icon:#08091c;
176
+ --components-button-primary-standard-text:#08091c;
177
+ --components-button-secondary-contrast-active:#8794d4;
178
+ --components-button-secondary-contrast-border:#8284ab;
179
+ --components-button-secondary-contrast-border-active:rgba(255, 255, 255, 0);
180
+ --components-button-secondary-contrast-default:rgba(255, 255, 255, 0);
181
+ --components-button-secondary-contrast-hover:#626493;
182
+ --components-button-secondary-contrast-icon:#e5e5e9;
183
+ --components-button-secondary-contrast-icon-active:#08091c;
184
+ --components-button-secondary-contrast-text:#e5e5e9;
185
+ --components-button-secondary-contrast-text-active:#08091c;
186
+ --components-button-secondary-standard-active:#8794d4;
187
+ --components-button-secondary-standard-border:#8284ab;
188
+ --components-button-secondary-standard-border-active:rgba(255, 255, 255, 0);
189
+ --components-button-secondary-standard-default:rgba(255, 255, 255, 0);
190
+ --components-button-secondary-standard-hover:#626493;
191
+ --components-button-secondary-standard-icon:#e5e5e9;
192
+ --components-button-secondary-standard-icon-active:#08091c;
193
+ --components-button-secondary-standard-text:#e5e5e9;
194
+ --components-button-secondary-standard-text-active:#08091c;
195
+ --components-button-squaresecondary-contrast-active:#8794d4;
196
+ --components-button-squaresecondary-contrast-border:#8284ab;
197
+ --components-button-squaresecondary-contrast-border-active:rgba(255, 255, 255, 0);
198
+ --components-button-squaresecondary-contrast-default:rgba(255, 255, 255, 0);
199
+ --components-button-squaresecondary-contrast-hover:#626493;
200
+ --components-button-squaresecondary-contrast-icon-active:#08091c;
201
+ --components-button-squaresecondary-contrast-icon-default:#e5e5e9;
202
+ --components-button-squaresecondary-contrast-icon-hover:#e5e5e9;
203
+ --components-button-squaresecondary-contrast-label:#e5e5e9;
204
+ --components-button-squaresecondary-standard-active:#8794d4;
205
+ --components-button-squaresecondary-standard-border:#8284ab;
206
+ --components-button-squaresecondary-standard-border-active:rgba(255, 255, 255, 0);
207
+ --components-button-squaresecondary-standard-default:rgba(255, 255, 255, 0);
208
+ --components-button-squaresecondary-standard-hover:#626493;
209
+ --components-button-squaresecondary-standard-icon:#e5e5e9;
210
+ --components-button-squaresecondary-standard-icon-active:#08091c;
211
+ --components-button-squaresecondary-standard-text:#e5e5e9;
212
+ --components-button-squaresuccess-contrast-active:#5ac39a;
213
+ --components-button-squaresuccess-contrast-border:rgba(255, 255, 255, 0);
214
+ --components-button-squaresuccess-contrast-default:#5ac39a;
215
+ --components-button-squaresuccess-contrast-hover:#9cd9c2;
216
+ --components-button-squaresuccess-contrast-icon:#08091c;
217
+ --components-button-squaresuccess-contrast-label:#e5e5e9;
218
+ --components-button-squaresuccess-standard-active:#37ab83;
219
+ --components-button-squaresuccess-standard-border:rgba(255, 255, 255, 0);
220
+ --components-button-squaresuccess-standard-default:#5ac39a;
221
+ --components-button-squaresuccess-standard-hover:#9cd9c2;
222
+ --components-button-squaresuccess-standard-icon:#08091c;
223
+ --components-button-squaresuccess-standard-label:#e5e5e9;
224
+ --components-button-success-contrast-active:#37ab83;
225
+ --components-button-success-contrast-border:rgba(255, 255, 255, 0);
226
+ --components-button-success-contrast-default:#5ac39a;
227
+ --components-button-success-contrast-hover:#9cd9c2;
228
+ --components-button-success-contrast-icon:#08091c;
229
+ --components-button-success-contrast-text:#08091c;
230
+ --components-button-success-standard-active:#37ab83;
231
+ --components-button-success-standard-border:rgba(255, 255, 255, 0);
232
+ --components-button-success-standard-default:#5ac39a;
233
+ --components-button-success-standard-hover:#9cd9c2;
234
+ --components-button-success-standard-icon:#08091c;
235
+ --components-button-success-standard-text:#08091c;
242
236
  }
243
237
 
244
- /* DO NOT CHANGE!*/
245
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
246
- /* DO NOT CHANGE!*/
247
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
248
- [data-color-mode=light],
249
- :root {
250
- --basecolors-frame-contrast: #181c56;
251
- --basecolors-frame-contrastalt: #393d79;
252
- --basecolors-frame-contrastalt-2: #292b6a;
253
- --basecolors-frame-default: #ffffff;
254
- --basecolors-frame-elevated: #ffffff;
255
- --basecolors-frame-elevatedalt: #f6f6f9;
256
- --basecolors-frame-subdued: #d9dae8;
257
- --basecolors-frame-tint: #f6f6f9;
258
- --basecolors-shape-accent: #181c56;
259
- --basecolors-shape-bicycle-contrast: #00db9b;
260
- --basecolors-shape-bicycle-default: #33826b;
261
- --basecolors-shape-bus-contrast: #ff6392;
262
- --basecolors-shape-bus-default: #c5044e;
263
- --basecolors-shape-cableway-contrast: #b482fb;
264
- --basecolors-shape-cableway-default: #78469a;
265
- --basecolors-shape-disabled: #6e6f73;
266
- --basecolors-shape-disabledalt: #b6b8ba;
267
- --basecolors-shape-ferry-contrast: #6fdfff;
268
- --basecolors-shape-ferry-default: #0c6693;
269
- --basecolors-shape-funicular-contrast: #b482fb;
270
- --basecolors-shape-funicular-default: #78469a;
271
- --basecolors-shape-helicopter-contrast: #fbafea;
272
- --basecolors-shape-helicopter-default: #800664;
273
- --basecolors-shape-highlight: #ff5959;
274
- --basecolors-shape-light: #ffffff;
275
- --basecolors-shape-mask: #ffffff;
276
- --basecolors-shape-maskalt: #ffffff;
277
- --basecolors-shape-metro-contrast: #f08901;
278
- --basecolors-shape-metro-default: #bf5826;
279
- --basecolors-shape-mobility-contrast: #00db9b;
280
- --basecolors-shape-mobility-default: #33826b;
281
- --basecolors-shape-plane-contrast: #fbafea;
282
- --basecolors-shape-plane-default: #800664;
283
- --basecolors-shape-subdued: #626493;
284
- --basecolors-shape-subduedalt: #d9dae8;
285
- --basecolors-shape-taxi-contrast: #ffe082;
286
- --basecolors-shape-taxi-default: #3d3e40;
287
- --basecolors-shape-train-contrast: #42a5f5;
288
- --basecolors-shape-train-default: #00367f;
289
- --basecolors-shape-tram-contrast: #b482fb;
290
- --basecolors-shape-tram-default: #78469a;
291
- --basecolors-shape-walk-contrast: #8284ab;
292
- --basecolors-shape-walk-default: #8d8e9c;
293
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
294
- --basecolors-shape-airportlinkbus-default: #800664;
295
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
296
- --basecolors-shape-airportlinkrail-default: #800664;
297
- --basecolors-stroke-contrast: #aeb7e2;
298
- --basecolors-stroke-default: #181c56;
299
- --basecolors-stroke-disabled: #949699;
300
- --basecolors-stroke-focus-contrast: #aeb7e2;
301
- --basecolors-stroke-focus-standard: #181c56;
302
- --basecolors-stroke-highlight: #ff5959;
303
- --basecolors-stroke-light: #ffffff;
304
- --basecolors-stroke-subdued: #8284ab;
305
- --basecolors-stroke-subduedalt: #e3e6e8;
306
- --basecolors-text-accent: #181c56;
307
- --basecolors-text-disabled: #6e6f73;
308
- --basecolors-text-disabledalt: #b6b8ba;
309
- --basecolors-text-highlight: #ff5959;
310
- --basecolors-text-light: #ffffff;
311
- --basecolors-text-subdued: #626493;
312
- --basecolors-text-subduedalt: #d9dae8;
238
+ :root{
239
+ /* number */
240
+ --size-0:0rem;
241
+ --size-1:0.0625rem;
242
+ --size-2:0.125rem;
243
+ --size-3:0.25rem;
244
+ --size-4:0.375rem;
245
+ --size-5:0.5rem;
246
+ --size-6:0.75rem;
247
+ --size-7:0.875rem;
248
+ --size-8:1rem;
249
+ --size-9:1.25rem;
250
+ --size-10:1.5rem;
251
+ --size-11:1.75rem;
252
+ --size-12:2rem;
253
+ --size-13:2.25rem;
254
+ --size-14:2.5rem;
255
+ --size-15:2.75rem;
256
+ --size-16:3rem;
257
+ --size-17:3.25rem;
258
+ --size-18:3.5rem;
259
+ --size-19:4rem;
260
+ --size-20:4.5rem;
261
+ --size-21:5rem;
262
+ --size-22:5.5rem;
263
+ --size-23:6rem;
264
+ --size-24:6.5rem;
265
+ --size-25:7rem;
266
+ --size-26:7.5rem;
267
+ --size-27:8rem;
268
+ --size-28:8.5rem;
269
+ --size-29:9rem;
270
+ --size-30:9.5rem;
271
+ --size-31:10rem;
272
+ }
273
+
274
+ :root,
275
+ [data-theme=standard]{
276
+ /* number */
277
+ --button-border-large:var(--size-2);
278
+ --button-border-medium:var(--size-2);
279
+ --button-border-small:var(--size-2);
280
+ --button-gap-small:var(--size-3);
281
+ --button-gap-large:var(--size-5);
282
+ --button-gap-medium:var(--size-5);
283
+ --button-height-horizontal-small:var(--size-12);
284
+ --button-height-horizontal-medium:var(--size-16);
285
+ --button-height-horizontal-large:var(--size-19);
286
+ --button-height-vertical-small:var(--size-16);
287
+ --button-height-vertical-medium:var(--size-18);
288
+ --button-height-vertical-large:var(--size-20);
289
+ --button-icon-small:var(--size-8);
290
+ --button-icon-medium:var(--size-9);
291
+ --button-icon-large:var(--size-10);
292
+ --button-inline-padding-small:var(--size-6);
293
+ --button-inline-padding-medium:var(--size-8);
294
+ --button-inline-padding-large:var(--size-10);
295
+ --button-radius-small:var(--size-4);
296
+ --button-radius-large:var(--size-5);
297
+ --button-radius-medium:var(--size-5);
298
+ --button-radius-round:var(--size-23);
313
299
  }
314
300
 
315
- [data-color-mode=dark] {
316
- --basecolors-frame-contrast: #212233;
317
- --basecolors-frame-contrastalt: #141527;
318
- --basecolors-frame-contrastalt-2: #08091c;
319
- --basecolors-frame-default: #08091c;
320
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
321
- --basecolors-frame-elevatedalt: #464755;
322
- --basecolors-frame-subdued: #2d2e3e;
323
- --basecolors-frame-tint: #141527;
324
- --basecolors-shape-accent: #e5e5e9;
325
- --basecolors-shape-bicycle-contrast: #4db295;
326
- --basecolors-shape-bicycle-default: #4db295;
327
- --basecolors-shape-bus-contrast: #ef7398;
328
- --basecolors-shape-bus-default: #ef7398;
329
- --basecolors-shape-cableway-contrast: #b898e5;
330
- --basecolors-shape-cableway-default: #b898e5;
331
- --basecolors-shape-disabled: #b6b8ba;
332
- --basecolors-shape-disabledalt: #b3b4bd;
333
- --basecolors-shape-ferry-contrast: #8ccfe2;
334
- --basecolors-shape-ferry-default: #8ccfe2;
335
- --basecolors-shape-funicular-contrast: #b898e5;
336
- --basecolors-shape-funicular-default: #b898e5;
337
- --basecolors-shape-helicopter-contrast: #f2b8e5;
338
- --basecolors-shape-helicopter-default: #f2b8e5;
339
- --basecolors-shape-highlight: #ff9494;
340
- --basecolors-shape-light: #e5e5e9;
341
- --basecolors-shape-mask: #2d2e3e;
342
- --basecolors-shape-maskalt: #393a49;
343
- --basecolors-shape-metro-contrast: #dd973c;
344
- --basecolors-shape-metro-default: #dd973c;
345
- --basecolors-shape-mobility-contrast: #4db295;
346
- --basecolors-shape-mobility-default: #4db295;
347
- --basecolors-shape-plane-contrast: #f2b8e5;
348
- --basecolors-shape-plane-default: #f2b8e5;
349
- --basecolors-shape-subdued: #b3b4bd;
350
- --basecolors-shape-subduedalt: #b3b4bd;
351
- --basecolors-shape-taxi-contrast: #ffe082;
352
- --basecolors-shape-taxi-default: #ffe082;
353
- --basecolors-shape-train-contrast: #60a2d7;
354
- --basecolors-shape-train-default: #60a2d7;
355
- --basecolors-shape-tram-contrast: #b898e5;
356
- --basecolors-shape-tram-default: #b898e5;
357
- --basecolors-shape-walk-contrast: #8d8e9c;
358
- --basecolors-shape-walk-default: #8d8e9c;
359
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
360
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
361
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
362
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
363
- --basecolors-stroke-contrast: #aeb7e2;
364
- --basecolors-stroke-default: #b3b4bd;
365
- --basecolors-stroke-disabled: #e3e6e8;
366
- --basecolors-stroke-focus-contrast: #aeb7e2;
367
- --basecolors-stroke-focus-standard: #aeb7e2;
368
- --basecolors-stroke-highlight: #ff9494;
369
- --basecolors-stroke-light: #b3b4bd;
370
- --basecolors-stroke-subdued: #81828f;
371
- --basecolors-stroke-subduedalt: #949699;
372
- --basecolors-text-accent: #e5e5e9;
373
- --basecolors-text-disabled: #b6b8ba;
374
- --basecolors-text-disabledalt: #b6b8ba;
375
- --basecolors-text-highlight: #ff9494;
376
- --basecolors-text-light: #e5e5e9;
377
- --basecolors-text-subdued: #b3b4bd;
378
- --basecolors-text-subduedalt: #b3b4bd;
301
+ [data-theme=compact]{
302
+ /* number */
303
+ --button-border-large:var(--size-2);
304
+ --button-border-medium:var(--size-2);
305
+ --button-border-small:var(--size-2);
306
+ --button-gap-medium:var(--size-3);
307
+ --button-gap-small:var(--size-3);
308
+ --button-gap-large:var(--size-5);
309
+ --button-height-horizontal-small:var(--size-11);
310
+ --button-height-horizontal-medium:var(--size-14);
311
+ --button-height-horizontal-large:var(--size-18);
312
+ --button-height-vertical-small:var(--size-14);
313
+ --button-height-vertical-medium:var(--size-16);
314
+ --button-height-vertical-large:var(--size-18);
315
+ --button-icon-medium:var(--size-8);
316
+ --button-icon-small:var(--size-8);
317
+ --button-icon-large:var(--size-9);
318
+ --button-inline-padding-small:var(--size-5);
319
+ --button-inline-padding-medium:var(--size-6);
320
+ --button-inline-padding-large:var(--size-8);
321
+ --button-radius-small:var(--size-3);
322
+ --button-radius-large:var(--size-5);
323
+ --button-radius-medium:var(--size-5);
324
+ --button-radius-round:var(--size-23);
325
+ }
326
+
327
+ [data-theme=display]{
328
+ /* number */
329
+ --button-border-small:var(--size-2);
330
+ --button-border-large:var(--size-3);
331
+ --button-border-medium:var(--size-3);
332
+ --button-gap-small:var(--size-5);
333
+ --button-gap-medium:var(--size-6);
334
+ --button-gap-large:var(--size-8);
335
+ --button-height-horizontal-small:var(--size-19);
336
+ --button-height-horizontal-medium:var(--size-23);
337
+ --button-height-horizontal-large:var(--size-26);
338
+ --button-height-vertical-small:var(--size-21);
339
+ --button-height-vertical-medium:var(--size-24);
340
+ --button-height-vertical-large:var(--size-28);
341
+ --button-icon-small:var(--size-10);
342
+ --button-icon-medium:var(--size-12);
343
+ --button-icon-large:var(--size-16);
344
+ --button-inline-padding-small:var(--size-10);
345
+ --button-inline-padding-medium:var(--size-12);
346
+ --button-inline-padding-large:var(--size-14);
347
+ --button-radius-small:var(--size-5);
348
+ --button-radius-large:var(--size-8);
349
+ --button-radius-medium:var(--size-8);
350
+ --button-radius-round:var(--size-23);
351
+ }
352
+ [data-color-mode=light],
353
+ :root{
354
+ --basecolors-frame-contrast:#181c56;
355
+ --basecolors-frame-contrastalt:#393d79;
356
+ --basecolors-frame-contrastalt-2:#292b6a;
357
+ --basecolors-frame-default:#ffffff;
358
+ --basecolors-frame-elevated:#ffffff;
359
+ --basecolors-frame-elevatedalt:#f6f6f9;
360
+ --basecolors-frame-subdued:#d9dae8;
361
+ --basecolors-frame-tint:#f6f6f9;
362
+ --basecolors-shape-accent:#181c56;
363
+ --basecolors-shape-bicycle-contrast:#00db9b;
364
+ --basecolors-shape-bicycle-default:#33826b;
365
+ --basecolors-shape-bus-contrast:#ff6392;
366
+ --basecolors-shape-bus-default:#c5044e;
367
+ --basecolors-shape-cableway-contrast:#b482fb;
368
+ --basecolors-shape-cableway-default:#78469a;
369
+ --basecolors-shape-disabled:#6e6f73;
370
+ --basecolors-shape-disabledalt:#b6b8ba;
371
+ --basecolors-shape-ferry-contrast:#6fdfff;
372
+ --basecolors-shape-ferry-default:#0c6693;
373
+ --basecolors-shape-funicular-contrast:#b482fb;
374
+ --basecolors-shape-funicular-default:#78469a;
375
+ --basecolors-shape-helicopter-contrast:#fbafea;
376
+ --basecolors-shape-helicopter-default:#800664;
377
+ --basecolors-shape-highlight:#ff5959;
378
+ --basecolors-shape-light:#ffffff;
379
+ --basecolors-shape-mask:#ffffff;
380
+ --basecolors-shape-maskalt:#ffffff;
381
+ --basecolors-shape-metro-contrast:#f08901;
382
+ --basecolors-shape-metro-default:#bf5826;
383
+ --basecolors-shape-mobility-contrast:#00db9b;
384
+ --basecolors-shape-mobility-default:#33826b;
385
+ --basecolors-shape-plane-contrast:#fbafea;
386
+ --basecolors-shape-plane-default:#800664;
387
+ --basecolors-shape-subdued:#626493;
388
+ --basecolors-shape-subduedalt:#d9dae8;
389
+ --basecolors-shape-taxi-contrast:#ffe082;
390
+ --basecolors-shape-taxi-default:#3d3e40;
391
+ --basecolors-shape-train-contrast:#42a5f5;
392
+ --basecolors-shape-train-default:#00367f;
393
+ --basecolors-shape-tram-contrast:#b482fb;
394
+ --basecolors-shape-tram-default:#78469a;
395
+ --basecolors-shape-walk-contrast:#8284ab;
396
+ --basecolors-shape-walk-default:#8d8e9c;
397
+ --basecolors-shape-airportlinkbus-contrast:#fbafea;
398
+ --basecolors-shape-airportlinkbus-default:#800664;
399
+ --basecolors-shape-airportlinkrail-contrast:#fbafea;
400
+ --basecolors-shape-airportlinkrail-default:#800664;
401
+ --basecolors-stroke-contrast:#aeb7e2;
402
+ --basecolors-stroke-default:#181c56;
403
+ --basecolors-stroke-disabled:#949699;
404
+ --basecolors-stroke-focus-contrast:#aeb7e2;
405
+ --basecolors-stroke-focus-standard:#181c56;
406
+ --basecolors-stroke-highlight:#ff5959;
407
+ --basecolors-stroke-light:#ffffff;
408
+ --basecolors-stroke-subdued:#8284ab;
409
+ --basecolors-stroke-subduedalt:#e3e6e8;
410
+ --basecolors-text-accent:#181c56;
411
+ --basecolors-text-disabled:#6e6f73;
412
+ --basecolors-text-disabledalt:#b6b8ba;
413
+ --basecolors-text-highlight:#ff5959;
414
+ --basecolors-text-light:#ffffff;
415
+ --basecolors-text-subdued:#626493;
416
+ --basecolors-text-subduedalt:#d9dae8;
379
417
  }
380
418
 
381
- :root {
382
- --eds-button: 1;
383
- }/* DO NOT CHANGE!*/
384
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
385
- a.eds-button {
386
- display: flex;
387
- align-items: center;
388
- justify-content: center;
389
- }
390
- a.eds-button .eds-icon {
391
- position: unset;
419
+ [data-color-mode=dark]{
420
+ --basecolors-frame-contrast:#212233;
421
+ --basecolors-frame-contrastalt:#141527;
422
+ --basecolors-frame-contrastalt-2:#08091c;
423
+ --basecolors-frame-default:#08091c;
424
+ --basecolors-frame-elevated:rgba(229, 229, 233, 0.1490196078);
425
+ --basecolors-frame-elevatedalt:#464755;
426
+ --basecolors-frame-subdued:#2d2e3e;
427
+ --basecolors-frame-tint:#141527;
428
+ --basecolors-shape-accent:#e5e5e9;
429
+ --basecolors-shape-bicycle-contrast:#4db295;
430
+ --basecolors-shape-bicycle-default:#4db295;
431
+ --basecolors-shape-bus-contrast:#ef7398;
432
+ --basecolors-shape-bus-default:#ef7398;
433
+ --basecolors-shape-cableway-contrast:#b898e5;
434
+ --basecolors-shape-cableway-default:#b898e5;
435
+ --basecolors-shape-disabled:#b6b8ba;
436
+ --basecolors-shape-disabledalt:#b3b4bd;
437
+ --basecolors-shape-ferry-contrast:#8ccfe2;
438
+ --basecolors-shape-ferry-default:#8ccfe2;
439
+ --basecolors-shape-funicular-contrast:#b898e5;
440
+ --basecolors-shape-funicular-default:#b898e5;
441
+ --basecolors-shape-helicopter-contrast:#f2b8e5;
442
+ --basecolors-shape-helicopter-default:#f2b8e5;
443
+ --basecolors-shape-highlight:#ff9494;
444
+ --basecolors-shape-light:#e5e5e9;
445
+ --basecolors-shape-mask:#2d2e3e;
446
+ --basecolors-shape-maskalt:#393a49;
447
+ --basecolors-shape-metro-contrast:#dd973c;
448
+ --basecolors-shape-metro-default:#dd973c;
449
+ --basecolors-shape-mobility-contrast:#4db295;
450
+ --basecolors-shape-mobility-default:#4db295;
451
+ --basecolors-shape-plane-contrast:#f2b8e5;
452
+ --basecolors-shape-plane-default:#f2b8e5;
453
+ --basecolors-shape-subdued:#b3b4bd;
454
+ --basecolors-shape-subduedalt:#b3b4bd;
455
+ --basecolors-shape-taxi-contrast:#ffe082;
456
+ --basecolors-shape-taxi-default:#ffe082;
457
+ --basecolors-shape-train-contrast:#60a2d7;
458
+ --basecolors-shape-train-default:#60a2d7;
459
+ --basecolors-shape-tram-contrast:#b898e5;
460
+ --basecolors-shape-tram-default:#b898e5;
461
+ --basecolors-shape-walk-contrast:#8d8e9c;
462
+ --basecolors-shape-walk-default:#8d8e9c;
463
+ --basecolors-shape-airportlinkbus-contrast:#f2b8e5;
464
+ --basecolors-shape-airportlinkbus-default:#f2b8e5;
465
+ --basecolors-shape-airportlinkrail-contrast:#f2b8e5;
466
+ --basecolors-shape-airportlinkrail-default:#f2b8e5;
467
+ --basecolors-stroke-contrast:#aeb7e2;
468
+ --basecolors-stroke-default:#b3b4bd;
469
+ --basecolors-stroke-disabled:#e3e6e8;
470
+ --basecolors-stroke-focus-contrast:#aeb7e2;
471
+ --basecolors-stroke-focus-standard:#aeb7e2;
472
+ --basecolors-stroke-highlight:#ff9494;
473
+ --basecolors-stroke-light:#b3b4bd;
474
+ --basecolors-stroke-subdued:#81828f;
475
+ --basecolors-stroke-subduedalt:#949699;
476
+ --basecolors-text-accent:#e5e5e9;
477
+ --basecolors-text-disabled:#b6b8ba;
478
+ --basecolors-text-disabledalt:#b6b8ba;
479
+ --basecolors-text-highlight:#ff9494;
480
+ --basecolors-text-light:#e5e5e9;
481
+ --basecolors-text-subdued:#b3b4bd;
482
+ --basecolors-text-subduedalt:#b3b4bd;
392
483
  }
393
484
 
394
- .eds-button {
395
- min-width: 9.5rem;
396
- width: max-content;
397
- min-height: 3rem;
398
- height: fit-content;
399
- border-radius: 0.25rem;
400
- font-size: inherit;
401
- cursor: pointer;
402
- display: inline-block;
403
- appearance: none;
404
- text-decoration: none;
405
- padding: 0 1rem;
406
- font-size: 1rem;
407
- line-height: 1.5rem;
408
- font-weight: 500;
409
- text-align: center;
410
- font-family: inherit;
411
- position: relative;
412
- vertical-align: top;
413
- background-color: var(--eds-button-background);
414
- border: 0.125rem solid var(--eds-button-border);
415
- color: var(--eds-button-text);
416
- }
417
- .eds-button:hover {
418
- background-color: var(--eds-button-background-hover);
419
- }
420
- .eds-button:active {
421
- background-color: var(--eds-button-background-active);
422
- border-color: var(--eds-button-border-active);
423
- color: var(--eds-button-text-active);
424
- }
425
- .eds-button:focus-visible {
426
- outline: 2px solid #181c56;
427
- outline-color: var(--basecolors-stroke-focus-standard);
428
- outline-offset: 0.125rem;
429
- }
430
- .eds-contrast .eds-button:focus-visible {
431
- outline-color: var(--basecolors-stroke-focus-contrast);
432
- }
433
- .eds-button > .eds-button__loading-dots {
434
- width: 100%;
435
- }
436
- .eds-button > .eds-button__loading-dots .eds-loading-dots__dot {
437
- background: var(--eds-button-text);
438
- }
439
- .eds-button .eds-icon {
440
- position: relative;
441
- top: 0.2em;
442
- }
443
- .eds-button--leading-icon .eds-icon {
444
- margin-right: 0.75rem;
445
- }
446
- .eds-button--trailing-icon .eds-icon {
447
- margin-left: 0.75rem;
448
- }
449
- .eds-button--size-small {
450
- min-width: 5.75rem;
451
- min-height: 2rem;
452
- font-size: 0.875rem;
453
- line-height: 1.375rem;
454
- }
455
- .eds-button--size-large {
456
- min-width: 11.75rem;
457
- min-height: 3.75rem;
458
- }
459
- .eds-button--width-fluid {
460
- width: 100%;
461
- }
462
- .eds-button--variant-primary {
463
- --eds-button-background: var(--components-button-primary-standard-default);
464
- --eds-button-text: var(--components-button-primary-standard-text);
465
- --eds-button-text-active: var(--components-button-primary-standard-text);
466
- --eds-button-background-hover: var(--components-button-primary-standard-hover);
467
- --eds-button-background-active: var(--components-button-primary-standard-active);
468
- --eds-button-border: transparent;
469
- --eds-button-border-active: transparent;
470
- }
471
- .eds-contrast .eds-button--variant-primary {
472
- --eds-button-background: var(--components-button-primary-contrast-default);
473
- --eds-button-text: var(--components-button-primary-contrast-text);
474
- --eds-button-text-active: var(--components-button-primary-contrast-text);
475
- --eds-button-background-hover: var(--components-button-primary-contrast-hover);
476
- --eds-button-background-active: var(--components-button-primary-contrast-active);
477
- --eds-button-border: transparent;
478
- --eds-button-border-active: transparent;
479
- }
480
- .eds-button--variant-secondary {
481
- --eds-button-background: var(--components-button-secondary-standard-default);
482
- --eds-button-text: var(--components-button-secondary-standard-text);
483
- --eds-button-text-active: var(--components-button-secondary-standard-text-active);
484
- --eds-button-background-hover: var(--components-button-secondary-standard-hover);
485
- --eds-button-background-active: var(--components-button-secondary-standard-active);
486
- --eds-button-border: var(--components-button-secondary-standard-border);
487
- --eds-button-border-active: var(--components-button-secondary-standard-border-active);
488
- }
489
- .eds-contrast .eds-button--variant-secondary {
490
- --eds-button-background: var(--components-button-secondary-contrast-default);
491
- --eds-button-text: var(--components-button-secondary-contrast-text);
492
- --eds-button-text-active: var(--components-button-secondary-contrast-text-active);
493
- --eds-button-background-hover: var(--components-button-secondary-contrast-hover);
494
- --eds-button-background-active: var(--components-button-secondary-contrast-active);
495
- --eds-button-border: var(--components-button-secondary-contrast-border);
496
- --eds-button-border-active: var(--components-button-secondary-contrast-border-active);
497
- }
498
- .eds-button--variant-success {
499
- --eds-button-background: var(--components-button-success-standard-default);
500
- --eds-button-text: var(--components-button-success-standard-text);
501
- --eds-button-text-active: var(--components-button-success-standard-text);
502
- --eds-button-background-hover: var(--components-button-success-standard-hover);
503
- --eds-button-background-active: var(--components-button-success-standard-active);
504
- --eds-button-border: var(--components-button-success-standard-border);
505
- --eds-button-border-active: var(--components-button-success-standard-border);
506
- }
507
- .eds-contrast .eds-button--variant-success {
508
- --eds-button-background: var(--components-button-success-contrast-default);
509
- --eds-button-text: var(--components-button-success-contrast-text);
510
- --eds-button-text-active: var(--components-button-success-contrast-text);
511
- --eds-button-background-hover: var(--components-button-success-contrast-hover);
512
- --eds-button-background-active: var(--components-button-success-contrast-active);
513
- --eds-button-border: var(--components-button-success-contrast-border);
514
- --eds-button-border-active: var(--components-button-success-contrast-border);
515
- }
516
- .eds-button--variant-negative {
517
- --eds-button-background: var(--components-button-negative-standard-default);
518
- --eds-button-text: var(--components-button-negative-standard-text);
519
- --eds-button-text-active: var(--components-button-negative-standard-text-active);
520
- --eds-button-background-hover: var(--components-button-negative-standard-hover);
521
- --eds-button-background-active: var(--components-button-negative-standard-active);
522
- --eds-button-border: var(--components-button-negative-standard-border);
523
- --eds-button-border-active: var(--components-button-negative-standard-border);
524
- }
525
- .eds-contrast .eds-button--variant-negative {
526
- --eds-button-background: var(--components-button-negative-contrast-default);
527
- --eds-button-text: var(--components-button-negative-contrast-text);
528
- --eds-button-text-active: var(--components-button-negative-contrast-text-active);
529
- --eds-button-background-hover: var(--components-button-negative-contrast-hover);
530
- --eds-button-background-active: var(--components-button-negative-contrast-active);
531
- --eds-button-border: var(--components-button-negative-contrast-border);
532
- --eds-button-border-active: var(--components-button-negative-contrast-border);
533
- }
534
- .eds-button--variant-tertiary {
535
- font-size: 0.875rem;
536
- border: 0.0625rem solid #54568c;
537
- border-radius: 0.25rem;
538
- background-color: transparent;
539
- color: #181c56;
540
- height: 2rem;
541
- padding: 0 0.75rem;
542
- min-width: 6rem;
543
- }
544
- .eds-button--variant-tertiary:hover {
545
- background-color: rgb(206.4, 211.8, 237.6);
546
- }
547
- .eds-button--variant-tertiary:active {
548
- background-color: #aeb7e2;
549
- }
550
- .eds-button--variant-tertiary.eds-button--leading-icon .eds-icon {
551
- margin-right: 0.5rem;
552
- }
553
- .eds-button--variant-tertiary.eds-button--trailing-icon .eds-icon {
554
- margin-left: 0.5rem;
555
- }
556
- .eds-contrast .eds-button--variant-tertiary {
557
- background-color: transparent;
558
- color: #ffffff;
559
- border-color: #aeb7e2;
560
- }
561
- .eds-contrast .eds-button--variant-tertiary > .eds-button__loading-dots .eds-loading-dots__dot {
562
- background: #ffffff;
563
- }
564
- .eds-contrast .eds-button--variant-tertiary:hover {
565
- background-color: rgba(174, 183, 226, 0.2);
566
- }
567
- .eds-contrast .eds-button--variant-tertiary:active {
568
- background: #aeb7e2;
569
- color: #181c56;
570
- }
571
- .eds-contrast .eds-button--variant-tertiary:active > .eds-button__loading-dots .eds-loading-dots__dot {
572
- background: #181c56;
573
- }
574
- .eds-button[disabled].eds-button--loading {
575
- pointer-events: none;
576
- }
577
- .eds-button[disabled]:not(.eds-button--loading) {
578
- background: var(--components-button-disabled-standard-fill);
579
- color: var(--components-button-disabled-standard-text-disabled);
580
- border-color: transparent;
581
- cursor: not-allowed;
582
- }
583
- .eds-contrast .eds-button[disabled]:not(.eds-button--loading) {
584
- background-color: var(--components-button-disabled-contrast-fill);
585
- color: var(--components-button-disabled-contrast-text-disabled);
586
- border-color: transparent;
587
- }/* DO NOT CHANGE!*/
588
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
589
- .eds-button-group .eds-button {
590
- margin-right: 0.75rem;
591
- margin-bottom: 0.75rem;
592
- }
593
- .eds-button-group .eds-button:only-child {
594
- margin: 0;
595
- }/* DO NOT CHANGE!*/
596
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
597
- .eds-floating-button {
598
- align-items: center;
599
- appearance: none;
600
- background: var(--components-button-floating-standard-default);
601
- border: 0;
602
- border-radius: 1.5rem;
603
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
604
- color: var(--components-button-floating-standard-text);
605
- cursor: pointer;
606
- display: flex;
607
- font-family: inherit;
608
- font-size: 0.875rem;
609
- font-weight: 500;
610
- justify-content: center;
611
- min-height: 3rem;
612
- margin: 0;
613
- min-width: 3rem;
614
- padding: 0 1rem;
615
- position: relative;
616
- z-index: 10;
617
- }
618
- .eds-floating-button--extended {
619
- padding: 0 0.9375rem;
620
- }
621
- .eds-floating-button:hover {
622
- background-color: var(--components-button-floating-standard-hover);
623
- }
624
- .eds-floating-button:active {
625
- background-color: var(--components-button-floating-standard-active);
626
- }
627
- .eds-floating-button:focus-visible {
628
- outline: 2px solid #181c56;
629
- outline-color: var(--basecolors-stroke-focus-standard);
630
- outline-offset: 0.125rem;
631
- }
632
- .eds-contrast .eds-floating-button:focus-visible {
633
- outline-color: var(--basecolors-stroke-focus-contrast);
634
- }
635
- .eds-contrast .eds-floating-button {
636
- background: var(--components-button-floating-contrast-default);
637
- color: var(--components-button-floating-contrast-text);
638
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
639
- }
640
- .eds-contrast .eds-floating-button:hover {
641
- background-color: var(--components-button-floating-contrast-hover);
642
- }
643
- .eds-contrast .eds-floating-button:active {
644
- background-color: var(--components-button-floating-contrast-active);
645
- }
646
- .eds-floating-button--small {
647
- border-radius: 1rem;
648
- height: 2rem;
649
- padding: 0 0.5rem;
650
- min-width: 2rem;
651
- min-height: 2rem;
652
- flex: 0 1 auto;
653
- }
654
- .eds-floating-button--small.eds-floating-button--extended {
655
- padding: 0 0.6875rem;
485
+ :root{
486
+ --eds-button:1;
487
+ }.eds-button{
488
+ min-width:var(--size-30);
489
+ width:-webkit-max-content;
490
+ width:-moz-max-content;
491
+ width:max-content;
492
+ height:var(--button-height-horizontal-medium);
493
+ -webkit-border-radius:var(--button-radius-medium);
494
+ -moz-border-radius:var(--button-radius-medium);
495
+ border-radius:var(--button-radius-medium);
496
+ cursor:pointer;
497
+ display:inline-block;
498
+ -webkit-appearance:none;
499
+ -moz-appearance:none;
500
+ appearance:none;
501
+ -webkit-text-decoration:none;
502
+ text-decoration:none;
503
+ overflow-x:hidden;
504
+ -o-text-overflow:ellipsis;
505
+ text-overflow:ellipsis;
506
+ white-space:nowrap;
507
+ padding-inline:var(--button-inline-padding-medium);
508
+ font-size:var(--font-size-body-m);
509
+ line-height:var(--font-line-height-body-m);
510
+ font-weight:var(--font-weight-body);
511
+ text-align:center;
512
+ font-family:inherit;
513
+ position:relative;
514
+ vertical-align:middle;
515
+ background-color:var(--eds-button-background);
516
+ border:var(--button-border-medium) solid var(--eds-button-border);
517
+ color:var(--eds-button-text);
518
+ }
519
+ .eds-button:hover{
520
+ background-color:var(--eds-button-background-hover);
521
+ }
522
+ .eds-button:active{
523
+ background-color:var(--eds-button-background-active);
524
+ border-color:var(--eds-button-border-active);
525
+ color:var(--eds-button-text-active);
526
+ }
527
+ .eds-button:focus-visible{
528
+ outline:2px solid #181c56;
529
+ outline-color:var(--basecolors-stroke-focus-standard);
530
+ outline-offset:0.125rem;
531
+ }
532
+ .eds-contrast .eds-button:focus-visible{
533
+ outline-color:var(--basecolors-stroke-focus-contrast);
534
+ }
535
+ .eds-button > .eds-button__loading-dots{
536
+ width:100%;
537
+ }
538
+ .eds-button > .eds-button__loading-dots .eds-loading-dots__dot{
539
+ background:var(--eds-button-text);
540
+ }
541
+ .eds-button :where(.eds-icon){
542
+ position:relative;
543
+ top:0.2em;
544
+ }
545
+ .eds-button--trailing-icon :where(.eds-icon:last-child){
546
+ margin-left:var(--button-gap-medium);
547
+ }
548
+ .eds-button--trailing-icon:where(.eds-button--size-small .eds-icon:last-child){
549
+ margin-left:var(--button-gap-small);
550
+ }
551
+ .eds-button--trailing-icon:where(.eds-button--size-large .eds-icon:last-child){
552
+ margin-left:var(--button-gap-large);
553
+ }
554
+ .eds-button--leading-icon :where(.eds-icon:first-child){
555
+ margin-right:var(--button-gap-medium);
556
+ }
557
+ .eds-button--leading-icon:where(.eds-button--size-small .eds-icon:first-child){
558
+ margin-right:var(--button-gap-small);
559
+ }
560
+ .eds-button--leading-icon:where(.eds-button--size-large .eds-icon:first-child){
561
+ margin-right:var(--button-gap-large);
562
+ }
563
+ .eds-button--size-small{
564
+ height:var(--button-height-horizontal-small);
565
+ -webkit-border-radius:var(--button-radius-small);
566
+ -moz-border-radius:var(--button-radius-small);
567
+ border-radius:var(--button-radius-small);
568
+ padding-inline:var(--button-inline-padding-small);
569
+ font-size:var(--font-size-body-s);
570
+ line-height:var(--font-line-height-body-s);
571
+ border:var(--button-border-small) solid var(--eds-button-border);
572
+ }
573
+ .eds-button--size-large{
574
+ height:var(--button-height-horizontal-large);
575
+ -webkit-border-radius:var(--button-radius-large);
576
+ -moz-border-radius:var(--button-radius-large);
577
+ border-radius:var(--button-radius-large);
578
+ padding-inline:var(--button-inline-padding-large);
579
+ font-size:var(--font-size-body-xl);
580
+ line-height:var(--font-line-height-body-xl);
581
+ border:var(--button-border-large) solid var(--eds-button-border);
582
+ }
583
+ .eds-button--width-fluid{
584
+ width:100%;
585
+ }
586
+ .eds-button--variant-primary{
587
+ --eds-button-background:var(--components-button-primary-standard-default);
588
+ --eds-button-text:var(--components-button-primary-standard-text);
589
+ --eds-button-text-active:var(--components-button-primary-standard-text);
590
+ --eds-button-background-hover:var(--components-button-primary-standard-hover);
591
+ --eds-button-background-active:var(--components-button-primary-standard-active);
592
+ --eds-button-border:transparent;
593
+ --eds-button-border-active:transparent;
594
+ }
595
+ .eds-contrast .eds-button--variant-primary{
596
+ --eds-button-background:var(--components-button-primary-contrast-default);
597
+ --eds-button-text:var(--components-button-primary-contrast-text);
598
+ --eds-button-text-active:var(--components-button-primary-contrast-text);
599
+ --eds-button-background-hover:var(--components-button-primary-contrast-hover);
600
+ --eds-button-background-active:var(--components-button-primary-contrast-active);
601
+ --eds-button-border:transparent;
602
+ --eds-button-border-active:transparent;
603
+ }
604
+ .eds-button--variant-secondary{
605
+ --eds-button-background:var(--components-button-secondary-standard-default);
606
+ --eds-button-text:var(--components-button-secondary-standard-text);
607
+ --eds-button-text-active:var(--components-button-secondary-standard-text-active);
608
+ --eds-button-background-hover:var(--components-button-secondary-standard-hover);
609
+ --eds-button-background-active:var(--components-button-secondary-standard-active);
610
+ --eds-button-border:var(--components-button-secondary-standard-border);
611
+ --eds-button-border-active:var(--components-button-secondary-standard-border-active);
612
+ }
613
+ .eds-contrast .eds-button--variant-secondary{
614
+ --eds-button-background:var(--components-button-secondary-contrast-default);
615
+ --eds-button-text:var(--components-button-secondary-contrast-text);
616
+ --eds-button-text-active:var(--components-button-secondary-contrast-text-active);
617
+ --eds-button-background-hover:var(--components-button-secondary-contrast-hover);
618
+ --eds-button-background-active:var(--components-button-secondary-contrast-active);
619
+ --eds-button-border:var(--components-button-secondary-contrast-border);
620
+ --eds-button-border-active:var(--components-button-secondary-contrast-border-active);
621
+ }
622
+ .eds-button--variant-success{
623
+ --eds-button-background:var(--components-button-success-standard-default);
624
+ --eds-button-text:var(--components-button-success-standard-text);
625
+ --eds-button-text-active:var(--components-button-success-standard-text);
626
+ --eds-button-background-hover:var(--components-button-success-standard-hover);
627
+ --eds-button-background-active:var(--components-button-success-standard-active);
628
+ --eds-button-border:var(--components-button-success-standard-border);
629
+ --eds-button-border-active:var(--components-button-success-standard-border);
630
+ }
631
+ .eds-contrast .eds-button--variant-success{
632
+ --eds-button-background:var(--components-button-success-contrast-default);
633
+ --eds-button-text:var(--components-button-success-contrast-text);
634
+ --eds-button-text-active:var(--components-button-success-contrast-text);
635
+ --eds-button-background-hover:var(--components-button-success-contrast-hover);
636
+ --eds-button-background-active:var(--components-button-success-contrast-active);
637
+ --eds-button-border:var(--components-button-success-contrast-border);
638
+ --eds-button-border-active:var(--components-button-success-contrast-border);
639
+ }
640
+ .eds-button--variant-negative{
641
+ --eds-button-background:var(--components-button-negative-standard-default);
642
+ --eds-button-text:var(--components-button-negative-standard-text);
643
+ --eds-button-text-active:var(--components-button-negative-standard-text-active);
644
+ --eds-button-background-hover:var(--components-button-negative-standard-hover);
645
+ --eds-button-background-active:var(--components-button-negative-standard-active);
646
+ --eds-button-border:var(--components-button-negative-standard-border);
647
+ --eds-button-border-active:var(--components-button-negative-standard-border);
648
+ }
649
+ .eds-contrast .eds-button--variant-negative{
650
+ --eds-button-background:var(--components-button-negative-contrast-default);
651
+ --eds-button-text:var(--components-button-negative-contrast-text);
652
+ --eds-button-text-active:var(--components-button-negative-contrast-text-active);
653
+ --eds-button-background-hover:var(--components-button-negative-contrast-hover);
654
+ --eds-button-background-active:var(--components-button-negative-contrast-active);
655
+ --eds-button-border:var(--components-button-negative-contrast-border);
656
+ --eds-button-border-active:var(--components-button-negative-contrast-border);
657
+ }
658
+ .eds-button--variant-tertiary{
659
+ font-size:0.875rem;
660
+ border:0.0625rem solid #54568c;
661
+ -webkit-border-radius:0.25rem;
662
+ -moz-border-radius:0.25rem;
663
+ border-radius:0.25rem;
664
+ background-color:transparent;
665
+ color:#181c56;
666
+ height:2rem;
667
+ padding:0 0.75rem;
668
+ min-width:6rem;
669
+ }
670
+ .eds-button--variant-tertiary:hover{
671
+ background-color:rgb(206.4, 211.8, 237.6);
672
+ }
673
+ .eds-button--variant-tertiary:active{
674
+ background-color:#aeb7e2;
675
+ }
676
+ .eds-contrast .eds-button--variant-tertiary{
677
+ background-color:transparent;
678
+ color:#ffffff;
679
+ border-color:#aeb7e2;
680
+ }
681
+ .eds-contrast .eds-button--variant-tertiary > .eds-button__loading-dots .eds-loading-dots__dot{
682
+ background:#ffffff;
683
+ }
684
+ .eds-contrast .eds-button--variant-tertiary:hover{
685
+ background-color:rgba(174, 183, 226, 0.2);
686
+ }
687
+ .eds-contrast .eds-button--variant-tertiary:active{
688
+ background:#aeb7e2;
689
+ color:#181c56;
690
+ }
691
+ .eds-contrast .eds-button--variant-tertiary:active > .eds-button__loading-dots .eds-loading-dots__dot{
692
+ background:#181c56;
693
+ }
694
+ .eds-button[disabled].eds-button--loading{
695
+ pointer-events:none;
696
+ }
697
+ .eds-button[disabled]:not(.eds-button--loading){
698
+ background:var(--components-button-disabled-standard-fill);
699
+ color:var(--components-button-disabled-standard-text-disabled);
700
+ border-color:transparent;
701
+ cursor:not-allowed;
702
+ }
703
+ .eds-contrast .eds-button[disabled]:not(.eds-button--loading){
704
+ background-color:var(--components-button-disabled-contrast-fill);
705
+ color:var(--components-button-disabled-contrast-text-disabled);
706
+ border-color:transparent;
707
+ }
708
+ .eds-button:where(a){
709
+ display:-webkit-box;
710
+ display:-webkit-flex;
711
+ display:-moz-box;
712
+ display:flex;
713
+ -webkit-box-align:center;
714
+ -webkit-align-items:center;
715
+ -moz-box-align:center;
716
+ align-items:center;
717
+ -webkit-box-pack:center;
718
+ -webkit-justify-content:center;
719
+ -moz-box-pack:center;
720
+ justify-content:center;
721
+ }
722
+ .eds-button:where(a) :where(.eds-icon){
723
+ position:static;
724
+ position:initial;
725
+ }.eds-button-group .eds-button{
726
+ margin-right:0.75rem;
727
+ margin-bottom:0.75rem;
728
+ }
729
+ .eds-button-group .eds-button:only-child{
730
+ margin:0;
731
+ }.eds-floating-button{
732
+ -webkit-box-align:center;
733
+ -webkit-align-items:center;
734
+ -moz-box-align:center;
735
+ align-items:center;
736
+ -webkit-appearance:none;
737
+ -moz-appearance:none;
738
+ appearance:none;
739
+ background:var(--components-button-floating-standard-default);
740
+ border:0;
741
+ -webkit-border-radius:1.5rem;
742
+ -moz-border-radius:1.5rem;
743
+ border-radius:1.5rem;
744
+ -webkit-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
745
+ -moz-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
746
+ box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
747
+ color:var(--components-button-floating-standard-text);
748
+ cursor:pointer;
749
+ display:-webkit-box;
750
+ display:-webkit-flex;
751
+ display:-moz-box;
752
+ display:flex;
753
+ font-family:inherit;
754
+ font-size:0.875rem;
755
+ font-weight:500;
756
+ -webkit-box-pack:center;
757
+ -webkit-justify-content:center;
758
+ -moz-box-pack:center;
759
+ justify-content:center;
760
+ min-height:3rem;
761
+ margin:0;
762
+ min-width:3rem;
763
+ padding:0 1rem;
764
+ position:relative;
765
+ z-index:10;
766
+ }
767
+ .eds-floating-button--extended{
768
+ padding:0 0.9375rem;
769
+ }
770
+ .eds-floating-button:hover{
771
+ background-color:var(--components-button-floating-standard-hover);
772
+ }
773
+ .eds-floating-button:active{
774
+ background-color:var(--components-button-floating-standard-active);
775
+ }
776
+ .eds-floating-button:focus-visible{
777
+ outline:2px solid #181c56;
778
+ outline-color:var(--basecolors-stroke-focus-standard);
779
+ outline-offset:0.125rem;
780
+ }
781
+ .eds-contrast .eds-floating-button:focus-visible{
782
+ outline-color:var(--basecolors-stroke-focus-contrast);
783
+ }
784
+ .eds-contrast .eds-floating-button{
785
+ background:var(--components-button-floating-contrast-default);
786
+ color:var(--components-button-floating-contrast-text);
787
+ -webkit-box-shadow:0 0.0625rem 0.1875rem rgb(57, 61, 121);
788
+ -moz-box-shadow:0 0.0625rem 0.1875rem rgb(57, 61, 121);
789
+ box-shadow:0 0.0625rem 0.1875rem rgb(57, 61, 121);
790
+ }
791
+ .eds-contrast .eds-floating-button:hover{
792
+ background-color:var(--components-button-floating-contrast-hover);
793
+ }
794
+ .eds-contrast .eds-floating-button:active{
795
+ background-color:var(--components-button-floating-contrast-active);
796
+ }
797
+ .eds-floating-button--small{
798
+ -webkit-border-radius:1rem;
799
+ -moz-border-radius:1rem;
800
+ border-radius:1rem;
801
+ height:2rem;
802
+ padding:0 0.5rem;
803
+ min-width:2rem;
804
+ min-height:2rem;
805
+ -webkit-box-flex:0;
806
+ -webkit-flex:0 1 auto;
807
+ -moz-box-flex:0;
808
+ flex:0 1 auto;
809
+ }
810
+ .eds-floating-button--small.eds-floating-button--extended{
811
+ padding:0 0.6875rem;
656
812
  }
657
813
 
658
- .eds-floating-button--extended > * {
659
- margin: 0 0.5em;
660
- }
661
- .eds-floating-button--extended > *:first-child {
662
- margin-left: 0;
663
- }
664
- .eds-floating-button--extended > *:last-child {
665
- margin-right: 0;
666
- }/* DO NOT CHANGE!*/
667
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
668
- .eds-square-button {
669
- align-items: center;
670
- appearance: none;
671
- background: transparent;
672
- border: 0;
673
- border-radius: 0.25rem;
674
- cursor: pointer;
675
- font-size: 1rem;
676
- display: inline-flex;
677
- font-family: inherit;
678
- font-weight: 500;
679
- justify-content: center;
680
- padding: 0;
681
- text-decoration: none;
682
- }
683
- .eds-square-button:focus-visible {
684
- outline: none;
685
- }
686
- .eds-square-button:focus-visible .eds-square-button__button {
687
- outline: 2px solid #181c56;
688
- outline-color: var(--basecolors-stroke-focus-standard);
689
- outline-offset: 0.125rem;
690
- }
691
- .eds-contrast .eds-square-button:focus-visible .eds-square-button__button {
692
- outline-color: var(--basecolors-stroke-focus-contrast);
693
- }
694
- .eds-square-button[disabled]:not(.eds-square-button--loading) {
695
- cursor: not-allowed;
814
+ .eds-floating-button--extended > *{
815
+ margin:0 0.5em;
816
+ }
817
+ .eds-floating-button--extended > *:first-child{
818
+ margin-left:0;
819
+ }
820
+ .eds-floating-button--extended > *:last-child{
821
+ margin-right:0;
822
+ }.eds-square-button{
823
+ -webkit-box-align:center;
824
+ -webkit-align-items:center;
825
+ -moz-box-align:center;
826
+ align-items:center;
827
+ -webkit-appearance:none;
828
+ -moz-appearance:none;
829
+ appearance:none;
830
+ background:transparent;
831
+ border:0;
832
+ -webkit-border-radius:0.25rem;
833
+ -moz-border-radius:0.25rem;
834
+ border-radius:0.25rem;
835
+ cursor:pointer;
836
+ font-size:1rem;
837
+ display:-webkit-inline-box;
838
+ display:-webkit-inline-flex;
839
+ display:-moz-inline-box;
840
+ display:inline-flex;
841
+ font-family:inherit;
842
+ font-weight:500;
843
+ -webkit-box-pack:center;
844
+ -webkit-justify-content:center;
845
+ -moz-box-pack:center;
846
+ justify-content:center;
847
+ padding:0;
848
+ -webkit-text-decoration:none;
849
+ text-decoration:none;
850
+ }
851
+ .eds-square-button:focus-visible{
852
+ outline:none;
853
+ }
854
+ .eds-square-button:focus-visible .eds-square-button__button{
855
+ outline:2px solid #181c56;
856
+ outline-color:var(--basecolors-stroke-focus-standard);
857
+ outline-offset:0.125rem;
858
+ }
859
+ .eds-contrast .eds-square-button:focus-visible .eds-square-button__button{
860
+ outline-color:var(--basecolors-stroke-focus-contrast);
861
+ }
862
+ .eds-square-button[disabled]:not(.eds-square-button--loading){
863
+ cursor:not-allowed;
696
864
  }
697
865
  .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button,
698
- .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button:hover {
699
- border-color: var(--basecolors-stroke-disabled);
700
- border-style: dashed;
701
- background-color: transparent;
702
- color: var(--basecolors-text-disabled);
866
+ .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button:hover{
867
+ border-color:var(--basecolors-stroke-disabled);
868
+ border-style:dashed;
869
+ background-color:transparent;
870
+ color:var(--basecolors-text-disabled);
703
871
  }
704
872
  .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label,
705
- .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label:hover {
706
- color: var(--basecolors-text-disabled);
707
- }
708
- .eds-square-button.eds-square-button--loading {
709
- opacity: 1;
710
- }
711
- .eds-square-button__button {
712
- align-items: center;
713
- background-color: var(--button-background);
714
- border: 0.125rem solid var(--border-color);
715
- border-radius: 0.25rem;
716
- color: var(--icon-color);
717
- display: inline-flex;
718
- height: 3rem;
719
- justify-content: center;
720
- line-height: 1.5rem;
721
- padding: 0;
722
- text-align: center;
723
- text-decoration: none;
724
- vertical-align: top;
725
- position: relative;
726
- width: 3rem;
727
- }
728
- .eds-square-button__label {
729
- color: var(--label-color);
730
- }
731
- .eds-square-button__label + .eds-square-button__button, .eds-square-button__button + .eds-square-button__label {
732
- margin-left: 1rem;
733
- }
734
- .eds-square-button .eds-square-button__loading-dots .eds-loading-dots__dot {
735
- background: var(--icon-color);
736
- }
737
- .eds-square-button--secondary {
738
- --button-background: var(--components-button-squaresecondary-standard-default);
739
- --border-color: var(--components-button-squaresecondary-standard-border);
740
- --icon-color: var(--components-button-squaresecondary-standard-icon);
741
- --label-color: var(--components-button-squaresecondary-standard-text);
742
- }
743
- .eds-square-button--secondary:hover {
744
- --button-background: var(--components-button-squaresecondary-standard-hover);
745
- }
746
- .eds-square-button--secondary:active {
747
- --button-background: var(--components-button-squaresecondary-standard-active);
748
- --border-color: var(--components-button-squaresecondary-standard-border-active);
749
- --icon-color: var(--components-button-squaresecondary-standard-icon-active);
750
- }
751
- .eds-contrast .eds-square-button--secondary {
752
- --button-background: var(--components-button-squaresecondary-contrast-default);
753
- --border-color: var(--components-button-squaresecondary-contrast-border);
754
- --icon-color: var(--components-button-squaresecondary-contrast-icon-default);
755
- --label-color: var(--components-button-squaresecondary-contrast-label);
756
- }
757
- .eds-contrast .eds-square-button--secondary:hover {
758
- --button-background: var(--components-button-squaresecondary-contrast-hover);
759
- --icon-color: var(--components-button-squaresecondary-contrast-icon-hover);
760
- }
761
- .eds-contrast .eds-square-button--secondary:active {
762
- --button-background: var(--components-button-squaresecondary-contrast-active);
763
- --border-color: var(--components-button-squaresecondary-contrast-border-active);
764
- --icon-color: var(--components-button-squaresecondary-contrast-icon-active);
765
- }
766
- .eds-square-button--success {
767
- --button-background: var(--components-button-squaresuccess-standard-default);
768
- --border-color: var(--components-button-squaresuccess-standard-border);
769
- --icon-color: var(--components-button-squaresuccess-standard-icon);
770
- --label-color: var(--components-button-squaresuccess-standard-label);
771
- }
772
- .eds-square-button--success:hover {
773
- --button-background: var(--components-button-squaresuccess-standard-hover);
774
- }
775
- .eds-square-button--success:active {
776
- --button-background: var(--components-button-squaresuccess-standard-active);
777
- }
778
- .eds-contrast .eds-square-button--success {
779
- --button-background: var(--components-button-squaresuccess-contrast-default);
780
- --border-color: var(--components-button-squaresuccess-contrast-border);
781
- --icon-color: var(--components-button-squaresuccess-contrast-icon);
782
- --label-color: var(--components-button-squaresuccess-contrast-label);
783
- }
784
- .eds-contrast .eds-square-button--success:hover {
785
- --button-background: var(--components-button-squaresuccess-contrast-hover);
786
- }
787
- .eds-contrast .eds-square-button--success:active {
788
- --button-background: var(--components-button-squaresuccess-contrast-active);
789
- }
790
- .eds-square-button--tertiary {
791
- --button-background: var(--components-button-squaresecondary-standard-default);
792
- --border-color: var(--components-button-squaresecondary-standard-border);
793
- --icon-color: var(--components-button-squaresecondary-standard-icon);
794
- --label-color: var(--components-button-squaresecondary-standard-text);
795
- font-size: 0.875rem;
796
- }
797
- .eds-square-button--tertiary:hover {
798
- --button-background: var(--components-button-squaresecondary-standard-hover);
799
- }
800
- .eds-square-button--tertiary:active {
801
- --button-background: var(--components-button-squaresecondary-standard-active);
802
- --border-color: var(--components-button-squaresecondary-standard-border-active);
803
- --icon-color: var(--components-button-squaresecondary-standard-icon-active);
804
- }
805
- .eds-contrast .eds-square-button--tertiary {
806
- --button-background: var(--components-button-squaresecondary-contrast-default);
807
- --border-color: var(--components-button-squaresecondary-contrast-border);
808
- --icon-color: var(--components-button-squaresecondary-contrast-icon-default);
809
- --label-color: var(--components-button-squaresecondary-contrast-label);
810
- }
811
- .eds-contrast .eds-square-button--tertiary:hover {
812
- --button-background: var(--components-button-squaresecondary-contrast-hover);
813
- --icon-color: var(--components-button-squaresecondary-contrast-icon-hover);
814
- }
815
- .eds-contrast .eds-square-button--tertiary:active {
816
- --button-background: var(--components-button-squaresecondary-contrast-active);
817
- --border-color: var(--components-button-squaresecondary-contrast-border-active);
818
- --icon-color: var(--components-button-squaresecondary-contrast-icon-active);
873
+ .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label:hover{
874
+ color:var(--basecolors-text-disabled);
875
+ }
876
+ .eds-square-button.eds-square-button--loading{
877
+ opacity:1;
878
+ }
879
+ .eds-square-button__button{
880
+ -webkit-box-align:center;
881
+ -webkit-align-items:center;
882
+ -moz-box-align:center;
883
+ align-items:center;
884
+ background-color:var(--button-background);
885
+ border:0.125rem solid var(--border-color);
886
+ -webkit-border-radius:0.25rem;
887
+ -moz-border-radius:0.25rem;
888
+ border-radius:0.25rem;
889
+ color:var(--icon-color);
890
+ display:-webkit-inline-box;
891
+ display:-webkit-inline-flex;
892
+ display:-moz-inline-box;
893
+ display:inline-flex;
894
+ height:3rem;
895
+ -webkit-box-pack:center;
896
+ -webkit-justify-content:center;
897
+ -moz-box-pack:center;
898
+ justify-content:center;
899
+ line-height:1.5rem;
900
+ padding:0;
901
+ text-align:center;
902
+ -webkit-text-decoration:none;
903
+ text-decoration:none;
904
+ vertical-align:top;
905
+ position:relative;
906
+ width:3rem;
907
+ }
908
+ .eds-square-button__label{
909
+ color:var(--label-color);
910
+ }
911
+ .eds-square-button__label + .eds-square-button__button, .eds-square-button__button + .eds-square-button__label{
912
+ margin-left:1rem;
913
+ }
914
+ .eds-square-button .eds-square-button__loading-dots .eds-loading-dots__dot{
915
+ background:var(--icon-color);
916
+ }
917
+ .eds-square-button--secondary{
918
+ --button-background:var(--components-button-squaresecondary-standard-default);
919
+ --border-color:var(--components-button-squaresecondary-standard-border);
920
+ --icon-color:var(--components-button-squaresecondary-standard-icon);
921
+ --label-color:var(--components-button-squaresecondary-standard-text);
922
+ }
923
+ .eds-square-button--secondary:hover{
924
+ --button-background:var(--components-button-squaresecondary-standard-hover);
925
+ }
926
+ .eds-square-button--secondary:active{
927
+ --button-background:var(--components-button-squaresecondary-standard-active);
928
+ --border-color:var(--components-button-squaresecondary-standard-border-active);
929
+ --icon-color:var(--components-button-squaresecondary-standard-icon-active);
930
+ }
931
+ .eds-contrast .eds-square-button--secondary{
932
+ --button-background:var(--components-button-squaresecondary-contrast-default);
933
+ --border-color:var(--components-button-squaresecondary-contrast-border);
934
+ --icon-color:var(--components-button-squaresecondary-contrast-icon-default);
935
+ --label-color:var(--components-button-squaresecondary-contrast-label);
936
+ }
937
+ .eds-contrast .eds-square-button--secondary:hover{
938
+ --button-background:var(--components-button-squaresecondary-contrast-hover);
939
+ --icon-color:var(--components-button-squaresecondary-contrast-icon-hover);
940
+ }
941
+ .eds-contrast .eds-square-button--secondary:active{
942
+ --button-background:var(--components-button-squaresecondary-contrast-active);
943
+ --border-color:var(--components-button-squaresecondary-contrast-border-active);
944
+ --icon-color:var(--components-button-squaresecondary-contrast-icon-active);
945
+ }
946
+ .eds-square-button--success{
947
+ --button-background:var(--components-button-squaresuccess-standard-default);
948
+ --border-color:var(--components-button-squaresuccess-standard-border);
949
+ --icon-color:var(--components-button-squaresuccess-standard-icon);
950
+ --label-color:var(--components-button-squaresuccess-standard-label);
951
+ }
952
+ .eds-square-button--success:hover{
953
+ --button-background:var(--components-button-squaresuccess-standard-hover);
954
+ }
955
+ .eds-square-button--success:active{
956
+ --button-background:var(--components-button-squaresuccess-standard-active);
957
+ }
958
+ .eds-contrast .eds-square-button--success{
959
+ --button-background:var(--components-button-squaresuccess-contrast-default);
960
+ --border-color:var(--components-button-squaresuccess-contrast-border);
961
+ --icon-color:var(--components-button-squaresuccess-contrast-icon);
962
+ --label-color:var(--components-button-squaresuccess-contrast-label);
963
+ }
964
+ .eds-contrast .eds-square-button--success:hover{
965
+ --button-background:var(--components-button-squaresuccess-contrast-hover);
966
+ }
967
+ .eds-contrast .eds-square-button--success:active{
968
+ --button-background:var(--components-button-squaresuccess-contrast-active);
969
+ }
970
+ .eds-square-button--tertiary{
971
+ --button-background:var(--components-button-squaresecondary-standard-default);
972
+ --border-color:var(--components-button-squaresecondary-standard-border);
973
+ --icon-color:var(--components-button-squaresecondary-standard-icon);
974
+ --label-color:var(--components-button-squaresecondary-standard-text);
975
+ font-size:0.875rem;
976
+ }
977
+ .eds-square-button--tertiary:hover{
978
+ --button-background:var(--components-button-squaresecondary-standard-hover);
979
+ }
980
+ .eds-square-button--tertiary:active{
981
+ --button-background:var(--components-button-squaresecondary-standard-active);
982
+ --border-color:var(--components-button-squaresecondary-standard-border-active);
983
+ --icon-color:var(--components-button-squaresecondary-standard-icon-active);
984
+ }
985
+ .eds-contrast .eds-square-button--tertiary{
986
+ --button-background:var(--components-button-squaresecondary-contrast-default);
987
+ --border-color:var(--components-button-squaresecondary-contrast-border);
988
+ --icon-color:var(--components-button-squaresecondary-contrast-icon-default);
989
+ --label-color:var(--components-button-squaresecondary-contrast-label);
990
+ }
991
+ .eds-contrast .eds-square-button--tertiary:hover{
992
+ --button-background:var(--components-button-squaresecondary-contrast-hover);
993
+ --icon-color:var(--components-button-squaresecondary-contrast-icon-hover);
994
+ }
995
+ .eds-contrast .eds-square-button--tertiary:active{
996
+ --button-background:var(--components-button-squaresecondary-contrast-active);
997
+ --border-color:var(--components-button-squaresecondary-contrast-border-active);
998
+ --icon-color:var(--components-button-squaresecondary-contrast-icon-active);
819
999
  }
820
1000
  .eds-square-button--tertiary .eds-square-button__label + .eds-square-button__button,
821
- .eds-square-button--tertiary .eds-square-button__button + .eds-square-button__label {
822
- margin-left: 0.75rem;
823
- }
824
- .eds-square-button--tertiary .eds-square-button__button {
825
- height: 2rem;
826
- width: 2rem;
827
- border-width: 0.0625rem;
828
- }/* DO NOT CHANGE!*/
829
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
830
- .eds-icon-button {
831
- border: 0.125rem solid transparent;
832
- border-radius: 0.25rem;
833
- background: none;
834
- color: var(--components-button-iconbutton-standard-text);
835
- cursor: pointer;
836
- display: flex;
837
- justify-content: center;
838
- align-items: center;
839
- font-size: 1rem;
840
- padding: 0.5rem;
841
- }
842
- .eds-contrast .eds-icon-button {
843
- color: var(--components-button-iconbutton-contrast-text);
844
- }
845
- .eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
846
- background-color: var(--components-button-iconbutton-contrast-icon);
847
- }
848
- .eds-icon-button--size-small {
849
- height: 1.5rem;
850
- width: 1.5rem;
851
- padding: 0;
852
- }
853
- .eds-icon-button:hover {
854
- background-color: var(--components-button-iconbutton-standard-hover);
855
- }
856
- .eds-contrast .eds-icon-button:hover {
857
- background-color: var(--components-button-iconbutton-contrast-hover);
858
- }
859
- .eds-icon-button:active {
860
- background: var(--components-button-iconbutton-standard-active);
861
- color: var(--components-button-iconbutton-standard-text-active);
862
- }
863
- .eds-contrast .eds-icon-button:active {
864
- background: var(--components-button-iconbutton-contrast-active);
865
- color: var(--components-button-iconbutton-contrast-text-active);
866
- }
867
- .eds-icon-button:focus-visible {
868
- outline: 2px solid #181c56;
869
- outline-color: var(--basecolors-stroke-focus-standard);
870
- outline-offset: 0.125rem;
871
- }
872
- .eds-contrast .eds-icon-button:focus-visible {
873
- outline-color: var(--basecolors-stroke-focus-contrast);
874
- }
875
- .eds-icon-button--disabled {
876
- opacity: 0.5;
877
- pointer-events: none;
878
- }
879
- .eds-icon-button--disabled__wrapper {
880
- cursor: not-allowed;
881
- width: fit-content;
1001
+ .eds-square-button--tertiary .eds-square-button__button + .eds-square-button__label{
1002
+ margin-left:0.75rem;
1003
+ }
1004
+ .eds-square-button--tertiary .eds-square-button__button{
1005
+ height:2rem;
1006
+ width:2rem;
1007
+ border-width:0.0625rem;
1008
+ }.eds-icon-button{
1009
+ border:0.125rem solid transparent;
1010
+ -webkit-border-radius:0.25rem;
1011
+ -moz-border-radius:0.25rem;
1012
+ border-radius:0.25rem;
1013
+ background:none;
1014
+ color:var(--components-button-iconbutton-standard-text);
1015
+ cursor:pointer;
1016
+ display:-webkit-box;
1017
+ display:-webkit-flex;
1018
+ display:-moz-box;
1019
+ display:flex;
1020
+ -webkit-box-pack:center;
1021
+ -webkit-justify-content:center;
1022
+ -moz-box-pack:center;
1023
+ justify-content:center;
1024
+ -webkit-box-align:center;
1025
+ -webkit-align-items:center;
1026
+ -moz-box-align:center;
1027
+ align-items:center;
1028
+ font-size:1rem;
1029
+ padding:0.5rem;
1030
+ }
1031
+ .eds-contrast .eds-icon-button{
1032
+ color:var(--components-button-iconbutton-contrast-text);
1033
+ }
1034
+ .eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot{
1035
+ background-color:var(--components-button-iconbutton-contrast-icon);
1036
+ }
1037
+ .eds-icon-button--size-small{
1038
+ height:1.5rem;
1039
+ width:1.5rem;
1040
+ padding:0;
1041
+ }
1042
+ .eds-icon-button:hover{
1043
+ background-color:var(--components-button-iconbutton-standard-hover);
1044
+ }
1045
+ .eds-contrast .eds-icon-button:hover{
1046
+ background-color:var(--components-button-iconbutton-contrast-hover);
1047
+ }
1048
+ .eds-icon-button:active{
1049
+ background:var(--components-button-iconbutton-standard-active);
1050
+ color:var(--components-button-iconbutton-standard-text-active);
1051
+ }
1052
+ .eds-contrast .eds-icon-button:active{
1053
+ background:var(--components-button-iconbutton-contrast-active);
1054
+ color:var(--components-button-iconbutton-contrast-text-active);
1055
+ }
1056
+ .eds-icon-button:focus-visible{
1057
+ outline:2px solid #181c56;
1058
+ outline-color:var(--basecolors-stroke-focus-standard);
1059
+ outline-offset:0.125rem;
1060
+ }
1061
+ .eds-contrast .eds-icon-button:focus-visible{
1062
+ outline-color:var(--basecolors-stroke-focus-contrast);
1063
+ }
1064
+ .eds-icon-button--disabled{
1065
+ opacity:0.5;
1066
+ pointer-events:none;
1067
+ }
1068
+ .eds-icon-button--disabled__wrapper{
1069
+ cursor:not-allowed;
1070
+ width:-webkit-fit-content;
1071
+ width:-moz-fit-content;
1072
+ width:fit-content;
882
1073
  }