Missing the cool input and textarea underline effect

[onigetoc]

I love Materialize.

I find it miss the cool input and textarea underline effect
like this one here.
Border bottom effect

[fega]

it doesn't fit with the material design specs

https://material.io/guidelines/components/text-fields.html#text-fields-required-fields

[onigetoc]

Every other material design frameworks do it.

[fega]

Well, that's true.
https://getmdl.io/components/#textfields-section
curiously the source of confusion is two google project's

Added to the feature request dashboard
Thanks @onigetoc

[onigetoc]

Here Angular Material only underline with no effects
https://material.angularjs.org/latest/demo/input

[acburst]

While we try and follow the material design guidelines as closely as possible, in the end they are still just guidelines. Even Google strays away from it when it makes sense. Sometimes the choices we make for this framework are just personal preferences that may not be perfectly in line with the guidelines. Also, I like the simple fade in better than this animation personally.

[Nohinn]

Made a first attempt for this (would have to check if it works on all cases).
Added a css class to the input/textarea named border-effect.
Added a span element after the label of the input with a css class named border-expand.

So all this can be an optional feature for those who would like to make use of it.

Modified these parts of the CSS (added an exception for the new input class):

input:not([type]):not(.border-effect):focus:not([readonly]),
input[type=text]:not(.browser-default):not(.border-effect):focus:not([readonly]),
input[type=password]:not(.browser-default):not(.border-effect):focus:not([readonly]),
input[type=email]:not(.browser-default):not(.border-effect):focus:not([readonly]),
input[type=url]:not(.browser-default):not(.border-effect):focus:not([readonly]),
input[type=time]:not(.browser-default):not(.border-effect):focus:not([readonly]),
input[type=date]:not(.browser-default):not(.border-effect):focus:not([readonly]),
input[type=datetime]:not(.browser-default):not(.border-effect):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):not(.border-effect):focus:not([readonly]),
input[type=tel]:not(.browser-default):not(.border-effect):focus:not([readonly]),
input[type=number]:not(.browser-default):not(.border-effect):focus:not([readonly]),
input[type=search]:not(.browser-default):not(.border-effect):focus:not([readonly]),
textarea.materialize-textarea:not(.border-effect):focus:not([readonly]) {
  border-bottom: 1px solid #26a69a;
  -webkit-box-shadow: 0 1px 0 0 #26a69a;
          box-shadow: 0 1px 0 0 #26a69a;
}

input:not([type]):not(.border-effect) + label:after,
input[type=text]:not(.browser-default):not(.border-effect) + label:after,
input[type=password]:not(.browser-default):not(.border-effect) + label:after,
input[type=email]:not(.browser-default):not(.border-effect) + label:after,
input[type=url]:not(.browser-default):not(.border-effect) + label:after,
input[type=time]:not(.browser-default):not(.border-effect) + label:after,
input[type=date]:not(.browser-default):not(.border-effect) + label:after,
input[type=datetime]:not(.browser-default):not(.border-effect) + label:after,
input[type=datetime-local]:not(.browser-default):not(.border-effect) + label:after,
input[type=tel]:not(.browser-default):not(.border-effect) + label:after,
input[type=number]:not(.browser-default):not(.border-effect) + label:after,
input[type=search]:not(.browser-default):not(.border-effect) + label:after,
textarea.materialize-textarea:not(.border-effect) + label:after, .select-wrapper:not(.border-effect) + label:after {
  display: block;
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  -webkit-transition: .2s opacity ease-out, .2s color ease-out;
  transition: .2s opacity ease-out, .2s color ease-out;
}

And added this CSS:

.input-field > label + .border-expand {
	display: block;
	width: 100%;
	position: absolute;
	top: 0;
	pointer-events: none;
	min-height: 3rem;
}

.input-field > label + .border-expand:after {
	content: "";
	position: absolute;
	width: 10px;
	background-color: #26a69a;
	left: 45%;
	height: 2px;
	top: calc(100% - 1px);
	transition-duration: .3s;
	transition-timing-function: cubic-bezier(.4,0,.2,1);
	visibility: hidden;
}

.input-field > label:not(.label-icon).active + .border-expand:after {
	left: 0;
	width: 100%;
	visibility: visible;
}