SCSS

by Leonardo Quintana

HTML

<db-login>
  <db-form>
    <input type="text" placeholder="Client token">
    <input type="password" placeholder="1234">
    <db-button>
      <button>Login now</button>
    </db-button>
  </db-form>
</db-login>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

db-login {
  
  display: flex;
  align-items:center;
  justify-content:center;
  font-size: 25px;
  width: 100%;
  min-height: 100vh;
  
  db-form {
    display: flex;
    flex-direction:column;
    width: 100%;
    max-width: 350px;
    background: #fff;
    border-radius: 6px;
    padding: 20px;  
  }
  db-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
  }
  button, input {
    background: $blue-darker;
    border: none;
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
    outline:0;
    transition: all .25s ease;
  }
  button {
    &:active {
      background: darken($blue-darker,20);
      border-color:white;
      box-shadow: 0 0 0 2px rgba($blue-darker,.5);
    }
  }
  input {
    background: #fff;
    color:#ddd;
    border:1px solid #ccc;
    margin-bottom: 1rem;
    &:focus {
      border-color:white;
      box-shadow: 0 0 0 2px rgba($blue-darker,.5);
    }
  }
}