UNPKG

@lobehub/ui

Version:

Lobe UI is an open-source UI component library for building AIGC web apps

github.com/lobehub/lobe-ui

lobehub/lobe-ui

1 lines • 10.2 kB
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"}