@entur/tooltip 5.2.1-beta.0 → 5.2.2-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 +199 -199
- package/package.json +6 -6
package/dist/styles.css
CHANGED
|
@@ -1,27 +1,113 @@
|
|
|
1
1
|
/* DO NOT CHANGE!*/
|
|
2
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
|
-
|
|
4
|
-
|
|
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
|
+
}
|
|
9
|
+
|
|
10
|
+
.eds-button-group .eds-button:only-child {
|
|
11
|
+
margin: 0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* DO NOT CHANGE!*/
|
|
15
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
16
|
+
.eds-floating-button {
|
|
17
|
+
align-items: center;
|
|
18
|
+
-webkit-appearance: none;
|
|
19
|
+
-moz-appearance: none;
|
|
20
|
+
appearance: none;
|
|
21
|
+
background: #181c56;
|
|
22
|
+
background: var(--components-button-floating-standard-default);
|
|
23
|
+
border: 0;
|
|
24
|
+
border-radius: 1.5rem;
|
|
5
25
|
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
6
|
-
|
|
7
|
-
|
|
26
|
+
color: #ffffff;
|
|
27
|
+
color: var(--components-button-floating-standard-text);
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
display: flex;
|
|
8
30
|
font-family: inherit;
|
|
9
|
-
|
|
31
|
+
font-size: 0.875rem;
|
|
32
|
+
font-weight: 500;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
min-height: 3rem;
|
|
35
|
+
margin: 0;
|
|
36
|
+
min-width: 3rem;
|
|
37
|
+
padding: 0 1rem;
|
|
38
|
+
position: relative;
|
|
39
|
+
z-index: 10;
|
|
10
40
|
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
41
|
+
|
|
42
|
+
.eds-floating-button--extended {
|
|
43
|
+
padding: 0 0.9375rem;
|
|
14
44
|
}
|
|
15
|
-
|
|
45
|
+
|
|
46
|
+
.eds-floating-button:hover {
|
|
47
|
+
background-color: #393d79;
|
|
48
|
+
background-color: var(--components-button-floating-standard-hover);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.eds-floating-button:active {
|
|
52
|
+
background-color: #11143c;
|
|
53
|
+
background-color: var(--components-button-floating-standard-active);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.eds-floating-button:focus-visible {
|
|
16
57
|
outline: 2px solid #181c56;
|
|
58
|
+
outline-color: #181c56;
|
|
17
59
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
18
60
|
outline-offset: 0.125rem;
|
|
19
61
|
}
|
|
20
|
-
|
|
62
|
+
|
|
63
|
+
.eds-contrast .eds-floating-button:focus-visible {
|
|
64
|
+
outline-color: #aeb7e2;
|
|
21
65
|
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
22
66
|
}
|
|
23
|
-
|
|
24
|
-
|
|
67
|
+
|
|
68
|
+
.eds-contrast .eds-floating-button {
|
|
69
|
+
background: #ffffff;
|
|
70
|
+
background: var(--components-button-floating-contrast-default);
|
|
71
|
+
color: #181c56;
|
|
72
|
+
color: var(--components-button-floating-contrast-text);
|
|
73
|
+
box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.eds-contrast .eds-floating-button:hover {
|
|
77
|
+
background-color: #f6f6f9;
|
|
78
|
+
background-color: var(--components-button-floating-contrast-hover);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.eds-contrast .eds-floating-button:active {
|
|
82
|
+
background-color: #d9dae8;
|
|
83
|
+
background-color: var(--components-button-floating-contrast-active);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.eds-floating-button--small {
|
|
87
|
+
border-radius: 1rem;
|
|
88
|
+
height: 2rem;
|
|
89
|
+
padding: 0 0.5rem;
|
|
90
|
+
min-width: 2rem;
|
|
91
|
+
min-height: 2rem;
|
|
92
|
+
flex: 0 1 auto;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.eds-floating-button--small.eds-floating-button--extended {
|
|
96
|
+
padding: 0 0.6875rem;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.eds-floating-button--extended > * {
|
|
100
|
+
margin: 0 0.5em;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.eds-floating-button--extended > *:first-child {
|
|
104
|
+
margin-left: 0;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.eds-floating-button--extended > *:last-child {
|
|
108
|
+
margin-right: 0;
|
|
109
|
+
}
|
|
110
|
+
|
|
25
111
|
/* DO NOT CHANGE!*/
|
|
26
112
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
27
113
|
a.eds-button {
|
|
@@ -276,114 +362,6 @@ a.eds-button--size-large {
|
|
|
276
362
|
border-color: transparent;
|
|
277
363
|
}
|
|
278
364
|
|
|
279
|
-
/* DO NOT CHANGE!*/
|
|
280
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
281
|
-
.eds-button-group .eds-button {
|
|
282
|
-
margin-right: 0.75rem;
|
|
283
|
-
margin-bottom: 0.75rem;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
.eds-button-group .eds-button:only-child {
|
|
287
|
-
margin: 0;
|
|
288
|
-
}
|
|
289
|
-
|
|
290
|
-
/* DO NOT CHANGE!*/
|
|
291
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
292
|
-
.eds-floating-button {
|
|
293
|
-
align-items: center;
|
|
294
|
-
-webkit-appearance: none;
|
|
295
|
-
-moz-appearance: none;
|
|
296
|
-
appearance: none;
|
|
297
|
-
background: #181c56;
|
|
298
|
-
background: var(--components-button-floating-standard-default);
|
|
299
|
-
border: 0;
|
|
300
|
-
border-radius: 1.5rem;
|
|
301
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
302
|
-
color: #ffffff;
|
|
303
|
-
color: var(--components-button-floating-standard-text);
|
|
304
|
-
cursor: pointer;
|
|
305
|
-
display: flex;
|
|
306
|
-
font-family: inherit;
|
|
307
|
-
font-size: 0.875rem;
|
|
308
|
-
font-weight: 500;
|
|
309
|
-
justify-content: center;
|
|
310
|
-
min-height: 3rem;
|
|
311
|
-
margin: 0;
|
|
312
|
-
min-width: 3rem;
|
|
313
|
-
padding: 0 1rem;
|
|
314
|
-
position: relative;
|
|
315
|
-
z-index: 10;
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
.eds-floating-button--extended {
|
|
319
|
-
padding: 0 0.9375rem;
|
|
320
|
-
}
|
|
321
|
-
|
|
322
|
-
.eds-floating-button:hover {
|
|
323
|
-
background-color: #393d79;
|
|
324
|
-
background-color: var(--components-button-floating-standard-hover);
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
.eds-floating-button:active {
|
|
328
|
-
background-color: #11143c;
|
|
329
|
-
background-color: var(--components-button-floating-standard-active);
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
.eds-floating-button:focus-visible {
|
|
333
|
-
outline: 2px solid #181c56;
|
|
334
|
-
outline-color: #181c56;
|
|
335
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
336
|
-
outline-offset: 0.125rem;
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
.eds-contrast .eds-floating-button:focus-visible {
|
|
340
|
-
outline-color: #aeb7e2;
|
|
341
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
.eds-contrast .eds-floating-button {
|
|
345
|
-
background: #ffffff;
|
|
346
|
-
background: var(--components-button-floating-contrast-default);
|
|
347
|
-
color: #181c56;
|
|
348
|
-
color: var(--components-button-floating-contrast-text);
|
|
349
|
-
box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
.eds-contrast .eds-floating-button:hover {
|
|
353
|
-
background-color: #f6f6f9;
|
|
354
|
-
background-color: var(--components-button-floating-contrast-hover);
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
.eds-contrast .eds-floating-button:active {
|
|
358
|
-
background-color: #d9dae8;
|
|
359
|
-
background-color: var(--components-button-floating-contrast-active);
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
.eds-floating-button--small {
|
|
363
|
-
border-radius: 1rem;
|
|
364
|
-
height: 2rem;
|
|
365
|
-
padding: 0 0.5rem;
|
|
366
|
-
min-width: 2rem;
|
|
367
|
-
min-height: 2rem;
|
|
368
|
-
flex: 0 1 auto;
|
|
369
|
-
}
|
|
370
|
-
|
|
371
|
-
.eds-floating-button--small.eds-floating-button--extended {
|
|
372
|
-
padding: 0 0.6875rem;
|
|
373
|
-
}
|
|
374
|
-
|
|
375
|
-
.eds-floating-button--extended > * {
|
|
376
|
-
margin: 0 0.5em;
|
|
377
|
-
}
|
|
378
|
-
|
|
379
|
-
.eds-floating-button--extended > *:first-child {
|
|
380
|
-
margin-left: 0;
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
.eds-floating-button--extended > *:last-child {
|
|
384
|
-
margin-right: 0;
|
|
385
|
-
}
|
|
386
|
-
|
|
387
365
|
/* DO NOT CHANGE!*/
|
|
388
366
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
389
367
|
.eds-square-button {
|
|
@@ -590,6 +568,85 @@ a.eds-button--size-large {
|
|
|
590
568
|
border-width: 0.0625rem;
|
|
591
569
|
}
|
|
592
570
|
|
|
571
|
+
/* DO NOT CHANGE!*/
|
|
572
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
573
|
+
.eds-icon-button {
|
|
574
|
+
border: 0.125rem solid transparent;
|
|
575
|
+
border-radius: 0.25rem;
|
|
576
|
+
background: none;
|
|
577
|
+
color: #181c56;
|
|
578
|
+
color: var(--components-button-iconbutton-standard-text);
|
|
579
|
+
cursor: pointer;
|
|
580
|
+
display: flex;
|
|
581
|
+
justify-content: center;
|
|
582
|
+
align-items: center;
|
|
583
|
+
font-size: 1rem;
|
|
584
|
+
padding: 0.5rem;
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
.eds-contrast .eds-icon-button {
|
|
588
|
+
color: #ffffff;
|
|
589
|
+
color: var(--components-button-iconbutton-contrast-text);
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
.eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
|
|
593
|
+
background-color: #ffffff;
|
|
594
|
+
background-color: var(--components-button-iconbutton-contrast-icon);
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
.eds-icon-button--size-small {
|
|
598
|
+
height: 1.5rem;
|
|
599
|
+
width: 1.5rem;
|
|
600
|
+
padding: 0;
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
.eds-icon-button:hover {
|
|
604
|
+
background-color: #d9ddf2;
|
|
605
|
+
background-color: var(--components-button-iconbutton-standard-hover);
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
.eds-contrast .eds-icon-button:hover {
|
|
609
|
+
background-color: #626493;
|
|
610
|
+
background-color: var(--components-button-iconbutton-contrast-hover);
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
.eds-icon-button:active {
|
|
614
|
+
background: #aeb7e2;
|
|
615
|
+
background: var(--components-button-iconbutton-standard-active);
|
|
616
|
+
color: #181c56;
|
|
617
|
+
color: var(--components-button-iconbutton-standard-text-active);
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
.eds-contrast .eds-icon-button:active {
|
|
621
|
+
background: #8794d4;
|
|
622
|
+
background: var(--components-button-iconbutton-contrast-active);
|
|
623
|
+
color: #181c56;
|
|
624
|
+
color: var(--components-button-iconbutton-contrast-text-active);
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
.eds-icon-button:focus-visible {
|
|
628
|
+
outline: 2px solid #181c56;
|
|
629
|
+
outline-color: #181c56;
|
|
630
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
631
|
+
outline-offset: 0.125rem;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
.eds-contrast .eds-icon-button:focus-visible {
|
|
635
|
+
outline-color: #aeb7e2;
|
|
636
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
.eds-icon-button--disabled {
|
|
640
|
+
opacity: 0.5;
|
|
641
|
+
pointer-events: none;
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
.eds-icon-button--disabled__wrapper {
|
|
645
|
+
cursor: not-allowed;
|
|
646
|
+
width: -moz-fit-content;
|
|
647
|
+
width: fit-content;
|
|
648
|
+
}
|
|
649
|
+
|
|
593
650
|
/* DO NOT CHANGE!*/
|
|
594
651
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
595
652
|
/* DO NOT CHANGE!*/
|
|
@@ -972,85 +1029,6 @@ a.eds-button--size-large {
|
|
|
972
1029
|
--eds-button: 1;
|
|
973
1030
|
}
|
|
974
1031
|
|
|
975
|
-
/* DO NOT CHANGE!*/
|
|
976
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
977
|
-
.eds-icon-button {
|
|
978
|
-
border: 0.125rem solid transparent;
|
|
979
|
-
border-radius: 0.25rem;
|
|
980
|
-
background: none;
|
|
981
|
-
color: #181c56;
|
|
982
|
-
color: var(--components-button-iconbutton-standard-text);
|
|
983
|
-
cursor: pointer;
|
|
984
|
-
display: flex;
|
|
985
|
-
justify-content: center;
|
|
986
|
-
align-items: center;
|
|
987
|
-
font-size: 1rem;
|
|
988
|
-
padding: 0.5rem;
|
|
989
|
-
}
|
|
990
|
-
|
|
991
|
-
.eds-contrast .eds-icon-button {
|
|
992
|
-
color: #ffffff;
|
|
993
|
-
color: var(--components-button-iconbutton-contrast-text);
|
|
994
|
-
}
|
|
995
|
-
|
|
996
|
-
.eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
|
|
997
|
-
background-color: #ffffff;
|
|
998
|
-
background-color: var(--components-button-iconbutton-contrast-icon);
|
|
999
|
-
}
|
|
1000
|
-
|
|
1001
|
-
.eds-icon-button--size-small {
|
|
1002
|
-
height: 1.5rem;
|
|
1003
|
-
width: 1.5rem;
|
|
1004
|
-
padding: 0;
|
|
1005
|
-
}
|
|
1006
|
-
|
|
1007
|
-
.eds-icon-button:hover {
|
|
1008
|
-
background-color: #d9ddf2;
|
|
1009
|
-
background-color: var(--components-button-iconbutton-standard-hover);
|
|
1010
|
-
}
|
|
1011
|
-
|
|
1012
|
-
.eds-contrast .eds-icon-button:hover {
|
|
1013
|
-
background-color: #626493;
|
|
1014
|
-
background-color: var(--components-button-iconbutton-contrast-hover);
|
|
1015
|
-
}
|
|
1016
|
-
|
|
1017
|
-
.eds-icon-button:active {
|
|
1018
|
-
background: #aeb7e2;
|
|
1019
|
-
background: var(--components-button-iconbutton-standard-active);
|
|
1020
|
-
color: #181c56;
|
|
1021
|
-
color: var(--components-button-iconbutton-standard-text-active);
|
|
1022
|
-
}
|
|
1023
|
-
|
|
1024
|
-
.eds-contrast .eds-icon-button:active {
|
|
1025
|
-
background: #8794d4;
|
|
1026
|
-
background: var(--components-button-iconbutton-contrast-active);
|
|
1027
|
-
color: #181c56;
|
|
1028
|
-
color: var(--components-button-iconbutton-contrast-text-active);
|
|
1029
|
-
}
|
|
1030
|
-
|
|
1031
|
-
.eds-icon-button:focus-visible {
|
|
1032
|
-
outline: 2px solid #181c56;
|
|
1033
|
-
outline-color: #181c56;
|
|
1034
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
1035
|
-
outline-offset: 0.125rem;
|
|
1036
|
-
}
|
|
1037
|
-
|
|
1038
|
-
.eds-contrast .eds-icon-button:focus-visible {
|
|
1039
|
-
outline-color: #aeb7e2;
|
|
1040
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
1041
|
-
}
|
|
1042
|
-
|
|
1043
|
-
.eds-icon-button--disabled {
|
|
1044
|
-
opacity: 0.5;
|
|
1045
|
-
pointer-events: none;
|
|
1046
|
-
}
|
|
1047
|
-
|
|
1048
|
-
.eds-icon-button--disabled__wrapper {
|
|
1049
|
-
cursor: not-allowed;
|
|
1050
|
-
width: -moz-fit-content;
|
|
1051
|
-
width: fit-content;
|
|
1052
|
-
}
|
|
1053
|
-
|
|
1054
1032
|
.eds-tooltip-wrapper {
|
|
1055
1033
|
display: inline-block;
|
|
1056
1034
|
position: relative;
|
|
@@ -1148,6 +1126,28 @@ a.eds-button--size-large {
|
|
|
1148
1126
|
}
|
|
1149
1127
|
/* DO NOT CHANGE!*/
|
|
1150
1128
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1129
|
+
.eds-popover {
|
|
1130
|
+
background: var(--components-tooltip-popover-standard-fill);
|
|
1131
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
1132
|
+
border-radius: 0.25rem;
|
|
1133
|
+
border: 0.0625rem solid var(--components-tooltip-popover-standard-border);
|
|
1134
|
+
font-family: inherit;
|
|
1135
|
+
z-index: 20;
|
|
1136
|
+
}
|
|
1137
|
+
.eds-contrast .eds-popover {
|
|
1138
|
+
background: var(--components-tooltip-popover-contrast-fill);
|
|
1139
|
+
box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
|
|
1140
|
+
}
|
|
1141
|
+
.eds-popover:focus-visible {
|
|
1142
|
+
outline: 2px solid #181c56;
|
|
1143
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
1144
|
+
outline-offset: 0.125rem;
|
|
1145
|
+
}
|
|
1146
|
+
.eds-contrast .eds-popover:focus-visible {
|
|
1147
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
1148
|
+
}
|
|
1149
|
+
/* DO NOT CHANGE!*/
|
|
1150
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1151
1151
|
/* DO NOT CHANGE!*/
|
|
1152
1152
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1153
1153
|
/* DO NOT CHANGE!*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/tooltip",
|
|
3
|
-
"version": "5.2.
|
|
3
|
+
"version": "5.2.2-beta.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/tooltip.esm.js",
|
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/button": "^3.3.
|
|
31
|
-
"@entur/icons": "^7.
|
|
32
|
-
"@entur/layout": "^
|
|
33
|
-
"@entur/tokens": "^3.17.
|
|
30
|
+
"@entur/button": "^3.3.2-beta.0",
|
|
31
|
+
"@entur/icons": "^7.6.2-beta.0",
|
|
32
|
+
"@entur/layout": "^3.0.0-beta.0",
|
|
33
|
+
"@entur/tokens": "^3.17.7-beta.0",
|
|
34
34
|
"@entur/utils": "^0.12.2",
|
|
35
35
|
"@floating-ui/react": "^0.26.24",
|
|
36
36
|
"@floating-ui/react-dom": "^2.1.0",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"dts-cli": "2.0.5"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "cd66907abaf7faaee1f9dcc5f063b3b153eaf7b2"
|
|
43
43
|
}
|