//
// Effects
// --------------------------------------------------

// Helpers
.no-transition {
  transition: none !important;
}

// Ripple effect (mostly for buttons usage)
.click-ripple {
  display: block;
  position: absolute;
  background: rgba($white, .6);
  border-radius: 100%;
  transform: scale(0);

  &.animate {
    animation: click-ripple .6s ease-out;
  }
}

@keyframes click-ripple {
  50% {
    opacity: .6;
    transform: scale(2);
  }

  100% {
    opacity: 0;
    transform: scale(3);
  }
}