@lobehub/ui/es/awesome/BentoGrid/style.mjs.map

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

{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/BentoGrid/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  card: css`\n    display: flex;\n    grid-column: span var(--bento-col-span, 1);\n    grid-row: span var(--bento-row-span, 1);\n    flex-direction: column;\n\n    min-inline-size: 0;\n    padding-block: 14px 16px;\n    padding-inline: 16px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n\n    background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    transition:\n      border-color 140ms ease,\n      transform 140ms ease,\n      box-shadow 140ms ease;\n\n    &:hover {\n      transform: translateY(-2px);\n      border-color: ${cssVar.colorBorder};\n      box-shadow: ${cssVar.boxShadowSecondary};\n    }\n\n    ${responsive.tablet} {\n      &[data-wide='true'] {\n        grid-column: span 2;\n      }\n    }\n\n    ${responsive.mobile} {\n      grid-column: span 1;\n      grid-row: span 1;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      &:hover {\n        transform: none;\n      }\n    }\n  `,\n  body: css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n\n    min-inline-size: 0;\n    margin-block-start: 12px;\n\n    > * {\n      max-inline-size: 100%;\n    }\n  `,\n  grid: css`\n    display: grid;\n    grid-auto-rows: minmax(var(--bento-row-height), auto);\n    grid-template-columns: repeat(var(--bento-columns), minmax(0, 1fr));\n    gap: 12px;\n\n    ${responsive.tablet} {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    ${responsive.mobile} {\n      grid-template-columns: 1fr;\n    }\n  `,\n  header: css`\n    display: flex;\n    gap: 8px;\n    align-items: baseline;\n    justify-content: space-between;\n  `,\n  hint: css`\n    overflow: hidden;\n\n    font-size: 11px;\n    color: ${cssVar.colorTextTertiary};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  title: css`\n    font-size: ${cssVar.fontSizeSM};\n    font-weight: 600;\n    color: ${cssVar.colorText};\n    text-decoration: none;\n\n    &[href]:hover {\n      color: ${cssVar.colorPrimary};\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,MAAM,GAAG;;;;;;;;;wBASa,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;qCAEN,OAAO,gBAAgB;kBAC1C,OAAO,kBAAkB;;;;;;;;;sBASrB,OAAO,YAAY;oBACrB,OAAO,mBAAmB;;;MAGxC,WAAW,OAAO;;;;;;MAMlB,WAAW,OAAO;;;;;;;;;;;CAWtB,MAAM,GAAG;;;;;;;;;;;;;CAaT,MAAM,GAAG;;;;;;MAML,WAAW,OAAO;;;;MAIlB,WAAW,OAAO;;;;CAItB,QAAQ,GAAG;;;;;;CAMX,MAAM,GAAG;;;;aAIE,OAAO,kBAAkB;;;;CAIpC,OAAO,GAAG;iBACK,OAAO,WAAW;;aAEtB,OAAO,UAAU;;;;eAIf,OAAO,aAAa;;;AAGnC,EAAE"}