Google Text Field

An attempt to replicate Googles text input fields

Source

/* 
Fancy google-like text field with morphing descriptor.
Adjustable variables:
	--clr-input-text
	--clr-title-highlight
	--opacity-input-hint
	--bg-title
	--clr-border
	--clr-bg-input

Requires placeholder attribute! Needs structure of: 
<label class="text-input">
	<input type=text/password/email/url placeholder=""> || <textarea placeholder=""></textarea>
	<span> Description/Title </span>
</label>
*/

label.text-input {
position: relative;
font-size: 0.875rem;
display: inline-block;
margin-top: 0.9375em;
}

label.text-input > input,
label.text-input > textarea {
font-size: 100%;
border-radius: 0.25em;
border: thin solid var(--clr-border);
padding: 0.5em 0.875em;
outline: none;
width: 100%;
background-color: var(--clr-bg-input);

color: transparent; /* needed for placeholder fade */
transition: color 200ms ease-in-out;
}

label.text-input > input::placeholder,
label.text-input > textarea::placeholder {
opacity: var(--opacity-input-hint); /* placeholder color always 50% of base color */
}

label.text-input > span {
position: absolute;
left: 0;
margin: 0.5em calc(0.875em - 0.375em);
padding-inline: 0.25em;
transform: translateY(0) scale(1);
transform-origin: left;
max-width: calc(100% - 0.875em - 0.25em);

font-size: 100%;
/* color: #888888; */
color: rgba(var(--clr-input-text), var(--opacity-input-hint));
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

pointer-events: none;
background-color: transparent;
transition: 
	transform 200ms ease-in-out,
	background-color 200ms ease-in-out,
	color 200ms ease-in-out,
	max-width 200ms ease-in-out;
}

label.text-input:focus-within > input,
label.text-input:focus-within > textarea {
	border-color: var(--clr-title-highlight);
	outline: none;
}

label.text-input > input:not(:placeholder-shown),
label.text-input:focus-within > input,
label.text-input > textarea:not(:placeholder-shown),
label.text-input:focus-within > textarea {
	color: rgb(var(--clr-input-text)); /* needed for placeholder fade */
}

label.text-input > input:not(:placeholder-shown) + span,
label.text-input > textarea:not(:placeholder-shown) + span,
label.text-input:focus-within > input + span,
label.text-input:focus-within > textarea + span {
	background-color: var(--bg-title);
	transform: translateY(calc(-0.5em - 50%)) scale(75%);
	max-width: calc((100% - 0.875em - 0.25em) * 1/0.75);
}

label.text-input > input:not(:placeholder-shown) + span,
label.text-input > textarea:not(:placeholder-shown) + span {
	color: rgba(var(--clr-input-text), var(--opacity-input-hint));
}

label.text-input:focus-within > input + span,
label.text-input:focus-within > textarea + span {
	color: var(--clr-title-highlight);
}