Skip to content

Instantly share code, notes, and snippets.

@lots0logs
Created September 7, 2018 16:33
Show Gist options
  • Save lots0logs/c54f04f1047b623f155c56f95e06c39f to your computer and use it in GitHub Desktop.
Save lots0logs/c54f04f1047b623f155c56f95e06c39f to your computer and use it in GitHub Desktop.
Material Login Form
// Mixins
mixin input(type, label)
.input-container
input(type='#{type}' id='#{label}' required)
label(for='#{label}')=label
.bar
mixin button(text)
.button-container
button
span=text
// Pen Title
.pen-title
h1 Material Login Form
span
| Pen <i class='fa fa-code'></i> by <a href='http://andytran.me'>Andy Tran</a>
.rerun
a(href='') Rerun Pen
.container
.card
.card
h1.title Login
form
+input('text', 'Username')
+input('password', 'Password')
+button('Go')
.footer
a(href='#') Forgot your password?
.card.alt
.toggle
h1.title Register
.close
form
+input('text', 'Username')
+input('password', 'Password')
+input('password', 'Repeat Password')
+button('Next')
// Portfolio
a#portfolio(href='http://andytran.me/' title='View my portfolio!')
i.fa.fa-link
// CodePen
a#codepen(href='https://codepen.io/andytran/' title='Follow me!')
i.fa.fa-codepen

Material Login Form

Interactive Material Design Login Form.

This could be a lot more smoother, which is why I'll be updating it sometime this week when I have free time. However, here's the first version of it.

Close button should function properly now.

Design by Boris Borisov @ MaterialUp http://www.materialup.com/posts/compact-login

A Pen by Andy Tran on CodePen.

License.

$('.toggle').on('click', function() {
$('.container').stop().addClass('active');
});
$('.close').on('click', function() {
$('.container').stop().removeClass('active');
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@import "bourbon";
// Main Colors
$accent: null;
$white: #ffffff;
$black: #000000;
$dark-gray: lighten($black, 20%);
$gray: lighten($black, 40%);
$light-gray: lighten($black, 60%);
$lighter-gray: lighten($black, 80%);
// Pen Settings
$primary: #363636;
$accent: #ed2553;
$max-width: 460px;
// Mixins
$level: 1;
@mixin materialShadow($level) {
@if $level == 1 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
@else if $level == 2 {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
@else if $level == 3 {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
@else if $level == 4 {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
@else if $level == 5 {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
}
body {
background: #e9e9e9;
color: $gray;
font-family: 'RobotoDraft', 'Roboto', sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Pen Title */
.pen-title {
padding: 50px 0;
text-align: center;
letter-spacing: 2px;
h1 {
margin: 0 0 20px;
font-size: 48px;
font-weight: 300;
}
span {
font-size: 12px;
.fa {
color: $accent;
}
a {
color: $accent;
font-weight: 600;
text-decoration: none;
}
}
}
/* Rerun */
.rerun {
margin: 0 0 30px;
text-align: center;
a {
cursor: pointer;
display: inline-block;
background: $accent;
border-radius: 3px;
@include materialShadow(1);
padding: 10px 20px;
color: $white;
text-decoration: none;
@include transition(0.3s ease);
&:hover {
@include materialShadow(2);
}
}
}
/* Scroll To Bottom */
#codepen {
position: fixed;
bottom: 30px;
right: 30px;
background: $primary;
width: 56px;
height: 56px;
border-radius: 100%;
@include materialShadow(1);
@include transition(0.3s ease);
color: $white;
text-align: center;
i {
line-height: 56px;
}
&:hover {
@include materialShadow(3);
}
}
/* CodePen */
#portfolio {
@extend #codepen;
bottom: 96px;
right: 36px;
background: $accent;
width: 44px;
height: 44px;
@include animation(buttonFadeInUp 1s ease);
i {
line-height: 44px;
}
}
/* Container */
.container {
position: relative;
max-width: $max-width;
width: 100%;
margin: 0 auto 100px;
&.active {
.card {
&:first-child {
background: darken($white, 5%);
margin: 0 15px;
}
&:nth-child(2) {
background: darken($white, 2%);
margin: 0 10px;
}
&.alt {
top: 20px;
right: 0;
width: 100%;
min-width: 100%;
height: auto;
border-radius: 5px;
padding: 60px 0 40px;
overflow: hidden;
.toggle {
position: absolute;
top: 40px;
right: -70px;
box-shadow: none;
@include transform(scale(10));
transition: transform .3s ease;
&:before {
content: '';
}
}
.title,
.input-container,
.button-container {
left: 0;
opacity: 1;
visibility: visible;
transition: .3s ease;
}
.title {
transition-delay: .3s;
}
.input-container {
transition-delay: .4s;
&:nth-child(2) {
transition-delay: .5s;
}
&:nth-child(3) {
transition-delay: .6s;
}
}
.button-container {
transition-delay: .7s;
}
}
}
}
}
/* Card */
.card {
position: relative;
background: $white;
border-radius: 5px;
padding: 60px 0 40px 0;
box-sizing: border-box;
@include materialShadow(1);
transition: .3s ease;
&:first-child {
background: darken($white, 2%);
height: 10px;
border-radius: 5px 5px 0 0;
margin: 0 10px;
padding: 0;
}
/* Title */
.title {
position: relative;
z-index: 1;
border-left: 5px solid $accent;
margin: 0 0 35px;
padding: 10px 0 10px 50px;
color: $accent;
font-size: 32px;
font-weight: 600;
text-transform: uppercase;
}
/* Inputs */
.input-container {
position: relative;
margin: 0 60px 50px;
input {
outline: none;
z-index: 1;
position: relative;
background: none;
width: 100%;
height: 60px;
border: 0;
color: #212121;
font-size: 24px;
font-weight: 400;
&:focus {
~ label {
color: #9d9d9d;
transform: translate(-12%, -50%) scale(0.75);
}
~ .bar {
&:before,
&:after {
width: 50%;
}
}
}
&:valid {
~ label {
color: #9d9d9d;
transform: translate(-12%, -50%) scale(0.75);
}
}
}
label {
position: absolute;
top: 0;
left: 0;
color: #757575;
font-size: 24px;
font-weight: 300;
line-height: 60px;
@include transition(0.2s ease);
}
.bar {
position: absolute;
left: 0;
bottom: 0;
background: #757575;
width: 100%;
height: 1px;
&:before,
&:after {
content: '';
position: absolute;
background: $accent;
width: 0;
height: 2px;
transition: .2s ease;
}
&:before {
left: 50%;
}
&:after {
right: 50%;
}
}
}
/* Button */
.button-container {
margin: 0 60px;
text-align: center;
button {
outline: 0;
cursor: pointer;
position: relative;
display: inline-block;
background: 0;
width: 240px;
border: 2px solid #e3e3e3;
padding: 20px 0;
font-size: 24px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
overflow: hidden;
transition: .3s ease;
span {
position: relative;
z-index: 1;
color: #ddd;
transition: .3s ease;
}
&:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: block;
background: $accent;
width: 30px;
height: 30px;
border-radius: 100%;
margin: -15px 0 0 -15px;
opacity: 0;
transition: .3s ease;
}
&:hover,
&:active,
&:focus {
border-color: $accent;
span {
color: $accent;
}
}
&:active,
&:focus {
span {
color: $white;
}
&:before {
opacity: 1;
@include transform(scale(10));
}
}
}
}
/* Footer */
.footer {
margin: 40px 0 0;
color: #d3d3d3;
font-size: 24px;
font-weight: 300;
text-align: center;
a {
color: inherit;
text-decoration: none;
transition: .3s ease;
&:hover {
color: darken(#d3d3d3, 10%);
}
}
}
/* Alt Card */
&.alt {
position: absolute;
top: 40px;
right: -70px;
z-index: 10;
width: 140px;
height: 140px;
background: none;
border-radius: 100%;
box-shadow: none;
padding: 0;
transition: .3s ease;
/* Toggle */
.toggle {
position: relative;
background: $accent;
width: 140px;
height: 140px;
border-radius: 100%;
@include materialShadow(1);
color: $white;
font-size: 58px;
line-height: 140px;
text-align: center;
cursor: pointer;
&:before {
content: '\f040';
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
}
.title,
.input-container,
.button-container {
left: 100px;
opacity: 0;
visibility: hidden;
}
/* Title */
.title {
position: relative;
border-color: $white;
color: $white;
.close {
cursor: pointer;
position: absolute;
top: 0;
right: 60px;
display: inline;
color: $white;
font-size: 58px;
font-weight: 400;
&:before {
content: '\00d7';
}
}
}
/* Input */
.input-container {
input {
color: $white;
&:focus {
~ label {
color: $white;
}
~ .bar {
&:before,
&:after {
background: $white;
}
}
}
&:valid {
~ label {
color: $white;
}
}
}
label {
color: rgba($white, 0.8);
}
.bar {
background: rgba($white, 0.8);
}
}
/* Button */
.button-container {
button {
width: 100%;
background: $white;
border-color: $white;
span {
color: $accent;
}
&:hover {
background: rgba($white, 0.9);
}
&:active,
&:focus {
&:before {
display: none;
}
}
}
}
}
}
/* Keyframes */
@include keyframes(buttonFadeInUp) {
0% {
bottom: 30px;
opacity: 0;
}
}
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment