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 • 6.44 kB
1
{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/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.colorText};\n }\n\n & [data-role='stroke'] {\n stroke: none;\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-radius: ${cssVar.borderRadiusSM};\n\n font-size: 12px;\n line-height: 1.2;\n color: ${cssVar.colorBgLayout};\n\n background: ${cssVar.colorText};\n\n transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n transition-duration: var(--lobe-tooltip-animation-duration);\n transition-property: opacity, transform;\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: 120ms;\n --lobe-tooltip-animation-duration-exit: 80ms;\n --lobe-tooltip-animation-translate: 4px;\n --lobe-tooltip-animation-scale: 0.96;\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 z-index: 1100;\n\n width: var(--positioner-width);\n max-width: 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:\n inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n\n &[data-instant] {\n transition: none;\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 max-width: min(320px, var(--available-width));\n padding-block: 4px;\n padding-inline: var(--lobe-tooltip-viewport-inline-padding);\n\n word-break: 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-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,YAAK,wBAAc;CAC7D,OAAO,KAAG;;;;;;;;;;;;;;;;;;cAkBEA,SAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B7B,OAAO,KAAG;;;;;;;qBAOSA,SAAO,eAAe;;;;aAI9BA,SAAO,cAAc;;kBAEhBA,SAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;CAuBjC,YAAY,KAAG;;;;;;yCAMwBA,SAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgD5D,UAAU,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEd,EAAE"}