SCSS
$input-background: #FAFAFA;
$input-border: #CCC;
$input-color: #A475E4;
$input-placeholder-active: #BBB;
.input-wrapper {
height: 40px;
border: 1px solid $input-border;
margin-bottom: 20px;
position: relative;
border-radius: 2px;
max-width: 300px;
.input-label {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: $input-color;
transition: all 0.2s;
font-weight: 300;
pointer-events: none;
}
.input-base {
width: 100%;
height: calc(100% - 15px);
background-color: transparent;
border: none;
color: $input-color;
padding: 15px 10px 0px 5px;
font-size: 14px;
font-weight: 300;
&:focus {
outline: none;
}
&.filled-input + .input-label {
top: 2px;
left: 5px;
font-size: 12px;
transform: translate(0, 0);
transition: all 0.2s;
font-weight: 300;
color: $input-placeholder-active;
}
}
}
