@entur/button 3.3.18 → 3.3.20-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 +923 -862
  2. package/package.json +4 -4
package/dist/styles.css CHANGED
@@ -1,882 +1,943 @@
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
-
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
237
  [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
+ --basecolors-frame-contrast:#181c56;
240
+ --basecolors-frame-contrastalt:#393d79;
241
+ --basecolors-frame-contrastalt-2:#292b6a;
242
+ --basecolors-frame-default:#ffffff;
243
+ --basecolors-frame-elevated:#ffffff;
244
+ --basecolors-frame-elevatedalt:#f6f6f9;
245
+ --basecolors-frame-subdued:#d9dae8;
246
+ --basecolors-frame-tint:#f6f6f9;
247
+ --basecolors-shape-accent:#181c56;
248
+ --basecolors-shape-bicycle-contrast:#00db9b;
249
+ --basecolors-shape-bicycle-default:#33826b;
250
+ --basecolors-shape-bus-contrast:#ff6392;
251
+ --basecolors-shape-bus-default:#c5044e;
252
+ --basecolors-shape-cableway-contrast:#b482fb;
253
+ --basecolors-shape-cableway-default:#78469a;
254
+ --basecolors-shape-disabled:#6e6f73;
255
+ --basecolors-shape-disabledalt:#b6b8ba;
256
+ --basecolors-shape-ferry-contrast:#6fdfff;
257
+ --basecolors-shape-ferry-default:#0c6693;
258
+ --basecolors-shape-funicular-contrast:#b482fb;
259
+ --basecolors-shape-funicular-default:#78469a;
260
+ --basecolors-shape-helicopter-contrast:#fbafea;
261
+ --basecolors-shape-helicopter-default:#800664;
262
+ --basecolors-shape-highlight:#ff5959;
263
+ --basecolors-shape-light:#ffffff;
264
+ --basecolors-shape-mask:#ffffff;
265
+ --basecolors-shape-maskalt:#ffffff;
266
+ --basecolors-shape-metro-contrast:#f08901;
267
+ --basecolors-shape-metro-default:#bf5826;
268
+ --basecolors-shape-mobility-contrast:#00db9b;
269
+ --basecolors-shape-mobility-default:#33826b;
270
+ --basecolors-shape-plane-contrast:#fbafea;
271
+ --basecolors-shape-plane-default:#800664;
272
+ --basecolors-shape-subdued:#626493;
273
+ --basecolors-shape-subduedalt:#d9dae8;
274
+ --basecolors-shape-taxi-contrast:#ffe082;
275
+ --basecolors-shape-taxi-default:#3d3e40;
276
+ --basecolors-shape-train-contrast:#42a5f5;
277
+ --basecolors-shape-train-default:#00367f;
278
+ --basecolors-shape-tram-contrast:#b482fb;
279
+ --basecolors-shape-tram-default:#78469a;
280
+ --basecolors-shape-walk-contrast:#8284ab;
281
+ --basecolors-shape-walk-default:#8d8e9c;
282
+ --basecolors-shape-airportlinkbus-contrast:#fbafea;
283
+ --basecolors-shape-airportlinkbus-default:#800664;
284
+ --basecolors-shape-airportlinkrail-contrast:#fbafea;
285
+ --basecolors-shape-airportlinkrail-default:#800664;
286
+ --basecolors-stroke-contrast:#aeb7e2;
287
+ --basecolors-stroke-default:#181c56;
288
+ --basecolors-stroke-disabled:#949699;
289
+ --basecolors-stroke-focus-contrast:#aeb7e2;
290
+ --basecolors-stroke-focus-standard:#181c56;
291
+ --basecolors-stroke-highlight:#ff5959;
292
+ --basecolors-stroke-light:#ffffff;
293
+ --basecolors-stroke-subdued:#8284ab;
294
+ --basecolors-stroke-subduedalt:#e3e6e8;
295
+ --basecolors-text-accent:#181c56;
296
+ --basecolors-text-disabled:#6e6f73;
297
+ --basecolors-text-disabledalt:#b6b8ba;
298
+ --basecolors-text-highlight:#ff5959;
299
+ --basecolors-text-light:#ffffff;
300
+ --basecolors-text-subdued:#626493;
301
+ --basecolors-text-subduedalt:#d9dae8;
313
302
  }
314
303
 
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;
304
+ [data-color-mode=dark]{
305
+ --basecolors-frame-contrast:#212233;
306
+ --basecolors-frame-contrastalt:#141527;
307
+ --basecolors-frame-contrastalt-2:#08091c;
308
+ --basecolors-frame-default:#08091c;
309
+ --basecolors-frame-elevated:rgba(229, 229, 233, 0.1490196078);
310
+ --basecolors-frame-elevatedalt:#464755;
311
+ --basecolors-frame-subdued:#2d2e3e;
312
+ --basecolors-frame-tint:#141527;
313
+ --basecolors-shape-accent:#e5e5e9;
314
+ --basecolors-shape-bicycle-contrast:#4db295;
315
+ --basecolors-shape-bicycle-default:#4db295;
316
+ --basecolors-shape-bus-contrast:#ef7398;
317
+ --basecolors-shape-bus-default:#ef7398;
318
+ --basecolors-shape-cableway-contrast:#b898e5;
319
+ --basecolors-shape-cableway-default:#b898e5;
320
+ --basecolors-shape-disabled:#b6b8ba;
321
+ --basecolors-shape-disabledalt:#b3b4bd;
322
+ --basecolors-shape-ferry-contrast:#8ccfe2;
323
+ --basecolors-shape-ferry-default:#8ccfe2;
324
+ --basecolors-shape-funicular-contrast:#b898e5;
325
+ --basecolors-shape-funicular-default:#b898e5;
326
+ --basecolors-shape-helicopter-contrast:#f2b8e5;
327
+ --basecolors-shape-helicopter-default:#f2b8e5;
328
+ --basecolors-shape-highlight:#ff9494;
329
+ --basecolors-shape-light:#e5e5e9;
330
+ --basecolors-shape-mask:#2d2e3e;
331
+ --basecolors-shape-maskalt:#393a49;
332
+ --basecolors-shape-metro-contrast:#dd973c;
333
+ --basecolors-shape-metro-default:#dd973c;
334
+ --basecolors-shape-mobility-contrast:#4db295;
335
+ --basecolors-shape-mobility-default:#4db295;
336
+ --basecolors-shape-plane-contrast:#f2b8e5;
337
+ --basecolors-shape-plane-default:#f2b8e5;
338
+ --basecolors-shape-subdued:#b3b4bd;
339
+ --basecolors-shape-subduedalt:#b3b4bd;
340
+ --basecolors-shape-taxi-contrast:#ffe082;
341
+ --basecolors-shape-taxi-default:#ffe082;
342
+ --basecolors-shape-train-contrast:#60a2d7;
343
+ --basecolors-shape-train-default:#60a2d7;
344
+ --basecolors-shape-tram-contrast:#b898e5;
345
+ --basecolors-shape-tram-default:#b898e5;
346
+ --basecolors-shape-walk-contrast:#8d8e9c;
347
+ --basecolors-shape-walk-default:#8d8e9c;
348
+ --basecolors-shape-airportlinkbus-contrast:#f2b8e5;
349
+ --basecolors-shape-airportlinkbus-default:#f2b8e5;
350
+ --basecolors-shape-airportlinkrail-contrast:#f2b8e5;
351
+ --basecolors-shape-airportlinkrail-default:#f2b8e5;
352
+ --basecolors-stroke-contrast:#aeb7e2;
353
+ --basecolors-stroke-default:#b3b4bd;
354
+ --basecolors-stroke-disabled:#e3e6e8;
355
+ --basecolors-stroke-focus-contrast:#aeb7e2;
356
+ --basecolors-stroke-focus-standard:#aeb7e2;
357
+ --basecolors-stroke-highlight:#ff9494;
358
+ --basecolors-stroke-light:#b3b4bd;
359
+ --basecolors-stroke-subdued:#81828f;
360
+ --basecolors-stroke-subduedalt:#949699;
361
+ --basecolors-text-accent:#e5e5e9;
362
+ --basecolors-text-disabled:#b6b8ba;
363
+ --basecolors-text-disabledalt:#b6b8ba;
364
+ --basecolors-text-highlight:#ff9494;
365
+ --basecolors-text-light:#e5e5e9;
366
+ --basecolors-text-subdued:#b3b4bd;
367
+ --basecolors-text-subduedalt:#b3b4bd;
379
368
  }
380
369
 
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;
370
+ :root{
371
+ --eds-button:1;
372
+ }a.eds-button{
373
+ display:-webkit-box;
374
+ display:-webkit-flex;
375
+ display:-moz-box;
376
+ display:flex;
377
+ -webkit-box-align:center;
378
+ -webkit-align-items:center;
379
+ -moz-box-align:center;
380
+ align-items:center;
381
+ -webkit-box-pack:center;
382
+ -webkit-justify-content:center;
383
+ -moz-box-pack:center;
384
+ justify-content:center;
385
+ }
386
+ a.eds-button .eds-icon{
387
+ position:static;
388
+ position:initial;
392
389
  }
393
390
 
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;
391
+ .eds-button{
392
+ min-width:9.5rem;
393
+ width:-webkit-max-content;
394
+ width:-moz-max-content;
395
+ width:max-content;
396
+ min-height:3rem;
397
+ height:-webkit-fit-content;
398
+ height:-moz-fit-content;
399
+ height:fit-content;
400
+ -webkit-border-radius:0.25rem;
401
+ -moz-border-radius:0.25rem;
402
+ border-radius:0.25rem;
403
+ font-size:inherit;
404
+ cursor:pointer;
405
+ display:inline-block;
406
+ -webkit-appearance:none;
407
+ -moz-appearance:none;
408
+ appearance:none;
409
+ -webkit-text-decoration:none;
410
+ text-decoration:none;
411
+ padding:0 1rem;
412
+ font-size:1rem;
413
+ line-height:1.5rem;
414
+ font-weight:500;
415
+ text-align:center;
416
+ font-family:inherit;
417
+ position:relative;
418
+ vertical-align:top;
419
+ background-color:var(--eds-button-background);
420
+ border:0.125rem solid var(--eds-button-border);
421
+ color:var(--eds-button-text);
422
+ }
423
+ .eds-button:hover{
424
+ background-color:var(--eds-button-background-hover);
425
+ }
426
+ .eds-button:active{
427
+ background-color:var(--eds-button-background-active);
428
+ border-color:var(--eds-button-border-active);
429
+ color:var(--eds-button-text-active);
430
+ }
431
+ .eds-button:focus-visible{
432
+ outline:2px solid #181c56;
433
+ outline-color:var(--basecolors-stroke-focus-standard);
434
+ outline-offset:0.125rem;
435
+ }
436
+ .eds-contrast .eds-button:focus-visible{
437
+ outline-color:var(--basecolors-stroke-focus-contrast);
438
+ }
439
+ .eds-button > .eds-button__loading-dots{
440
+ width:100%;
441
+ }
442
+ .eds-button > .eds-button__loading-dots .eds-loading-dots__dot{
443
+ background:var(--eds-button-text);
444
+ }
445
+ .eds-button .eds-icon{
446
+ position:relative;
447
+ top:0.2em;
448
+ }
449
+ .eds-button--leading-icon .eds-icon{
450
+ margin-right:0.75rem;
451
+ }
452
+ .eds-button--trailing-icon .eds-icon{
453
+ margin-left:0.75rem;
454
+ }
455
+ .eds-button--size-small{
456
+ min-width:5.75rem;
457
+ min-height:2rem;
458
+ font-size:0.875rem;
459
+ line-height:1.375rem;
460
+ }
461
+ .eds-button--size-large{
462
+ min-width:11.75rem;
463
+ min-height:3.75rem;
464
+ }
465
+ .eds-button--width-fluid{
466
+ width:100%;
467
+ }
468
+ .eds-button--variant-primary{
469
+ --eds-button-background:var(--components-button-primary-standard-default);
470
+ --eds-button-text:var(--components-button-primary-standard-text);
471
+ --eds-button-text-active:var(--components-button-primary-standard-text);
472
+ --eds-button-background-hover:var(--components-button-primary-standard-hover);
473
+ --eds-button-background-active:var(--components-button-primary-standard-active);
474
+ --eds-button-border:transparent;
475
+ --eds-button-border-active:transparent;
476
+ }
477
+ .eds-contrast .eds-button--variant-primary{
478
+ --eds-button-background:var(--components-button-primary-contrast-default);
479
+ --eds-button-text:var(--components-button-primary-contrast-text);
480
+ --eds-button-text-active:var(--components-button-primary-contrast-text);
481
+ --eds-button-background-hover:var(--components-button-primary-contrast-hover);
482
+ --eds-button-background-active:var(--components-button-primary-contrast-active);
483
+ --eds-button-border:transparent;
484
+ --eds-button-border-active:transparent;
485
+ }
486
+ .eds-button--variant-secondary{
487
+ --eds-button-background:var(--components-button-secondary-standard-default);
488
+ --eds-button-text:var(--components-button-secondary-standard-text);
489
+ --eds-button-text-active:var(--components-button-secondary-standard-text-active);
490
+ --eds-button-background-hover:var(--components-button-secondary-standard-hover);
491
+ --eds-button-background-active:var(--components-button-secondary-standard-active);
492
+ --eds-button-border:var(--components-button-secondary-standard-border);
493
+ --eds-button-border-active:var(--components-button-secondary-standard-border-active);
494
+ }
495
+ .eds-contrast .eds-button--variant-secondary{
496
+ --eds-button-background:var(--components-button-secondary-contrast-default);
497
+ --eds-button-text:var(--components-button-secondary-contrast-text);
498
+ --eds-button-text-active:var(--components-button-secondary-contrast-text-active);
499
+ --eds-button-background-hover:var(--components-button-secondary-contrast-hover);
500
+ --eds-button-background-active:var(--components-button-secondary-contrast-active);
501
+ --eds-button-border:var(--components-button-secondary-contrast-border);
502
+ --eds-button-border-active:var(--components-button-secondary-contrast-border-active);
503
+ }
504
+ .eds-button--variant-success{
505
+ --eds-button-background:var(--components-button-success-standard-default);
506
+ --eds-button-text:var(--components-button-success-standard-text);
507
+ --eds-button-text-active:var(--components-button-success-standard-text);
508
+ --eds-button-background-hover:var(--components-button-success-standard-hover);
509
+ --eds-button-background-active:var(--components-button-success-standard-active);
510
+ --eds-button-border:var(--components-button-success-standard-border);
511
+ --eds-button-border-active:var(--components-button-success-standard-border);
512
+ }
513
+ .eds-contrast .eds-button--variant-success{
514
+ --eds-button-background:var(--components-button-success-contrast-default);
515
+ --eds-button-text:var(--components-button-success-contrast-text);
516
+ --eds-button-text-active:var(--components-button-success-contrast-text);
517
+ --eds-button-background-hover:var(--components-button-success-contrast-hover);
518
+ --eds-button-background-active:var(--components-button-success-contrast-active);
519
+ --eds-button-border:var(--components-button-success-contrast-border);
520
+ --eds-button-border-active:var(--components-button-success-contrast-border);
521
+ }
522
+ .eds-button--variant-negative{
523
+ --eds-button-background:var(--components-button-negative-standard-default);
524
+ --eds-button-text:var(--components-button-negative-standard-text);
525
+ --eds-button-text-active:var(--components-button-negative-standard-text-active);
526
+ --eds-button-background-hover:var(--components-button-negative-standard-hover);
527
+ --eds-button-background-active:var(--components-button-negative-standard-active);
528
+ --eds-button-border:var(--components-button-negative-standard-border);
529
+ --eds-button-border-active:var(--components-button-negative-standard-border);
530
+ }
531
+ .eds-contrast .eds-button--variant-negative{
532
+ --eds-button-background:var(--components-button-negative-contrast-default);
533
+ --eds-button-text:var(--components-button-negative-contrast-text);
534
+ --eds-button-text-active:var(--components-button-negative-contrast-text-active);
535
+ --eds-button-background-hover:var(--components-button-negative-contrast-hover);
536
+ --eds-button-background-active:var(--components-button-negative-contrast-active);
537
+ --eds-button-border:var(--components-button-negative-contrast-border);
538
+ --eds-button-border-active:var(--components-button-negative-contrast-border);
539
+ }
540
+ .eds-button--variant-tertiary{
541
+ font-size:0.875rem;
542
+ border:0.0625rem solid #54568c;
543
+ -webkit-border-radius:0.25rem;
544
+ -moz-border-radius:0.25rem;
545
+ border-radius:0.25rem;
546
+ background-color:transparent;
547
+ color:#181c56;
548
+ height:2rem;
549
+ padding:0 0.75rem;
550
+ min-width:6rem;
551
+ }
552
+ .eds-button--variant-tertiary:hover{
553
+ background-color:rgb(206.4, 211.8, 237.6);
554
+ }
555
+ .eds-button--variant-tertiary:active{
556
+ background-color:#aeb7e2;
557
+ }
558
+ .eds-button--variant-tertiary.eds-button--leading-icon .eds-icon{
559
+ margin-right:0.5rem;
560
+ }
561
+ .eds-button--variant-tertiary.eds-button--trailing-icon .eds-icon{
562
+ margin-left:0.5rem;
563
+ }
564
+ .eds-contrast .eds-button--variant-tertiary{
565
+ background-color:transparent;
566
+ color:#ffffff;
567
+ border-color:#aeb7e2;
568
+ }
569
+ .eds-contrast .eds-button--variant-tertiary > .eds-button__loading-dots .eds-loading-dots__dot{
570
+ background:#ffffff;
571
+ }
572
+ .eds-contrast .eds-button--variant-tertiary:hover{
573
+ background-color:rgba(174, 183, 226, 0.2);
574
+ }
575
+ .eds-contrast .eds-button--variant-tertiary:active{
576
+ background:#aeb7e2;
577
+ color:#181c56;
578
+ }
579
+ .eds-contrast .eds-button--variant-tertiary:active > .eds-button__loading-dots .eds-loading-dots__dot{
580
+ background:#181c56;
581
+ }
582
+ .eds-button[disabled].eds-button--loading{
583
+ pointer-events:none;
584
+ }
585
+ .eds-button[disabled]:not(.eds-button--loading){
586
+ background:var(--components-button-disabled-standard-fill);
587
+ color:var(--components-button-disabled-standard-text-disabled);
588
+ border-color:transparent;
589
+ cursor:not-allowed;
590
+ }
591
+ .eds-contrast .eds-button[disabled]:not(.eds-button--loading){
592
+ background-color:var(--components-button-disabled-contrast-fill);
593
+ color:var(--components-button-disabled-contrast-text-disabled);
594
+ border-color:transparent;
595
+ }.eds-button-group .eds-button{
596
+ margin-right:0.75rem;
597
+ margin-bottom:0.75rem;
598
+ }
599
+ .eds-button-group .eds-button:only-child{
600
+ margin:0;
601
+ }.eds-floating-button{
602
+ -webkit-box-align:center;
603
+ -webkit-align-items:center;
604
+ -moz-box-align:center;
605
+ align-items:center;
606
+ -webkit-appearance:none;
607
+ -moz-appearance:none;
608
+ appearance:none;
609
+ background:var(--components-button-floating-standard-default);
610
+ border:0;
611
+ -webkit-border-radius:1.5rem;
612
+ -moz-border-radius:1.5rem;
613
+ border-radius:1.5rem;
614
+ -webkit-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
615
+ -moz-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
616
+ box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
617
+ color:var(--components-button-floating-standard-text);
618
+ cursor:pointer;
619
+ display:-webkit-box;
620
+ display:-webkit-flex;
621
+ display:-moz-box;
622
+ display:flex;
623
+ font-family:inherit;
624
+ font-size:0.875rem;
625
+ font-weight:500;
626
+ -webkit-box-pack:center;
627
+ -webkit-justify-content:center;
628
+ -moz-box-pack:center;
629
+ justify-content:center;
630
+ min-height:3rem;
631
+ margin:0;
632
+ min-width:3rem;
633
+ padding:0 1rem;
634
+ position:relative;
635
+ z-index:10;
636
+ }
637
+ .eds-floating-button--extended{
638
+ padding:0 0.9375rem;
639
+ }
640
+ .eds-floating-button:hover{
641
+ background-color:var(--components-button-floating-standard-hover);
642
+ }
643
+ .eds-floating-button:active{
644
+ background-color:var(--components-button-floating-standard-active);
645
+ }
646
+ .eds-floating-button:focus-visible{
647
+ outline:2px solid #181c56;
648
+ outline-color:var(--basecolors-stroke-focus-standard);
649
+ outline-offset:0.125rem;
650
+ }
651
+ .eds-contrast .eds-floating-button:focus-visible{
652
+ outline-color:var(--basecolors-stroke-focus-contrast);
653
+ }
654
+ .eds-contrast .eds-floating-button{
655
+ background:var(--components-button-floating-contrast-default);
656
+ color:var(--components-button-floating-contrast-text);
657
+ -webkit-box-shadow:0 0.0625rem 0.1875rem rgb(57, 61, 121);
658
+ -moz-box-shadow:0 0.0625rem 0.1875rem rgb(57, 61, 121);
659
+ box-shadow:0 0.0625rem 0.1875rem rgb(57, 61, 121);
660
+ }
661
+ .eds-contrast .eds-floating-button:hover{
662
+ background-color:var(--components-button-floating-contrast-hover);
663
+ }
664
+ .eds-contrast .eds-floating-button:active{
665
+ background-color:var(--components-button-floating-contrast-active);
666
+ }
667
+ .eds-floating-button--small{
668
+ -webkit-border-radius:1rem;
669
+ -moz-border-radius:1rem;
670
+ border-radius:1rem;
671
+ height:2rem;
672
+ padding:0 0.5rem;
673
+ min-width:2rem;
674
+ min-height:2rem;
675
+ -webkit-box-flex:0;
676
+ -webkit-flex:0 1 auto;
677
+ -moz-box-flex:0;
678
+ flex:0 1 auto;
679
+ }
680
+ .eds-floating-button--small.eds-floating-button--extended{
681
+ padding:0 0.6875rem;
656
682
  }
657
683
 
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;
684
+ .eds-floating-button--extended > *{
685
+ margin:0 0.5em;
686
+ }
687
+ .eds-floating-button--extended > *:first-child{
688
+ margin-left:0;
689
+ }
690
+ .eds-floating-button--extended > *:last-child{
691
+ margin-right:0;
692
+ }.eds-square-button{
693
+ -webkit-box-align:center;
694
+ -webkit-align-items:center;
695
+ -moz-box-align:center;
696
+ align-items:center;
697
+ -webkit-appearance:none;
698
+ -moz-appearance:none;
699
+ appearance:none;
700
+ background:transparent;
701
+ border:0;
702
+ -webkit-border-radius:0.25rem;
703
+ -moz-border-radius:0.25rem;
704
+ border-radius:0.25rem;
705
+ cursor:pointer;
706
+ font-size:1rem;
707
+ display:-webkit-inline-box;
708
+ display:-webkit-inline-flex;
709
+ display:-moz-inline-box;
710
+ display:inline-flex;
711
+ font-family:inherit;
712
+ font-weight:500;
713
+ -webkit-box-pack:center;
714
+ -webkit-justify-content:center;
715
+ -moz-box-pack:center;
716
+ justify-content:center;
717
+ padding:0;
718
+ -webkit-text-decoration:none;
719
+ text-decoration:none;
720
+ }
721
+ .eds-square-button:focus-visible{
722
+ outline:none;
723
+ }
724
+ .eds-square-button:focus-visible .eds-square-button__button{
725
+ outline:2px solid #181c56;
726
+ outline-color:var(--basecolors-stroke-focus-standard);
727
+ outline-offset:0.125rem;
728
+ }
729
+ .eds-contrast .eds-square-button:focus-visible .eds-square-button__button{
730
+ outline-color:var(--basecolors-stroke-focus-contrast);
731
+ }
732
+ .eds-square-button[disabled]:not(.eds-square-button--loading){
733
+ cursor:not-allowed;
696
734
  }
697
735
  .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);
736
+ .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button:hover{
737
+ border-color:var(--basecolors-stroke-disabled);
738
+ border-style:dashed;
739
+ background-color:transparent;
740
+ color:var(--basecolors-text-disabled);
703
741
  }
704
742
  .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);
743
+ .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label:hover{
744
+ color:var(--basecolors-text-disabled);
745
+ }
746
+ .eds-square-button.eds-square-button--loading{
747
+ opacity:1;
748
+ }
749
+ .eds-square-button__button{
750
+ -webkit-box-align:center;
751
+ -webkit-align-items:center;
752
+ -moz-box-align:center;
753
+ align-items:center;
754
+ background-color:var(--button-background);
755
+ border:0.125rem solid var(--border-color);
756
+ -webkit-border-radius:0.25rem;
757
+ -moz-border-radius:0.25rem;
758
+ border-radius:0.25rem;
759
+ color:var(--icon-color);
760
+ display:-webkit-inline-box;
761
+ display:-webkit-inline-flex;
762
+ display:-moz-inline-box;
763
+ display:inline-flex;
764
+ height:3rem;
765
+ -webkit-box-pack:center;
766
+ -webkit-justify-content:center;
767
+ -moz-box-pack:center;
768
+ justify-content:center;
769
+ line-height:1.5rem;
770
+ padding:0;
771
+ text-align:center;
772
+ -webkit-text-decoration:none;
773
+ text-decoration:none;
774
+ vertical-align:top;
775
+ position:relative;
776
+ width:3rem;
777
+ }
778
+ .eds-square-button__label{
779
+ color:var(--label-color);
780
+ }
781
+ .eds-square-button__label + .eds-square-button__button, .eds-square-button__button + .eds-square-button__label{
782
+ margin-left:1rem;
783
+ }
784
+ .eds-square-button .eds-square-button__loading-dots .eds-loading-dots__dot{
785
+ background:var(--icon-color);
786
+ }
787
+ .eds-square-button--secondary{
788
+ --button-background:var(--components-button-squaresecondary-standard-default);
789
+ --border-color:var(--components-button-squaresecondary-standard-border);
790
+ --icon-color:var(--components-button-squaresecondary-standard-icon);
791
+ --label-color:var(--components-button-squaresecondary-standard-text);
792
+ }
793
+ .eds-square-button--secondary:hover{
794
+ --button-background:var(--components-button-squaresecondary-standard-hover);
795
+ }
796
+ .eds-square-button--secondary:active{
797
+ --button-background:var(--components-button-squaresecondary-standard-active);
798
+ --border-color:var(--components-button-squaresecondary-standard-border-active);
799
+ --icon-color:var(--components-button-squaresecondary-standard-icon-active);
800
+ }
801
+ .eds-contrast .eds-square-button--secondary{
802
+ --button-background:var(--components-button-squaresecondary-contrast-default);
803
+ --border-color:var(--components-button-squaresecondary-contrast-border);
804
+ --icon-color:var(--components-button-squaresecondary-contrast-icon-default);
805
+ --label-color:var(--components-button-squaresecondary-contrast-label);
806
+ }
807
+ .eds-contrast .eds-square-button--secondary:hover{
808
+ --button-background:var(--components-button-squaresecondary-contrast-hover);
809
+ --icon-color:var(--components-button-squaresecondary-contrast-icon-hover);
810
+ }
811
+ .eds-contrast .eds-square-button--secondary:active{
812
+ --button-background:var(--components-button-squaresecondary-contrast-active);
813
+ --border-color:var(--components-button-squaresecondary-contrast-border-active);
814
+ --icon-color:var(--components-button-squaresecondary-contrast-icon-active);
815
+ }
816
+ .eds-square-button--success{
817
+ --button-background:var(--components-button-squaresuccess-standard-default);
818
+ --border-color:var(--components-button-squaresuccess-standard-border);
819
+ --icon-color:var(--components-button-squaresuccess-standard-icon);
820
+ --label-color:var(--components-button-squaresuccess-standard-label);
821
+ }
822
+ .eds-square-button--success:hover{
823
+ --button-background:var(--components-button-squaresuccess-standard-hover);
824
+ }
825
+ .eds-square-button--success:active{
826
+ --button-background:var(--components-button-squaresuccess-standard-active);
827
+ }
828
+ .eds-contrast .eds-square-button--success{
829
+ --button-background:var(--components-button-squaresuccess-contrast-default);
830
+ --border-color:var(--components-button-squaresuccess-contrast-border);
831
+ --icon-color:var(--components-button-squaresuccess-contrast-icon);
832
+ --label-color:var(--components-button-squaresuccess-contrast-label);
833
+ }
834
+ .eds-contrast .eds-square-button--success:hover{
835
+ --button-background:var(--components-button-squaresuccess-contrast-hover);
836
+ }
837
+ .eds-contrast .eds-square-button--success:active{
838
+ --button-background:var(--components-button-squaresuccess-contrast-active);
839
+ }
840
+ .eds-square-button--tertiary{
841
+ --button-background:var(--components-button-squaresecondary-standard-default);
842
+ --border-color:var(--components-button-squaresecondary-standard-border);
843
+ --icon-color:var(--components-button-squaresecondary-standard-icon);
844
+ --label-color:var(--components-button-squaresecondary-standard-text);
845
+ font-size:0.875rem;
846
+ }
847
+ .eds-square-button--tertiary:hover{
848
+ --button-background:var(--components-button-squaresecondary-standard-hover);
849
+ }
850
+ .eds-square-button--tertiary:active{
851
+ --button-background:var(--components-button-squaresecondary-standard-active);
852
+ --border-color:var(--components-button-squaresecondary-standard-border-active);
853
+ --icon-color:var(--components-button-squaresecondary-standard-icon-active);
854
+ }
855
+ .eds-contrast .eds-square-button--tertiary{
856
+ --button-background:var(--components-button-squaresecondary-contrast-default);
857
+ --border-color:var(--components-button-squaresecondary-contrast-border);
858
+ --icon-color:var(--components-button-squaresecondary-contrast-icon-default);
859
+ --label-color:var(--components-button-squaresecondary-contrast-label);
860
+ }
861
+ .eds-contrast .eds-square-button--tertiary:hover{
862
+ --button-background:var(--components-button-squaresecondary-contrast-hover);
863
+ --icon-color:var(--components-button-squaresecondary-contrast-icon-hover);
864
+ }
865
+ .eds-contrast .eds-square-button--tertiary:active{
866
+ --button-background:var(--components-button-squaresecondary-contrast-active);
867
+ --border-color:var(--components-button-squaresecondary-contrast-border-active);
868
+ --icon-color:var(--components-button-squaresecondary-contrast-icon-active);
819
869
  }
820
870
  .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;
871
+ .eds-square-button--tertiary .eds-square-button__button + .eds-square-button__label{
872
+ margin-left:0.75rem;
873
+ }
874
+ .eds-square-button--tertiary .eds-square-button__button{
875
+ height:2rem;
876
+ width:2rem;
877
+ border-width:0.0625rem;
878
+ }.eds-icon-button{
879
+ border:0.125rem solid transparent;
880
+ -webkit-border-radius:0.25rem;
881
+ -moz-border-radius:0.25rem;
882
+ border-radius:0.25rem;
883
+ background:none;
884
+ color:var(--components-button-iconbutton-standard-text);
885
+ cursor:pointer;
886
+ display:-webkit-box;
887
+ display:-webkit-flex;
888
+ display:-moz-box;
889
+ display:flex;
890
+ -webkit-box-pack:center;
891
+ -webkit-justify-content:center;
892
+ -moz-box-pack:center;
893
+ justify-content:center;
894
+ -webkit-box-align:center;
895
+ -webkit-align-items:center;
896
+ -moz-box-align:center;
897
+ align-items:center;
898
+ font-size:1rem;
899
+ padding:0.5rem;
900
+ }
901
+ .eds-contrast .eds-icon-button{
902
+ color:var(--components-button-iconbutton-contrast-text);
903
+ }
904
+ .eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot{
905
+ background-color:var(--components-button-iconbutton-contrast-icon);
906
+ }
907
+ .eds-icon-button--size-small{
908
+ height:1.5rem;
909
+ width:1.5rem;
910
+ padding:0;
911
+ }
912
+ .eds-icon-button:hover{
913
+ background-color:var(--components-button-iconbutton-standard-hover);
914
+ }
915
+ .eds-contrast .eds-icon-button:hover{
916
+ background-color:var(--components-button-iconbutton-contrast-hover);
917
+ }
918
+ .eds-icon-button:active{
919
+ background:var(--components-button-iconbutton-standard-active);
920
+ color:var(--components-button-iconbutton-standard-text-active);
921
+ }
922
+ .eds-contrast .eds-icon-button:active{
923
+ background:var(--components-button-iconbutton-contrast-active);
924
+ color:var(--components-button-iconbutton-contrast-text-active);
925
+ }
926
+ .eds-icon-button:focus-visible{
927
+ outline:2px solid #181c56;
928
+ outline-color:var(--basecolors-stroke-focus-standard);
929
+ outline-offset:0.125rem;
930
+ }
931
+ .eds-contrast .eds-icon-button:focus-visible{
932
+ outline-color:var(--basecolors-stroke-focus-contrast);
933
+ }
934
+ .eds-icon-button--disabled{
935
+ opacity:0.5;
936
+ pointer-events:none;
937
+ }
938
+ .eds-icon-button--disabled__wrapper{
939
+ cursor:not-allowed;
940
+ width:-webkit-fit-content;
941
+ width:-moz-fit-content;
942
+ width:fit-content;
882
943
  }