Material Login Form

index.pug

// Mixins
mixin input(type, label)
  .input-container
    input(type='#{type}' id='#{label}' required)
    label(for='#{label}')=label
    .bar
mixin button(text)
  .button-container
    button
      span=text

// Pen Title
.pen-title
  h1 Material Login Form
  span
    | Pen <i class='fa fa-code'></i> by <a href='http://andytran.me'>Andy Tran</a>
    
.rerun
  a(href='') Rerun Pen
  
.container
  .card
  .card
    h1.title Login
    form
      +input('text', 'Username')
      +input('password', 'Password')
      +button('Go')
      .footer
        a(href='#') Forgot your password?
  .card.alt
    .toggle
    h1.title Register
      .close
    form
      +input('text', 'Username')
      +input('password', 'Password')
      +input('password', 'Repeat Password')
      +button('Next')

// Portfolio
a#portfolio(href='http://andytran.me/' title='View my portfolio!')
  i.fa.fa-link
  
// CodePen
a#codepen(href='https://codepen.io/andytran/' title='Follow me!')
  i.fa.fa-codepen

material-login-form.markdown

Material Login Form

Interactive Material Design Login Form.

This could be a lot more smoother, which is why I'll be updating it sometime this week when I have free time. However, here's the first version of it.

Close button should function properly now.

Design by Boris Borisov @ MaterialUp http://www.materialup.com/posts/compact-login

A Pen by Andy Tran on CodePen.

License.

script.js

$('.toggle').on('click', function() {
  $('.container').stop().addClass('active');
});

$('.close').on('click', function() {
  $('.container').stop().removeClass('active');
});

scripts

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

style.scss

@import "bourbon";

// Main Colors
$accent: null;
$white: #ffffff;
$black: #000000;
$dark-gray: lighten($black, 20%);
$gray: lighten($black, 40%);
$light-gray: lighten($black, 60%);
$lighter-gray: lighten($black, 80%);

// Pen Settings
$primary: #363636;
$accent: #ed2553;
$max-width: 460px;

// Mixins
$level: 1;

@mixin materialShadow($level) {
  @if $level == 1 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }

  @else if $level == 2 {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  }

  @else if $level == 3 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  }

  @else if $level == 4 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  }

  @else if $level == 5 {
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  }
}

body {
  background: #e9e9e9;
  color: $gray;
  font-family: 'RobotoDraft', 'Roboto', sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Pen Title */
.pen-title {
  padding: 50px 0;
  text-align: center;
  letter-spacing: 2px;

  h1 {
    margin: 0 0 20px;
    font-size: 48px;
    font-weight: 300;
  }

  span {
    font-size: 12px;

    .fa {
      color: $accent;
    }

    a {
      color: $accent;
      font-weight: 600;
      text-decoration: none;
    }
  }
}

/* Rerun */
.rerun {
  margin: 0 0 30px;
  text-align: center;

  a {
    cursor: pointer;
    display: inline-block;
    background: $accent;
    border-radius: 3px;
    @include materialShadow(1);
    padding: 10px 20px;
    color: $white;
    text-decoration: none;
    @include transition(0.3s ease);

    &:hover {
      @include materialShadow(2);
    }
  }
}

/* Scroll To Bottom */
#codepen {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: $primary;
  width: 56px;
  height: 56px;
  border-radius: 100%;
  @include materialShadow(1);
  @include transition(0.3s ease);
  color: $white;
  text-align: center;

  i {
    line-height: 56px;
  }

  &:hover {
    @include materialShadow(3);
  }
}

/* CodePen */
#portfolio {
  @extend #codepen;
  bottom: 96px;
  right: 36px;
  background: $accent;
  width: 44px;
  height: 44px;
  @include animation(buttonFadeInUp 1s ease);

  i {
    line-height: 44px;
  }
}

/* Container */
.container {
  position: relative;
  max-width: $max-width;
  width: 100%;
  margin: 0 auto 100px;

  &.active {
    .card {
      &:first-child {
        background: darken($white, 5%);
        margin: 0 15px;
      }

      &:nth-child(2) {
        background: darken($white, 2%);
        margin: 0 10px;
      }

      &.alt {
        top: 20px;
        right: 0;
        width: 100%;
        min-width: 100%;
        height: auto;
        border-radius: 5px;
        padding: 60px 0 40px;
        overflow: hidden;

        .toggle {
          position: absolute;
          top: 40px;
          right: -70px;
          box-shadow: none;
          @include transform(scale(10));
          transition: transform .3s ease;

          &:before {
            content: '';
          }
        }

        .title,
        .input-container,
        .button-container {
          left: 0;
          opacity: 1;
          visibility: visible;
          transition: .3s ease;
        }

        .title {
          transition-delay: .3s;
        }

        .input-container {
          transition-delay: .4s;

          &:nth-child(2) {
            transition-delay: .5s;
          }

          &:nth-child(3) {
            transition-delay: .6s;
          }
        }

        .button-container {
          transition-delay: .7s;
        }
      }
    }
  }
}

/* Card */
.card {
  position: relative;
  background: $white;
  border-radius: 5px;
  padding: 60px 0 40px 0;
  box-sizing: border-box;
  @include materialShadow(1);
  transition: .3s ease;

  &:first-child {
    background: darken($white, 2%);
    height: 10px;
    border-radius: 5px 5px 0 0;
    margin: 0 10px;
    padding: 0;
  }

  /* Title */
  .title {
    position: relative;
    z-index: 1;
    border-left: 5px solid $accent;
    margin: 0 0 35px;
    padding: 10px 0 10px 50px;
    color: $accent;
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
  }

  /* Inputs */
  .input-container {
    position: relative;
    margin: 0 60px 50px;

    input {
      outline: none;
      z-index: 1;
      position: relative;
      background: none;
      width: 100%;
      height: 60px;
      border: 0;
      color: #212121;
      font-size: 24px;
      font-weight: 400;

      &:focus {
        ~ label {
          color: #9d9d9d;
          transform: translate(-12%, -50%) scale(0.75);
        }

        ~ .bar {
          &:before,
          &:after {
            width: 50%;
          }
        }
      }

      &:valid {
        ~ label {
          color: #9d9d9d;
          transform: translate(-12%, -50%) scale(0.75);
        }
      }
    }

    label {
      position: absolute;
      top: 0;
      left: 0;
      color: #757575;
      font-size: 24px;
      font-weight: 300;
      line-height: 60px;
      @include transition(0.2s ease);
    }

    .bar {
      position: absolute;
      left: 0;
      bottom: 0;
      background: #757575;
      width: 100%;
      height: 1px;

      &:before,
      &:after {
        content: '';
        position: absolute;
        background: $accent;
        width: 0;
        height: 2px;
        transition: .2s ease;
      }

      &:before {
        left: 50%;
      }

      &:after {
        right: 50%;
      }
    }
  }

  /* Button */
  .button-container {
    margin: 0 60px;
    text-align: center;

    button {
      outline: 0;
      cursor: pointer;
      position: relative;
      display: inline-block;
      background: 0;
      width: 240px;
      border: 2px solid #e3e3e3;
      padding: 20px 0;
      font-size: 24px;
      font-weight: 600;
      line-height: 1;
      text-transform: uppercase;
      overflow: hidden;
      transition: .3s ease;

      span {
        position: relative;
        z-index: 1;
        color: #ddd;
        transition: .3s ease;
      }

      &:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        background: $accent;
        width: 30px;
        height: 30px;
        border-radius: 100%;
        margin: -15px 0 0 -15px;
        opacity: 0;
        transition: .3s ease;
      }

      &:hover,
      &:active,
      &:focus {
        border-color: $accent;

        span {
          color: $accent;
        }
      }

      &:active,
      &:focus {
        span {
          color: $white;
        }

        &:before {
          opacity: 1;
          @include transform(scale(10));
        }
      }
    }
  }

  /* Footer */
  .footer {
    margin: 40px 0 0;
    color: #d3d3d3;
    font-size: 24px;
    font-weight: 300;
    text-align: center;

    a {
      color: inherit;
      text-decoration: none;
      transition: .3s ease;

      &:hover {
        color: darken(#d3d3d3, 10%);
      }
    }
  }

  /* Alt Card */
  &.alt {
    position: absolute;
    top: 40px;
    right: -70px;
    z-index: 10;
    width: 140px;
    height: 140px;
    background: none;
    border-radius: 100%;
    box-shadow: none;
    padding: 0;
    transition: .3s ease;

    /* Toggle */
    .toggle {
      position: relative;
      background: $accent;
      width: 140px;
      height: 140px;
      border-radius: 100%;
      @include materialShadow(1);
      color: $white;
      font-size: 58px;
      line-height: 140px;
      text-align: center;
      cursor: pointer;

      &:before {
        content: '\f040';
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transform: translate(0, 0);
      }
    }

    .title,
    .input-container,
    .button-container {
      left: 100px;
      opacity: 0;
      visibility: hidden;
    }

    /* Title */
    .title {
      position: relative;
      border-color: $white;
      color: $white;

      .close {
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 60px;
        display: inline;
        color: $white;
        font-size: 58px;
        font-weight: 400;

        &:before {
          content: '\00d7';
        }
      }
    }

    /* Input */
    .input-container {
      input {
        color: $white;

        &:focus {
          ~ label {
            color: $white;
          }

          ~ .bar {
            &:before,
            &:after {
              background: $white;
            }
          }
        }

        &:valid {
          ~ label {
            color: $white;
          }
        }
      }

      label {
        color: rgba($white, 0.8);
      }

      .bar {
        background: rgba($white, 0.8);
      }
    }

    /* Button */
    .button-container {
      button {
        width: 100%;
        background: $white;
        border-color: $white;

        span {
          color: $accent;
        }

        &:hover {
          background: rgba($white, 0.9);
        }

        &:active,
        &:focus {
          &:before {
            display: none;
          }
        }
      }
    }
  }
}

/* Keyframes */
@include keyframes(buttonFadeInUp) {
  0% {
    bottom: 30px;
    opacity: 0;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />