<!-- inspired by http://littlebigdetails.com/post/82478225432/circleci-once-activated-the-input-placeholders -->

<div class="input-wrapper">
  <input type="text" id="user" required>
  <label for="user">user name</label>
</div>
  
<div class="input-wrapper">
  <input type="password" required>
  <label for="user">password</label>
</div>

@import "nib"

body
  padding:40px
  font-family:"Helvetica Neue"

.input-wrapper
  position:relative
  line-height:14px
  margin:0 10px
  display:inline-block

label
  color:#bbb
  font-size:11px
  text-transform:uppercase
  position:absolute
  z-index:2
  left:20px
  top:14px
  padding:0 2px
  pointer-events:none
  background:white
  transition:transform 100ms ease
  transform:translateY(-20px)

input 
  font-size:13px
  color:#555
  outline:none
  border:1px solid #bbb
  padding:10px 20px
  border-radius:20px
  position:relative

  &:invalid + label
    transform:translateY(0)
    
  &:focus
    border-color:#2b96f1

    & + label
      color:#2b96f1
      transform:translateY(-20px)