@lobehub/ui/es/base-ui/Segmented/style.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Segmented/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n    inset-block-start: var(--active-item-top);\n    inset-inline-start: var(--active-item-left);\n\n    width: var(--active-item-width);\n    height: var(--active-item-height);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    transition-timing-function: ${cssVar.motionEaseOut};\n    transition-duration: 240ms;\n    transition-property: inset-inline-start, inset-block-start, width, height;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  item: 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], [data-pressed]) {\n      color: ${cssVar.colorText};\n    }\n\n    &:active:not([data-disabled]) {\n      transform: scale(0.98);\n    }\n\n    &:focus-visible {\n      border-radius: ${cssVar.borderRadius};\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n\n    &[data-pressed] {\n      color: ${cssVar.colorText};\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  itemBlock: css`\n    flex: 1 1 0;\n  `,\n  itemIcon: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  itemLabel: css`\n    display: inline-flex;\n    align-items: center;\n  `,\n  itemLarge: css`\n    height: 36px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n  itemMiddle: css`\n    height: 32px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 13px;\n  `,\n  itemSmall: css`\n    height: 26px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 12px;\n  `,\n  list: css`\n    position: relative;\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    gap: 4px;\n    align-items: center;\n    align-self: flex-start;\n\n    box-sizing: border-box;\n    padding: 3px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    &[data-orientation='vertical'] {\n      flex-direction: column;\n      align-items: stretch;\n      align-self: stretch;\n    }\n  `,\n  listBlock: css`\n    display: flex;\n    align-self: stretch;\n    width: 100%;\n  `,\n  listFilled: css`\n    border: 1px solid ${cssVar.colorFillQuaternary};\n    background: ${cssVar.colorFillTertiary};\n  `,\n  listGlass: lobeStaticStylish.blur,\n  listOutlined: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    background: transparent;\n  `,\n  listShadow: lobeStaticStylish.shadow,\n  root: css`\n    display: inline-flex;\n\n    &[data-block='true'] {\n      display: flex;\n      width: 100%;\n    }\n  `,\n}));\n\nexport const listVariants = cva(styles.list, {\n  defaultVariants: {\n    block: false,\n    glass: false,\n    shadow: false,\n    variant: 'filled',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.listBlock,\n    },\n    glass: {\n      false: null,\n      true: styles.listGlass,\n    },\n    shadow: {\n      false: null,\n      true: styles.listShadow,\n    },\n    variant: {\n      filled: styles.listFilled,\n      outlined: styles.listOutlined,\n    },\n  },\n});\n\nexport const itemVariants = cva(styles.item, {\n  defaultVariants: {\n    block: false,\n    size: 'middle',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.itemBlock,\n    },\n    size: {\n      large: styles.itemLarge,\n      middle: styles.itemMiddle,\n      small: styles.itemSmall,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;;;;;qBAUK,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;kCAET,OAAO,cAAc;;;;;;;;CAQrD,MAAM,GAAG;;;;;;;;;;;;;;;;;aAiBE,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;;uBAQT,OAAO,aAAa;2BAChB,OAAO,mBAAmB;;;;;eAKtC,OAAO,UAAU;;;;;eAKjB,OAAO,kBAAkB;;;;;;;CAOtC,WAAW,GAAG;;;CAGd,UAAU,GAAG;;;;;CAKb,WAAW,GAAG;;;;CAId,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,YAAY,GAAG;;;qBAGI,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,MAAM,GAAG;;;;;;;;;;;qBAWU,OAAO,eAAe;;;;;;;;CAQzC,WAAW,GAAG;;;;;CAKd,YAAY,GAAG;wBACO,OAAO,oBAAoB;kBACjC,OAAO,kBAAkB;;CAEzC,WAAWA,cAAkB;CAC7B,cAAc,GAAG;wBACK,OAAO,qBAAqB;;;CAGlD,YAAYA,cAAkB;CAC9B,MAAM,GAAG;;;;;;;;CAQV,EAAE;AAEH,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,OAAO;EACP,QAAQ;EACR,SAAS;EACV;CACD,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;GACd;EACD,OAAO;GACL,OAAO;GACP,MAAM,OAAO;GACd;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACD,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GAClB;EACF;CACF,CAAC;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,MAAM;EACP;CACD,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;GACd;EACD,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;GACf;EACF;CACF,CAAC"}