style.js 1007 B

123456789101112131415161718192021222324252627282930
  1. import { genComponentStyleHook } from '../../theme/internal';
  2. const genWaveStyle = token => {
  3. const {
  4. componentCls,
  5. colorPrimary
  6. } = token;
  7. return {
  8. [componentCls]: {
  9. position: 'absolute',
  10. background: 'transparent',
  11. pointerEvents: 'none',
  12. boxSizing: 'border-box',
  13. color: `var(--wave-color, ${colorPrimary})`,
  14. boxShadow: `0 0 0 0 currentcolor`,
  15. opacity: 0.2,
  16. // =================== Motion ===================
  17. '&.wave-motion-appear': {
  18. transition: [`box-shadow 0.4s ${token.motionEaseOutCirc}`, `opacity 2s ${token.motionEaseOutCirc}`].join(','),
  19. '&-active': {
  20. boxShadow: `0 0 0 6px currentcolor`,
  21. opacity: 0
  22. },
  23. '&.wave-quick': {
  24. transition: [`box-shadow ${token.motionDurationSlow} ${token.motionEaseInOut}`, `opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`].join(',')
  25. }
  26. }
  27. }
  28. };
  29. };
  30. export default genComponentStyleHook('Wave', genWaveStyle);