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.4 kB
1
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Accordion/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n action: css`\n display: flex;\n flex-shrink: 0;\n gap: 4px;\n align-items: center;\n\n opacity: 0;\n\n transition: opacity 150ms ${cssVar.motionEaseOut};\n `,\n actionAlwaysVisible: css`\n opacity: 1;\n `,\n actionBorderless: css`\n padding-inline-end: var(--accordion-hover-inset, 8px);\n `,\n actionOutlined: css`\n padding-inline-end: 16px;\n `,\n content: css`\n font-size: 14px;\n line-height: 1.6;\n transition:\n opacity 200ms ${cssVar.motionEaseOut},\n translate 200ms ${cssVar.motionEaseOut};\n\n [data-starting-style] & {\n translate: 0 6px;\n opacity: 0;\n }\n\n [data-ending-style] & {\n translate: 0 -6px;\n opacity: 0;\n }\n\n /* Base UI sets animation-name: none on initially-open panels */\n [style*='animation-name: none'] &,\n [style*='animation-name:none'] & {\n translate: none;\n opacity: 1;\n transition: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n contentBorderless: css`\n padding-block: 0 12px;\n `,\n contentIndent: css`\n padding-inline-start: 24px;\n `,\n contentIndentOutlined: css`\n padding-inline-start: 40px;\n `,\n contentOutlined: css`\n padding-block: 4px 14px;\n padding-inline: 16px;\n `,\n header: css`\n position: relative;\n\n display: flex;\n align-items: center;\n\n margin: 0;\n\n font-size: inherit;\n font-weight: inherit;\n\n transition: background 150ms ${cssVar.motionEaseOut};\n\n &:hover:not(:has([data-disabled])) {\n background: ${cssVar.colorFillTertiary};\n }\n\n &:hover .accordion-action,\n &:focus-within .accordion-action {\n opacity: 1;\n }\n `,\n headerBorderless: css`\n margin-inline: calc(var(--accordion-hover-inset, 8px) * -1);\n border-radius: ${cssVar.borderRadius};\n `,\n headerFilled: css`\n border-radius: ${cssVar.borderRadius};\n background: ${cssVar.colorFillTertiary};\n\n &:hover:not(:has([data-disabled])) {\n background: ${cssVar.colorFillSecondary};\n }\n `,\n headerInline: css`\n margin-inline: 0;\n\n > .accordion-action {\n padding-block: 4px;\n }\n `,\n contentInline: css`\n padding-block: 0;\n `,\n indicator: css`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n\n color: ${cssVar.colorTextDescription};\n\n transition: transform 200ms ${cssVar.motionEaseOut};\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n indicatorInline: css`\n justify-content: center;\n width: 18px;\n height: 18px;\n margin-inline-start: -6px;\n\n [data-panel-open] & {\n transform: rotate(90deg);\n }\n `,\n indicatorEnd: css`\n margin-inline-start: auto;\n\n [data-panel-open] & {\n transform: rotate(180deg);\n }\n `,\n indicatorStart: css`\n [data-panel-open] & {\n transform: rotate(90deg);\n }\n `,\n item: css`\n display: flex;\n flex-direction: column;\n `,\n itemOutlined: css`\n & + & {\n border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n }\n `,\n panel: css`\n overflow: hidden;\n height: auto;\n transition: height 200ms ${cssVar.motionEaseOut};\n\n interpolate-size: allow-keywords;\n\n &[data-starting-style],\n &[data-ending-style] {\n height: 0;\n }\n\n &[data-starting-style][style*='animation-name: none'],\n &[data-starting-style][style*='animation-name:none'] {\n height: auto;\n transition: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n root: css`\n display: flex;\n flex-direction: column;\n width: 100%;\n `,\n rootOutlined: css`\n overflow: hidden;\n border: 1px solid ${cssVar.colorBorderSecondary};\n border-radius: ${cssVar.borderRadiusLG};\n `,\n trigger: css`\n cursor: pointer;\n user-select: none;\n\n display: flex;\n flex: 1;\n gap: 8px;\n align-items: center;\n\n min-width: 0;\n border: 0;\n border-radius: inherit;\n\n font: inherit;\n font-size: 14px;\n color: ${cssVar.colorText};\n text-align: start;\n\n background: none;\n outline: none;\n\n ${focusRing};\n\n &[data-disabled] {\n cursor: not-allowed;\n color: ${cssVar.colorTextDisabled};\n }\n `,\n triggerBorderless: css`\n padding-block: 8px;\n padding-inline: var(--accordion-hover-inset, 8px);\n `,\n triggerFilled: css`\n padding-block: 8px;\n padding-inline: 16px;\n `,\n triggerOutlined: css`\n padding-block: 12px;\n padding-inline: 16px;\n\n &[data-panel-open] {\n padding-block-end: 8px;\n }\n `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n defaultVariants: { variant: 'borderless' },\n variants: {\n variant: {\n borderless: null,\n filled: null,\n outlined: styles.rootOutlined,\n },\n },\n});\n\nexport const itemVariants = cva(styles.item, {\n defaultVariants: { variant: 'borderless' },\n variants: {\n variant: {\n borderless: null,\n filled: null,\n outlined: styles.itemOutlined,\n },\n },\n});\n\nexport const headerVariants = cva(styles.header, {\n compoundVariants: [\n { class: styles.headerInline, inline: true, variant: 'borderless' },\n { class: styles.headerInline, inline: true, variant: 'filled' },\n ],\n defaultVariants: { inline: false, variant: 'borderless' },\n variants: {\n inline: {\n false: null,\n true: null,\n },\n variant: {\n borderless: styles.headerBorderless,\n filled: styles.headerFilled,\n outlined: null,\n },\n },\n});\n\nexport const triggerVariants = cva(styles.trigger, {\n defaultVariants: { variant: 'borderless' },\n variants: {\n variant: {\n borderless: styles.triggerBorderless,\n filled: styles.triggerFilled,\n outlined: styles.triggerOutlined,\n },\n },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n defaultVariants: { placement: 'start' },\n variants: {\n placement: {\n end: styles.indicatorEnd,\n inline: styles.indicatorInline,\n start: styles.indicatorStart,\n },\n },\n});\n\nexport const contentVariants = cva(styles.content, {\n compoundVariants: [\n {\n class: styles.contentInline,\n inline: true,\n variant: 'borderless',\n },\n {\n class: styles.contentIndent,\n indent: true,\n variant: 'borderless',\n },\n {\n class: styles.contentIndent,\n indent: true,\n variant: 'filled',\n },\n {\n class: styles.contentIndentOutlined,\n indent: true,\n variant: 'outlined',\n },\n ],\n defaultVariants: { indent: true, inline: false, variant: 'borderless' },\n variants: {\n indent: {\n false: null,\n true: null,\n },\n inline: {\n false: null,\n true: null,\n },\n variant: {\n borderless: styles.contentBorderless,\n filled: styles.contentBorderless,\n outlined: styles.contentOutlined,\n },\n },\n});\n\nexport const actionVariants = cva(styles.action, {\n defaultVariants: { alwaysVisible: false, variant: 'borderless' },\n variants: {\n alwaysVisible: {\n false: null,\n true: styles.actionAlwaysVisible,\n },\n variant: {\n borderless: styles.actionBorderless,\n filled: styles.actionOutlined,\n outlined: styles.actionOutlined,\n },\n },\n});\n"],"mappings":"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"}