/* Info: http://codepen.io/boast/pen/pLjld 
    Less ref: <link rel="stylesheet/less" type="text/css" href="styles.less" />
*/
@border: 1px solid #ddd;
@padding: 10px;
@label-font-size: 13px;

*,
*:before,
*:after {
	box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 300px;
}

// Demo styles
form {
  width: 600px;
  margin: 2em auto;
  
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 22px;
  
  legend {
    font-size: 2em;
    margin-bottom: 1em;
    width: 100%;
    border-bottom: @border;
  }
}


// float label
.float-label {
  .control {
    float: left;
    position: relative;
    width: 100%;
    border-bottom: @border;
    padding-top: @padding + @label-font-size;
    padding-bottom: @padding;
    
    // you proably want to replace these with your grid classes
    &.small {
      width: 30%;
      border-right: @border;
    }
    
    &.medium {
      width: 70%;
      padding-left: @padding;
    }
    
    &:last-child {
     border: 0;
    }
  }
  
  input, textarea {
    display: block;
    width: 100%;
    border: 0;
    outline: 0;
    resize: none;
    
    // inactive but shown label (exceptions: opacity and top)
    & + label {
      position: absolute;
      top: 10px;
      transition: top 0.7s ease, opacity 0.7s ease;
      opacity: 0;
      
      // Some nice styling
      font-size: @label-font-size;
      font-weight: 600;
      color: #ccc;
    }
    
    // THE MAGIC
    // as soon as we start typing, the "required" attribute will
    // set the state to valid and our pseudo selector will match
    &:valid + label {
      opacity: 1;
      top: 3px;
    }
    
    // and we highlight the focused input label
    &:focus + label {
      color: #2c8efe;
    }
  }
}