@entur/tooltip 5.1.6 → 5.2.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 +110 -110
- package/package.json +4 -4
package/dist/styles.css
CHANGED
|
@@ -54,14 +54,14 @@ a.eds-button--size-large {
|
|
|
54
54
|
color: var(--eds-button-text-active);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
.eds-button:focus {
|
|
57
|
+
.eds-button:focus-visible {
|
|
58
58
|
outline: 2px solid #181c56;
|
|
59
59
|
outline-color: #181c56;
|
|
60
60
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
61
61
|
outline-offset: 0.125rem;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
.eds-contrast .eds-button:focus {
|
|
64
|
+
.eds-contrast .eds-button:focus-visible {
|
|
65
65
|
outline-color: #aeb7e2;
|
|
66
66
|
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
67
67
|
}
|
|
@@ -307,14 +307,14 @@ a.eds-button--size-large {
|
|
|
307
307
|
background-color: var(--components-button-floating-standard-active);
|
|
308
308
|
}
|
|
309
309
|
|
|
310
|
-
.eds-floating-button:focus {
|
|
310
|
+
.eds-floating-button:focus-visible {
|
|
311
311
|
outline: 2px solid #181c56;
|
|
312
312
|
outline-color: #181c56;
|
|
313
313
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
314
314
|
outline-offset: 0.125rem;
|
|
315
315
|
}
|
|
316
316
|
|
|
317
|
-
.eds-contrast .eds-floating-button:focus {
|
|
317
|
+
.eds-contrast .eds-floating-button:focus-visible {
|
|
318
318
|
outline-color: #aeb7e2;
|
|
319
319
|
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
320
320
|
}
|
|
@@ -384,18 +384,18 @@ a.eds-button--size-large {
|
|
|
384
384
|
text-decoration: none;
|
|
385
385
|
}
|
|
386
386
|
|
|
387
|
-
.eds-square-button:focus {
|
|
387
|
+
.eds-square-button:focus-visible {
|
|
388
388
|
outline: none;
|
|
389
389
|
}
|
|
390
390
|
|
|
391
|
-
.eds-square-button:focus .eds-square-button__button {
|
|
391
|
+
.eds-square-button:focus-visible .eds-square-button__button {
|
|
392
392
|
outline: 2px solid #181c56;
|
|
393
393
|
outline-color: #181c56;
|
|
394
394
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
395
395
|
outline-offset: 0.125rem;
|
|
396
396
|
}
|
|
397
397
|
|
|
398
|
-
.eds-contrast .eds-square-button:focus .eds-square-button__button {
|
|
398
|
+
.eds-contrast .eds-square-button:focus-visible .eds-square-button__button {
|
|
399
399
|
outline-color: #aeb7e2;
|
|
400
400
|
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
401
401
|
}
|
|
@@ -568,6 +568,85 @@ a.eds-button--size-large {
|
|
|
568
568
|
border-width: 0.0625rem;
|
|
569
569
|
}
|
|
570
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
|
+
|
|
571
650
|
/* DO NOT CHANGE!*/
|
|
572
651
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
573
652
|
/* DO NOT CHANGE!*/
|
|
@@ -950,85 +1029,6 @@ a.eds-button--size-large {
|
|
|
950
1029
|
--eds-button: 1;
|
|
951
1030
|
}
|
|
952
1031
|
|
|
953
|
-
/* DO NOT CHANGE!*/
|
|
954
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
955
|
-
.eds-icon-button {
|
|
956
|
-
border: 0.125rem solid transparent;
|
|
957
|
-
border-radius: 0.25rem;
|
|
958
|
-
background: none;
|
|
959
|
-
color: #181c56;
|
|
960
|
-
color: var(--components-button-iconbutton-standard-text);
|
|
961
|
-
cursor: pointer;
|
|
962
|
-
display: flex;
|
|
963
|
-
justify-content: center;
|
|
964
|
-
align-items: center;
|
|
965
|
-
font-size: 1rem;
|
|
966
|
-
padding: 0.5rem;
|
|
967
|
-
}
|
|
968
|
-
|
|
969
|
-
.eds-contrast .eds-icon-button {
|
|
970
|
-
color: #ffffff;
|
|
971
|
-
color: var(--components-button-iconbutton-contrast-text);
|
|
972
|
-
}
|
|
973
|
-
|
|
974
|
-
.eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
|
|
975
|
-
background-color: #ffffff;
|
|
976
|
-
background-color: var(--components-button-iconbutton-contrast-icon);
|
|
977
|
-
}
|
|
978
|
-
|
|
979
|
-
.eds-icon-button--size-small {
|
|
980
|
-
height: 1.5rem;
|
|
981
|
-
width: 1.5rem;
|
|
982
|
-
padding: 0;
|
|
983
|
-
}
|
|
984
|
-
|
|
985
|
-
.eds-icon-button:hover {
|
|
986
|
-
background-color: #d9ddf2;
|
|
987
|
-
background-color: var(--components-button-iconbutton-standard-hover);
|
|
988
|
-
}
|
|
989
|
-
|
|
990
|
-
.eds-contrast .eds-icon-button:hover {
|
|
991
|
-
background-color: #626493;
|
|
992
|
-
background-color: var(--components-button-iconbutton-contrast-hover);
|
|
993
|
-
}
|
|
994
|
-
|
|
995
|
-
.eds-icon-button:active {
|
|
996
|
-
background: #aeb7e2;
|
|
997
|
-
background: var(--components-button-iconbutton-standard-active);
|
|
998
|
-
color: #181c56;
|
|
999
|
-
color: var(--components-button-iconbutton-standard-text-active);
|
|
1000
|
-
}
|
|
1001
|
-
|
|
1002
|
-
.eds-contrast .eds-icon-button:active {
|
|
1003
|
-
background: #8794d4;
|
|
1004
|
-
background: var(--components-button-iconbutton-contrast-active);
|
|
1005
|
-
color: #181c56;
|
|
1006
|
-
color: var(--components-button-iconbutton-contrast-text-active);
|
|
1007
|
-
}
|
|
1008
|
-
|
|
1009
|
-
.eds-icon-button:focus {
|
|
1010
|
-
outline: 2px solid #181c56;
|
|
1011
|
-
outline-color: #181c56;
|
|
1012
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
1013
|
-
outline-offset: 0.125rem;
|
|
1014
|
-
}
|
|
1015
|
-
|
|
1016
|
-
.eds-contrast .eds-icon-button:focus {
|
|
1017
|
-
outline-color: #aeb7e2;
|
|
1018
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
1019
|
-
}
|
|
1020
|
-
|
|
1021
|
-
.eds-icon-button--disabled {
|
|
1022
|
-
opacity: 0.5;
|
|
1023
|
-
pointer-events: none;
|
|
1024
|
-
}
|
|
1025
|
-
|
|
1026
|
-
.eds-icon-button--disabled__wrapper {
|
|
1027
|
-
cursor: not-allowed;
|
|
1028
|
-
width: -moz-fit-content;
|
|
1029
|
-
width: fit-content;
|
|
1030
|
-
}
|
|
1031
|
-
|
|
1032
1032
|
.eds-tooltip-wrapper {
|
|
1033
1033
|
display: inline-block;
|
|
1034
1034
|
position: relative;
|
|
@@ -1097,7 +1097,7 @@ a.eds-button--size-large {
|
|
|
1097
1097
|
background-color: #626493;
|
|
1098
1098
|
background-color: var(--components-button-iconbutton-contrast-hover);
|
|
1099
1099
|
}
|
|
1100
|
-
.eds-tooltip__close-button:focus {
|
|
1100
|
+
.eds-tooltip__close-button:focus-visible {
|
|
1101
1101
|
outline: 2px solid #181c56;
|
|
1102
1102
|
outline-color: #aeb7e2;
|
|
1103
1103
|
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
@@ -1114,7 +1114,7 @@ a.eds-button--size-large {
|
|
|
1114
1114
|
background-color: #d9ddf2;
|
|
1115
1115
|
background-color: var(--components-button-iconbutton-standard-hover);
|
|
1116
1116
|
}
|
|
1117
|
-
.eds-contrast .eds-tooltip__close-button:focus {
|
|
1117
|
+
.eds-contrast .eds-tooltip__close-button:focus-visible {
|
|
1118
1118
|
outline: 2px solid #181c56;
|
|
1119
1119
|
outline-color: #181c56;
|
|
1120
1120
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
@@ -1126,6 +1126,28 @@ a.eds-button--size-large {
|
|
|
1126
1126
|
}
|
|
1127
1127
|
/* DO NOT CHANGE!*/
|
|
1128
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. */
|
|
1129
1151
|
/* DO NOT CHANGE!*/
|
|
1130
1152
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1131
1153
|
/* DO NOT CHANGE!*/
|
|
@@ -1323,25 +1345,3 @@ a.eds-button--size-large {
|
|
|
1323
1345
|
:root {
|
|
1324
1346
|
--eds-tooltip: 1;
|
|
1325
1347
|
}
|
|
1326
|
-
/* DO NOT CHANGE!*/
|
|
1327
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1328
|
-
.eds-popover {
|
|
1329
|
-
background: var(--components-tooltip-popover-standard-fill);
|
|
1330
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
1331
|
-
border-radius: 0.25rem;
|
|
1332
|
-
border: 0.0625rem solid var(--components-tooltip-popover-standard-border);
|
|
1333
|
-
font-family: inherit;
|
|
1334
|
-
z-index: 20;
|
|
1335
|
-
}
|
|
1336
|
-
.eds-contrast .eds-popover {
|
|
1337
|
-
background: var(--components-tooltip-popover-contrast-fill);
|
|
1338
|
-
box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
|
|
1339
|
-
}
|
|
1340
|
-
.eds-popover:focus {
|
|
1341
|
-
outline: 2px solid #181c56;
|
|
1342
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
1343
|
-
outline-offset: 0.125rem;
|
|
1344
|
-
}
|
|
1345
|
-
.eds-contrast .eds-popover:focus {
|
|
1346
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
1347
|
-
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/tooltip",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.2.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/tooltip.esm.js",
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/button": "^3.
|
|
30
|
+
"@entur/button": "^3.3.0",
|
|
31
31
|
"@entur/icons": "^7.6.0",
|
|
32
|
-
"@entur/layout": "^2.
|
|
32
|
+
"@entur/layout": "^2.4.0",
|
|
33
33
|
"@entur/tokens": "^3.17.5",
|
|
34
34
|
"@entur/utils": "^0.12.2",
|
|
35
35
|
"@floating-ui/react": "^0.26.24",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"dts-cli": "2.0.5"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "2a0e12f4ccbc65c2c8a115690b4895ff01ee7f06"
|
|
43
43
|
}
|