@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 9.65 kB
Source Map (JSON)
{"version":3,"file":"style.mjs","names":["cssVar","cx","lobeStaticStylish"],"sources":["../../src/Form/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n borderless: css`\n gap: 48px;\n .${prefixCls}-collapse .${prefixCls}-collapse-header {\n padding-block-end: 16px;\n border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n }\n\n .${prefixCls}-collapse-body {\n padding-inline: 0 !important;\n }\n `,\n filled: css`\n .${prefixCls}-collapse-body {\n padding-block: 0 !important;\n }\n `,\n outlined: css`\n .${prefixCls}-collapse-body {\n padding-block: 0 !important;\n }\n `,\n root: css`\n position: relative;\n\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n width: 100%;\n\n .${prefixCls}-form-item {\n margin: 0 !important;\n }\n\n .${prefixCls}-form-item .${prefixCls}-form-item-label > label {\n height: unset;\n }\n\n .${prefixCls}-row {\n position: relative;\n flex-wrap: nowrap;\n }\n\n .${prefixCls}-form-item-label {\n position: relative;\n flex: 1;\n max-width: 100%;\n }\n\n .${prefixCls}-form-item-row {\n align-items: center;\n }\n\n .${prefixCls}-form-item-control {\n position: relative;\n flex: 0;\n min-width: unset !important;\n }\n\n .${prefixCls}-collapse-item {\n border-radius: ${cssVar.borderRadius} !important;\n }\n\n ${responsive.sm} {\n gap: 0 !important;\n }\n `,\n}));\n\nexport const variants = cva(styles.root, {\n defaultVariants: {\n variant: 'borderless',\n },\n /* eslint-disable sort-keys-fix/sort-keys-fix */\n variants: {\n variant: {\n filled: styles.filled,\n outlined: styles.outlined,\n borderless: styles.borderless,\n },\n },\n /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const flatGroupStyles = createStaticStyles(({ cx, css, cssVar }) => {\n return {\n borderless: cx(\n lobeStaticStylish.variantBorderlessWithoutHover,\n css`\n padding-inline: 0;\n `,\n ),\n filled: cx(\n lobeStaticStylish.variantFilledWithoutHover,\n css`\n background: ${cssVar.colorFillQuaternary};\n `,\n ),\n mobile: css`\n padding-block: 0;\n padding-inline: 16px;\n border-radius: 0;\n background: ${cssVar.colorBgContainer};\n `,\n outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n root: css`\n padding-inline: 16px;\n border-radius: ${cssVar.borderRadiusLG};\n `,\n };\n});\n\nexport const flatGroupVariants = cva(flatGroupStyles.root, {\n defaultVariants: {\n variant: 'borderless',\n },\n /* eslint-disable sort-keys-fix/sort-keys-fix */\n variants: {\n variant: {\n filled: flatGroupStyles.filled,\n outlined: flatGroupStyles.outlined,\n borderless: flatGroupStyles.borderless,\n },\n },\n /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const footerStyles = createStaticStyles(({ css, cssVar }) => {\n return {\n root: css`\n ${responsive.sm} {\n padding: 16px;\n border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n background: ${cssVar.colorBgContainer};\n }\n `,\n };\n});\n\nexport const groupStyles = createStaticStyles(({ css, cssVar }) => {\n return {\n mobileGroupBody: css`\n padding-block: 0;\n padding-inline: 16px;\n background: ${cssVar.colorBgContainer};\n `,\n mobileGroupHeader: css`\n padding: 16px;\n background: ${cssVar.colorBgLayout};\n `,\n title: css`\n align-items: center;\n font-size: 16px;\n font-weight: bold;\n `,\n titleBorderless: css`\n font-size: 18px;\n font-weight: bold;\n `,\n titleMobile: css`\n ${responsive.sm} {\n font-size: 14px;\n font-weight: 400;\n opacity: 0.5;\n }\n `,\n };\n});\n\nexport const titleVariants = cva(groupStyles.title, {\n defaultVariants: {\n variant: 'borderless',\n },\n /* eslint-disable sort-keys-fix/sort-keys-fix */\n variants: {\n variant: {\n filled: null,\n outlined: null,\n borderless: groupStyles.titleBorderless,\n },\n },\n /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const itemStyles = createStaticStyles(({ css }) => ({\n itemMinWidth: css`\n &.${prefixCls}-form-item .${prefixCls}-form-item-control {\n width: var(--form-item-min-width) !important;\n }\n `,\n itemNoDivider: css`\n &:not(:first-child) {\n padding-block-start: 0;\n }\n `,\n root: css`\n &.${prefixCls}-form-item {\n padding-block: 16px;\n padding-inline: 0;\n\n .${prefixCls}-form-item-label {\n text-align: start;\n }\n\n .${prefixCls}-row {\n gap: 12px;\n justify-content: space-between;\n\n > div {\n flex: unset;\n flex-grow: unset;\n }\n }\n\n .${prefixCls}-form-item-required::before {\n align-self: flex-start;\n }\n\n ${responsive.sm} {\n &.${prefixCls}-form-item-horizontal {\n .${prefixCls}-form-item-label {\n flex: 1 !important;\n }\n .${prefixCls}-form-item-control {\n flex: none !important;\n }\n }\n }\n }\n `,\n verticalLayout: css`\n &.${prefixCls}-form-item {\n .${prefixCls}-row {\n align-items: stretch;\n }\n }\n `,\n}));\n\nexport const itemVariants = cva(itemStyles.root, {\n defaultVariants: {\n divider: false,\n itemMinWidth: false,\n layout: 'vertical',\n },\n /* eslint-disable sort-keys-fix/sort-keys-fix */\n variants: {\n itemMinWidth: {\n true: itemStyles.itemMinWidth,\n false: null,\n },\n divider: {\n true: null,\n false: itemStyles.itemNoDivider,\n },\n layout: {\n vertical: itemStyles.verticalLayout,\n horizontal: null,\n },\n },\n /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const submitFooterStyles = createStaticStyles(({ css, cssVar }) => ({\n floatFooter: css`\n position: fixed;\n z-index: 1000;\n inset-block-end: 24px;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n\n width: max-content;\n padding: 8px;\n border: 1px solid ${cssVar.colorBorderSecondary};\n border-radius: 48px;\n\n background: ${cssVar.colorBgContainer};\n box-shadow: ${cssVar.boxShadowSecondary};\n `,\n footer: css`\n ${responsive.sm} {\n margin-block-start: calc(-1 * ${cssVar.borderRadius});\n padding: 16px;\n border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n background: ${cssVar.colorBgContainer};\n }\n `,\n}));\n\nexport const titleStyles = createStaticStyles(({ css, cssVar }) => ({\n content: css`\n position: relative;\n text-align: start;\n `,\n\n desc: css`\n display: block;\n\n line-height: 1.44;\n color: ${cssVar.colorTextDescription};\n word-wrap: break-word;\n white-space: pre-wrap;\n `,\n title: css`\n font-weight: 500;\n line-height: 1;\n `,\n}));\n"],"mappings":"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"}