@entur/button 3.3.19 → 3.4.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles.css +182 -52
- package/package.json +4 -3
package/dist/styles.css
CHANGED
|
@@ -234,6 +234,121 @@
|
|
|
234
234
|
--components-button-success-standard-icon:#08091c;
|
|
235
235
|
--components-button-success-standard-text:#08091c;
|
|
236
236
|
}
|
|
237
|
+
|
|
238
|
+
:root{
|
|
239
|
+
/* number */
|
|
240
|
+
--size-0:0rem;
|
|
241
|
+
--size-1:0.0625rem;
|
|
242
|
+
--size-2:0.125rem;
|
|
243
|
+
--size-3:0.25rem;
|
|
244
|
+
--size-4:0.375rem;
|
|
245
|
+
--size-5:0.5rem;
|
|
246
|
+
--size-6:0.75rem;
|
|
247
|
+
--size-7:0.875rem;
|
|
248
|
+
--size-8:1rem;
|
|
249
|
+
--size-9:1.25rem;
|
|
250
|
+
--size-10:1.5rem;
|
|
251
|
+
--size-11:1.75rem;
|
|
252
|
+
--size-12:2rem;
|
|
253
|
+
--size-13:2.25rem;
|
|
254
|
+
--size-14:2.5rem;
|
|
255
|
+
--size-15:2.75rem;
|
|
256
|
+
--size-16:3rem;
|
|
257
|
+
--size-17:3.25rem;
|
|
258
|
+
--size-18:3.5rem;
|
|
259
|
+
--size-19:4rem;
|
|
260
|
+
--size-20:4.5rem;
|
|
261
|
+
--size-21:5rem;
|
|
262
|
+
--size-22:5.5rem;
|
|
263
|
+
--size-23:6rem;
|
|
264
|
+
--size-24:6.5rem;
|
|
265
|
+
--size-25:7rem;
|
|
266
|
+
--size-26:7.5rem;
|
|
267
|
+
--size-27:8rem;
|
|
268
|
+
--size-28:8.5rem;
|
|
269
|
+
--size-29:9rem;
|
|
270
|
+
--size-30:9.5rem;
|
|
271
|
+
--size-31:10rem;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
:root,
|
|
275
|
+
[data-theme=standard]{
|
|
276
|
+
/* number */
|
|
277
|
+
--button-border-large:var(--size-2);
|
|
278
|
+
--button-border-medium:var(--size-2);
|
|
279
|
+
--button-border-small:var(--size-2);
|
|
280
|
+
--button-gap-small:var(--size-3);
|
|
281
|
+
--button-gap-large:var(--size-5);
|
|
282
|
+
--button-gap-medium:var(--size-5);
|
|
283
|
+
--button-height-horizontal-small:var(--size-12);
|
|
284
|
+
--button-height-horizontal-medium:var(--size-16);
|
|
285
|
+
--button-height-horizontal-large:var(--size-19);
|
|
286
|
+
--button-height-vertical-small:var(--size-16);
|
|
287
|
+
--button-height-vertical-medium:var(--size-18);
|
|
288
|
+
--button-height-vertical-large:var(--size-20);
|
|
289
|
+
--button-icon-small:var(--size-8);
|
|
290
|
+
--button-icon-medium:var(--size-9);
|
|
291
|
+
--button-icon-large:var(--size-10);
|
|
292
|
+
--button-inline-padding-small:var(--size-6);
|
|
293
|
+
--button-inline-padding-medium:var(--size-8);
|
|
294
|
+
--button-inline-padding-large:var(--size-10);
|
|
295
|
+
--button-radius-small:var(--size-4);
|
|
296
|
+
--button-radius-large:var(--size-5);
|
|
297
|
+
--button-radius-medium:var(--size-5);
|
|
298
|
+
--button-radius-round:var(--size-23);
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
[data-theme=compact]{
|
|
302
|
+
/* number */
|
|
303
|
+
--button-border-large:var(--size-2);
|
|
304
|
+
--button-border-medium:var(--size-2);
|
|
305
|
+
--button-border-small:var(--size-2);
|
|
306
|
+
--button-gap-medium:var(--size-3);
|
|
307
|
+
--button-gap-small:var(--size-3);
|
|
308
|
+
--button-gap-large:var(--size-5);
|
|
309
|
+
--button-height-horizontal-small:var(--size-11);
|
|
310
|
+
--button-height-horizontal-medium:var(--size-14);
|
|
311
|
+
--button-height-horizontal-large:var(--size-18);
|
|
312
|
+
--button-height-vertical-small:var(--size-14);
|
|
313
|
+
--button-height-vertical-medium:var(--size-16);
|
|
314
|
+
--button-height-vertical-large:var(--size-18);
|
|
315
|
+
--button-icon-medium:var(--size-8);
|
|
316
|
+
--button-icon-small:var(--size-8);
|
|
317
|
+
--button-icon-large:var(--size-9);
|
|
318
|
+
--button-inline-padding-small:var(--size-5);
|
|
319
|
+
--button-inline-padding-medium:var(--size-6);
|
|
320
|
+
--button-inline-padding-large:var(--size-8);
|
|
321
|
+
--button-radius-small:var(--size-3);
|
|
322
|
+
--button-radius-large:var(--size-5);
|
|
323
|
+
--button-radius-medium:var(--size-5);
|
|
324
|
+
--button-radius-round:var(--size-23);
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
[data-theme=display]{
|
|
328
|
+
/* number */
|
|
329
|
+
--button-border-small:var(--size-2);
|
|
330
|
+
--button-border-large:var(--size-3);
|
|
331
|
+
--button-border-medium:var(--size-3);
|
|
332
|
+
--button-gap-small:var(--size-5);
|
|
333
|
+
--button-gap-medium:var(--size-6);
|
|
334
|
+
--button-gap-large:var(--size-8);
|
|
335
|
+
--button-height-horizontal-small:var(--size-19);
|
|
336
|
+
--button-height-horizontal-medium:var(--size-23);
|
|
337
|
+
--button-height-horizontal-large:var(--size-26);
|
|
338
|
+
--button-height-vertical-small:var(--size-21);
|
|
339
|
+
--button-height-vertical-medium:var(--size-24);
|
|
340
|
+
--button-height-vertical-large:var(--size-28);
|
|
341
|
+
--button-icon-small:var(--size-10);
|
|
342
|
+
--button-icon-medium:var(--size-12);
|
|
343
|
+
--button-icon-large:var(--size-16);
|
|
344
|
+
--button-inline-padding-small:var(--size-10);
|
|
345
|
+
--button-inline-padding-medium:var(--size-12);
|
|
346
|
+
--button-inline-padding-large:var(--size-14);
|
|
347
|
+
--button-radius-small:var(--size-5);
|
|
348
|
+
--button-radius-large:var(--size-8);
|
|
349
|
+
--button-radius-medium:var(--size-8);
|
|
350
|
+
--button-radius-round:var(--size-23);
|
|
351
|
+
}
|
|
237
352
|
[data-color-mode=light],
|
|
238
353
|
:root{
|
|
239
354
|
--basecolors-frame-contrast:#181c56;
|
|
@@ -369,38 +484,15 @@
|
|
|
369
484
|
|
|
370
485
|
:root{
|
|
371
486
|
--eds-button:1;
|
|
372
|
-
}
|
|
373
|
-
|
|
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;
|
|
389
|
-
}
|
|
390
|
-
|
|
391
|
-
.eds-button{
|
|
392
|
-
min-width:9.5rem;
|
|
487
|
+
}.eds-button{
|
|
488
|
+
min-width:var(--size-30);
|
|
393
489
|
width:-webkit-max-content;
|
|
394
490
|
width:-moz-max-content;
|
|
395
491
|
width:max-content;
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
-webkit-border-radius:0.25rem;
|
|
401
|
-
-moz-border-radius:0.25rem;
|
|
402
|
-
border-radius:0.25rem;
|
|
403
|
-
font-size:inherit;
|
|
492
|
+
height:var(--button-height-horizontal-medium);
|
|
493
|
+
-webkit-border-radius:var(--button-radius-medium);
|
|
494
|
+
-moz-border-radius:var(--button-radius-medium);
|
|
495
|
+
border-radius:var(--button-radius-medium);
|
|
404
496
|
cursor:pointer;
|
|
405
497
|
display:inline-block;
|
|
406
498
|
-webkit-appearance:none;
|
|
@@ -408,16 +500,20 @@ a.eds-button .eds-icon{
|
|
|
408
500
|
appearance:none;
|
|
409
501
|
-webkit-text-decoration:none;
|
|
410
502
|
text-decoration:none;
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
503
|
+
overflow-x:hidden;
|
|
504
|
+
-o-text-overflow:ellipsis;
|
|
505
|
+
text-overflow:ellipsis;
|
|
506
|
+
white-space:nowrap;
|
|
507
|
+
padding-inline:var(--button-inline-padding-medium);
|
|
508
|
+
font-size:var(--font-size-body-m);
|
|
509
|
+
line-height:var(--font-line-height-body-m);
|
|
510
|
+
font-weight:var(--font-weight-body);
|
|
415
511
|
text-align:center;
|
|
416
512
|
font-family:inherit;
|
|
417
513
|
position:relative;
|
|
418
|
-
vertical-align:
|
|
514
|
+
vertical-align:middle;
|
|
419
515
|
background-color:var(--eds-button-background);
|
|
420
|
-
border:
|
|
516
|
+
border:var(--button-border-medium) solid var(--eds-button-border);
|
|
421
517
|
color:var(--eds-button-text);
|
|
422
518
|
}
|
|
423
519
|
.eds-button:hover{
|
|
@@ -442,25 +538,47 @@ a.eds-button .eds-icon{
|
|
|
442
538
|
.eds-button > .eds-button__loading-dots .eds-loading-dots__dot{
|
|
443
539
|
background:var(--eds-button-text);
|
|
444
540
|
}
|
|
445
|
-
.eds-button .eds-icon{
|
|
541
|
+
.eds-button :where(.eds-icon){
|
|
446
542
|
position:relative;
|
|
447
543
|
top:0.2em;
|
|
448
544
|
}
|
|
449
|
-
.eds-button--
|
|
450
|
-
margin-
|
|
545
|
+
.eds-button--trailing-icon :where(.eds-icon:last-child){
|
|
546
|
+
margin-left:var(--button-gap-medium);
|
|
451
547
|
}
|
|
452
|
-
.eds-button--trailing-icon .eds-icon{
|
|
453
|
-
margin-left:
|
|
548
|
+
.eds-button--trailing-icon:where(.eds-button--size-small .eds-icon:last-child){
|
|
549
|
+
margin-left:var(--button-gap-small);
|
|
550
|
+
}
|
|
551
|
+
.eds-button--trailing-icon:where(.eds-button--size-large .eds-icon:last-child){
|
|
552
|
+
margin-left:var(--button-gap-large);
|
|
553
|
+
}
|
|
554
|
+
.eds-button--leading-icon :where(.eds-icon:first-child){
|
|
555
|
+
margin-right:var(--button-gap-medium);
|
|
556
|
+
}
|
|
557
|
+
.eds-button--leading-icon:where(.eds-button--size-small .eds-icon:first-child){
|
|
558
|
+
margin-right:var(--button-gap-small);
|
|
559
|
+
}
|
|
560
|
+
.eds-button--leading-icon:where(.eds-button--size-large .eds-icon:first-child){
|
|
561
|
+
margin-right:var(--button-gap-large);
|
|
454
562
|
}
|
|
455
563
|
.eds-button--size-small{
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
564
|
+
height:var(--button-height-horizontal-small);
|
|
565
|
+
-webkit-border-radius:var(--button-radius-small);
|
|
566
|
+
-moz-border-radius:var(--button-radius-small);
|
|
567
|
+
border-radius:var(--button-radius-small);
|
|
568
|
+
padding-inline:var(--button-inline-padding-small);
|
|
569
|
+
font-size:var(--font-size-body-s);
|
|
570
|
+
line-height:var(--font-line-height-body-s);
|
|
571
|
+
border:var(--button-border-small) solid var(--eds-button-border);
|
|
460
572
|
}
|
|
461
573
|
.eds-button--size-large{
|
|
462
|
-
|
|
463
|
-
|
|
574
|
+
height:var(--button-height-horizontal-large);
|
|
575
|
+
-webkit-border-radius:var(--button-radius-large);
|
|
576
|
+
-moz-border-radius:var(--button-radius-large);
|
|
577
|
+
border-radius:var(--button-radius-large);
|
|
578
|
+
padding-inline:var(--button-inline-padding-large);
|
|
579
|
+
font-size:var(--font-size-body-xl);
|
|
580
|
+
line-height:var(--font-line-height-body-xl);
|
|
581
|
+
border:var(--button-border-large) solid var(--eds-button-border);
|
|
464
582
|
}
|
|
465
583
|
.eds-button--width-fluid{
|
|
466
584
|
width:100%;
|
|
@@ -555,12 +673,6 @@ a.eds-button .eds-icon{
|
|
|
555
673
|
.eds-button--variant-tertiary:active{
|
|
556
674
|
background-color:#aeb7e2;
|
|
557
675
|
}
|
|
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
676
|
.eds-contrast .eds-button--variant-tertiary{
|
|
565
677
|
background-color:transparent;
|
|
566
678
|
color:#ffffff;
|
|
@@ -592,6 +704,24 @@ a.eds-button .eds-icon{
|
|
|
592
704
|
background-color:var(--components-button-disabled-contrast-fill);
|
|
593
705
|
color:var(--components-button-disabled-contrast-text-disabled);
|
|
594
706
|
border-color:transparent;
|
|
707
|
+
}
|
|
708
|
+
.eds-button:where(a){
|
|
709
|
+
display:-webkit-box;
|
|
710
|
+
display:-webkit-flex;
|
|
711
|
+
display:-moz-box;
|
|
712
|
+
display:flex;
|
|
713
|
+
-webkit-box-align:center;
|
|
714
|
+
-webkit-align-items:center;
|
|
715
|
+
-moz-box-align:center;
|
|
716
|
+
align-items:center;
|
|
717
|
+
-webkit-box-pack:center;
|
|
718
|
+
-webkit-justify-content:center;
|
|
719
|
+
-moz-box-pack:center;
|
|
720
|
+
justify-content:center;
|
|
721
|
+
}
|
|
722
|
+
.eds-button:where(a) :where(.eds-icon){
|
|
723
|
+
position:static;
|
|
724
|
+
position:initial;
|
|
595
725
|
}.eds-button-group .eds-button{
|
|
596
726
|
margin-right:0.75rem;
|
|
597
727
|
margin-bottom:0.75rem;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/button",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.4.0-beta.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/button.cjs.js",
|
|
6
6
|
"module": "dist/button.esm.js",
|
|
@@ -27,8 +27,9 @@
|
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/loader": "^0.5.36",
|
|
30
|
+
"@entur/loader": "^0.5.36-beta.0",
|
|
31
31
|
"@entur/tokens": "^3.20.0",
|
|
32
|
+
"@entur/typography": "^2.0.4-beta.0",
|
|
32
33
|
"@entur/utils": "^0.12.5",
|
|
33
34
|
"classnames": "^2.5.1"
|
|
34
35
|
},
|
|
@@ -45,5 +46,5 @@
|
|
|
45
46
|
"vite": "^7.1.3",
|
|
46
47
|
"vite-plugin-dts": "^4.5.4"
|
|
47
48
|
},
|
|
48
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "e3da53c27deec5444106581c2339049814f633fe"
|
|
49
50
|
}
|