@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 4.24 kB
Source Map (JSON)
{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/chat/LoadingDots/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n const size = 'var(--loading-dots-size, 8px)';\n const dotColor = 'var(--loading-dots-color, var(--ant-color-primary))';\n\n return {\n container: css`\n display: flex;\n flex-direction: row;\n gap: 6px;\n align-items: center;\n justify-content: center;\n\n padding: ${cssVar.paddingXS};\n `,\n\n // Default variant (fade)\n defaultDot: css`\n width: ${size};\n height: ${size};\n border-radius: 50%;\n\n background-color: ${dotColor};\n\n animation: fade-animation 1.2s ease-in-out infinite;\n\n @keyframes fade-animation {\n 0%,\n 100% {\n opacity: 0.3;\n }\n\n 50% {\n opacity: 1;\n }\n }\n `,\n\n orbitContainer: css`\n position: relative;\n width: calc(${size} * 4);\n height: calc(${size} * 4);\n `,\n\n orbitDot: css`\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform-origin: calc(${size} * 2) 0;\n\n width: ${size};\n height: ${size};\n margin-block-start: calc(${size} / -2);\n margin-inline-start: calc(${size} / -2);\n border-radius: 50%;\n\n background-color: ${dotColor};\n\n animation: orbit-animation 1.2s linear infinite;\n\n @keyframes orbit-animation {\n 0% {\n transform: rotate(0deg) translateX(calc(${size} * 2));\n }\n\n 100% {\n transform: rotate(360deg) translateX(calc(${size} * 2));\n }\n }\n `,\n\n // Orbit variant\n orbitWrapper: css`\n position: relative;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: calc(${size} * 5);\n height: calc(${size} * 5);\n padding: ${cssVar.paddingXS};\n `,\n\n // Pulse variant\n pulseDot: css`\n width: ${size};\n height: ${size};\n border-radius: 50%;\n\n background-color: ${dotColor};\n\n animation: pulse-animation 1.2s ease-in-out infinite;\n\n @keyframes pulse-animation {\n 0%,\n 100% {\n transform: scale(0.8);\n opacity: 0.3;\n }\n\n 50% {\n transform: scale(1.3);\n opacity: 1;\n }\n }\n `,\n\n // Typing variant\n typingDot: css`\n width: ${size};\n height: ${size};\n border-radius: 50%;\n\n background-color: ${dotColor};\n\n animation: typing-animation 1.2s ease-in-out infinite;\n\n @keyframes typing-animation {\n 0%,\n 100% {\n transform: scale(0.6);\n opacity: 0.2;\n }\n\n 25% {\n transform: scale(1);\n opacity: 1;\n }\n\n 50%,\n 75% {\n transform: scale(0.6);\n opacity: 0.2;\n }\n }\n `,\n\n // Wave variant\n waveDot: css`\n width: ${size};\n height: ${size};\n border-radius: 50%;\n\n background-color: ${dotColor};\n\n animation: wave-animation 1.24s ease-in-out infinite;\n\n @keyframes wave-animation {\n 0%,\n 100% {\n transform: translateY(0);\n }\n\n 25% {\n transform: translateY(calc(${size} * -1.5));\n }\n\n 50% {\n transform: translateY(0);\n }\n }\n `,\n };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;CAC5D,MAAM,OAAO;CACb,MAAM,WAAW;AAEjB,QAAO;EACL,WAAW,KAAG;;;;;;;iBAODA,SAAO,UAAU;;EAI9B,YAAY,KAAG;eACJ,KAAK;gBACJ,KAAK;;;0BAGK,SAAS;;;;;;;;;;;;;;;EAgB/B,gBAAgB,KAAG;;oBAEH,KAAK;qBACJ,KAAK;;EAGtB,UAAU,KAAG;;;;+BAIc,KAAK;;eAErB,KAAK;gBACJ,KAAK;iCACY,KAAK;kCACJ,KAAK;;;0BAGb,SAAS;;;;;;oDAMiB,KAAK;;;;sDAIH,KAAK;;;;EAMvD,cAAc,KAAG;;;;;;;oBAOD,KAAK;qBACJ,KAAK;iBACTA,SAAO,UAAU;;EAI9B,UAAU,KAAG;eACF,KAAK;gBACJ,KAAK;;;0BAGK,SAAS;;;;;;;;;;;;;;;;;EAmB/B,WAAW,KAAG;eACH,KAAK;gBACJ,KAAK;;;0BAGK,SAAS;;;;;;;;;;;;;;;;;;;;;;;EAyB/B,SAAS,KAAG;eACD,KAAK;gBACJ,KAAK;;;0BAGK,SAAS;;;;;;;;;;;uCAWI,KAAK;;;;;;;;EAQzC;EACD"}