@ionic/core/dist/collection/components/ripple-effect/ripple-effect.css

Base components for Ionic

/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * A heuristic that applies CSS to tablet
 * viewports.
 *
 * Usage:
 * @include tablet-viewport() {
 *   :host {
 *     background-color: green;
 *   }
 * }
 */
/**
 * A heuristic that applies CSS to mobile
 * viewports (i.e. phones, not tablets).
 *
 * Usage:
 * @include mobile-viewport() {
 *   :host {
 *     background-color: blue;
 *   }
 * }
 */
:host {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  contain: strict;
  pointer-events: none;
}

:host(.unbounded) {
  contain: layout size style;
}

.ripple-effect {
  border-radius: 50%;
  position: absolute;
  background-color: currentColor;
  color: inherit;
  contain: strict;
  opacity: 0;
  animation: 225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;
  will-change: transform, opacity;
  pointer-events: none;
}

.fade-out {
  transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
  animation: 150ms fadeOutAnimation forwards;
}

@keyframes rippleAnimation {
  from {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
  }
  to {
    transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
  }
}
@keyframes fadeInAnimation {
  from {
    animation-timing-function: linear;
    opacity: 0;
  }
  to {
    opacity: 0.16;
  }
}
@keyframes fadeOutAnimation {
  from {
    animation-timing-function: linear;
    opacity: 0.16;
  }
  to {
    opacity: 0;
  }
}