<div class="wrap">
  
  <h1><span>Label</span> - Good use</h1>
  
  <p>Do not replace the <b>Label</b> by <b>Placeholder</b>.</p>
   
  <hr />
  
<form action="" class="form">      
  <fieldset>
    <div class="form-group">
      <div class="form-item">
        <input class="form-control" id="name" name="name" type="text" required>
          <label class="label-float" for="name">Nome</label>
          </div>
        <div class="form-item">
          <input class="form-control" id="email" name="email" type="text" required>
            <label class="label-float" for="email">E-mail</label>
            </div>
          <div class="form-item">
            <input class="form-control" id="phone" name="phone" type="text" required>
              <label class="label-float" for="phone">Telefone</label>
              </div>
          </div>
     </fieldset>      
  </form>
</div>

//
// Variables
// ----------------------
 
@gray: #333;
@gray-light: #999;
@gray-lighter: #ccc;
@blue: #428bca;
@green: #00b232;

@space: 40px;

// Mixin for transition/transform
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9+
          transform: translate(@x, @y);
}
.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

//
// Body
// ----------------------

body{
  color: @gray;
  font-family: 'Helvetica', arial;
}

h1 {
  font-size: 40px;
  margin-bottom: @space;
  
  span {
    color: @blue;
  }
}

b {font-weight: bold;}

.wrap{
  padding: @space;
}

hr {
  clear: both;
  margin-top: @space;
  margin-bottom: @space;
  border: 0;
  border-top: 1px solid @gray-light;
}

h1{
  font-size: 30px;
  margin-bottom: @space;
}

p{
  margin-bottom: @space/2;
}

//
// Forms
// --------------------------------

.form-item {
  max-width: none;
  margin-bottom: 15px;
  position: relative;
}

// Common form controls
.form-control {
  box-sizing: border-box;  
  border-radius: 2px;
  border: 1px solid @gray-light;
  color: @gray;
  font-size: 16px;
  display: block;
  height: (@space * 1.5); 
  padding: (@space / 2) (@space / 2) 0; 
  width: 100%;

  &:valid {
    border-color: @green;
  }

  &:focus  { 
    border-color: @blue;
  } 
}


// Float Label
// -----------------------
.label-float {
  color: @gray-light;
  position: absolute;
  top: 0;
  line-height: (@space * 1.5);
  padding: 0 (@space / 2);
  .transition(line-height linear .2s);
  cursor: text;

  .form-control:focus + &,
  .form-control:valid + & {
    color: @gray-lighter;
    font-size: 12px;
    line-height: 1.5;
  } 
}

// No Javascript :D