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

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

{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../../src/awesome/GradientButton/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  const borderRadius = 'var(--gradient-button-border-radius, var(--ant-border-radius))';\n\n  return {\n    buttonDark: css`\n      position: relative;\n      z-index: 1;\n      border: none;\n      border-radius: ${borderRadius} !important;\n\n      &::before {\n        ${lobeStaticStylish.gradientAnimation}\n        content: '';\n\n        position: absolute;\n        z-index: -2;\n        inset: 0;\n\n        border-radius: ${borderRadius};\n      }\n\n      &::after {\n        content: '';\n\n        position: absolute;\n        z-index: -1;\n        inset-block-start: 1px;\n        inset-inline-start: 1px;\n\n        width: calc(100% - 2px);\n        height: calc(100% - 2px);\n        border-radius: calc(${borderRadius} - 1px);\n\n        background: ${cssVar.colorBgLayout};\n      }\n\n      &:hover {\n        &::after {\n          background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);\n        }\n      }\n\n      &:active {\n        &::after {\n          background: color-mix(in srgb, ${cssVar.colorBgLayout} 85%, transparent);\n        }\n      }\n    `,\n    buttonLight: css`\n      position: relative;\n      z-index: 1;\n      border: none;\n      border-radius: ${borderRadius} !important;\n\n      &::before {\n        ${lobeStaticStylish.gradientAnimation}\n        content: '';\n\n        position: absolute;\n        z-index: -2;\n        inset: 0;\n\n        border-radius: ${borderRadius};\n      }\n\n      &::after {\n        content: '';\n\n        position: absolute;\n        z-index: -1;\n        inset-block-start: 1px;\n        inset-inline-start: 1px;\n\n        width: calc(100% - 2px);\n        height: calc(100% - 2px);\n        border-radius: calc(${borderRadius} - 1px);\n\n        background: ${cssVar.colorBgContainer};\n      }\n\n      &:hover {\n        &::after {\n          background: color-mix(in srgb, ${cssVar.colorBgContainer} 95%, transparent);\n        }\n      }\n\n      &:active {\n        &::after {\n          background: color-mix(in srgb, ${cssVar.colorBgContainer} 90%, transparent);\n        }\n      }\n    `,\n    glow: cx(\n      lobeStaticStylish.gradientAnimation,\n      css`\n        position: absolute;\n        z-index: -2;\n        inset-block-start: 0;\n        inset-inline-start: 0;\n\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n\n        opacity: 0.5;\n        filter: blur(0.5em);\n      `,\n    ),\n  };\n});\n"],"mappings":";;;;AAIA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;CAC5D,MAAM,eAAe;AAErB,QAAO;EACL,YAAY,KAAG;;;;uBAII,aAAa;;;UAG1BA,cAAkB,kBAAkB;;;;;;;yBAOrB,aAAa;;;;;;;;;;;;;8BAaR,aAAa;;sBAErBC,SAAO,cAAc;;;;;2CAKAA,SAAO,cAAc;;;;;;2CAMrBA,SAAO,cAAc;;;;EAI5D,aAAa,KAAG;;;;uBAIG,aAAa;;;UAG1BD,cAAkB,kBAAkB;;;;;;;yBAOrB,aAAa;;;;;;;;;;;;;8BAaR,aAAa;;sBAErBC,SAAO,iBAAiB;;;;;2CAKHA,SAAO,iBAAiB;;;;;;2CAMxBA,SAAO,iBAAiB;;;;EAI/D,MAAM,GACJD,cAAkB,mBAClB,KAAG;;;;;;;;;;;;QAaJ;EACF;EACD"}