Skip to content

Instantly share code, notes, and snippets.

@muhammadsyamsudin

muhammadsyamsudin/index.pug

Created May 19, 2022 15:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save muhammadsyamsudin/10c1530cf4d2cc065bd5cc3897fc8a7b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save muhammadsyamsudin/10c1530cf4d2cc065bd5cc3897fc8a7b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. muhammadsyamsudin created this gist May 19, 2022.
    47 changes: 47 additions & 0 deletions index.pug
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    // 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
    14 changes: 14 additions & 0 deletions material-login-form.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    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](https://codepen.io/andytran/pen/RPBdgM) by [Andy Tran](https://codepen.io/andytran) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/RPBdgM).
    7 changes: 7 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    $('.toggle').on('click', function() {
    $('.container').stop().addClass('active');
    });

    $('.close').on('click', function() {
    $('.container').stop().removeClass('active');
    });
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    544 changes: 544 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,544 @@
    @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;
    }
    }
    2 changes: 2 additions & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <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" />