.login-form
  form(action='')
    header
      .photo
        img(src='http://lorempixel.com/120/120/animals/', alt='')
      .user-info
        h3 Pork Belly
        h5 So delicious
    section
      .input
        input(type='email', placeholder='Email Address')
      .password
        input.toggle-type(type='text', placeholder='Password')
        a.toggle-password(href='#') Mask password
      .confirm-password
        .inner
          input(type='password', placeholder='Confirm Password')
    footer
      .login-help
        h5: a(href='#') Forgot login info?
      .action
        a(href='#') Login

@import "nib"

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro)



$grey-light  = #F2F1EF
$grey-med    = #D2D7D3
$grey-dark   = #22313F
$green       = #26A65B
$blue        = #22A7F0


* { 
  box-sizing border-box 
}

html, body {
  width 100%
  height 100%
  background $grey-light
}

h1, h2, h3, h4, h5, h6, p, a, input, button {
  font-family 'Source Sans Pro', sans-serif
}

a { 
  text-decoration none 
}

input {
  width 100%
  border none
  margin 0
  padding 20px 30px
  font-size 18px
  font-weight 200
  outline none
  background none
}

.login-form {
  width 360px 
  position absolute 
  left 50%
  top 50%
  margin -260px 0 0 -180px
  
  header {
    background $grey-dark
    color #fff
    padding 30px
    height 300px
    overflow hidden
    text-align center
    
    .photo, .user-info {
      width 100% 
    }
    
    .photo {
      margin-top 30px
    }
    img {
      border-radius 50%
    }
    
    .user-info {
      padding-top 20px
      
      h3, h5 {
        font-weight 200
      }
      
      h3 {
        font-size 36px
      }
      
      h5 {
        font-size 12px
        letter-spacing .05em
      }
    }
  }
  
  section {
    
    .input, .password {
      border-bottom 1px solid $grey-med
      background #fff
    }
    
    .password {
      position relative
      
      .toggle-password {
        font-size 12px 
        color $grey-med
        border 1px solid $grey-med
        border-radius 4px 
        padding 4px 8px
        position absolute
        right 30px
        top 20px
        
        &:hover {
          background $grey-med
          color #fff
        }
      }
    }
    
    .confirm-password, .inner {
      transition all 500ms cubic-bezier(0.645, 0.045, 0.355, 1)
    }
    
    .confirm-password {
      position relative
      perspective 1000px
      height 64px
    }
    
    .inner {
      height 0px
      transform-origin top
      transform rotateX(-90deg)
      background-color $grey-med
    }
    
    
  }
  
  
  footer {
    background #fff 
    overflow hidden
    transition all 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 
    transform translate3d(0px, -64px, 0px)
    
    a {
      color $grey-med 
      float left
      height 40px
      line-height 0px 
      padding 30px
    }
    
    .action a {
      background $blue
      color #fff
      float right 
      padding 30px 60px
      
      &:hover {
        background lighten($blue, 10%)
      }
    }
  }
}

.login-form.confirming {
  $height = 64px
  
  .inner {
    height $height
    border-bottom 1px solid $grey-light
    transform rotateX(0deg)
    background-color #fff
  }
  
  footer {
    border-top 1px solid $grey-med
    transform translate3d(0px, -1px, 0px)
  }
 
}

var hidden    	= false
	, form      	= $('.login-form')
	, passInput 	= $('.password')
	, toggleType 	= $('.toggle-type')



$('.toggle-password').on('click', function () {
  
  if (hidden) {
    hidden = false
    $(this).text('Mask password')
    form.toggleClass('confirming')
    toggleType.attr('type', 'text')
  }
  
  else {
    hidden = true
    $(this).text('Show password')
    form.toggleClass('confirming')
    toggleType.attr('type', 'password')
  }
  
})