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 • 6.44 kB
1
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tabs/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n indicator: css`\n pointer-events: none;\n\n position: absolute;\n z-index: 0;\n\n transition-timing-function: ${cssVar.motionEaseOut};\n transition-duration: 240ms;\n transition-property: inset-inline-start, inset-block-start, width, height, transform;\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n indicatorPoint: css`\n inset-block-end: 6px;\n inset-inline-start: calc(var(--active-tab-left) + var(--active-tab-width) / 2 - 2.5px);\n\n width: 5px;\n height: 5px;\n border-radius: 50%;\n\n background: ${cssVar.colorPrimary};\n `,\n indicatorRounded: css`\n inset-block-start: var(--active-tab-top);\n inset-inline-start: var(--active-tab-left);\n\n width: var(--active-tab-width);\n height: var(--active-tab-height);\n border-radius: ${cssVar.borderRadius};\n\n background: ${cssVar.colorBgElevated};\n box-shadow: ${cssVar.boxShadowTertiary};\n `,\n indicatorSquare: css`\n inset-block-end: 0;\n inset-inline-start: var(--active-tab-left);\n\n width: var(--active-tab-width);\n height: 2px;\n\n background: ${cssVar.colorPrimary};\n `,\n list: css`\n position: relative;\n\n display: inline-flex;\n flex-wrap: nowrap;\n gap: 2px;\n align-items: center;\n\n &[data-orientation='vertical'] {\n flex-direction: column;\n align-items: stretch;\n }\n `,\n listRounded: css`\n gap: 4px;\n align-self: flex-start;\n\n padding: 3px;\n border-radius: ${cssVar.borderRadiusLG};\n\n background: ${cssVar.colorFillTertiary};\n\n &[data-orientation='vertical'] {\n align-self: stretch;\n }\n `,\n listSquare: css`\n gap: 16px;\n box-shadow: inset 0 -1px 0 ${cssVar.colorBorderSecondary};\n\n &[data-orientation='vertical'] {\n box-shadow: inset -1px 0 0 ${cssVar.colorBorderSecondary};\n }\n `,\n panel: css`\n padding-block-start: 12px;\n outline: none;\n\n &:focus-visible {\n border-radius: ${cssVar.borderRadius};\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: 2px;\n }\n `,\n root: css`\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &[data-orientation='vertical'] {\n flex-direction: row;\n }\n `,\n tab: css`\n cursor: pointer;\n user-select: none;\n\n position: relative;\n z-index: 1;\n\n display: inline-flex;\n flex-shrink: 0;\n gap: 6px;\n align-items: center;\n justify-content: center;\n\n box-sizing: border-box;\n border: 0;\n\n font-weight: 500;\n color: ${cssVar.colorTextSecondary};\n white-space: nowrap;\n\n background: transparent;\n outline: none;\n\n transition:\n color 120ms ${cssVar.motionEaseOut},\n transform 120ms ${cssVar.motionEaseOut};\n\n &:hover:not([data-disabled]) {\n color: ${cssVar.colorText};\n }\n\n &:active:not([data-disabled]) {\n transform: scale(0.98);\n }\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: -2px;\n }\n\n &[data-active] {\n color: ${cssVar.colorPrimary};\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: ${cssVar.colorTextDisabled};\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n tabLarge: css`\n height: 36px;\n padding-inline: 16px;\n border-radius: ${cssVar.borderRadius};\n font-size: 14px;\n `,\n tabMiddle: css`\n height: 32px;\n padding-inline: 12px;\n border-radius: ${cssVar.borderRadius};\n font-size: 13px;\n `,\n tabPoint: css`\n height: auto;\n padding-block: 8px 14px;\n `,\n tabSmall: css`\n height: 26px;\n padding-inline: 10px;\n border-radius: ${cssVar.borderRadius};\n font-size: 12px;\n `,\n tabSquare: css`\n height: auto;\n padding-block: 8px;\n border-radius: 0;\n `,\n}));\n\nexport const tabVariants = cva(styles.tab, {\n defaultVariants: {\n size: 'middle',\n variant: 'rounded',\n },\n variants: {\n size: {\n large: styles.tabLarge,\n middle: styles.tabMiddle,\n small: styles.tabSmall,\n },\n variant: {\n point: styles.tabPoint,\n rounded: null,\n square: styles.tabSquare,\n },\n },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n defaultVariants: {\n variant: 'rounded',\n },\n variants: {\n variant: {\n point: styles.indicatorPoint,\n rounded: styles.indicatorRounded,\n square: styles.indicatorSquare,\n },\n },\n});\n\nexport const listVariants = cva(styles.list, {\n defaultVariants: {\n variant: 'rounded',\n },\n variants: {\n variant: {\n point: null,\n rounded: styles.listRounded,\n square: styles.listSquare,\n },\n },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;kCAMkB,OAAO,cAAc;;;;;;;;CAQrD,gBAAgB,GAAG;;;;;;;;kBAQH,OAAO,aAAa;;CAEpC,kBAAkB,GAAG;;;;;;qBAMF,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;CAEzC,iBAAiB,GAAG;;;;;;;kBAOJ,OAAO,aAAa;;CAEpC,MAAM,GAAG;;;;;;;;;;;;;CAaT,aAAa,GAAG;;;;;qBAKG,OAAO,eAAe;;kBAEzB,OAAO,kBAAkB;;;;;;CAMzC,YAAY,GAAG;;iCAEgB,OAAO,qBAAqB;;;mCAG1B,OAAO,qBAAqB;;;CAG7D,OAAO,GAAG;;;;;uBAKW,OAAO,aAAa;2BAChB,OAAO,mBAAmB;;;;CAInD,MAAM,GAAG;;;;;;;;;CAST,KAAK,GAAG;;;;;;;;;;;;;;;;;aAiBG,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;;2BAQL,OAAO,mBAAmB;;;;;eAKtC,OAAO,aAAa;;;;;eAKpB,OAAO,kBAAkB;;;;;;;CAOtC,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,UAAU,GAAG;;;;CAIb,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;;;CAKf,EAAE;AAEH,MAAa,cAAc,IAAI,OAAO,KAAK;CACzC,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CACD,UAAU;EACR,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;GACf;EACD,SAAS;GACP,OAAO,OAAO;GACd,SAAS;GACT,QAAQ,OAAO;GAChB;EACF;CACF,CAAC;AAEF,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,QAAQ,OAAO;EAChB,EACF;CACF,CAAC;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS,OAAO;EAChB,QAAQ,OAAO;EAChB,EACF;CACF,CAAC"}