Material Input

Text fields allow users to input, edit, and select text. Text fields typically reside in forms but can appear in other places, like dialog boxes and search.

by Bouteille Dimitri

HTML

<div class="align">
  <div class="align-bis">
      <p class="material-input">
     <input type="text" class="material-input-field" name="field-1-0" id="field-1-0" placeholder=" ">
     <label for="field-1-0">Your email</label>
    </p>
    <p class="material-input">
     <input type="text" class="material-input-field" name="field-1" id="field-1" placeholder=" ">
     <label for="field-1">Your email</label>
     <span class="material-input-helper">Is default helper text</span>
    </p>
     <p class="material-input is-invalid">
       <input type="text" class="material-input-field" name="field-1-2" id="field-1-2" placeholder=" " value="contact[at]hello-world.fr">
       <label for="field-1-2">Your email</label>
       <span class="material-input-helper">This email is invalid.</span>
    </p>
    <p class="material-input">
       <input type="text" class="material-input-field" name="field-1-3" id="field-1-3" disabled placeholder=" " value="[email protected]">
       <label for="field-1-3">Your email</label>
       <span class="material-input-helper">Is disabled input</span>
    </p>
  </div>
</div>

<div class="align black">
  <div class="align-bis">  
        <p class="material-input black">
     <input type="text" class="material-input-field" name="field-3-0" id="field-3-0" placeholder=" ">
     <label for="field-3-0">Your email</label>
    </p>
      <p class="material-input black">
     <input type="text" class="material-input-field" name="field-3" id="field-3" placeholder=" ">
     <label for="field-3">Your email</label>
     <span class="material-input-helper">Is default helper text</span>
    </p>
         <p class="material-input black is-invalid ">
       <input type="text" class="material-input-field" name="field-3-2" id="field-3-2" placeholder=" " value="contact[at]hello-world.fr">
       <label for="field-3-2">Your email</label>
       <span class="material-input-helper">This email is invalid.</span>
    </p>
    <p class="material-input black">
 ...

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');

$primary : #03A9F4;
$grey : rgba(0,0,0,0.54);
$grey-active : rgba(0,0,0,0.42);
$white : rgba(255,255,255,0.7);

$error : #ef5350;
$succes : #8BC34A;



* {
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.align{
  display: flex;
  background-color: rgb(250,250,250);
  padding: 100px 0;
  &-bis{
    width: 300px;
    margin: auto;
  }
  &.black{
    background-color:#333333;
  }
}

$this:  ".material-input";

#{$this}{
  margin-top: 55px;
  &:first-of-type{
    margin-top:0;
  }
}

#{$this}{
  position:relative;
  &.black{
    label{
      color: $white;
    }
    input{
      color: #fff;
      border-bottom-color: $white;
    }
    span{
      color: $white;
    }
  }
  &.is-invalid{
    span, label{
      color:$error;
    }
    input{
      border-bottom-color: $error;
      border-bottom-width: 2px;
    }
  }
  label{
    position: absolute;
    top: 8px;
    color: $grey;
    font-size: 16px;
    transition: all 0.2s ease;
    right:0;
    left: 0;
    cursor: text;
  }
  &-helper{
    display:block;
    margin-top: 8px;
    font-size: 13px;
    color: $grey;
  }
  input{
    background:none;
    width: 100%;
    border:none;
    outline:none;
    padding: 8px 0;
    border-bottom: solid 1px $grey-active;
    transition: all 0.2s ease;
    font-size: 16px;
    &:focus{
      border-bottom-color: $primary;
      border-bottom-width: 2px;
      + label{
        color: $primary;        
        font-size: 13px;
        top: -14px;
      }
    }
    &:disabled{
      border-bottom-style: dashed;
      + label{
        cursor: default;
      }
    }
    &:not(:placeholder-shown){
      + label{
        font-size: 13px;
        top: -14px;
      }
    }
  }
}