@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 10.3 kB
Source Map (JSON)
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Popover/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n arrow: css`\n --lobe-popover-arrow-offset-block: 5px;\n --lobe-popover-arrow-offset-inline: 8px;\n\n pointer-events: none;\n\n position: absolute;\n transform-origin: center;\n\n display: flex;\n\n width: 12px;\n height: 6px;\n\n transition:\n inset-inline-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease),\n inset-block-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease);\n\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n & [data-role='fill'] {\n fill: ${cssVar.colorBgElevated};\n }\n\n & [data-role='stroke'] {\n fill: none;\n stroke: ${cssVar.colorBorder};\n stroke-width: 1px;\n }\n\n &[data-side='top'] {\n inset-block-end: calc(var(--lobe-popover-arrow-offset-block) * -1);\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n inset-inline-end: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n transform: rotate(90deg);\n }\n\n &[data-side='right'] {\n inset-inline-start: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n transform: rotate(-90deg);\n }\n\n &[data-side='bottom'] {\n inset-block-start: calc(var(--lobe-popover-arrow-offset-block) * -1);\n }\n `,\n\n popup: css`\n position: relative;\n transform-origin: var(--transform-origin);\n\n box-sizing: border-box;\n min-width: 120px;\n max-width: var(--available-width);\n border-radius: ${cssVar.borderRadius};\n\n color: ${cssVar.colorText};\n\n background: ${cssVar.colorBgElevated};\n outline: none;\n box-shadow: ${cssVar.boxShadowSecondary}, var(--lobe-ring);\n\n transition-timing-function: var(--lobe-popover-animation-ease-out);\n transition-duration: var(--lobe-popover-animation-duration);\n transition-property: opacity, transform;\n\n /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size\n one frame later; the box only morphs if width/height actually read them. */\n &[data-layout-animation] {\n width: var(--popup-width, auto);\n height: var(--popup-height, auto);\n\n transition-timing-function:\n var(--lobe-popover-animation-ease-out), var(--lobe-popover-animation-ease-out),\n var(--lobe-popover-layout-ease), var(--lobe-popover-layout-ease);\n transition-duration:\n var(--lobe-popover-animation-duration), var(--lobe-popover-animation-duration),\n var(--lobe-popover-layout-duration), var(--lobe-popover-layout-duration);\n transition-property: opacity, transform, width, height;\n }\n\n &[data-repop] {\n transition: none;\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translate3d(var(--lobe-popover-translate-x), var(--lobe-popover-translate-y), 0)\n scale(var(--lobe-popover-animation-scale));\n opacity: 0;\n }\n\n &[data-ending-style] {\n transition-timing-function: var(--lobe-popover-animation-ease-in);\n transition-duration: var(--lobe-popover-animation-duration-exit);\n }\n\n &[data-instant] {\n transition: none;\n }\n `,\n\n positioner: css`\n --lobe-popover-animation-duration: 150ms;\n --lobe-popover-animation-translate: 6px;\n --lobe-popover-animation-scale: 0.96;\n --lobe-popover-animation-ease-in: ease-in;\n --lobe-popover-animation-duration-exit: 75ms;\n --lobe-popover-animation-ease-out: ${cssVar.motionEaseOut};\n --lobe-popover-translate-x: 0;\n --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n --lobe-popover-layout-duration: 380ms;\n --lobe-popover-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\n z-index: 1100;\n\n width: min(var(--positioner-width), var(--available-width));\n height: var(--positioner-height);\n\n transition-timing-function: var(--lobe-popover-animation-ease-out);\n transition-duration: var(--lobe-popover-animation-duration);\n transition-property: none;\n\n &[data-layout-animation] {\n transition-timing-function: var(--lobe-popover-layout-ease);\n transition-duration: var(--lobe-popover-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 &[data-repop] {\n transition: none;\n }\n\n /* Fallback: never show a popover 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-popover-translate-x: 0;\n --lobe-popover-translate-y: var(--lobe-popover-animation-translate);\n }\n\n &[data-placement='bottom'],\n &[data-placement='bottomLeft'],\n &[data-placement='bottomRight'] {\n --lobe-popover-translate-x: 0;\n --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n }\n\n &[data-placement='left'],\n &[data-placement='leftTop'],\n &[data-placement='leftBottom'] {\n --lobe-popover-translate-x: var(--lobe-popover-animation-translate);\n --lobe-popover-translate-y: 0;\n }\n\n &[data-placement='right'],\n &[data-placement='rightTop'],\n &[data-placement='rightBottom'] {\n --lobe-popover-translate-x: calc(var(--lobe-popover-animation-translate) * -1);\n --lobe-popover-translate-y: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n --lobe-popover-layout-duration: 0s;\n }\n `,\n\n root: css`\n user-select: none;\n position: relative;\n filter: drop-shadow(0 2px 8px rgb(0 0 0 / 12%));\n `,\n\n viewport: css`\n --lobe-popover-viewport-inline-padding: 12px;\n --lobe-popover-content-shift: 8px;\n --lobe-popover-content-blur: 4px;\n\n position: relative;\n overflow: clip;\n padding-block: 12px;\n padding-inline: var(--lobe-popover-viewport-inline-padding);\n\n /* Old and new content overlap in one clip box while the box morphs; blurring both layers\n during the crossfade turns the misaligned overlap into a soft smear instead of garbled text. */\n [data-previous],\n [data-current] {\n transform: translateX(0);\n opacity: 1;\n filter: blur(0);\n transition:\n transform var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease),\n opacity calc(var(--lobe-popover-layout-duration) / 2) var(--lobe-popover-animation-ease-out),\n filter calc(var(--lobe-popover-layout-duration) / 2) var(--lobe-popover-animation-ease-out);\n }\n\n [data-current] {\n transition-delay:\n 0s, calc(var(--lobe-popover-layout-duration) / 6),\n calc(var(--lobe-popover-layout-duration) / 6);\n }\n\n [data-previous][data-ending-style],\n [data-current][data-starting-style] {\n filter: blur(var(--lobe-popover-content-blur));\n }\n\n /* Freeze both layers at their own final width so neither re-wraps while the box morphs;\n the viewport clip reveals the new content as the box grows over it. */\n [data-previous] {\n position: absolute;\n inset-block-start: 12px;\n inset-inline-start: var(--lobe-popover-viewport-inline-padding);\n width: calc(var(--popup-width) - var(--lobe-popover-viewport-inline-padding) * 2);\n }\n\n &[data-transitioning] [data-current] {\n width: calc(var(--positioner-width) - var(--lobe-popover-viewport-inline-padding) * 2);\n }\n\n &[data-repop] [data-previous] {\n display: none;\n }\n\n &[data-repop] [data-current] {\n transition: none;\n }\n\n &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n transform: translateX(calc(var(--lobe-popover-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='right'] [data-current][data-starting-style] {\n transform: translateX(var(--lobe-popover-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n transform: translateX(var(--lobe-popover-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-current][data-starting-style] {\n transform: translateX(calc(var(--lobe-popover-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n transform: translateY(calc(var(--lobe-popover-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-current][data-starting-style] {\n transform: translateY(var(--lobe-popover-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n transform: translateY(var(--lobe-popover-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-current][data-starting-style] {\n transform: translateY(calc(var(--lobe-popover-content-shift) * -1));\n opacity: 0;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;cAyBE,OAAO,gBAAgB;;;;;gBAKrB,OAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAwBjC,OAAO,GAAG;;;;;;;qBAOS,OAAO,aAAa;;aAE5B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;kBAEvB,OAAO,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0C1C,YAAY,GAAG;;;;;;yCAMwB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6F5D,MAAM,GAAG;;;;;CAMT,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+Ff,EAAE"}