wix-style-react/src/PulseAnimation/PulseAnimation.st.css

wix-style-react

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: B10, R10, P10, G10;
}

:import {
  -st-from: '../Foundation/stylable/mixins/calc.js';
  -st-default: calc;
}

:import {
  -st-from: '../Foundation/stylable/easing.st.css';
  -st-named: ease-3;
}

:vars {
  animationDuration: 1050ms;
  smallShadowSpread: 30px;
  mediumShadowSpread: 12px;
}

/* B10 */

@keyframes pulseSmallB10 {
  0% {
    box-shadow: 0 0 0 0px value(B10);
    opacity: 0.2;
  }
  43% {
    opacity: 0.2;
  }
  100% {
    box-shadow: 0 0 0 value(smallShadowSpread) value(B10);
    opacity: 0;
  }
}

@keyframes pulseMediumB10 {
  0% {
    box-shadow: 0 0 0 0px value(B10);
    opacity: 0.2;
  }
  43% {
    opacity: 0.2;
  }
  100% {
    box-shadow: 0 0 0 value(mediumShadowSpread) value(B10);
    opacity: 0;
  }
}

/* R10 */

@keyframes pulseSmallR10 {
  0% {
    box-shadow: 0 0 0 0px value(R10);
    opacity: 0.2;
  }
  43% {
    opacity: 0.2;
  }
  100% {
    box-shadow: 0 0 0 value(smallShadowSpread) value(R10);
    opacity: 0;
  }
}

@keyframes pulseMediumR10 {
  0% {
    box-shadow: 0 0 0 0px value(R10);
    opacity: 0.2;
  }
  43% {
    opacity: 0.2;
  }
  100% {
    box-shadow: 0 0 0 value(mediumShadowSpread) value(R10);
    opacity: 0;
  }
}

/* P10 */

@keyframes pulseSmallP10 {
  0% {
    box-shadow: 0 0 0 0px value(P10);
    opacity: 0.2;
  }
  43% {
    opacity: 0.2;
  }
  100% {
    box-shadow: 0 0 0 value(smallShadowSpread) value(P10);
    opacity: 0;
  }
}

@keyframes pulseMediumP10 {
  0% {
    box-shadow: 0 0 0 0px value(P10);
    opacity: 0.2;
  }
  43% {
    opacity: 0.2;
  }
  100% {
    box-shadow: 0 0 0 value(mediumShadowSpread) value(P10);
    opacity: 0;
  }
}

/* G10 */

@keyframes pulseSmallG10 {
  0% {
    box-shadow: 0 0 0 0px value(G10);
    opacity: 0.2;
  }
  43% {
    opacity: 0.2;
  }
  100% {
    box-shadow: 0 0 0 value(smallShadowSpread) value(G10);
    opacity: 0;
  }
}

@keyframes pulseMediumG10 {
  0% {
    box-shadow: 0 0 0 0px value(G10);
    opacity: 0.2;
  }
  43% {
    opacity: 0.2;
  }
  100% {
    box-shadow: 0 0 0 value(mediumShadowSpread) value(G10);
    opacity: 0;
  }
}

.root {
  -st-states: active, loop, size(enum(small, medium)),
    color(enum(B10, R10, P10, G10));
  width: fit-content;
  position: relative;
}

.root::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

/* Medium */

.root:active:color(B10):size(medium):loop::before {
  animation: pulseMediumB10 value(animationDuration) value(ease-3) infinite;
  animation-delay: inherit;
}

.root:active:color(B10):size(medium)::before {
  animation: pulseMediumB10 value(animationDuration) value(ease-3);
  animation-delay: inherit;
}

.root:active:color(R10):size(medium):loop::before {
  animation: pulseMediumR10 value(animationDuration) value(ease-3) infinite;
  animation-delay: inherit;
}
.root:active:color(R10):size(medium)::before {
  animation: pulseMediumR10 value(animationDuration) value(ease-3);
  animation-delay: inherit;
}

.root:active:color(P10):size(medium):loop::before {
  animation: pulseMediumP10 value(animationDuration) value(ease-3) infinite;
  animation-delay: inherit;
}
.root:active:color(P10):size(medium)::before {
  animation: pulseMediumP10 value(animationDuration) value(ease-3);
  animation-delay: inherit;
}

.root:active:color(G10):size(medium):loop::before {
  animation: pulseMediumG10 value(animationDuration) value(ease-3) infinite;
  animation-delay: inherit;
}
.root:active:color(G10):size(medium)::before {
  animation: pulseMediumG10 value(animationDuration) value(ease-3);
  animation-delay: inherit;
}

/* Small */

.root:active:color(B10):size(small):loop::before {
  animation: pulseSmallB10 value(animationDuration) value(ease-3) infinite;
  animation-delay: inherit;
}

.root:active:color(B10):size(small)::before {
  animation: pulseSmallB10 value(animationDuration) value(ease-3);
  animation-delay: inherit;
}

.root:active:color(R10):size(small):loop::before {
  animation: pulseSmallR10 value(animationDuration) value(ease-3) infinite;
  animation-delay: inherit;
}
.root:active:color(R10):size(small)::before {
  animation: pulseSmallR10 value(animationDuration) value(ease-3);
  animation-delay: inherit;
}

.root:active:color(P10):size(small):loop::before {
  animation: pulseSmallP10 value(animationDuration) value(ease-3) infinite;
  animation-delay: inherit;
}
.root:active:color(P10):size(small)::before {
  animation: pulseSmallP10 value(animationDuration) value(ease-3);
  animation-delay: inherit;
}

.root:active:color(G10):size(small):loop::before {
  animation: pulseSmallG10 value(animationDuration) value(ease-3) infinite;
  animation-delay: inherit;
}
.root:active:color(G10):size(small)::before {
  animation: pulseSmallG10 value(animationDuration) value(ease-3);
  animation-delay: inherit;
}