| // Form | |
| .form | |
| .form-toggle | |
| .form-panel.one | |
| .form-header | |
| h1 Account Login | |
| .form-content | |
| form | |
| .form-group | |
| label(for='username') Username | |
| input(type='text' | |
| id='username' | |
| name='username' | |
| required) | |
| .form-group | |
| label(for='password') Password | |
| input(type='password' | |
| id='password' | |
| name='password' | |
| required) | |
| .form-group | |
| label.form-remember | |
| input(type='checkbox') | |
| | Remember Me | |
| a.form-recovery(href='#') Forgot Password? | |
| .form-group | |
| button(type='submit') Log In | |
| .form-panel.two | |
| .form-header | |
| h1 Register Account | |
| .form-content | |
| form | |
| .form-group | |
| label(for='username') Username | |
| input(type='text' | |
| id='username' | |
| name='username' | |
| required) | |
| .form-group | |
| label(for='password') Password | |
| input(type='password' | |
| id='password' | |
| name='password' | |
| required) | |
| .form-group | |
| label(for='cpassword') Confirm Password | |
| input(type='password' | |
| id='cpassword' | |
| name='cpassword' | |
| required) | |
| .form-group | |
| label(for='email') Email Address | |
| input(type='email' | |
| id='email' | |
| name='email' | |
| required) | |
| .form-group | |
| button(type='submit') Register | |
| .pen-footer | |
| a(href='https://www.behance.net/gallery/30478397/Login-Form-UI-Library' | |
| target='_blank') | |
| i.material-icons arrow_backward | |
| | View on Behance | |
| a(href='https://github.com/andyhqtran/UI-Library/tree/master/Login%20Form' | |
| target='_blank') | |
| | View on Github | |
| i.material-icons arrow_forward |
This is a material inspired login modal with 2 panels. A login panel, and a registration panel which is hidden by default. The registration panel can be triggered by clicking the visible tab on the right side. Once clicked, the registration panel will slide in and overlap the login panel.
Behance: https://www.behance.net/gallery/30478397/Login-Form-UI-Library
GitHub: https://github.com/andyhqtran/UI-Library/tree/master/Login%20Form
A Pen by Léo Moraes on CodePen.
| $(document).ready(function() { | |
| var panelOne = $('.form-panel.two').height(), | |
| panelTwo = $('.form-panel.two')[0].scrollHeight; | |
| $('.form-panel.two').not('.form-panel.two.active').on('click', function(e) { | |
| e.preventDefault(); | |
| $('.form-toggle').addClass('visible'); | |
| $('.form-panel.one').addClass('hidden'); | |
| $('.form-panel.two').addClass('active'); | |
| $('.form').animate({ | |
| 'height': panelTwo | |
| }, 200); | |
| }); | |
| $('.form-toggle').on('click', function(e) { | |
| e.preventDefault(); | |
| $(this).removeClass('visible'); | |
| $('.form-panel.one').removeClass('hidden'); | |
| $('.form-panel.two').removeClass('active'); | |
| $('.form').animate({ | |
| 'height': panelOne | |
| }, 200); | |
| }); | |
| }); |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://codepen.io/andytran/pen/vLmRVp.js"></script> |
| // Font Family | |
| $body-font: "Roboto"; | |
| // Font Weights | |
| $thin: 100; | |
| $light: 300; | |
| $regular: 400; | |
| $semibold: 500; | |
| $bold: 700; | |
| $ultra: 800; | |
| // Base Font | |
| $base-font-family: $body-font, sans-serif; | |
| $base-font-size: 14px; | |
| $base-font-weight: $regular; | |
| $base-line-height: 1.6em; | |
| // Colors | |
| $black: #000000; | |
| $dark-gray: rgba($black, 0.8); | |
| $gray: rgba($black, 0.6); | |
| $light-gray: rgba($black, 0.4); | |
| $lighter-gray: rgba($black, 0.2); | |
| $white: #FFFFFF; | |
| $accent: #4285F4; | |
| // Form Settings | |
| $max-width: 600px; | |
| $max-height: 400px; | |
| $gutters: 24px; | |
| html { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| body { | |
| background: linear-gradient(45deg, rgba(66, 183, 245,0.8) 0%,rgba(66, 245, 189,0.4) 100%); | |
| color: $gray; | |
| font-family: $base-font-family; | |
| font-size: $base-font-size; | |
| line-height: $base-line-height; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| display: none; | |
| background: rgba($black, 0.8); | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .form { | |
| z-index: 15; | |
| position: relative; | |
| background: $white; | |
| width: $max-width; | |
| border-radius: 4px; | |
| box-shadow: 0 0 30px rgba($black, .1); | |
| box-sizing: border-box; | |
| margin: 100px auto 10px; | |
| overflow: hidden; | |
| // Toggle | |
| &-toggle { | |
| z-index: 10; | |
| position: absolute; | |
| top: 60px; | |
| right: 60px; | |
| background: $white; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 100%; | |
| transform-origin: center; | |
| transform: translate(0, -25%) scale(0); | |
| opacity: 0; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| &:before, | |
| &:after { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 30px; | |
| height: 4px; | |
| background: $accent; | |
| transform: translate(-50%, -50%); | |
| } | |
| &:before { | |
| transform: translate(-50%, -50%) rotate(45deg); | |
| } | |
| &:after { | |
| transform: translate(-50%, -50%) rotate(-45deg); | |
| } | |
| &.visible { | |
| transform: translate(0, -25%) scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| &-group { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| margin: 0 0 20px; | |
| &:last-child { | |
| margin: 0; | |
| } | |
| label { | |
| display: block; | |
| margin: 0 0 10px; | |
| color: $gray; | |
| font-size: 12px; | |
| font-weight: $semibold; | |
| line-height: 1; | |
| text-transform: uppercase; | |
| letter-spacing: .2em; | |
| .two & { | |
| color: $white; | |
| } | |
| } | |
| input { | |
| outline: none; | |
| display: block; | |
| background: rgba($black, 0.1); | |
| width: 100%; | |
| border: 0; | |
| border-radius: 4px; | |
| box-sizing: border-box; | |
| padding: 12px 20px; | |
| color: $gray; | |
| font-family: inherit; | |
| font-size: inherit; | |
| font-weight: $semibold; | |
| line-height: inherit; | |
| transition: 0.3s ease; | |
| &:focus { | |
| color: $dark-gray; | |
| } | |
| .two & { | |
| color: $white; | |
| &:focus { | |
| color: $white; | |
| } | |
| } | |
| } | |
| button { | |
| outline: none; | |
| background: $accent; | |
| width: 100%; | |
| border: 0; | |
| border-radius: 4px; | |
| padding: 12px 20px; | |
| color: $white; | |
| font-family: inherit; | |
| font-size: inherit; | |
| font-weight: $semibold; | |
| line-height: inherit; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| .two & { | |
| background: $white; | |
| color: $accent; | |
| } | |
| } | |
| .form-remember { | |
| font-size: 12px; | |
| font-weight: $regular; | |
| letter-spacing: 0; | |
| text-transform: none; | |
| input[type='checkbox'] { | |
| display: inline-block; | |
| width: auto; | |
| margin: 0 10px 0 0; | |
| } | |
| } | |
| .form-recovery { | |
| color: $accent; | |
| font-size: 12px; | |
| text-decoration: none; | |
| } | |
| } | |
| // Panel | |
| &-panel { | |
| padding: 60px calc(5% + 60px) 60px 60px; | |
| box-sizing: border-box; | |
| // Panel One | |
| &.one { | |
| &:before { | |
| @extend .overlay; | |
| content: ''; | |
| display: block; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: 0.3s ease; | |
| } | |
| &.hidden { | |
| &:before { | |
| display: block; | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| } | |
| } | |
| // Panel Two | |
| &.two { | |
| z-index: 5; | |
| position: absolute; | |
| top: 0; | |
| left: 95%; | |
| background: $accent; | |
| width: 100%; | |
| min-height: 100%; | |
| padding: 60px calc(10% + 60px) 60px 60px; | |
| transition: 0.3s ease; | |
| cursor: pointer; | |
| &:before, | |
| &:after { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| top: 60px; | |
| left: 1.5%; | |
| background: rgba($white, 0.2); | |
| height: 30px; | |
| width: 2px; | |
| transition: 0.3s ease; | |
| } | |
| &:after { | |
| left: 3%; | |
| } | |
| &:hover { | |
| left: 93%; | |
| box-shadow: 0 0 10px rgba($black, 0.2); | |
| &:before, | |
| &:after { | |
| opacity: 0; | |
| } | |
| } | |
| &.active { | |
| left: 10%; | |
| box-shadow: 0 0 10px rgba($black, 0.2); | |
| cursor: default; | |
| &:before, | |
| &:after { | |
| opacity: 0; | |
| } | |
| } | |
| } | |
| } | |
| // Header | |
| &-header { | |
| margin: 0 0 40px; | |
| h1 { | |
| padding: 4px 0; | |
| color: $accent; | |
| font-size: 24px; | |
| font-weight: $bold; | |
| text-transform: uppercase; | |
| .two & { | |
| position: relative; | |
| z-index: 40; | |
| color: $white; | |
| } | |
| } | |
| } | |
| // Content | |
| &-content {} | |
| &-footer {} | |
| } | |
| // Pen Footer | |
| .pen-footer { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| width: $max-width; | |
| margin: 20px auto 100px; | |
| a { | |
| color: $white; | |
| font-size: 12px; | |
| text-decoration: none; | |
| text-shadow: 1px 2px 0 rgba($black, .1); | |
| .material-icons { | |
| width: 12px; | |
| margin: 0 5px; | |
| vertical-align: middle; | |
| font-size: 12px; | |
| } | |
| } | |
| } | |
| .cp-fab { | |
| background: $white !important; | |
| color: $accent !important; | |
| } |
| <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" /> |