Ficogs Login Screen

by Amens

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div class="wrapper bg overlayed">
  <main>
    <div class="header">
      test
    </div>
    <div class="login-box ui2">
      <form action="">
        <div class="field padded">
          <label class="label">Email</label>
          <div class="control">
            <input class="input" type="email" placeholder="[email protected]">
          </div>
        </div>
        <div class="field padded">
          <label class="label">Password</label>
          <div class="control">
            <input class="input" type="password">
          </div>
        </div>
        <div class="field padded">
          <div class="control">
            <label class="checkbox">
              <input type="checkbox" name="remember">
              <span>Remember me</span>
            </label>
          </div>
        </div>
        <div class="field is-grouped">
          <div class="control f-grow">
            <button class="button is-text">Cancel</button>
          </div>
          <div class="control f-grow">
            <button class="button is-link">Submit</button>
          </div>
        </div>
      </form>
    </div>
    <div class="footer">on bottom</div>
  </main>
</div>

SCSS

/* $wrapper-bg: 'http://lorempixel.com/1920/1080/nature/'; */
$wrapper-bg: 'https://mir-s3-cdn-cf.behance.net/project_modules/1400/fd81b470332387.5ba252348b947.jpg';

$st-el-bg: #333;
$st-el-cl: #EEE;
$st-el-brd: 0;
$st-el-pad: 10px;

$nd-ui-pad: 10px;
$nd-ui-clr: #222;
$nd-ui-bg: #EEE;

$st-trans: all 0.3s ease-in-out;

$st-overlay: rgba(#111, 0.7);
$st-overlay-clr: #EEE;

.wrapper {
  &.bg {
    background-image: url($wrapper-bg);
    background-size: cover;

    &.overlayed {
      color: $st-overlay-clr;
    }

    &.overlayed::before {
      content: '';
      position: absolute;
      z-index: 0;
      height: 100%;
      width: 100%;
      background-color: $st-overlay;
    }
  }
}

main {
  min-height: 100vh;
  min-width: 100vw;
  position: relative;
  z-index: 0;
  display: grid;
}

.login-box {
  margin: auto;
  background: #EEE;
  border-radius: 4px;
  box-sizing: border-box;
}

.ui2 {
  color: $nd-ui-clr;
  background: $nd-ui-bg;
}

.f-grow {
  flex-grow: 1;
}

.footer {
  align-self: end;
}

.field {
  &.padded {
   padding: $nd-ui-pad;
   padding-bottom: 0;

   &:last-child {
     padding-bottom: $nd-ui-pad;
   }
  }

  &.is-grouped {
    display: flex;
  }
}

.button {
  background: $st-el-bg;
  color: $st-el-cl;
  border: $st-el-brd;
  padding: $st-el-pad;
  transition: $st-trans;
  width: 100%;

  &:hover {
    background: rgba($st-el-bg, 0.7);
  }
}

/* .login-box {
  display: flex;
  justify-content: center;
  align-items: center;
} */