@ant-design/happy-work-theme/es/DotEffect/style.js

Ant Design happy work theme

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { createTheme, Keyframes, useStyleRegister } from '@ant-design/cssinjs';
var DEFAULT_THEME = createTheme(function (token) {
  return token;
});
export var TARGET_ATTR = 'data-happy-wave-target';
var antWaveTargetEffect = new Keyframes('antWaveTargetEffect', {
  '0%': {
    transform: 'scale(1)'
  },
  '10%': {
    transform: 'scale(1.1)'
  },
  '35%': {
    transform: 'scale(0.94)'
  },
  '60%': {
    transform: 'scale(1.05)'
  },
  '85%': {
    transform: 'scale(0.97)'
  },
  '100%': {
    transform: 'scale(1)'
  }
});
var antWaveDotEffect = new Keyframes('antWaveDotEffect', {
  '0%': {
    opacity: 0,
    left: "var(--start-x)",
    top: "var(--start-y)",
    width: "var(--start-size)",
    height: "var(--start-size)",
    background: "var(--background)",
    border: "var(--border)"
  },
  '25%': {
    opacity: 1
  },
  '50%': {
    opacity: 0.8
  },
  '100%': {
    opacity: 0,
    left: "var(--end-x)",
    top: "var(--end-y)",
    width: "var(--end-size)",
    height: "var(--end-size)",
    background: "var(--background)",
    border: "var(--border)"
  }
});
export default function useStyle(prefixCls, hashId, token) {
  var sharedConfig = {
    theme: DEFAULT_THEME,
    token: token
    // nonce: () => csp?.nonce!,
  };
  useStyleRegister(_objectSpread(_objectSpread({}, sharedConfig), {}, {
    path: ['HappyWorkTheme', 'target']
  }), function () {
    return _defineProperty({}, "[".concat(TARGET_ATTR, "-").concat(hashId, "], & [").concat(TARGET_ATTR, "-").concat(hashId, "]"), {
      animationName: antWaveTargetEffect,
      animationDuration: "0.45s",
      animationTimingFunction: 'ease-in-out',
      animationFillMode: 'backwards'
    });
  });
  useStyleRegister(_objectSpread(_objectSpread({}, sharedConfig), {}, {
    hashId: hashId,
    path: ['HappyWorkTheme', 'effect']
  }), function () {
    var dotPrefixCls = ".".concat(prefixCls);
    return [_defineProperty({}, dotPrefixCls, _defineProperty({
      position: 'fixed',
      pointerEvents: 'none',
      zIndex: 999
    }, "".concat(dotPrefixCls, "-dot"), {
      boxSizing: 'border-box',
      position: 'absolute',
      borderRadius: '100%',
      opacity: 0,
      transform: 'translate(-50%, -50%)',
      // Start Position
      zIndex: 999,
      // =================== Basic Motion ===================
      '&.happy-in-out': {
        animationName: antWaveDotEffect,
        animationDuration: token.motionDurationSlow,
        // animationDuration: '10s',
        animationTimingFunction: 'linear',
        animationFillMode: 'backwards'
      }
    }))];
  });
}