material
material copied to clipboard
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.
maybe this can give you some idea -> https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/material-design/forms/
Hi, line ripple is here : https://djibe.github.io/material/docs/4.5/material/text-fields/#line-ripple-effect