Line ripple for text fields

Hi Maya,
I see that in its web components, Google set a line ripple on focus on inputs (http://material-components-web.appspot.com/text-field.html), and described in material.io as "Motion: Ripple & wash".
Here is my try (thanks to Propeller) : https://jsfiddle.net/djibe89/r2sda9ze/

Maybe you could integrate the label color by default (learning to build plugins now).

Prefer a pure CSS solution for this.

This could be achieved by a combination of linear gradient background and background size.

A very very very basic idea is maybe something like:

Init state:

background-image: linear-gradient(to top, pink, pink);
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: 0 2px;

Focus state:

background-size: 100% 2px;

However, this may not work well with borders. Need further testing.

Navigation Menu