@lobehub/ui 5.32.3 → 5.32.5
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.
|
@@ -25,23 +25,31 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
25
25
|
}
|
|
26
26
|
`,
|
|
27
27
|
thumb: css`
|
|
28
|
-
|
|
29
|
-
height: 14px;
|
|
30
|
-
border-radius: 50%;
|
|
28
|
+
flex-shrink: 0;
|
|
31
29
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
30
|
+
width: 8px;
|
|
31
|
+
height: 16px;
|
|
32
|
+
border-radius: 100px;
|
|
33
|
+
|
|
34
|
+
background: ${cssVar.colorPrimary};
|
|
35
|
+
box-shadow: 0 0 0 1px ${cssVar.colorBgContainer};
|
|
37
36
|
|
|
38
37
|
transition: box-shadow 150ms ${cssVar.motionEaseOut};
|
|
39
38
|
|
|
39
|
+
&::before {
|
|
40
|
+
content: '';
|
|
41
|
+
|
|
42
|
+
position: absolute;
|
|
43
|
+
inset-block-start: 50%;
|
|
44
|
+
inset-inline-start: 50%;
|
|
45
|
+
translate: -50% -50%;
|
|
46
|
+
|
|
47
|
+
width: 24px;
|
|
48
|
+
height: 40px;
|
|
49
|
+
}
|
|
50
|
+
|
|
40
51
|
&:hover:not([data-disabled] *) {
|
|
41
|
-
box-shadow:
|
|
42
|
-
0 0 0 1px ${cssVar.colorPrimary},
|
|
43
|
-
0 1px 2px rgb(0 0 0 / 12%),
|
|
44
|
-
0 3px 8px rgb(0 30 80 / 18%);
|
|
52
|
+
box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};
|
|
45
53
|
}
|
|
46
54
|
|
|
47
55
|
&:focus-visible {
|
|
@@ -50,10 +58,16 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
50
58
|
}
|
|
51
59
|
|
|
52
60
|
[data-dragging] & {
|
|
53
|
-
box-shadow:
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
61
|
+
box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
[data-disabled] & {
|
|
65
|
+
background: ${cssVar.colorTextQuaternary};
|
|
66
|
+
box-shadow: 0 0 0 1px ${cssVar.colorBgContainer};
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@media (prefers-reduced-motion: reduce) {
|
|
70
|
+
transition-duration: 0s;
|
|
57
71
|
}
|
|
58
72
|
`,
|
|
59
73
|
track: css`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Slider/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n control: css`\n display: flex;\n align-items: center;\n width: 100%;\n height: 20px;\n `,\n indicator: css`\n border-radius: inherit;\n background: ${cssVar.colorPrimary};\n\n [data-disabled] & {\n background: ${cssVar.colorTextQuaternary};\n }\n `,\n root: css`\n display: flex;\n align-items: center;\n width: 100%;\n\n &[data-disabled] {\n cursor: not-allowed;\n }\n `,\n thumb: css`\n width:
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Slider/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n control: css`\n display: flex;\n align-items: center;\n width: 100%;\n height: 20px;\n `,\n indicator: css`\n border-radius: inherit;\n background: ${cssVar.colorPrimary};\n\n [data-disabled] & {\n background: ${cssVar.colorTextQuaternary};\n }\n `,\n root: css`\n display: flex;\n align-items: center;\n width: 100%;\n\n &[data-disabled] {\n cursor: not-allowed;\n }\n `,\n thumb: css`\n flex-shrink: 0;\n\n width: 8px;\n height: 16px;\n border-radius: 100px;\n\n background: ${cssVar.colorPrimary};\n box-shadow: 0 0 0 1px ${cssVar.colorBgContainer};\n\n transition: box-shadow 150ms ${cssVar.motionEaseOut};\n\n &::before {\n content: '';\n\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n translate: -50% -50%;\n\n width: 24px;\n height: 40px;\n }\n\n &:hover:not([data-disabled] *) {\n box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n }\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: 1px;\n }\n\n [data-dragging] & {\n box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n }\n\n [data-disabled] & {\n background: ${cssVar.colorTextQuaternary};\n box-shadow: 0 0 0 1px ${cssVar.colorBgContainer};\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n track: css`\n width: 100%;\n height: 4px;\n border-radius: 100px;\n background: ${cssVar.colorFillSecondary};\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;;;CAMZ,WAAW,GAAG;;kBAEE,OAAO,aAAa;;;oBAGlB,OAAO,oBAAoB;;;CAG7C,MAAM,GAAG;;;;;;;;;CAST,OAAO,GAAG;;;;;;;kBAOM,OAAO,aAAa;4BACV,OAAO,iBAAiB;;mCAEjB,OAAO,cAAc;;;;;;;;;;;;;;;8BAe1B,OAAO,mBAAmB;;;;2BAI7B,OAAO,mBAAmB;;;;;8BAKvB,OAAO,mBAAmB;;;;oBAIpC,OAAO,oBAAoB;8BACjB,OAAO,iBAAiB;;;;;;;CAOpD,OAAO,GAAG;;;;kBAIM,OAAO,mBAAmB;;AAE5C,EAAE"}
|
|
@@ -46,6 +46,12 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
46
46
|
}
|
|
47
47
|
`,
|
|
48
48
|
popup: css`
|
|
49
|
+
|
|
50
|
+
/* Keep the popup on its own compositor layer for its whole lifetime: when the opacity
|
|
51
|
+
transition ends the browser otherwise drops the layer and re-rasterizes with pixel
|
|
52
|
+
snapping — a visible one-frame shift when the measured width is fractional
|
|
53
|
+
(single-line tooltips). */
|
|
54
|
+
will-change: transform, opacity;
|
|
49
55
|
user-select: none;
|
|
50
56
|
|
|
51
57
|
position: relative;
|
|
@@ -65,11 +71,21 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
65
71
|
0 1px 6px -1px rgb(0 0 0 / 2%),
|
|
66
72
|
0 2px 4px 0 rgb(0 0 0 / 2%);
|
|
67
73
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
74
|
+
/* Opacity gets its own monotonic curve: running it on the overshooting spring makes the
|
|
75
|
+
fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads
|
|
76
|
+
as a dropped frame. The spring stays on transform only. */
|
|
77
|
+
transition-timing-function:
|
|
78
|
+
var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out);
|
|
79
|
+
transition-duration: var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration);
|
|
80
|
+
transition-property: opacity, transform;
|
|
71
81
|
|
|
72
82
|
&[data-layout-animation] {
|
|
83
|
+
transition-timing-function:
|
|
84
|
+
var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out),
|
|
85
|
+
var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease);
|
|
86
|
+
transition-duration:
|
|
87
|
+
var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration),
|
|
88
|
+
var(--lobe-tooltip-layout-duration), var(--lobe-tooltip-layout-duration);
|
|
73
89
|
transition-property: opacity, transform, width, height;
|
|
74
90
|
}
|
|
75
91
|
|
|
@@ -90,12 +106,71 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
90
106
|
}
|
|
91
107
|
`,
|
|
92
108
|
positioner: css`
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
--lobe-tooltip-animation-
|
|
97
|
-
--lobe-tooltip-
|
|
98
|
-
--lobe-tooltip-
|
|
109
|
+
/* Springs baked as linear(): stiffness 700 / damping 38 (enter) and 380 / 28 (glide),
|
|
110
|
+
both zeta ~0.72 with ~4% overshoot. Durations are the springs' settle times —
|
|
111
|
+
change them together with the curves, not independently. */
|
|
112
|
+
--lobe-tooltip-animation-duration: 280ms;
|
|
113
|
+
--lobe-tooltip-fade-duration: 160ms;
|
|
114
|
+
--lobe-tooltip-fade-ease: cubic-bezier(0.33, 1, 0.68, 1);
|
|
115
|
+
--lobe-tooltip-animation-duration-exit: 100ms;
|
|
116
|
+
--lobe-tooltip-animation-translate: 3px;
|
|
117
|
+
--lobe-tooltip-animation-scale: 0.97;
|
|
118
|
+
--lobe-tooltip-animation-ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
119
|
+
--lobe-tooltip-animation-ease-out: linear(
|
|
120
|
+
0,
|
|
121
|
+
0.041,
|
|
122
|
+
0.14,
|
|
123
|
+
0.268,
|
|
124
|
+
0.407,
|
|
125
|
+
0.541,
|
|
126
|
+
0.662,
|
|
127
|
+
0.765,
|
|
128
|
+
0.849,
|
|
129
|
+
0.915,
|
|
130
|
+
0.964,
|
|
131
|
+
0.998,
|
|
132
|
+
1.02,
|
|
133
|
+
1.032,
|
|
134
|
+
1.038,
|
|
135
|
+
1.039,
|
|
136
|
+
1.036,
|
|
137
|
+
1.032,
|
|
138
|
+
1.027,
|
|
139
|
+
1.022,
|
|
140
|
+
1.016,
|
|
141
|
+
1.012,
|
|
142
|
+
1.008,
|
|
143
|
+
1.005,
|
|
144
|
+
1.003
|
|
145
|
+
);
|
|
146
|
+
--lobe-tooltip-layout-duration: 380ms;
|
|
147
|
+
--lobe-tooltip-layout-ease: linear(
|
|
148
|
+
0,
|
|
149
|
+
0.041,
|
|
150
|
+
0.14,
|
|
151
|
+
0.268,
|
|
152
|
+
0.407,
|
|
153
|
+
0.541,
|
|
154
|
+
0.661,
|
|
155
|
+
0.765,
|
|
156
|
+
0.849,
|
|
157
|
+
0.915,
|
|
158
|
+
0.964,
|
|
159
|
+
0.998,
|
|
160
|
+
1.02,
|
|
161
|
+
1.032,
|
|
162
|
+
1.038,
|
|
163
|
+
1.039,
|
|
164
|
+
1.036,
|
|
165
|
+
1.032,
|
|
166
|
+
1.027,
|
|
167
|
+
1.022,
|
|
168
|
+
1.016,
|
|
169
|
+
1.012,
|
|
170
|
+
1.008,
|
|
171
|
+
1.005,
|
|
172
|
+
1.003
|
|
173
|
+
);
|
|
99
174
|
--lobe-tooltip-translate-x: 0;
|
|
100
175
|
--lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);
|
|
101
176
|
|
|
@@ -111,6 +186,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
111
186
|
transition-property: none;
|
|
112
187
|
|
|
113
188
|
&[data-layout-animation] {
|
|
189
|
+
transition-timing-function: var(--lobe-tooltip-layout-ease);
|
|
190
|
+
transition-duration: var(--lobe-tooltip-layout-duration);
|
|
114
191
|
transition-property:
|
|
115
192
|
inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;
|
|
116
193
|
}
|
|
@@ -153,9 +230,17 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
153
230
|
--lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);
|
|
154
231
|
--lobe-tooltip-translate-y: 0;
|
|
155
232
|
}
|
|
233
|
+
|
|
234
|
+
@media (prefers-reduced-motion: reduce) {
|
|
235
|
+
--lobe-tooltip-animation-duration: 0s;
|
|
236
|
+
--lobe-tooltip-fade-duration: 0s;
|
|
237
|
+
--lobe-tooltip-animation-duration-exit: 0s;
|
|
238
|
+
--lobe-tooltip-layout-duration: 0s;
|
|
239
|
+
}
|
|
156
240
|
`,
|
|
157
241
|
viewport: css`
|
|
158
242
|
--lobe-tooltip-viewport-inline-padding: 8px;
|
|
243
|
+
--lobe-tooltip-content-shift: 40%;
|
|
159
244
|
|
|
160
245
|
position: relative;
|
|
161
246
|
|
|
@@ -181,9 +266,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
181
266
|
opacity: 1;
|
|
182
267
|
|
|
183
268
|
transition:
|
|
184
|
-
transform var(--lobe-tooltip-
|
|
185
|
-
opacity calc(var(--lobe-tooltip-
|
|
186
|
-
var(--lobe-tooltip-animation-ease-out);
|
|
269
|
+
transform var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),
|
|
270
|
+
opacity calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease);
|
|
187
271
|
}
|
|
188
272
|
|
|
189
273
|
[data-previous] {
|
|
@@ -193,42 +277,42 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
193
277
|
}
|
|
194
278
|
|
|
195
279
|
&[data-activation-direction~='right'] [data-previous][data-ending-style] {
|
|
196
|
-
transform: translateX(-
|
|
280
|
+
transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));
|
|
197
281
|
opacity: 0;
|
|
198
282
|
}
|
|
199
283
|
|
|
200
284
|
&[data-activation-direction~='right'] [data-current][data-starting-style] {
|
|
201
|
-
transform: translateX(
|
|
285
|
+
transform: translateX(var(--lobe-tooltip-content-shift));
|
|
202
286
|
opacity: 0;
|
|
203
287
|
}
|
|
204
288
|
|
|
205
289
|
&[data-activation-direction~='left'] [data-previous][data-ending-style] {
|
|
206
|
-
transform: translateX(
|
|
290
|
+
transform: translateX(var(--lobe-tooltip-content-shift));
|
|
207
291
|
opacity: 0;
|
|
208
292
|
}
|
|
209
293
|
|
|
210
294
|
&[data-activation-direction~='left'] [data-current][data-starting-style] {
|
|
211
|
-
transform: translateX(-
|
|
295
|
+
transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));
|
|
212
296
|
opacity: 0;
|
|
213
297
|
}
|
|
214
298
|
|
|
215
299
|
&[data-activation-direction~='down'] [data-previous][data-ending-style] {
|
|
216
|
-
transform: translateY(-
|
|
300
|
+
transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));
|
|
217
301
|
opacity: 0;
|
|
218
302
|
}
|
|
219
303
|
|
|
220
304
|
&[data-activation-direction~='down'] [data-current][data-starting-style] {
|
|
221
|
-
transform: translateY(
|
|
305
|
+
transform: translateY(var(--lobe-tooltip-content-shift));
|
|
222
306
|
opacity: 0;
|
|
223
307
|
}
|
|
224
308
|
|
|
225
309
|
&[data-activation-direction~='up'] [data-previous][data-ending-style] {
|
|
226
|
-
transform: translateY(
|
|
310
|
+
transform: translateY(var(--lobe-tooltip-content-shift));
|
|
227
311
|
opacity: 0;
|
|
228
312
|
}
|
|
229
313
|
|
|
230
314
|
&[data-activation-direction~='up'] [data-current][data-starting-style] {
|
|
231
|
-
transform: translateY(-
|
|
315
|
+
transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));
|
|
232
316
|
opacity: 0;
|
|
233
317
|
}
|
|
234
318
|
`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n arrow: css`\n --lobe-tooltip-arrow-offset-block: 4px;\n --lobe-tooltip-arrow-offset-inline: 6px;\n\n pointer-events: none;\n\n position: absolute;\n transform-origin: center;\n\n display: flex;\n\n width: 8px;\n height: 4px;\n\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n fill: ${cssVar.colorBgElevated};\n }\n\n & [data-role='stroke'] {\n stroke: ${cssVar.colorBorderSecondary};\n }\n\n &[data-side='top'] {\n inset-block-end: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n inset-inline-end: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n transform: rotate(90deg);\n }\n\n &[data-side='right'] {\n inset-inline-start: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n transform: rotate(-90deg);\n }\n\n &[data-side='bottom'] {\n inset-block-start: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n }\n `,\n\n popup: css`\n user-select: none;\n\n position: relative;\n transform-origin: var(--transform-origin);\n\n max-width: min(320px, var(--available-width));\n border: 1px solid ${cssVar.colorFill};\n border-radius: ${cssVar.borderRadiusSM};\n\n font-size: ${cssVar.fontSizeSM};\n line-height: 1.2;\n color: ${cssVar.colorTextLabel};\n\n background: ${cssVar.colorBgElevated};\n box-shadow:\n 0 1px 2px 0 rgb(0 0 0 / 3%),\n 0 1px 6px -1px rgb(0 0 0 / 2%),\n 0 2px 4px 0 rgb(0 0 0 / 2%);\n\n transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n transition-duration: var(--lobe-tooltip-animation-duration);\n transition-property: opacity;\n\n &[data-layout-animation] {\n transition-property: opacity, transform, width, height;\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0)\n scale(var(--lobe-tooltip-animation-scale));\n opacity: 0;\n }\n\n &[data-ending-style] {\n transition-timing-function: var(--lobe-tooltip-animation-ease-in);\n transition-duration: var(--lobe-tooltip-animation-duration-exit);\n }\n\n &[data-instant] {\n transition: none;\n }\n `,\n\n positioner: css`\n --lobe-tooltip-animation-duration: 100ms;\n --lobe-tooltip-animation-duration-exit: 60ms;\n --lobe-tooltip-animation-translate: 2px;\n --lobe-tooltip-animation-scale: 0.98;\n --lobe-tooltip-animation-ease-in: ease-in;\n --lobe-tooltip-animation-ease-out: ${cssVar.motionEaseOut};\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n\n will-change: transform, opacity;\n\n z-index: 114514;\n\n width: min(var(--positioner-width), 320px, var(--available-width));\n height: var(--positioner-height);\n\n transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n transition-duration: var(--lobe-tooltip-animation-duration);\n transition-property: none;\n\n &[data-layout-animation] {\n transition-property:\n inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n }\n\n &[data-instant] {\n transition: none;\n }\n\n /* Fallback: never show a tooltip when the anchor is hidden or the positioner falls back to (0,0). */\n &[data-anchor-hidden],\n &[data-zero-origin='true'] {\n pointer-events: none;\n visibility: hidden;\n }\n\n &[data-placement='top'],\n &[data-placement='topLeft'],\n &[data-placement='topRight'] {\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: var(--lobe-tooltip-animation-translate);\n }\n\n &[data-placement='bottom'],\n &[data-placement='bottomLeft'],\n &[data-placement='bottomRight'] {\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n }\n\n &[data-placement='left'],\n &[data-placement='leftTop'],\n &[data-placement='leftBottom'] {\n --lobe-tooltip-translate-x: var(--lobe-tooltip-animation-translate);\n --lobe-tooltip-translate-y: 0;\n }\n\n &[data-placement='right'],\n &[data-placement='rightTop'],\n &[data-placement='rightBottom'] {\n --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);\n --lobe-tooltip-translate-y: 0;\n }\n `,\n\n viewport: css`\n --lobe-tooltip-viewport-inline-padding: 8px;\n\n position: relative;\n\n overflow: clip;\n display: flex;\n gap: 6px;\n align-items: center;\n\n padding-block: 4px;\n padding-inline: var(--lobe-tooltip-viewport-inline-padding);\n\n overflow-wrap: break-word;\n white-space: normal;\n\n [data-previous],\n [data-current] {\n transform: translateX(0);\n\n display: flex;\n gap: 6px;\n align-items: center;\n\n opacity: 1;\n\n transition:\n transform var(--lobe-tooltip-animation-duration) var(--lobe-tooltip-animation-ease-out),\n opacity calc(var(--lobe-tooltip-animation-duration) / 2)\n var(--lobe-tooltip-animation-ease-out);\n }\n\n [data-previous] {\n position: absolute;\n inset-block-start: 4px;\n inset-inline-start: var(--lobe-tooltip-viewport-inline-padding);\n }\n\n &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n transform: translateX(-50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='right'] [data-current][data-starting-style] {\n transform: translateX(50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n transform: translateX(50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-current][data-starting-style] {\n transform: translateX(-50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n transform: translateY(-50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-current][data-starting-style] {\n transform: translateY(50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n transform: translateY(50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-current][data-starting-style] {\n transform: translateY(-50%);\n opacity: 0;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;cAkBE,OAAO,gBAAgB;;;;gBAIrB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;CAuB1C,OAAO,GAAG;;;;;;;wBAOY,OAAO,UAAU;qBACpB,OAAO,eAAe;;iBAE1B,OAAO,WAAW;;aAEtB,OAAO,eAAe;;kBAEjB,OAAO,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BvC,YAAY,GAAG;;;;;;yCAMwB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D5D,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8Ef,EAAE"}
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n arrow: css`\n --lobe-tooltip-arrow-offset-block: 4px;\n --lobe-tooltip-arrow-offset-inline: 6px;\n\n pointer-events: none;\n\n position: absolute;\n transform-origin: center;\n\n display: flex;\n\n width: 8px;\n height: 4px;\n\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n fill: ${cssVar.colorBgElevated};\n }\n\n & [data-role='stroke'] {\n stroke: ${cssVar.colorBorderSecondary};\n }\n\n &[data-side='top'] {\n inset-block-end: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n inset-inline-end: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n transform: rotate(90deg);\n }\n\n &[data-side='right'] {\n inset-inline-start: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n transform: rotate(-90deg);\n }\n\n &[data-side='bottom'] {\n inset-block-start: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n }\n `,\n\n popup: css`\n\n /* Keep the popup on its own compositor layer for its whole lifetime: when the opacity\n transition ends the browser otherwise drops the layer and re-rasterizes with pixel\n snapping — a visible one-frame shift when the measured width is fractional\n (single-line tooltips). */\n will-change: transform, opacity;\n user-select: none;\n\n position: relative;\n transform-origin: var(--transform-origin);\n\n max-width: min(320px, var(--available-width));\n border: 1px solid ${cssVar.colorFill};\n border-radius: ${cssVar.borderRadiusSM};\n\n font-size: ${cssVar.fontSizeSM};\n line-height: 1.2;\n color: ${cssVar.colorTextLabel};\n\n background: ${cssVar.colorBgElevated};\n box-shadow:\n 0 1px 2px 0 rgb(0 0 0 / 3%),\n 0 1px 6px -1px rgb(0 0 0 / 2%),\n 0 2px 4px 0 rgb(0 0 0 / 2%);\n\n /* Opacity gets its own monotonic curve: running it on the overshooting spring makes the\n fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads\n as a dropped frame. The spring stays on transform only. */\n transition-timing-function:\n var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out);\n transition-duration: var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration);\n transition-property: opacity, transform;\n\n &[data-layout-animation] {\n transition-timing-function:\n var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out),\n var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease);\n transition-duration:\n var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration),\n var(--lobe-tooltip-layout-duration), var(--lobe-tooltip-layout-duration);\n transition-property: opacity, transform, width, height;\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0)\n scale(var(--lobe-tooltip-animation-scale));\n opacity: 0;\n }\n\n &[data-ending-style] {\n transition-timing-function: var(--lobe-tooltip-animation-ease-in);\n transition-duration: var(--lobe-tooltip-animation-duration-exit);\n }\n\n &[data-instant] {\n transition: none;\n }\n `,\n\n positioner: css`\n /* Springs baked as linear(): stiffness 700 / damping 38 (enter) and 380 / 28 (glide),\n both zeta ~0.72 with ~4% overshoot. Durations are the springs' settle times —\n change them together with the curves, not independently. */\n --lobe-tooltip-animation-duration: 280ms;\n --lobe-tooltip-fade-duration: 160ms;\n --lobe-tooltip-fade-ease: cubic-bezier(0.33, 1, 0.68, 1);\n --lobe-tooltip-animation-duration-exit: 100ms;\n --lobe-tooltip-animation-translate: 3px;\n --lobe-tooltip-animation-scale: 0.97;\n --lobe-tooltip-animation-ease-in: cubic-bezier(0.4, 0, 1, 1);\n --lobe-tooltip-animation-ease-out: linear(\n 0,\n 0.041,\n 0.14,\n 0.268,\n 0.407,\n 0.541,\n 0.662,\n 0.765,\n 0.849,\n 0.915,\n 0.964,\n 0.998,\n 1.02,\n 1.032,\n 1.038,\n 1.039,\n 1.036,\n 1.032,\n 1.027,\n 1.022,\n 1.016,\n 1.012,\n 1.008,\n 1.005,\n 1.003\n );\n --lobe-tooltip-layout-duration: 380ms;\n --lobe-tooltip-layout-ease: linear(\n 0,\n 0.041,\n 0.14,\n 0.268,\n 0.407,\n 0.541,\n 0.661,\n 0.765,\n 0.849,\n 0.915,\n 0.964,\n 0.998,\n 1.02,\n 1.032,\n 1.038,\n 1.039,\n 1.036,\n 1.032,\n 1.027,\n 1.022,\n 1.016,\n 1.012,\n 1.008,\n 1.005,\n 1.003\n );\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n\n will-change: transform, opacity;\n\n z-index: 114514;\n\n width: min(var(--positioner-width), 320px, var(--available-width));\n height: var(--positioner-height);\n\n transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n transition-duration: var(--lobe-tooltip-animation-duration);\n transition-property: none;\n\n &[data-layout-animation] {\n transition-timing-function: var(--lobe-tooltip-layout-ease);\n transition-duration: var(--lobe-tooltip-layout-duration);\n transition-property:\n inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n }\n\n &[data-instant] {\n transition: none;\n }\n\n /* Fallback: never show a tooltip when the anchor is hidden or the positioner falls back to (0,0). */\n &[data-anchor-hidden],\n &[data-zero-origin='true'] {\n pointer-events: none;\n visibility: hidden;\n }\n\n &[data-placement='top'],\n &[data-placement='topLeft'],\n &[data-placement='topRight'] {\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: var(--lobe-tooltip-animation-translate);\n }\n\n &[data-placement='bottom'],\n &[data-placement='bottomLeft'],\n &[data-placement='bottomRight'] {\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n }\n\n &[data-placement='left'],\n &[data-placement='leftTop'],\n &[data-placement='leftBottom'] {\n --lobe-tooltip-translate-x: var(--lobe-tooltip-animation-translate);\n --lobe-tooltip-translate-y: 0;\n }\n\n &[data-placement='right'],\n &[data-placement='rightTop'],\n &[data-placement='rightBottom'] {\n --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);\n --lobe-tooltip-translate-y: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n --lobe-tooltip-animation-duration: 0s;\n --lobe-tooltip-fade-duration: 0s;\n --lobe-tooltip-animation-duration-exit: 0s;\n --lobe-tooltip-layout-duration: 0s;\n }\n `,\n\n viewport: css`\n --lobe-tooltip-viewport-inline-padding: 8px;\n --lobe-tooltip-content-shift: 40%;\n\n position: relative;\n\n overflow: clip;\n display: flex;\n gap: 6px;\n align-items: center;\n\n padding-block: 4px;\n padding-inline: var(--lobe-tooltip-viewport-inline-padding);\n\n overflow-wrap: break-word;\n white-space: normal;\n\n [data-previous],\n [data-current] {\n transform: translateX(0);\n\n display: flex;\n gap: 6px;\n align-items: center;\n\n opacity: 1;\n\n transition:\n transform var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),\n opacity calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease);\n }\n\n [data-previous] {\n position: absolute;\n inset-block-start: 4px;\n inset-inline-start: var(--lobe-tooltip-viewport-inline-padding);\n }\n\n &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='right'] [data-current][data-starting-style] {\n transform: translateX(var(--lobe-tooltip-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n transform: translateX(var(--lobe-tooltip-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-current][data-starting-style] {\n transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-current][data-starting-style] {\n transform: translateY(var(--lobe-tooltip-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n transform: translateY(var(--lobe-tooltip-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-current][data-starting-style] {\n transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n opacity: 0;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;cAkBE,OAAO,gBAAgB;;;;gBAIrB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;CAuB1C,OAAO,GAAG;;;;;;;;;;;;;wBAaY,OAAO,UAAU;qBACpB,OAAO,eAAe;;iBAE1B,OAAO,WAAW;;aAEtB,OAAO,eAAe;;kBAEjB,OAAO,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCvC,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsIf,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8Ef,EAAE"}
|