Line ripple for text fields

[djibe]

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).

[sesemaya]

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.

[mkhairi]

maybe this can give you some idea -> https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/material-design/forms/

[djibe]

Hi, line ripple is here : https://djibe.github.io/material/docs/4.5/material/text-fields/#line-ripple-effect