Material Design Login

index.html

.card
  .title
    .fa.fa-genderless
  .login
    fieldset
      input.username(id="username", type="text")
      label(for="username") Username
      .underline
    fieldset
      input.password(id="password", type="password")
      label(for="password") Password
      .underline
    button.submit Login
  p.info
    a.link(href="#") Forgot your password
    a.link(href="#") Privacy
    span Built by 
      a(href="https://jackcuthbert.com.au", target="_blank") Jack Cuthbert

Material Design Login.markdown

Material Design Login

This is inspired by a previous project of mine (and material design!) that was fairly basic and didn't need to look all that fancy. This is a more complete version with a similar design.

Forked from Jack Cuthbert's Pen Material Design Login.

A Pen by Grace on CodePen.

License.

script.js

# Disable mock links!
$('.info a.link').click () ->
  return false

# Make label stick if the input has something in it
$('input').blur () ->
  if $(this).val()
    $(this).addClass 'filled'
  else
    $(this).removeClass 'filled'

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$color-bg: rgb(240,240,240)
$color-text: rgb(100,100,100)
$color-primary: rgb(0,180,90)

$transition-duration: 0.2s

body
  display: flex
  flex-direction: column
  justify-content: center
  height: 100vh
  width: 100vw
  margin: 0
  padding: 0
  background-color: $color-bg
  font-family: "Roboto", sans-serif
  font-weight: 300
  font-size: 1em
  color: $color-text
  
.card
  margin: 0 auto
  width: 400px
  box-shadow: 0px 3px 5px rgba(30,30,30,0.2)
  border-radius: 3px
  background-color: white
  
.title
  margin: 0
  padding: 20px 20px 10px
  font-size: 4.8em
  font-weight: 400
  text-align: center
  color: $color-primary

.login
  padding: 25px 25px 10px 25px
    
.info
  padding: 0 25px 10px 25px
  font-size: 0.7em
  text-align: center

  a
    color: darken($color-primary, 10%)
    text-decoration: none
    transition: color $transition-duration

    &:hover,
    &:focus,
    &:active
      color: $color-primary

    &::after
      content: "|"
      color: $color-text
      margin: 0 10px

    &:last-child::after
      content: ""
    
fieldset
  padding: 0
  margin-bottom: 40px
  border: none
  position: relative

label
  position: absolute
  pointer-events: none
  font-size: 1em
  top: 7px
  transition: top $transition-duration, font-size $transition-duration, color $transition-duration

.underline
  width: 100%

.underline::before,
.underline::after
  position: absolute
  content: ""
  top: 33px
  width: 0%
  height: 3px
  opacity: 0
  background-color: $color-primary
  transition: width $transition-duration, opacity $transition-duration

.underline::before
  right: 50%
  
.underline::after
  left: 50%
  
input
  position: relative
  display: block
  width: 100%
  padding: 7px 0
  border-top: none
  border-right: none
  border-bottom: 1px solid rgb(200,200,200)
  border-left: none
  font-weight: 400

  &:focus
    outline: none
    
    & ~ .underline::before,
    & ~ .underline::after
      opacity: 1
      width: 50%
    
    // Only colour the label when the input is in focus
    & + label
      color: $color-primary

// When the input is filled or in focus
input:focus + label,
input.filled + label
  font-size: 0.7em
  top: -15px

button
  display: block
  width: 100%
  padding: 15px
  border: none
  background-color: $color-primary
  border-radius: 3px
  color: $color-bg
  box-shadow: 0 2px 6px transparentize($color-text, 0.4)
  transition: background-color $transition-duration, box-shadow $transition-duration
    
  &:focus,
  &:active
    outline: none
  
  &:active
    box-shadow: 0 4px 10px transparentize($color-text, 0.2)