@entur/button 3.0.13 → 3.1.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.
- package/dist/styles.css +139 -125
- package/package.json +3 -3
package/dist/styles.css
CHANGED
|
@@ -3,80 +3,6 @@
|
|
|
3
3
|
}
|
|
4
4
|
/* DO NOT CHANGE!*/
|
|
5
5
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
6
|
-
.eds-floating-button {
|
|
7
|
-
align-items: center;
|
|
8
|
-
-webkit-appearance: none;
|
|
9
|
-
-moz-appearance: none;
|
|
10
|
-
appearance: none;
|
|
11
|
-
background: #181c56;
|
|
12
|
-
border: 0;
|
|
13
|
-
border-radius: 1.5rem;
|
|
14
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
15
|
-
color: #ffffff;
|
|
16
|
-
cursor: pointer;
|
|
17
|
-
display: flex;
|
|
18
|
-
font-family: inherit;
|
|
19
|
-
font-size: 0.875rem;
|
|
20
|
-
font-weight: 500;
|
|
21
|
-
justify-content: center;
|
|
22
|
-
min-height: 3rem;
|
|
23
|
-
margin: 0;
|
|
24
|
-
min-width: 3rem;
|
|
25
|
-
padding: 0 1rem;
|
|
26
|
-
position: relative;
|
|
27
|
-
z-index: 10;
|
|
28
|
-
}
|
|
29
|
-
.eds-floating-button--extended {
|
|
30
|
-
padding: 0 0.9375rem;
|
|
31
|
-
}
|
|
32
|
-
.eds-floating-button:hover {
|
|
33
|
-
background-color: #2f3367;
|
|
34
|
-
}
|
|
35
|
-
.eds-floating-button:active {
|
|
36
|
-
background-color: #16194d;
|
|
37
|
-
}
|
|
38
|
-
.eds-floating-button:focus {
|
|
39
|
-
outline-offset: 0.125rem;
|
|
40
|
-
outline: none;
|
|
41
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
42
|
-
}
|
|
43
|
-
.eds-contrast .eds-floating-button:focus {
|
|
44
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
45
|
-
}
|
|
46
|
-
.eds-contrast .eds-floating-button {
|
|
47
|
-
background: #ffffff;
|
|
48
|
-
color: #181c56;
|
|
49
|
-
box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
|
|
50
|
-
}
|
|
51
|
-
.eds-contrast .eds-floating-button:hover {
|
|
52
|
-
background-color: #b6bee5;
|
|
53
|
-
}
|
|
54
|
-
.eds-contrast .eds-floating-button:active {
|
|
55
|
-
background-color: #e6e6e6;
|
|
56
|
-
}
|
|
57
|
-
.eds-floating-button--small {
|
|
58
|
-
border-radius: 1rem;
|
|
59
|
-
height: 2rem;
|
|
60
|
-
padding: 0 0.5rem;
|
|
61
|
-
min-width: 2rem;
|
|
62
|
-
min-height: 2rem;
|
|
63
|
-
flex: 0 1 auto;
|
|
64
|
-
}
|
|
65
|
-
.eds-floating-button--small.eds-floating-button--extended {
|
|
66
|
-
padding: 0 0.6875rem;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.eds-floating-button--extended > * {
|
|
70
|
-
margin: 0 0.5em;
|
|
71
|
-
}
|
|
72
|
-
.eds-floating-button--extended > *:first-child {
|
|
73
|
-
margin-left: 0;
|
|
74
|
-
}
|
|
75
|
-
.eds-floating-button--extended > *:last-child {
|
|
76
|
-
margin-right: 0;
|
|
77
|
-
}
|
|
78
|
-
/* DO NOT CHANGE!*/
|
|
79
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
80
6
|
a.eds-button {
|
|
81
7
|
padding: 0.5rem 1rem;
|
|
82
8
|
}
|
|
@@ -164,18 +90,17 @@ a.eds-button--size-large {
|
|
|
164
90
|
}
|
|
165
91
|
.eds-button--variant-secondary {
|
|
166
92
|
background-color: transparent;
|
|
167
|
-
border: 0.125rem solid #
|
|
93
|
+
border: 0.125rem solid #54568c;
|
|
168
94
|
color: #181c56;
|
|
169
95
|
}
|
|
170
96
|
.eds-button--variant-secondary > .eds-button__loading-dots .eds-loading-dots__dot {
|
|
171
97
|
background: #181c56;
|
|
172
98
|
}
|
|
173
99
|
.eds-button--variant-secondary:hover {
|
|
174
|
-
background-color: #
|
|
100
|
+
background-color: #ced4ee;
|
|
175
101
|
}
|
|
176
102
|
.eds-button--variant-secondary:active {
|
|
177
|
-
background-color: #
|
|
178
|
-
border-color: #9da5cb;
|
|
103
|
+
background-color: #aeb7e2;
|
|
179
104
|
}
|
|
180
105
|
.eds-contrast .eds-button--variant-secondary {
|
|
181
106
|
background-color: transparent;
|
|
@@ -186,7 +111,7 @@ a.eds-button--size-large {
|
|
|
186
111
|
background: #ffffff;
|
|
187
112
|
}
|
|
188
113
|
.eds-contrast .eds-button--variant-secondary:hover {
|
|
189
|
-
background-color: rgba(
|
|
114
|
+
background-color: rgba(174, 183, 226, 0.2);
|
|
190
115
|
}
|
|
191
116
|
.eds-contrast .eds-button--variant-secondary:active {
|
|
192
117
|
background: #aeb7e2;
|
|
@@ -198,15 +123,26 @@ a.eds-button--size-large {
|
|
|
198
123
|
.eds-button--variant-success {
|
|
199
124
|
background-color: #5ac39a;
|
|
200
125
|
color: #181c56;
|
|
126
|
+
border: 0.125rem solid #54568c;
|
|
127
|
+
border-radius: 0.25rem;
|
|
201
128
|
}
|
|
202
129
|
.eds-button--variant-success > .eds-button__loading-dots .eds-loading-dots__dot {
|
|
203
130
|
background: #181c56;
|
|
204
131
|
}
|
|
205
132
|
.eds-button--variant-success:hover {
|
|
206
|
-
background
|
|
133
|
+
background: rgba(107, 201, 164, 0.4);
|
|
207
134
|
}
|
|
208
135
|
.eds-button--variant-success:active {
|
|
209
|
-
background-color: #
|
|
136
|
+
background-color: #51b08b;
|
|
137
|
+
}
|
|
138
|
+
.eds-contrast .eds-button--variant-success {
|
|
139
|
+
border: none;
|
|
140
|
+
}
|
|
141
|
+
.eds-contrast .eds-button--variant-success:hover {
|
|
142
|
+
background: #6bc9a4;
|
|
143
|
+
}
|
|
144
|
+
.eds-contrast .eds-button--variant-success:active {
|
|
145
|
+
background-color: #51b08b;
|
|
210
146
|
}
|
|
211
147
|
.eds-button--variant-negative {
|
|
212
148
|
background: transparent;
|
|
@@ -217,7 +153,7 @@ a.eds-button--size-large {
|
|
|
217
153
|
background: #d31b1b;
|
|
218
154
|
}
|
|
219
155
|
.eds-button--variant-negative:hover {
|
|
220
|
-
background-color: rgba(
|
|
156
|
+
background-color: rgba(211, 27, 27, 0.2);
|
|
221
157
|
}
|
|
222
158
|
.eds-button--variant-negative:active {
|
|
223
159
|
background-color: #d31b1b;
|
|
@@ -234,7 +170,7 @@ a.eds-button--size-large {
|
|
|
234
170
|
background: #ffffff;
|
|
235
171
|
}
|
|
236
172
|
.eds-contrast .eds-button--variant-negative:hover {
|
|
237
|
-
background-color:
|
|
173
|
+
background-color: rgba(255, 148, 148, 0.2);
|
|
238
174
|
}
|
|
239
175
|
.eds-contrast .eds-button--variant-negative:active {
|
|
240
176
|
background-color: #ff9494;
|
|
@@ -242,20 +178,19 @@ a.eds-button--size-large {
|
|
|
242
178
|
}
|
|
243
179
|
.eds-button--variant-tertiary {
|
|
244
180
|
font-size: 0.875rem;
|
|
245
|
-
border: 0.0625rem solid #
|
|
181
|
+
border: 0.0625rem solid #54568c;
|
|
246
182
|
border-radius: 0.25rem;
|
|
247
|
-
background: transparent;
|
|
183
|
+
background-color: transparent;
|
|
248
184
|
color: #181c56;
|
|
249
185
|
height: 2rem;
|
|
250
186
|
padding: 0 0.75rem;
|
|
251
187
|
min-width: 6rem;
|
|
252
188
|
}
|
|
253
189
|
.eds-button--variant-tertiary:hover {
|
|
254
|
-
background-color: #
|
|
190
|
+
background-color: #ced4ee;
|
|
255
191
|
}
|
|
256
192
|
.eds-button--variant-tertiary:active {
|
|
257
|
-
color: #
|
|
258
|
-
background-color: #181c56;
|
|
193
|
+
background-color: #aeb7e2;
|
|
259
194
|
}
|
|
260
195
|
.eds-button--variant-tertiary.eds-button--leading-icon .eds-icon {
|
|
261
196
|
margin-right: 0.5rem;
|
|
@@ -264,19 +199,23 @@ a.eds-button--size-large {
|
|
|
264
199
|
margin-left: 0.5rem;
|
|
265
200
|
}
|
|
266
201
|
.eds-contrast .eds-button--variant-tertiary {
|
|
202
|
+
background-color: transparent;
|
|
267
203
|
color: #ffffff;
|
|
268
|
-
border-color: #
|
|
204
|
+
border-color: #aeb7e2;
|
|
269
205
|
}
|
|
270
206
|
.eds-contrast .eds-button--variant-tertiary > .eds-button__loading-dots .eds-loading-dots__dot {
|
|
271
207
|
background: #ffffff;
|
|
272
208
|
}
|
|
273
209
|
.eds-contrast .eds-button--variant-tertiary:hover {
|
|
274
|
-
background-color:
|
|
210
|
+
background-color: rgba(174, 183, 226, 0.2);
|
|
275
211
|
}
|
|
276
212
|
.eds-contrast .eds-button--variant-tertiary:active {
|
|
277
|
-
background
|
|
213
|
+
background: #aeb7e2;
|
|
278
214
|
color: #181c56;
|
|
279
215
|
}
|
|
216
|
+
.eds-contrast .eds-button--variant-tertiary:active > .eds-button__loading-dots .eds-loading-dots__dot {
|
|
217
|
+
background: #181c56;
|
|
218
|
+
}
|
|
280
219
|
.eds-button[disabled].eds-button--loading {
|
|
281
220
|
pointer-events: none;
|
|
282
221
|
}
|
|
@@ -293,6 +232,89 @@ a.eds-button--size-large {
|
|
|
293
232
|
}
|
|
294
233
|
/* DO NOT CHANGE!*/
|
|
295
234
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
235
|
+
.eds-button-group .eds-button {
|
|
236
|
+
margin-right: 0.75rem;
|
|
237
|
+
margin-bottom: 0.75rem;
|
|
238
|
+
}
|
|
239
|
+
.eds-button-group .eds-button:only-child {
|
|
240
|
+
margin: 0;
|
|
241
|
+
}
|
|
242
|
+
/* DO NOT CHANGE!*/
|
|
243
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
244
|
+
.eds-floating-button {
|
|
245
|
+
align-items: center;
|
|
246
|
+
-webkit-appearance: none;
|
|
247
|
+
-moz-appearance: none;
|
|
248
|
+
appearance: none;
|
|
249
|
+
background: #181c56;
|
|
250
|
+
border: 0;
|
|
251
|
+
border-radius: 1.5rem;
|
|
252
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
253
|
+
color: #ffffff;
|
|
254
|
+
cursor: pointer;
|
|
255
|
+
display: flex;
|
|
256
|
+
font-family: inherit;
|
|
257
|
+
font-size: 0.875rem;
|
|
258
|
+
font-weight: 500;
|
|
259
|
+
justify-content: center;
|
|
260
|
+
min-height: 3rem;
|
|
261
|
+
margin: 0;
|
|
262
|
+
min-width: 3rem;
|
|
263
|
+
padding: 0 1rem;
|
|
264
|
+
position: relative;
|
|
265
|
+
z-index: 10;
|
|
266
|
+
}
|
|
267
|
+
.eds-floating-button--extended {
|
|
268
|
+
padding: 0 0.9375rem;
|
|
269
|
+
}
|
|
270
|
+
.eds-floating-button:hover {
|
|
271
|
+
background-color: #2f3367;
|
|
272
|
+
}
|
|
273
|
+
.eds-floating-button:active {
|
|
274
|
+
background-color: #16194d;
|
|
275
|
+
}
|
|
276
|
+
.eds-floating-button:focus {
|
|
277
|
+
outline-offset: 0.125rem;
|
|
278
|
+
outline: none;
|
|
279
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
280
|
+
}
|
|
281
|
+
.eds-contrast .eds-floating-button:focus {
|
|
282
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
283
|
+
}
|
|
284
|
+
.eds-contrast .eds-floating-button {
|
|
285
|
+
background: #ffffff;
|
|
286
|
+
color: #181c56;
|
|
287
|
+
box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
|
|
288
|
+
}
|
|
289
|
+
.eds-contrast .eds-floating-button:hover {
|
|
290
|
+
background-color: #b6bee5;
|
|
291
|
+
}
|
|
292
|
+
.eds-contrast .eds-floating-button:active {
|
|
293
|
+
background-color: #e6e6e6;
|
|
294
|
+
}
|
|
295
|
+
.eds-floating-button--small {
|
|
296
|
+
border-radius: 1rem;
|
|
297
|
+
height: 2rem;
|
|
298
|
+
padding: 0 0.5rem;
|
|
299
|
+
min-width: 2rem;
|
|
300
|
+
min-height: 2rem;
|
|
301
|
+
flex: 0 1 auto;
|
|
302
|
+
}
|
|
303
|
+
.eds-floating-button--small.eds-floating-button--extended {
|
|
304
|
+
padding: 0 0.6875rem;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.eds-floating-button--extended > * {
|
|
308
|
+
margin: 0 0.5em;
|
|
309
|
+
}
|
|
310
|
+
.eds-floating-button--extended > *:first-child {
|
|
311
|
+
margin-left: 0;
|
|
312
|
+
}
|
|
313
|
+
.eds-floating-button--extended > *:last-child {
|
|
314
|
+
margin-right: 0;
|
|
315
|
+
}
|
|
316
|
+
/* DO NOT CHANGE!*/
|
|
317
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
296
318
|
.eds-icon-button {
|
|
297
319
|
border: 0.0625rem solid transparent;
|
|
298
320
|
border-radius: 0.25rem;
|
|
@@ -347,18 +369,9 @@ a.eds-button--size-large {
|
|
|
347
369
|
}
|
|
348
370
|
/* DO NOT CHANGE!*/
|
|
349
371
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
350
|
-
.eds-button-group .eds-button {
|
|
351
|
-
margin-right: 0.75rem;
|
|
352
|
-
margin-bottom: 0.75rem;
|
|
353
|
-
}
|
|
354
|
-
.eds-button-group .eds-button:only-child {
|
|
355
|
-
margin: 0;
|
|
356
|
-
}
|
|
357
|
-
/* DO NOT CHANGE!*/
|
|
358
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
359
372
|
.eds-square-button {
|
|
360
373
|
--icon-color: var(--primary-text-color);
|
|
361
|
-
--
|
|
374
|
+
--button-background: transparent;
|
|
362
375
|
--border-color: transparent;
|
|
363
376
|
align-items: center;
|
|
364
377
|
-webkit-appearance: none;
|
|
@@ -397,7 +410,7 @@ a.eds-button--size-large {
|
|
|
397
410
|
|
|
398
411
|
.eds-square-button__icon {
|
|
399
412
|
align-items: center;
|
|
400
|
-
background-color: var(--
|
|
413
|
+
background-color: var(--button-background);
|
|
401
414
|
border: 0.125rem solid var(--border-color);
|
|
402
415
|
border-radius: 0.25rem;
|
|
403
416
|
color: var(--icon-color);
|
|
@@ -414,21 +427,23 @@ a.eds-button--size-large {
|
|
|
414
427
|
}
|
|
415
428
|
|
|
416
429
|
.eds-square-button--secondary {
|
|
417
|
-
--
|
|
418
|
-
--border-color: #
|
|
430
|
+
--button-background: transparent;
|
|
431
|
+
--border-color: #54568c;
|
|
419
432
|
}
|
|
420
433
|
.eds-square-button--secondary:hover {
|
|
421
|
-
--
|
|
434
|
+
--button-background: rgba(174, 183, 226, 0.4);
|
|
422
435
|
}
|
|
423
436
|
.eds-square-button--secondary:active {
|
|
424
|
-
--
|
|
425
|
-
|
|
437
|
+
--button-background: #aeb7e2;
|
|
438
|
+
}
|
|
439
|
+
.eds-contrast .eds-square-button--secondary {
|
|
440
|
+
--border-color: #aeb7e2;
|
|
426
441
|
}
|
|
427
442
|
.eds-contrast .eds-square-button--secondary:hover {
|
|
428
|
-
--
|
|
443
|
+
--button-background: rgba(174, 183, 226, 0.2);
|
|
429
444
|
}
|
|
430
445
|
.eds-contrast .eds-square-button--secondary:active {
|
|
431
|
-
--
|
|
446
|
+
--button-background: #aeb7e2;
|
|
432
447
|
--icon-color: #181c56;
|
|
433
448
|
}
|
|
434
449
|
.eds-contrast .eds-square-button--secondary .eds-square-button__loading-dots .eds-loading-dots__dot {
|
|
@@ -439,17 +454,22 @@ a.eds-button--size-large {
|
|
|
439
454
|
}
|
|
440
455
|
|
|
441
456
|
.eds-square-button--success {
|
|
442
|
-
--
|
|
457
|
+
--button-background: #5ac39a;
|
|
458
|
+
--border-color: #54568c;
|
|
443
459
|
}
|
|
444
460
|
.eds-square-button--success:hover {
|
|
445
|
-
--
|
|
461
|
+
--button-background: #6bc9a4;
|
|
446
462
|
}
|
|
447
463
|
.eds-square-button--success:active {
|
|
448
|
-
--
|
|
464
|
+
--button-background: #51b08b;
|
|
449
465
|
}
|
|
450
466
|
.eds-square-button--success .eds-square-button__loading-dots .eds-loading-dots__dot {
|
|
451
467
|
background: #181c56;
|
|
452
468
|
}
|
|
469
|
+
.eds-contrast .eds-square-button--success {
|
|
470
|
+
--border-color: transparent;
|
|
471
|
+
--icon-color: #181c56;
|
|
472
|
+
}
|
|
453
473
|
|
|
454
474
|
.eds-square-button__label {
|
|
455
475
|
color: var(--primary-text-color);
|
|
@@ -461,33 +481,27 @@ a.eds-button--size-large {
|
|
|
461
481
|
}
|
|
462
482
|
|
|
463
483
|
.eds-square-button--tertiary {
|
|
464
|
-
--
|
|
465
|
-
--border-color: #
|
|
484
|
+
--button-background: transparent;
|
|
485
|
+
--border-color: #54568c;
|
|
466
486
|
font-size: 0.875rem;
|
|
467
487
|
}
|
|
468
488
|
.eds-square-button--tertiary:hover {
|
|
469
|
-
--
|
|
489
|
+
--button-background: rgba(174, 183, 226, 0.4);
|
|
470
490
|
}
|
|
471
491
|
.eds-square-button--tertiary:active {
|
|
472
|
-
--
|
|
473
|
-
--icon-color: #ffffff;
|
|
474
|
-
}
|
|
475
|
-
.eds-square-button--tertiary:active .eds-square-button__loading-dots .eds-loading-dots__dot {
|
|
476
|
-
background: #ffffff;
|
|
492
|
+
--button-background: #aeb7e2;
|
|
477
493
|
}
|
|
478
494
|
.eds-contrast .eds-square-button--tertiary {
|
|
479
495
|
--border-color: #ffffff;
|
|
496
|
+
--border-color: #aeb7e2;
|
|
480
497
|
}
|
|
481
498
|
.eds-contrast .eds-square-button--tertiary:hover {
|
|
482
|
-
--
|
|
499
|
+
--button-background: rgba(174, 183, 226, 0.2);
|
|
483
500
|
}
|
|
484
501
|
.eds-contrast .eds-square-button--tertiary:active {
|
|
485
|
-
--
|
|
502
|
+
--button-background: #aeb7e2;
|
|
486
503
|
--icon-color: #181c56;
|
|
487
504
|
}
|
|
488
|
-
.eds-contrast .eds-square-button--tertiary:active .eds-square-button__loading-dots .eds-loading-dots__dot {
|
|
489
|
-
background: #181c56;
|
|
490
|
-
}
|
|
491
505
|
.eds-contrast .eds-square-button--tertiary .eds-square-button__loading-dots .eds-loading-dots__dot {
|
|
492
506
|
background: #ffffff;
|
|
493
507
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/button",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/button.esm.js",
|
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/loader": "^0.4.
|
|
30
|
+
"@entur/loader": "^0.4.37",
|
|
31
31
|
"@entur/tokens": "^3.10.0",
|
|
32
32
|
"@entur/utils": "^0.9.3",
|
|
33
33
|
"classnames": "^2.3.1"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "5fcad4b449082b80b796ab52e68f178977f2eba7"
|
|
36
36
|
}
|