LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

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

html,
body {
  height: 100%;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
  font-family: "Helvetica Neue", sans-serif;
  background: #2e377D;
}

.Login {
  position: relative;
  width: 400px;
  padding: 1.25rem 4rem 5.5rem;
  border-radius: 4px;
  color: #fff;
  background: #3f51b5;
  box-shadow: 0 3px 4px 0px rgba(0, 0, 0, 0.2);
}
.Login::before {
  position: absolute;
  z-index: -1;
  opacity: 0;
  top: 50%;
  left: 50%;
  height: 2rem;
  width: 2rem;
  background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
  -webkit-transition: 0.3s opacity ease 0.6s;
  transition: 0.3s opacity ease 0.6s;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  content: "";
}
.Login::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #324192;
  -webkit-transition: 0.3s -webkit-transform ease;
  transition: 0.3s -webkit-transform ease;
  transition: 0.3s transform ease;
  transition: 0.3s transform ease, 0.3s -webkit-transform ease;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

.is-Login-success::before {
  z-index: 1;
  opacity: 1;
}
.is-Login-success::after {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}

.Login-heading {
  margin-bottom: 0.25rem;
  font-size: 1rem;
  text-align: center;
}

.Login-field {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  height: 5rem;
}

.Login-field-icon {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  -webkit-transition: 0.3s -webkit-transform ease 0.15s;
  transition: 0.3s -webkit-transform ease 0.15s;
  transition: 0.3s transform ease 0.15s;
  transition: 0.3s transform ease 0.15s, 0.3s -webkit-transform ease 0.15s;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

.Login-label {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  -webkit-transition: 0.3s font-size ease;
  transition: 0.3s font-size ease;
  cursor: text;
}

.Login-input {
  position: relative;
  height: 4px;
  padding: 0 1rem;
  border: none;
  border-radius: 4px;
  color: #abb3de;
  font-size: 1.25rem;
  -webkit-transition: 0.3s padding ease;
  transition: 0.3s padding ease;
  box-shadow: 0 3px 4px 0px rgba(0, 0, 0, 0.2);
}
.Login-input.is-Login-input-dirty {
  padding: 1.25rem 1rem 1.25rem 2.5rem;
  color: #777;
}
.Login-input.is-Login-input-dirty ~ .Login-label {
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
  color: #abb3de;
}
.Login-input.is-Login-input-dirty ~ .Login-field-icon {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

.Login-forgotPassword {
  margin-top: 0.85rem;
  text-align: right;
}

.Login-forgotPassword-link {
  color: #fff;
  font-size: 0.85rem;
  text-decoration: none;
}
.Login-forgotPassword-link:hover {
  text-decoration: underline;
}

.Login-button {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 1.25rem;
  border: none;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  background: #324192;
}

.Login-alert {
  position: absolute;
  top: auto;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
JS
/** 
 * Inspired by New Material Text-Fields from Srikant Shetty
 * https://dribbble.com/shots/2197140-New-Material-Text-Fields
 */

// Cache elements
const loginElement = document.getElementById('login');
const loginFormElement = document.getElementById('login-form');
const emailInputElement = document.getElementById('email');
const passwordInputElement = document.getElementById('password');
const statusElement = document.getElementById('status');

// Adds a class to the input field so that we know it's "dirty" or
// has been interacted with
function inputEventHandler(event) {
  event.target.classList.add('is-Login-input-dirty');
}

// Fires off inputEventHandler when either email or password field
// come in focus
emailInputElement.addEventListener('focus', inputEventHandler);
passwordInputElement.addEventListener('focus', inputEventHandler);

// Handles submitting
loginFormElement.addEventListener('submit', event => {
  event.preventDefault();
  loginElement.classList.add('is-Login-success');
  // Adds aria-hidden="true" attribute to tell the screen reader
  // not to allow focus or read anything in the form whilst
  // the form is covered and showing the ticket
  loginFormElement.setAttribute('aria-hidden', 'true');
  // For accessbility purposes, inform the screenreader
  // that login is successful
  statusElement.innerHTML = "Login success!";
  
  // Reset the form for the purpose of this demo
  window.setTimeout(() => {
    loginElement.classList.remove('is-Login-success');
    loginFormElement.setAttribute('aria-hidden', 'false');
    emailInputElement.classList.remove('is-Login-input-dirty');
    passwordInputElement.classList.remove('is-Login-input-dirty');
    emailInputElement.value = '';
    passwordInputElement.value = '';
    statusElement.innerHTML = '';
  }, 3000);
});
Host Instantly Drag and Drop Website Builder

 

Description

An accessible material design login form
Term
Wed, 11/29/2017 - 11:24

Related Codes

Pen ID
Pen ID
Pen ID