@material/ripple - npm Package Compare versions

		@@ -1107,2 +1107,3 @@ /*!


		this.adapter_.updateCssVariable(VAR_FG_APPROX_XF, 'scale(' + approxCurScale + ')');
		@@ -1109,0 +1110,0 @@ this.adapter_.updateCssVariable(VAR_FG_UNBOUNDED_OPACITY_DURATION, opacityDuration + 'ms');

foundation.js

		@@ -268,2 +268,3 @@ /**
		} = MDCRippleFoundation.strings;

		this.adapter_.updateCssVariable(VAR_FG_APPROX_XF, `scale(${approxCurScale})`);
		@@ -270,0 +271,0 @@ this.adapter_.updateCssVariable(VAR_FG_UNBOUNDED_OPACITY_DURATION, `${opacityDuration}ms`);

package.json

		{
		"name": "@material/ripple",
		"description": "The Material Components for the web Ink Ripple effect for web element interactions",
		"version": "0.3.0",
		"version": "0.4.0",
		"license": "Apache-2.0",
		@@ -6,0 +6,0 @@ "keywords": [

README.md

		@@ -28,7 +28,6 @@ # MDC Ripple

		MDC Ripple provides the Javascript and CSS required
		to provide components (or any element at all) with a
		material "ink ripple" interaction effect. It is designed to be efficient, un-invasive, and usable
		without adding any extra DOM to your elements.
		MDC Ripple provides the Javascript and CSS required to provide components (or any element at all) with a material "ink ripple" interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements.

		MDC Ripple also works without javascript, where it gracefully degrades to a simpler CSS-Only implementation.

		### An aside regarding browser support
		@@ -43,5 +42,3 @@

		Given this, it is important that you _provide gracefully degraded interaction states_ for browsers in which the ripple is not supported. We do this for all of our components.


		## Installation
		@@ -79,26 +76,2 @@
		cursor: pointer;


		/* Use the surface's ::before pseudo-element as a basic interaction indicator */

		&::before {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		pointer-events: none;
		background-color: black;
		transition: opacity 110ms ease;
		will-change: opacity;
		}

		&:active::before {
		opacity: .18;
		}

		&:focus::before {
		opacity: .06;
		}
		}
		```
		@@ -108,3 +81,3 @@

		When a ripple is successfully initialized on an element, it dynamically adds a `mdc-ripple-upgraded` class to that element. Therefore, to add a ripple to our surface, first we include the proper Sass mixins within our surface's styles when it contains this class. We also add a few additional properties that ensure the ripple's UX is correct.
		To add a ripple to our surface, first we include the proper Sass mixins within our surface's styles. We also add a few additional properties that ensure the ripple's UX is correct.

		@@ -115,3 +88,3 @@ ```scss

		.surface.mdc-ripple-upgraded {
		.surface {
		@include mdc-ripple-base;
		@@ -129,2 +102,4 @@ @include mdc-ripple-bg((pseudo: "::before"));

		When a ripple is successfully initialized on an element, it dynamically adds a `mdc-ripple-upgraded` class to that element. If ripple is not initialized but Sass misins are included within our surface, the ripple will still work, but it would use a simpler, CSS-Only implementation which relies on `:hover`, `:active`, and `:focus`.

		##### The full Sass API
		@@ -131,0 +106,0 @@

_keyframes.scss