Responsive login form with Flexbox

index.slim

.container
  form action="index.html" method="post"
    h1 Sign in
    .form-content
      input type="text" id="user-name" name="user-name" placeholder="user name"
      input type="password" id="password" name="password" placeholder="password"
      br
      .button Log in
      br
      .signup-message 
        a href="#" Forgot your password?

responsive-login-form-with-flexbox.markdown

Responsive login form with Flexbox

A Pen by Katia De Juan on CodePen.

License.

script.coffeescript

$(document).ready ->
  material.init()
  
material =
  init: ->
    @bind_events()
    
  bind_events: ->
    $(document).on "click", ".button", (e) ->
      e.preventDefault()
      circle = $("<div class='circle'></div>")
      $(this).append(circle)
      x = e.pageX - $(this).offset().left - circle.width()/2
      y = e.pageY - $(this).offset().top - circle.height()/2
      size = $(this).width()
      circle.css(
        top: y+'px'
        left: x+'px'
        width: size+'px'
        height: size+'px'
      ).addClass("animate")
      setTimeout(->
        circle.remove()
      , 500)

scripts

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

style.sass

//Fonts
@import "https://fonts.googleapis.com/css?family=Quicksand"


//Colors
$white: #FFF
$light-gray: #FAFAFA
$charcoal: #384047
$gray: #e8eeef
$blue-gray: #8a97a0
$green: #4bc970
$dark-green: #35A556
$blue: #55B6D0


//Mobile first
*,
*::before,
*::after
  box-sizing: border-box


//General HTML tags
html
  background-color: $light-gray

body 
  font-family: 'Quicksand', sans-serif
  font-weight: 500
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-rendering: optimizeLegibility
  
h1
  font-weight: 700
  color: $charcoal
  text-align: center
  line-height: 1.5em
  margin-bottom: 1.2em
  margin-top: 0.2em
  
a
  font-size: 0.98em
  color: $blue-gray
  text-decoration: none
  &:hover
    color: green
  
//Main Flexbox
.container
  display: flex
  -webkit-display: box
  -moz-display: box
  -ms-display: flexbox
  -webkit-display: flex
  flex-wrap: wrap
  justify-content: center
  align-content: center
  padding: 6%
  margin: 0
  

//Form layout
form
  background-color: $white
  padding: 2em
  padding-bottom: 3em
  border-radius: 8px
  max-width: 400px
  display: flex
  flex-wrap: wrap
  flex-direction: column
  justify-content: center
  box-shadow: 0 10px 40px -14px rgba(0,0,0,0.25)
  
  .form-content
  display: flex
  flex-wrap: wrap
  flex-direction: column
    
  input
    color: $charcoal
    background-color: $gray
    box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset
    border: none
    border-radius: 4px
    padding: 1em
    margin-bottom: 1.2em 
    width: 100%
    &:focus
      outline: none  
  
.button
  font-weight: 600
  text-align: center
  font-size: 19px
  color: $white
  background-color: $green
  width: 100%
  border: none
  border-radius: 4px
  padding: 0.8em
  margin-top: 1em
  margin-bottom: 1em
  cursor: pointer
  overflow: hidden
  transition: all 200ms ease-in-out
  box-shadow: 0px 2px 6px rgba(0,0,0,0.3)
  &:hover
    box-shadow: 0px 6px 10px rgba(0,0,0,0.3)
    transform: translateY(-4px)
  span
    position: relative
    z-index: 1
    
  .circle
    position: absolute
    z-index: 0
    background-color: $dark-green
    border-radius: 50%
    transform: scale(0)
    opacity: 5
    height: 50px
    width: 50px
    &.animate
      animation: grow .5s linear
      
    @keyframes grow
      to 
        transform: scale(2.5)
        opacity: 0
    
  .signup-message
    display: flex
    flex-wrap: wrap
    flex-direction: row
    justify-content: space-between