Function which creates CSS only ripple effect. For usage w/ JSS. Via CSS it is impossible to watch for mouseclick position, so ripple effect will work only for m 1 prespecified in config place

css-ripple.ts

interface RippleMixin {
  vert?: 'top' | 'bottom' | 'center';
  hor?: 'left' | 'right' | 'center';
  color?: string;
  opacity?: number;
  duration?: number;
  timingFunction?: string;
}

/**
 *  Creates CSS only ripple effect
 *
 *  @param [config] - Optional config
 */
export function createRipple(config: RippleMixin = { }) {
  const {
    color = '#ffffff80',
    timingFunction = 'cubic-bezier(0.4, 0, 0.2, 1)',
    duration = 1300,
    opacity = 1,
    vert = 'bottom',
    hor = 'center',
  } = config;

  const styles: Record<string, any> = {
    position: 'relative',
    overflow: 'hidden',
    cursor: 'pointer',

    '&::after': {
      position: 'absolute',
      content: '""',
      display: 'block',
      width: '500%',
      height: '500%',

      borderRadius: '50%',
      background: color,

      opacity: 0,
      transition: `all ${duration}ms ${timingFunction}`,
    },

    '&:active::after': {
      width: 0,
      height: 0,

      opacity: opacity,
      transition: '0s',
    },
  };

  // Center center
  if (vert === 'center' && hor === 'center') {
    styles['&::after'].top = '50%';
    styles['&::after'].left = '50%';
    styles['&::after'].transform = 'translate(-50%, -50%)';
  }

  // Center left
  if (vert === 'center' && hor === 'left') {
    styles['&::after'].top = '50%';
    styles['&::after'].left = '-50%';
    styles['&::after'].transform = 'translateY(-50%)';
  }

  // Center right
  if (vert === 'center' && hor === 'right') {
    styles['&::after'].top = '50%';
    styles['&::after'].right = '-50%';
    styles['&::after'].transform = 'translateY(-50%)';
  }



  // Top center
  if (vert === 'top' && hor === 'center') {
    styles['&::after'].top = '-50%';
    styles['&::after'].left = '50%';
    styles['&::after'].transform = 'translate(-50%)';
  }

  // Top left
  if (vert === 'top' && hor === 'left') {
    styles['&::after'].top = '-50%';
    styles['&::after'].left = '-50%';
  }

  // Top right
  if (vert === 'top' && hor === 'right') {
    styles['&::after'].top = '-50%';
    styles['&::after'].right = '-50%';
  }



  // Bottom center
  if (vert === 'bottom' && hor === 'center') {
    styles['&::after'].bottom = '-50%';
    styles['&::after'].left = '50%';
    styles['&::after'].transform = 'translate(-50%)';
  }

  // Bottom left
  if (vert === 'bottom' && hor === 'left') {
    styles['&::after'].bottom = '-50%';
    styles['&::after'].left = '-50%';
  }

  // Bottom right
  if (vert === 'bottom' && hor === 'right') {
    styles['&::after'].bottom = '-50%';
    styles['&::after'].right = '-50%';
  }


  return styles;
}