@lobehub/ui/es/awesome/GradientButton/style.js

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

var _templateObject, _templateObject2;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { createStyles } from 'antd-style';
import { rgba } from 'polished';
export var useStyles = createStyles(function (_ref, size) {
  var isDarkMode = _ref.isDarkMode,
    cx = _ref.cx,
    css = _ref.css,
    token = _ref.token,
    stylish = _ref.stylish;
  var radius;
  switch (size) {
    case 'large':
      {
        radius = token.borderRadiusLG;
        break;
      }
    case 'middle':
      {
        radius = token.borderRadius;
        break;
      }
    case 'small':
      {
        radius = token.borderRadiusSM;
        break;
      }
    default:
      {
        radius = token.borderRadius;
        break;
      }
  }
  return {
    button: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: relative;\n        z-index: 1;\n        border: none;\n        border-radius: ", "px !important;\n\n        &::before {\n          ", "\n          content: '';\n\n          position: absolute;\n          z-index: -2;\n          inset: 0;\n\n          border-radius: ", "px;\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\n          background: ", ";\n          border-radius: ", "px;\n        }\n\n        &:hover {\n          &::after {\n            background: ", ";\n          }\n        }\n\n        &:active {\n          &::after {\n            background: ", ";\n          }\n        }\n      "])), radius, stylish.gradientAnimation, radius, isDarkMode ? token.colorBgLayout : token.colorBgContainer, radius - 1, rgba(isDarkMode ? token.colorBgLayout : token.colorBgContainer, isDarkMode ? 0.9 : 0.95), rgba(isDarkMode ? token.colorBgLayout : token.colorBgContainer, isDarkMode ? 0.85 : 0.9)),
    glow: cx(stylish.gradientAnimation, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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\n          opacity: 0.5;\n          filter: blur(0.5em);\n          border-radius: inherit;\n        "]))))
  };
});