Skip to content

Commit 08f5758

Browse files
aulneauaulneau
authored
Merge pull request #371 from plotly/fix-makelib
Remove dep to fix build scripts
2 parents a8da496 + 7bc4e9a commit 08f5758

File tree

3 files changed

+266
-2
lines changed

3 files changed

+266
-2
lines changed

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
"draft-js-utils": "^1.2.0",
1515
"fast-isnumeric": "^1.1.1",
1616
"immutability-helper": "^2.6.4",
17-
"microtip": "^0.2.2",
1817
"plotly-icons": "^1.1.5",
1918
"plotly.js": "^1.33.0",
2019
"prop-types": "^15.5.10",

‎src/styles/components/widgets/_microtip.scss‎

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
/* -------------------------------------------------------------------
2+
Microtip
3+
4+
Modern, lightweight css-only tooltips
5+
Just 1kb minified and gzipped
6+
7+
@author Ghosh
8+
@package Microtip
9+
10+
----------------------------------------------------------------------
11+
1. Base Styles
12+
2. Direction Modifiers
13+
3. Position Modifiers
14+
--------------------------------------------------------------------*/
15+
16+
17+
/* ------------------------------------------------
18+
[1] Base Styles
19+
-------------------------------------------------*/
20+
21+
[aria-label][role~="tooltip"] {
22+
position: relative;
23+
}
24+
25+
[aria-label][role~="tooltip"]::before,
26+
[aria-label][role~="tooltip"]::after {
27+
transform: translate3d(0, 0, 0);
28+
-webkit-backface-visibility: hidden;
29+
backface-visibility: hidden;
30+
will-change: transform;
31+
opacity: 0;
32+
pointer-events: none;
33+
transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
34+
position: absolute;
35+
box-sizing: border-box;
36+
z-index: 10;
37+
transform-origin: top;
38+
}
39+
40+
[aria-label][role~="tooltip"]::before {
41+
background-size: 100% auto !important;
42+
content: "";
43+
}
44+
45+
[aria-label][role~="tooltip"]::after {
46+
background: rgba(17, 17, 17, .9);
47+
border-radius: 4px;
48+
color: #ffffff;
49+
content: attr(aria-label);
50+
font-size: var(--microtip-font-size, 13px);
51+
font-weight: var(--microtip-font-weight, normal);
52+
text-transform: var(--microtip-text-transform, none);
53+
padding: .5em 1em;
54+
white-space: nowrap;
55+
box-sizing: content-box;
56+
}
57+
58+
[aria-label][role~="tooltip"]:hover::before,
59+
[aria-label][role~="tooltip"]:hover::after,
60+
[aria-label][role~="tooltip"]:focus::before,
61+
[aria-label][role~="tooltip"]:focus::after {
62+
opacity: 1;
63+
pointer-events: auto;
64+
}
65+
66+
67+
68+
/* ------------------------------------------------
69+
[2] Position Modifiers
70+
-------------------------------------------------*/
71+
72+
[role~="tooltip"][data-microtip-position|="top"]::before {
73+
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
74+
height: 6px;
75+
width: 18px;
76+
margin-bottom: 5px;
77+
}
78+
79+
[role~="tooltip"][data-microtip-position|="top"]::after {
80+
margin-bottom: 11px;
81+
}
82+
83+
[role~="tooltip"][data-microtip-position|="top"]::before {
84+
transform: translate3d(-50%, 0, 0);
85+
bottom: 100%;
86+
left: 50%;
87+
}
88+
89+
[role~="tooltip"][data-microtip-position|="top"]:hover::before {
90+
transform: translate3d(-50%, -5px, 0);
91+
}
92+
93+
[role~="tooltip"][data-microtip-position|="top"]::after {
94+
transform: translate3d(-50%, 0, 0);
95+
bottom: 100%;
96+
left: 50%;
97+
}
98+
99+
[role~="tooltip"][data-microtip-position="top"]:hover::after {
100+
transform: translate3d(-50%, -5px, 0);
101+
}
102+
103+
/* ------------------------------------------------
104+
[2.1] Top Left
105+
-------------------------------------------------*/
106+
[role~="tooltip"][data-microtip-position="top-left"]::after {
107+
transform: translate3d(calc(-100% + 16px), 0, 0);
108+
bottom: 100%;
109+
}
110+
111+
[role~="tooltip"][data-microtip-position="top-left"]:hover::after {
112+
transform: translate3d(calc(-100% + 16px), -5px, 0);
113+
}
114+
115+
116+
/* ------------------------------------------------
117+
[2.2] Top Right
118+
-------------------------------------------------*/
119+
[role~="tooltip"][data-microtip-position="top-right"]::after {
120+
transform: translate3d(calc(0% + -16px), 0, 0);
121+
bottom: 100%;
122+
}
123+
124+
[role~="tooltip"][data-microtip-position="top-right"]:hover::after {
125+
transform: translate3d(calc(0% + -16px), -5px, 0);
126+
}
127+
128+
129+
/* ------------------------------------------------
130+
[2.3] Bottom
131+
-------------------------------------------------*/
132+
[role~="tooltip"][data-microtip-position|="bottom"]::before {
133+
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
134+
height: 6px;
135+
width: 18px;
136+
margin-top: 5px;
137+
margin-bottom: 0;
138+
}
139+
140+
[role~="tooltip"][data-microtip-position|="bottom"]::after {
141+
margin-top: 11px;
142+
}
143+
144+
[role~="tooltip"][data-microtip-position|="bottom"]::before {
145+
transform: translate3d(-50%, -10px, 0);
146+
bottom: auto;
147+
left: 50%;
148+
top: 100%;
149+
}
150+
151+
[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
152+
transform: translate3d(-50%, 0, 0);
153+
}
154+
155+
[role~="tooltip"][data-microtip-position|="bottom"]::after {
156+
transform: translate3d(-50%, -10px, 0);
157+
top: 100%;
158+
left: 50%;
159+
}
160+
161+
[role~="tooltip"][data-microtip-position="bottom"]:hover::after {
162+
transform: translate3d(-50%, 0, 0);
163+
}
164+
165+
166+
/* ------------------------------------------------
167+
[2.4] Bottom Left
168+
-------------------------------------------------*/
169+
[role~="tooltip"][data-microtip-position="bottom-left"]::after {
170+
transform: translate3d(calc(-100% + 16px), -10px, 0);
171+
top: 100%;
172+
}
173+
174+
[role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
175+
transform: translate3d(calc(-100% + 16px), 0, 0);
176+
}
177+
178+
179+
/* ------------------------------------------------
180+
[2.5] Bottom Right
181+
-------------------------------------------------*/
182+
[role~="tooltip"][data-microtip-position="bottom-right"]::after {
183+
transform: translate3d(calc(0% + -16px), -10px, 0);
184+
top: 100%;
185+
}
186+
187+
[role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
188+
transform: translate3d(calc(0% + -16px), 0, 0);
189+
}
190+
191+
192+
/* ------------------------------------------------
193+
[2.6] Left
194+
-------------------------------------------------*/
195+
[role~="tooltip"][data-microtip-position="left"]::before,
196+
[role~="tooltip"][data-microtip-position="left"]::after {
197+
bottom: auto;
198+
left: auto;
199+
right: 100%;
200+
top: 50%;
201+
transform: translate3d(10px, -50%, 0);
202+
}
203+
204+
[role~="tooltip"][data-microtip-position="left"]::before {
205+
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
206+
height: 18px;
207+
width: 6px;
208+
margin-right: 5px;
209+
margin-bottom: 0;
210+
}
211+
212+
[role~="tooltip"][data-microtip-position="left"]::after {
213+
margin-right: 11px;
214+
}
215+
216+
[role~="tooltip"][data-microtip-position="left"]:hover::before,
217+
[role~="tooltip"][data-microtip-position="left"]:hover::after {
218+
transform: translate3d(0, -50%, 0);
219+
}
220+
221+
222+
/* ------------------------------------------------
223+
[2.7] Right
224+
-------------------------------------------------*/
225+
[role~="tooltip"][data-microtip-position="right"]::before,
226+
[role~="tooltip"][data-microtip-position="right"]::after {
227+
bottom: auto;
228+
left: 100%;
229+
top: 50%;
230+
transform: translate3d(-10px, -50%, 0);
231+
}
232+
233+
[role~="tooltip"][data-microtip-position="right"]::before {
234+
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
235+
height: 18px;
236+
width: 6px;
237+
margin-bottom: 0;
238+
margin-left: 5px;
239+
}
240+
241+
[role~="tooltip"][data-microtip-position="right"]::after {
242+
margin-left: 11px;
243+
}
244+
245+
[role~="tooltip"][data-microtip-position="right"]:hover::before,
246+
[role~="tooltip"][data-microtip-position="right"]:hover::after {
247+
transform: translate3d(0, -50%, 0);
248+
}
249+
250+
/* ------------------------------------------------
251+
[3] Size
252+
-------------------------------------------------*/
253+
[role~="tooltip"][data-microtip-size="small"]::after {
254+
white-space: initial;
255+
width: 80px;
256+
}
257+
258+
[role~="tooltip"][data-microtip-size="medium"]::after {
259+
white-space: initial;
260+
width: 150px;
261+
}
262+
263+
[role~="tooltip"][data-microtip-size="large"]::after {
264+
white-space: initial;
265+
width: 260px;
266+
}

‎src/styles/main.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
@import 'mixins';
44
@import 'helpers';
55
@import 'movement';
6-
@import '~microtip/microtip';
76

87
:root {
98
--env: $ENV;

0 commit comments

Comments
 (0)