@entur/button 2.10.13 → 2.10.15
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/README.md +2 -2
- package/dist/styles.css +86 -81
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
This package contains the button component
|
|
4
4
|
|
|
5
|
-
> 💡 Looking for the [documentation](https://design.entur.org/komponenter/knapper/
|
|
5
|
+
> 💡 Looking for the [documentation](https://design.entur.org/komponenter/knapper/button)?
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
@@ -14,4 +14,4 @@ yarn add @entur/button
|
|
|
14
14
|
|
|
15
15
|
## Usage
|
|
16
16
|
|
|
17
|
-
Please refer to the [documentation](https://design.entur.org/komponenter/knapper/
|
|
17
|
+
Please refer to the [documentation](https://design.entur.org/komponenter/knapper/button) for further usage information.
|
package/dist/styles.css
CHANGED
|
@@ -1,14 +1,7 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--eds-button: 1;
|
|
3
|
-
}/* DO NOT CHANGE!*/
|
|
4
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
5
|
-
.eds-button-group .eds-button {
|
|
6
|
-
margin-right: 0.75rem;
|
|
7
|
-
margin-bottom: 0.75rem;
|
|
8
3
|
}
|
|
9
|
-
|
|
10
|
-
margin: 0;
|
|
11
|
-
}/* DO NOT CHANGE!*/
|
|
4
|
+
/* DO NOT CHANGE!*/
|
|
12
5
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
13
6
|
a.eds-button {
|
|
14
7
|
padding: 0.5rem 1rem;
|
|
@@ -223,7 +216,71 @@ a.eds-button--size-large {
|
|
|
223
216
|
background-color: #393d79;
|
|
224
217
|
border-color: #393d79;
|
|
225
218
|
color: #aeb7e2;
|
|
226
|
-
}
|
|
219
|
+
}
|
|
220
|
+
/* DO NOT CHANGE!*/
|
|
221
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
222
|
+
.eds-button-group .eds-button {
|
|
223
|
+
margin-right: 0.75rem;
|
|
224
|
+
margin-bottom: 0.75rem;
|
|
225
|
+
}
|
|
226
|
+
.eds-button-group .eds-button:only-child {
|
|
227
|
+
margin: 0;
|
|
228
|
+
}
|
|
229
|
+
/* DO NOT CHANGE!*/
|
|
230
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
231
|
+
.eds-icon-button {
|
|
232
|
+
border: 0.0625rem solid transparent;
|
|
233
|
+
border-radius: 0.25rem;
|
|
234
|
+
background: none;
|
|
235
|
+
color: inherit;
|
|
236
|
+
cursor: pointer;
|
|
237
|
+
display: flex;
|
|
238
|
+
justify-content: center;
|
|
239
|
+
align-items: center;
|
|
240
|
+
font-size: 1rem;
|
|
241
|
+
padding: 0.5rem;
|
|
242
|
+
}
|
|
243
|
+
.eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
|
|
244
|
+
background-color: #ffffff;
|
|
245
|
+
}
|
|
246
|
+
.eds-icon-button--size-small {
|
|
247
|
+
height: 1.5rem;
|
|
248
|
+
width: 1.5rem;
|
|
249
|
+
padding: 0;
|
|
250
|
+
}
|
|
251
|
+
.eds-icon-button--size-medium {
|
|
252
|
+
height: 2rem;
|
|
253
|
+
width: 2rem;
|
|
254
|
+
}
|
|
255
|
+
.eds-icon-button:hover {
|
|
256
|
+
background-color: #d1d4e3;
|
|
257
|
+
}
|
|
258
|
+
.eds-contrast .eds-icon-button:hover {
|
|
259
|
+
background-color: #393d79;
|
|
260
|
+
}
|
|
261
|
+
.eds-icon-button:active {
|
|
262
|
+
background: #babbcf;
|
|
263
|
+
}
|
|
264
|
+
.eds-contrast .eds-icon-button:active {
|
|
265
|
+
background: #292b6a;
|
|
266
|
+
}
|
|
267
|
+
.eds-icon-button:focus {
|
|
268
|
+
border: 0.0625rem solid #181c56;
|
|
269
|
+
outline: none;
|
|
270
|
+
}
|
|
271
|
+
.eds-contrast .eds-icon-button:focus {
|
|
272
|
+
border: 0.0625rem solid #ffffff;
|
|
273
|
+
}
|
|
274
|
+
.eds-icon-button--disabled {
|
|
275
|
+
opacity: 0.5;
|
|
276
|
+
pointer-events: none;
|
|
277
|
+
}
|
|
278
|
+
.eds-icon-button--disabled__wrapper {
|
|
279
|
+
cursor: not-allowed;
|
|
280
|
+
width: -moz-fit-content;
|
|
281
|
+
width: fit-content;
|
|
282
|
+
}
|
|
283
|
+
/* DO NOT CHANGE!*/
|
|
227
284
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
228
285
|
.eds-floating-button {
|
|
229
286
|
align-items: center;
|
|
@@ -296,60 +353,8 @@ a.eds-button--size-large {
|
|
|
296
353
|
}
|
|
297
354
|
.eds-floating-button--extended > *:last-child {
|
|
298
355
|
margin-right: 0;
|
|
299
|
-
}/* DO NOT CHANGE!*/
|
|
300
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
301
|
-
.eds-icon-button {
|
|
302
|
-
border: 0.0625rem solid transparent;
|
|
303
|
-
border-radius: 0.25rem;
|
|
304
|
-
background: none;
|
|
305
|
-
color: inherit;
|
|
306
|
-
cursor: pointer;
|
|
307
|
-
display: flex;
|
|
308
|
-
justify-content: center;
|
|
309
|
-
align-items: center;
|
|
310
|
-
font-size: 1rem;
|
|
311
|
-
padding: 0.5rem;
|
|
312
|
-
}
|
|
313
|
-
.eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
|
|
314
|
-
background-color: #ffffff;
|
|
315
|
-
}
|
|
316
|
-
.eds-icon-button--size-small {
|
|
317
|
-
height: 1.5rem;
|
|
318
|
-
width: 1.5rem;
|
|
319
|
-
padding: 0;
|
|
320
|
-
}
|
|
321
|
-
.eds-icon-button--size-medium {
|
|
322
|
-
height: 2rem;
|
|
323
|
-
width: 2rem;
|
|
324
|
-
}
|
|
325
|
-
.eds-icon-button:hover {
|
|
326
|
-
background-color: #d1d4e3;
|
|
327
|
-
}
|
|
328
|
-
.eds-contrast .eds-icon-button:hover {
|
|
329
|
-
background-color: #393d79;
|
|
330
|
-
}
|
|
331
|
-
.eds-icon-button:active {
|
|
332
|
-
background: #babbcf;
|
|
333
|
-
}
|
|
334
|
-
.eds-contrast .eds-icon-button:active {
|
|
335
|
-
background: #292b6a;
|
|
336
|
-
}
|
|
337
|
-
.eds-icon-button:focus {
|
|
338
|
-
border: 0.0625rem solid #181c56;
|
|
339
|
-
outline: none;
|
|
340
|
-
}
|
|
341
|
-
.eds-contrast .eds-icon-button:focus {
|
|
342
|
-
border: 0.0625rem solid #ffffff;
|
|
343
356
|
}
|
|
344
|
-
|
|
345
|
-
opacity: 0.5;
|
|
346
|
-
pointer-events: none;
|
|
347
|
-
}
|
|
348
|
-
.eds-icon-button--disabled__wrapper {
|
|
349
|
-
cursor: not-allowed;
|
|
350
|
-
width: -moz-fit-content;
|
|
351
|
-
width: fit-content;
|
|
352
|
-
}/* DO NOT CHANGE!*/
|
|
357
|
+
/* DO NOT CHANGE!*/
|
|
353
358
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
354
359
|
.eds-square-button {
|
|
355
360
|
--icon-color: var(--primary-text-color);
|
|
@@ -410,40 +415,40 @@ a.eds-button--size-large {
|
|
|
410
415
|
|
|
411
416
|
.eds-square-button--secondary {
|
|
412
417
|
--icon-background: transparent;
|
|
413
|
-
--border-color:
|
|
418
|
+
--border-color: #aeb7e2;
|
|
414
419
|
}
|
|
415
420
|
.eds-square-button--secondary .eds-square-button__loading-dots .eds-loading-dots__dot {
|
|
416
421
|
background: #181c56;
|
|
417
422
|
}
|
|
418
423
|
.eds-square-button--secondary:hover {
|
|
419
|
-
--icon-background:
|
|
424
|
+
--icon-background: #aeb7e2;
|
|
420
425
|
}
|
|
421
426
|
.eds-square-button--secondary:active {
|
|
422
|
-
--icon-background:
|
|
423
|
-
--border-color:
|
|
427
|
+
--icon-background: #9da5cb;
|
|
428
|
+
--border-color: #9da5cb;
|
|
424
429
|
}
|
|
425
430
|
.eds-contrast .eds-square-button--secondary:hover {
|
|
426
|
-
--icon-background: rgba(
|
|
431
|
+
--icon-background: rgba(255, 255, 255, 0.2);
|
|
427
432
|
}
|
|
428
433
|
.eds-contrast .eds-square-button--secondary:active {
|
|
429
|
-
--icon-background:
|
|
430
|
-
--icon-color:
|
|
434
|
+
--icon-background: #aeb7e2;
|
|
435
|
+
--icon-color: #181c56;
|
|
431
436
|
}
|
|
432
437
|
.eds-contrast .eds-square-button--secondary .eds-square-button__loading-dots .eds-loading-dots__dot {
|
|
433
438
|
background: #ffffff;
|
|
434
439
|
}
|
|
435
440
|
|
|
436
441
|
.eds-square-button--success {
|
|
437
|
-
--icon-background:
|
|
442
|
+
--icon-background: #5ac39a;
|
|
438
443
|
}
|
|
439
444
|
.eds-square-button--success .eds-square-button__loading-dots .eds-loading-dots__dot {
|
|
440
445
|
background: #181c56;
|
|
441
446
|
}
|
|
442
447
|
.eds-square-button--success:hover {
|
|
443
|
-
--icon-background:
|
|
448
|
+
--icon-background: #6bc9a4;
|
|
444
449
|
}
|
|
445
450
|
.eds-square-button--success:active {
|
|
446
|
-
--icon-background:
|
|
451
|
+
--icon-background: #56b992;
|
|
447
452
|
}
|
|
448
453
|
|
|
449
454
|
.eds-square-button__label {
|
|
@@ -457,7 +462,7 @@ a.eds-button--size-large {
|
|
|
457
462
|
|
|
458
463
|
.eds-square-button--tertiary {
|
|
459
464
|
--icon-background: transparent;
|
|
460
|
-
--border-color:
|
|
465
|
+
--border-color: #181c56;
|
|
461
466
|
font-size: 0.875rem;
|
|
462
467
|
}
|
|
463
468
|
.eds-square-button--tertiary .eds-square-button__label + .eds-square-button__icon,
|
|
@@ -473,28 +478,28 @@ a.eds-button--size-large {
|
|
|
473
478
|
background: #181c56;
|
|
474
479
|
}
|
|
475
480
|
.eds-square-button--tertiary:hover {
|
|
476
|
-
--icon-background:
|
|
481
|
+
--icon-background: #d1d4e3;
|
|
477
482
|
}
|
|
478
483
|
.eds-square-button--tertiary:active {
|
|
479
|
-
--icon-background:
|
|
480
|
-
--icon-color:
|
|
484
|
+
--icon-background: #181c56;
|
|
485
|
+
--icon-color: #ffffff;
|
|
481
486
|
}
|
|
482
487
|
.eds-square-button--tertiary:active .eds-square-button__loading-dots .eds-loading-dots__dot {
|
|
483
488
|
background: #ffffff;
|
|
484
489
|
}
|
|
485
490
|
.eds-contrast .eds-square-button--tertiary {
|
|
486
|
-
--border-color:
|
|
491
|
+
--border-color: #ffffff;
|
|
487
492
|
}
|
|
488
493
|
.eds-contrast .eds-square-button--tertiary:hover {
|
|
489
|
-
--icon-background: rgba(
|
|
494
|
+
--icon-background: rgba(255, 255, 255, 0.2);
|
|
490
495
|
}
|
|
491
496
|
.eds-contrast .eds-square-button--tertiary:active {
|
|
492
|
-
--icon-background:
|
|
493
|
-
--icon-color:
|
|
497
|
+
--icon-background: #ffffff;
|
|
498
|
+
--icon-color: #181c56;
|
|
494
499
|
}
|
|
495
500
|
.eds-contrast .eds-square-button--tertiary:active .eds-square-button__loading-dots .eds-loading-dots__dot {
|
|
496
501
|
background: #181c56;
|
|
497
502
|
}
|
|
498
503
|
.eds-contrast .eds-square-button--tertiary .eds-square-button__loading-dots .eds-loading-dots__dot {
|
|
499
504
|
background: #ffffff;
|
|
500
|
-
}
|
|
505
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/button",
|
|
3
|
-
"version": "2.10.
|
|
3
|
+
"version": "2.10.15",
|
|
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.
|
|
31
|
-
"@entur/tokens": "^3.
|
|
32
|
-
"@entur/utils": "^0.5.
|
|
30
|
+
"@entur/loader": "^0.4.23",
|
|
31
|
+
"@entur/tokens": "^3.8.0",
|
|
32
|
+
"@entur/utils": "^0.5.5",
|
|
33
33
|
"classnames": "^2.3.1"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "8019b1b3a39b30bf1052ae34ed1c06b6caf1aa34"
|
|
36
36
|
}
|