_password_reset.scss 1.76 KB
Newer Older
1 2 3 4 5 6 7 8
.password-reset {
  background: rgb(245,245,245);
  border: 1px solid rgb(200,200,200);
  @include border-radius(4px);
  @include box-sizing(border-box);
  @include box-shadow(0 5px 50px 0 rgba(0,0,0, 0.3));
  margin: 120px auto 0;
  padding: 0px 40px 40px;
9
  width: flex-grid(5);
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94

  header {
    margin-bottom: 30px;
    overflow: hidden;
    padding: 28px 20px 0px;
    position: relative;
    z-index: 2;

    &::before {
      @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
      content: "";
      display: block;
      height: 400px;
      left: 0px;
      margin: 0 auto;
      position: absolute;
      top: -140px;
      width: 100%;
      z-index: 1;
    }

    hr {
      @extend .faded-hr-divider-light;
      border: none;
      margin: 0px;
      position: relative;
      z-index: 2;

      &::after {
        @extend .faded-hr-divider;
        bottom: 0px;
        content: "";
        display: block;
        position: absolute;
        top: -1px;
      }
    }

    h2 {
      position: relative;
      text-align: center;
      text-shadow: 0 1px rgba(255,255,255, 0.4);
      z-index: 2;
    }
  }

  > p {
    margin-bottom: 20px;
  }

  form {
    margin-bottom: 12px;
    position: relative;
    z-index: 2;

    label {
      display: none;
    }

    input[type="checkbox"] {
      margin-right: 5px;
    }

    input[type="email"],
    input[type="text"],
    input[type="password"] {
      background: rgb(255,255,255);
      display: block;
      height: 45px;
      margin-bottom: 20px;
      width: 100%;
    }

    .submit {
      padding-top: 10px;

      input[type="submit"] {
        display: block;
        height: 45px;
        margin: 0 auto;
        width: 100%;
      }
    }
  }
}