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 • 7.04 kB
1
{"version":3,"file":"style.mjs","names":["cssVar","lobeStaticStylish"],"sources":["../../src/Collapse/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const DEFAULT_PADDING = '12px 16px';\n\nexport const getPadding = (padding?: number | string) =>\n !padding && padding !== 0\n ? DEFAULT_PADDING\n : `${typeof padding === 'string' ? padding : `${padding}px`} !important`;\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n return {\n borderless: css`\n &.${prefixCls}-collapse {\n .${prefixCls}-collapse-header {\n padding-inline: 0;\n }\n .${prefixCls}-collapse-panel {\n padding-inline: 0;\n .${prefixCls}-collapse-body {\n padding-inline: 0;\n }\n }\n }\n `,\n desc: css`\n font-size: 12px;\n color: ${cssVar.colorTextDescription};\n `,\n filledDark: css`\n &.${prefixCls}-collapse {\n .${prefixCls}-collapse-item {\n background: ${cssVar.colorBgLayout};\n .${prefixCls}-collapse-panel {\n margin-inline: 3px;\n margin-block-end: 3px;\n border-radius: ${cssVar.borderRadius};\n ${lobeStaticStylish.variantOutlinedWithoutHover};\n }\n }\n }\n `,\n filledLight: css`\n &.${prefixCls}-collapse {\n .${prefixCls}-collapse-item {\n background: ${cssVar.colorFillQuaternary};\n .${prefixCls}-collapse-panel {\n margin-inline: 3px;\n margin-block-end: 3px;\n border-radius: ${cssVar.borderRadius};\n ${lobeStaticStylish.variantOutlinedWithoutHover};\n background: ${cssVar.colorBgContainer};\n ${lobeStaticStylish.shadow};\n }\n }\n }\n `,\n gapOutlined: css`\n &.${prefixCls}-collapse {\n border: none;\n background: transparent;\n .${prefixCls}-collapse-item {\n border: 1px solid ${cssVar.colorFillSecondary};\n background: ${cssVar.colorBgContainer};\n }\n\n .${prefixCls}-collapse-item:not(:first-child) {\n .${prefixCls}-collapse-header {\n border-block-start: none;\n }\n }\n }\n `,\n gapRoot: css`\n &.${prefixCls}-collapse {\n display: flex;\n flex-direction: column;\n border: none;\n box-shadow: none;\n .${prefixCls}-collapse-item {\n border: none;\n border-radius: ${cssVar.borderRadiusLG};\n }\n }\n `,\n hideCollapsibleIcon: css`\n .${prefixCls}-collapse-expand-icon {\n display: none !important;\n }\n `,\n icon: css`\n cursor: pointer;\n transition: all 100ms ${cssVar.motionEaseOut};\n `,\n outlined: css`\n &.${prefixCls}-collapse {\n border: 1px solid ${cssVar.colorFillSecondary};\n background: ${cssVar.colorBgContainer};\n .${prefixCls}-collapse-item .${prefixCls}-collapse-header {\n transition: none;\n }\n .${prefixCls}-collapse-item-active .${prefixCls}-collapse-header {\n border-block-end: 1px solid ${cssVar.colorFillTertiary};\n }\n .${prefixCls}-collapse-item:not(:first-child) {\n .${prefixCls}-collapse-header {\n border-block-start: 1px solid ${cssVar.colorFillTertiary};\n }\n }\n }\n `,\n root: css`\n &.${prefixCls}-collapse {\n display: flex;\n flex-direction: column;\n background: transparent;\n\n .${prefixCls}-collapse-header {\n overflow: hidden;\n display: flex;\n flex: none;\n gap: 0.75em;\n align-items: flex-start;\n\n border-radius: 0 !important;\n\n .${prefixCls}-collapse-header-text {\n flex: 1;\n }\n\n .${prefixCls}-collapse-expand-icon {\n align-items: center;\n min-height: 28px;\n margin: 0;\n padding: 0;\n }\n\n .${prefixCls}-collapse-extra {\n display: flex;\n align-items: center;\n min-height: 28px;\n }\n }\n\n .${prefixCls}-collapse-panel {\n background: transparent;\n }\n }\n `,\n title: css`\n font-size: 16px;\n font-weight: 500;\n line-height: 28px;\n `,\n };\n});\n\nexport const variants = cva(styles.root, {\n compoundVariants: [\n {\n class: styles.gapOutlined,\n gap: true,\n variant: 'outlined',\n },\n {\n class: styles.filledDark,\n isDarkMode: true,\n variant: 'filled',\n },\n {\n class: styles.filledLight,\n isDarkMode: false,\n variant: 'filled',\n },\n ],\n defaultVariants: {\n collapsible: true,\n gap: false,\n isDarkMode: false,\n },\n /* eslint-disable sort-keys-fix/sort-keys-fix */\n variants: {\n collapsible: {\n false: styles.hideCollapsibleIcon,\n true: null,\n },\n gap: {\n false: null,\n true: styles.gapRoot,\n },\n isDarkMode: {\n false: null,\n true: null,\n },\n variant: {\n borderless: styles.borderless,\n filled: null,\n outlined: styles.outlined,\n },\n },\n /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;;AAKA,MAAa,kBAAkB;AAE/B,MAAa,cAAc,YACzB,CAAC,WAAW,YAAY,IACpB,kBACA,GAAG,OAAO,YAAY,WAAW,UAAU,GAAG,QAAQ,IAAI;AAEhE,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,YAAY,KAAG;UACT,UAAU;WACT,UAAU;;;WAGV,UAAU;;aAER,UAAU;;;;;;EAMnB,MAAM,KAAG;;eAEEA,SAAO,qBAAqB;;EAEvC,YAAY,KAAG;UACT,UAAU;WACT,UAAU;wBACGA,SAAO,cAAc;aAChC,UAAU;;;6BAGMA,SAAO,aAAa;cACnCC,cAAkB,4BAA4B;;;;;EAKxD,aAAa,KAAG;UACV,UAAU;WACT,UAAU;wBACGD,SAAO,oBAAoB;aACtC,UAAU;;;6BAGMA,SAAO,aAAa;cACnCC,cAAkB,4BAA4B;0BAClCD,SAAO,iBAAiB;cACpCC,cAAkB,OAAO;;;;;EAKnC,aAAa,KAAG;UACV,UAAU;;;WAGT,UAAU;8BACSD,SAAO,mBAAmB;wBAChCA,SAAO,iBAAiB;;;WAGrC,UAAU;aACR,UAAU;;;;;;EAMnB,SAAS,KAAG;UACN,UAAU;;;;;WAKT,UAAU;;2BAEMA,SAAO,eAAe;;;;EAI7C,qBAAqB,KAAG;SACnB,UAAU;;;;EAIf,MAAM,KAAG;;8BAEiBA,SAAO,cAAc;;EAE/C,UAAU,KAAG;UACP,UAAU;4BACQA,SAAO,mBAAmB;sBAChCA,SAAO,iBAAiB;WACnC,UAAU,kBAAkB,UAAU;;;WAGtC,UAAU,yBAAyB,UAAU;wCAChBA,SAAO,kBAAkB;;WAEtD,UAAU;aACR,UAAU;4CACqBA,SAAO,kBAAkB;;;;;EAKjE,MAAM,KAAG;UACH,UAAU;;;;;WAKT,UAAU;;;;;;;;;aASR,UAAU;;;;aAIV,UAAU;;;;;;;aAOV,UAAU;;;;;;;WAOZ,UAAU;;;;;EAKjB,OAAO,KAAG;;;;;EAKX;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,kBAAkB;EAChB;GACE,OAAO,OAAO;GACd,KAAK;GACL,SAAS;GACV;EACD;GACE,OAAO,OAAO;GACd,YAAY;GACZ,SAAS;GACV;EACD;GACE,OAAO,OAAO;GACd,YAAY;GACZ,SAAS;GACV;EACF;CACD,iBAAiB;EACf,aAAa;EACb,KAAK;EACL,YAAY;EACb;CAED,UAAU;EACR,aAAa;GACX,OAAO,OAAO;GACd,MAAM;GACP;EACD,KAAK;GACH,OAAO;GACP,MAAM,OAAO;GACd;EACD,YAAY;GACV,OAAO;GACP,MAAM;GACP;EACD,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ;GACR,UAAU,OAAO;GAClB;EACF;CAEF,CAAC"}