config/themes/default/grunt/scss/modules/_forms.scss
/* @group Forms */

/* --------------------------------------------------------------
   FORMS
-------------------------------------------------------------- */

/* Form Container */
.loginform {
  overflow: hidden;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  z-index:$z-index__form;
}

.loginform__container {
  text-align:center;
  display:table;
  vertical-align:middle;
  height:100%;
  width:100%;
  overflow:hidden;
}

.login__error {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* Form header */
.login__header {
  margin-bottom:30px - 13px;

  * {
    color:$color-text;
    font-size: em(52px);
    line-height: em(60px, 52px);

  }

  @include breakpoint(medium-and-down) {
    margin-bottom:30px - 13px - 6px;

    * {
      font-size: em(38px);
      line-height: em(45px, 38px);
    }
  }

  h2 {
    color:$color-text-secondary;
  }
}

.loginform__inner {
  display:table-cell;
  vertical-align:middle;
  width:100%;

  /* Form */
  .loginform__form {
    overflow:hidden;
    text-align:left;
    max-width: 360px + $gutter + $gutter;
    margin-left:auto;
    margin-right:auto;
    margin-top: -100px;
    padding-left:$gutter;
    padding-right:$gutter;

    @include breakpoint(small-and-down) {
      padding-left:$gutter-mobile;
      padding-right:$gutter-mobile;
    }
  }
}


/* Form feedback */
.loginform .login_feedback {
  padding: 19px 0 10px 10px;
  background-color: red;
  color:#FFF;
}
.loginform .login_feedback b {
  color: inherit;
}

/* Fields */
.loginform form {
  input.field {
    width: 100%;
    padding:0 20px;
    font-size:1em;
    color: inherit;
    background-color: $color-border-light;
    border-radius: 2px;
    height:55px;
    line-height:55px;
    outline: none;
    -webkit-appearance:none;
    border: 1px solid $color-border-light;

    @include breakpoint(small-and-down) {
      height:50px;
      line-height:50px;
    }

    &:focus {
      border-color: #D9D9D9;
    }
  }

  /* Checkbox */
  .checkbox {
    overflow: hidden;
    line-height: 14px;

    input {
      float: left;
      margin: 0 5px 0 0;
      padding: 0;
    }
  }

  /* Spacing & Alignment */
  input.field {
    margin: 20px 0 0 0;
  }

  .checkbox {
    margin: 10px 0 15px;
    margin-left: 95px;
  }
}


/* Submit button */
.subButton {
  width: 100%;
  overflow: hidden;

  input {
    width: 100%;
    display: block;
    color: $color-text;
    border-radius: 2px;
    margin: 20px 0 0 0;
    padding: 0;
    cursor: pointer;
    text-align: center;
    background-color: $color-bg;
    height:53px;
    line-height:53px;
    border-width:1px;
    border-color:$color-text;
    -webkit-appearance:none;
    outline: none;

    &:hover {
      background-color:$color-text;
      color:$color-bg;
    }
  }
}

::-webkit-input-placeholder {
    color: $color-text-tertiary;
}
:-moz-placeholder {
    color: $color-text-tertiary;
}
::-moz-placeholder {
    color: $color-text-tertiary;
}
:-ms-input-placeholder {
    color: $color-text-tertiary;
}

/* @end */