cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              .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')
  }
  
})
            
          
!
999px
Loading ..................

Console