<div id="login" class="login-form-container">
  <header>LOGIN - SIGN UP</header>
  <fieldset>
    <div class="input-wrapper">
      <input type="text" placeholder="your@email.com" />
    </div>
    <div class="input-wrapper">
      <input type="password" placeholder="password" />
    </div>
    <button id="continue" type="button">CONTINUE</button>
  </fieldset>
</div>

@import "compass/css3";

body {
  background-color: #ACAFB8;
  color: #fff;
  font-family: arial, helvetica, sans-serif;
  line-height: 1.4;
  font-size: 0.6em;
}

*, *:before, *:after {
  box-sizing: border-box;
}

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css);

.login-form-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 270px;
  border-radius: 3px;
  background-color: #272E38;
  overflow: hidden;
  .denied & {
    animation: shake 0.35s normal forwards ease-in-out;
  }
  fieldset {
    border: none;
  }
  header {
    background-color: #202731;
    color: #C5C6C8;
    display: block;
    padding: 1.5em;
    text-align: center;
  }
  .input-wrapper {
    position: relative;
    display: block;
    margin: 2em auto;
    border-bottom: 1px solid #FC7148;
    border-radius: 3px;
    width: 170px;
    padding-left: 20px;
    input {
      width: 100%;
      line-height: 2;
      background-color: transparent;
      border: none;
      padding: .6em .5em;
      outline: 0;
      &::-webkit-input-placeholder, &::-moz-placeholder, &:-ms-input-placeholder {
        color: #9EA2AB;
      }
    }
    &:before {
      font-family: FontAwesome;
      position: absolute;
      display: inline-block;
      top: 9px;
      left: 8px;
      font-size: 10px;
      color: #FC7148;
    }
    &:nth-child(1):before {
      content: "\f007";
    }
    &:nth-child(2):before {
      content: "\f023";
    }
  }
  button {
    outline: 0;
    font-size: 8px;
    letter-spacing: 0.1em;
    background-color: #FC7148;
    color: #fff;
    border: none;
    border-radius: 3px;
    width: 200px;
    padding: 1.2em 0;
    margin: 4em auto;
    display: block;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    &:hover {
      border-bottom-color: darken(#FC7148, 25);
    }
  }
}

@keyframes shake {
  0% { margin-left: 0 }
  12% { margin-left: 0 }
  25% { margin-left: -10px }
  50% { margin-left: 10px }
  75% { margin-left: -10px }
  87% { margin-left: 0 }
  100% { margin-left: 0 }
}

var vContinue = document.getElementById("continue"),
    vLogin = document.getElementById("login");

vContinue.addEventListener("click", function() {
   document.body.className += ' denied';
}, false);

var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
  for (var p = 0; p < pfx.length; p++) {
    if (!pfx[p]) type = type.toLowerCase();
    element.addEventListener(pfx[p]+type, callback, false);
  }
}

PrefixedEvent(vLogin, "AnimationEnd", function () {
  document.body.className = '';
});