Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Login / Sign Up</title>
- <link rel="stylesheet" href="style.css" />
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
- </head>
- <body>
- <style>
- @import "bourbon";
- // variables - colors
- $main-text: #505260; // main text
- $background: #fff; // body background color
- $color-1: #343642; // blue-dark
- $color-2: #2f889a; // blue-light
- $color-3: #d2d8d8; // grey
- $red: #d76666; // error messages
- // variables - fonts
- $primary-font: 'PT Sans', sans-serif;
- // variables - z-index
- $header-zindex: 2;
- $modal-zindex: 3;
- // variables - header
- $header-height-S: 50px;
- $header-height-M: 80px;
- // mixins - rem fallback - credits: http://zerosixthree.se/
- @function calculateRem($size) {
- $remSize: $size / 16px;
- @return $remSize * 1rem;
- }
- @mixin font-size($size) {
- font-size: $size;
- font-size: calculateRem($size);
- }
- // mixins - center vertically and/or horizontally an absolute positioned element
- @mixin center($xy:xy) {
- @if $xy == xy {
- left: 50%;
- top: 50%;
- bottom: auto;
- right: auto;
- @include transform(translateX(-50%) translateY(-50%));
- }
- @else if $xy == x {
- left: 50%;
- right: auto;
- @include transform(translateX(-50%));
- }
- @else if $xy == y {
- top: 50%;
- bottom: auto;
- @include transform(translateY(-50%));
- }
- }
- // mixins - border radius
- @mixin border-radius($radius:.25em) {
- border-radius: $radius;
- }
- // layout - breakpoints
- $S: 600px;
- $M: 768px;
- $L: 1170px;
- // layout - media queries
- @mixin MQ($canvas) {
- @if $canvas == S {
- @media only screen and (min-width: $S) { @content; }
- }
- @else if $canvas == M {
- @media only screen and (min-width: $M) { @content; }
- }
- @else if $canvas == L {
- @media only screen and (min-width: $L) { @content; }
- }
- }
- // layout - super light grid - it works with the .cd-container class
- @mixin column($percentage, $float-direction:left) {
- width: 100% * $percentage;
- float: $float-direction;
- }
- /* --------------------------------
- Primary style
- -------------------------------- */
- html * {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- *, *:after, *:before {
- @include box-sizing(border-box);
- }
- body {
- font: {
- size: 100%;
- family: $primary-font;
- }
- color: $main-text;
- background-color: $background;
- }
- a {
- color: $color-2;
- text-decoration: none;
- }
- img {
- max-width: 100%;
- }
- input, textarea {
- font-family: $primary-font;
- @include font-size(16px);
- &::-ms-clear {
- display: none;
- }
- }
- /* --------------------------------
- Main components
- -------------------------------- */
- header[role=banner] {
- position: relative;
- height: $header-height-S;
- background: $color-1;
- #cd-logo {
- float: left;
- margin: 4px 0 0 5%;
- /* reduce logo size on mobile and make sure it is left aligned with the transform-origin property */
- @include transform-origin(0 50%);
- @include transform(scale(.8));
- img {
- display: block;
- }
- }
- &::after { /* clearfix */
- content: '';
- display: table;
- clear: both;
- }
- @include MQ(M) {
- height: $header-height-M;
- #cd-logo {
- margin: 20px 0 0 5%;
- @include transform(scale(1));
- }
- }
- }
- .main-nav {
- float: right;
- margin-right: 5%;
- width: 44px;
- height: 100%;
- background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-menu.svg') no-repeat center center;
- cursor: pointer;
- ul {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- @include transform(translateY(-100%));
- &.is-visible {
- @include transform(translateY($header-height-S));
- }
- }
- a {
- display: block;
- height: $header-height-S;
- line-height: $header-height-S;
- padding-left: 5%;
- background: darken($color-1, 5%);
- border-top: 1px solid lighten($color-1, 3%);
- color: #FFF;
- }
- @include MQ(M) {
- width: auto;
- height: auto;
- background: none;
- cursor: auto;
- ul {
- position: static;
- width: auto;
- @include transform(translateY(0));
- line-height: $header-height-M;
- &.is-visible {
- @include transform(translateY(0));
- }
- }
- li {
- display: inline-block;
- margin-left: 1em;
- &:nth-last-child(2) {
- margin-left: 2em;
- }
- }
- a {
- display: inline-block;
- height: auto;
- line-height: normal;
- background: transparent;
- &.cd-signin, &.cd-signup {
- padding: .6em 1em;
- border: 1px solid rgba(#FFF, .6);
- border-radius: 50em;
- }
- &.cd-signup {
- background: $color-2;
- border: none;
- }
- }
- }
- }
- /* --------------------------------
- xsigin/signup popup
- -------------------------------- */
- .cd-user-modal {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba($color-1, .9);
- z-index: $modal-zindex;
- overflow-y: auto;
- cursor: pointer;
- visibility: hidden;
- opacity: 0;
- @include transition(opacity .3s 0, visibility 0 .3s);
- &.is-visible {
- visibility: visible;
- opacity: 1;
- @include transition(opacity .3s 0, visibility 0 0);
- .cd-user-modal-container {
- @include transform(translateY(0));
- }
- }
- }
- .cd-user-modal-container {
- position: relative;
- width: 90%;
- max-width: 600px;
- background: #FFF;
- margin: 3em auto 4em;
- cursor: auto;
- @include border-radius;
- @include transform(translateY(-30px));
- @include transition-property (transform);
- @include transition-duration(.3s);
- .cd-switcher {
- @include clearfix;
- li {
- @include column(.5);
- text-align: center;
- &:first-child a {
- border-radius: .25em 0 0 0;
- }
- &:last-child a {
- border-radius: 0 .25em 0 0;
- }
- }
- a {
- display: block;
- width: 100%;
- height: 50px;
- line-height: 50px;
- background: $color-3;
- color: darken($color-3, 30%);
- &.selected {
- background: #FFF;
- color: $main-text;
- }
- }
- }
- @include MQ(S) {
- margin: 4em auto;
- .cd-switcher a {
- height: 70px;
- line-height: 70px;
- }
- }
- }
- .cd-form {
- padding: 1.4em;
- .fieldset {
- position: relative;
- margin: 1.4em 0;
- &:first-child {
- margin-top: 0;
- }
- &:last-child {
- margin-bottom: 0;
- }
- }
- label {
- @include font-size(14px);
- &.image-replace {
- /* replace text with an icon */
- display: inline-block;
- position: absolute;
- left: 15px;
- @include center(y);
- height: 20px;
- width: 20px;
- overflow: hidden;
- text-indent: 100%;
- white-space: nowrap;
- color: transparent;
- text-shadow: none;
- background-repeat: no-repeat;
- background-position: 50% 0;
- }
- &.cd-username {
- background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-username.svg');
- }
- &.cd-email {
- background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-email.svg');
- }
- &.cd-password {
- background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-password.svg');
- }
- }
- input {
- margin: 0;
- padding: 0;
- @include border-radius;
- &.full-width {
- width: 100%;
- }
- &.has-padding {
- padding: 12px 20px 12px 50px;
- }
- &.has-border {
- border: 1px solid $color-3;
- @include appearance(none);
- &:focus {
- border-color: $color-1;
- box-shadow: 0 0 5px rgba($color-1, .1);
- outline: none;
- }
- }
- &.has-error {
- border: 1px solid $red;
- }
- &[type=password] {
- /* space left for the HIDE button */
- padding-right: 65px;
- }
- &[type=submit] {
- padding: 16px 0;
- cursor: pointer;
- background: $color-2;
- color: #FFF;
- font-weight: bold;
- border: none;
- @include appearance(none);
- .no-touch &:hover, .no-touch &:focus {
- background: lighten($color-2, 5%);
- outline: none;
- }
- }
- }
- .hide-password {
- display: inline-block;
- position: absolute;
- right: 0;
- top: 0;
- padding: 6px 15px;
- border-left: 1px solid $color-3;
- @include center(y);
- @include font-size(14px);
- color: $color-1;
- }
- .cd-error-message {
- display: inline-block;
- position: absolute;
- left: -5px;
- bottom: -35px;
- background: rgba($red, .9);
- padding: .8em;
- z-index: 2;
- color: #FFF;
- @include font-size(13px);
- @include border-radius;
- /* prevent click and touch events */
- pointer-events: none;
- visibility: hidden;
- opacity: 0;
- @include transition(opacity .2s 0, visibility 0 .2s);
- &::after {
- /* triangle */
- content: '';
- position: absolute;
- left: 22px;
- bottom: 100%;
- @include triangle(16px, rgba($red, .9), up);
- }
- &.is-visible {
- opacity: 1;
- visibility: visible;
- @include transition(opacity .2s 0, visibility 0 0);
- }
- }
- @include MQ(S) {
- padding: 2em;
- .fieldset {
- margin: 2em 0;
- &:first-child {
- margin-top: 0;
- }
- &:last-child {
- margin-bottom: 0;
- }
- }
- input.has-padding {
- padding: 16px 20px 16px 50px;
- }
- input[type=submit] {
- padding: 16px 0;
- }
- }
- }
- .cd-form-message {
- padding: 1.4em 1.4em 0;
- @include font-size(14px);
- line-height: 1.4;
- text-align: center;
- @include MQ(S) {
- padding: 2em 2em 0;
- }
- }
- .cd-form-bottom-message {
- position: absolute;
- width: 100%;
- left: 0;
- bottom: -30px;
- text-align: center;
- @include font-size(14px);
- a {
- color: #FFF;
- text-decoration: underline;
- }
- }
- .cd-close-form {
- /* form X button on top right */
- display: block;
- position: absolute;
- width: 40px;
- height: 40px;
- right: 0;
- top: -40px;
- background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-close.svg') no-repeat center center;
- text-indent: 100%;
- white-space: nowrap;
- overflow: hidden;
- @include MQ(L) {
- display: none;
- }
- }
- #cd-login, #cd-signup, #cd-reset-password {
- display: none;
- }
- #cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected {
- display: block;
- }
- </style>
- <header role="banner">
- <div id="cd-logo"><a href="#0"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-logo_1.svg" alt="Logo"></a></div>
- <nav class="main-nav">
- <ul>
- <!-- inser more links here -->
- <li><a class="cd-signin" href="#0">Sign in</a></li>
- <li><a class="cd-signup" href="#0">Sign up</a></li>
- </ul>
- </nav>
- </header>
- <div class="cd-user-modal"> <!-- this is the entire modal form, including the background -->
- <div class="cd-user-modal-container"> <!-- this is the container wrapper -->
- <ul class="cd-switcher">
- <li><a href="#0">Sign in</a></li>
- <li><a href="#0">New account</a></li>
- </ul>
- <div id="cd-login"> <!-- log in form -->
- <form class="cd-form">
- <p class="fieldset">
- <label class="image-replace cd-email" for="signin-email">E-mail</label>
- <input class="full-width has-padding has-border" id="signin-email" type="email" placeholder="E-mail">
- <span class="cd-error-message">Error message here!</span>
- </p>
- <p class="fieldset">
- <label class="image-replace cd-password" for="signin-password">Password</label>
- <input class="full-width has-padding has-border" id="signin-password" type="text" placeholder="Password">
- <a href="#0" class="hide-password">Hide</a>
- <span class="cd-error-message">Error message here!</span>
- </p>
- <p class="fieldset">
- <input type="checkbox" id="remember-me" checked>
- <label for="remember-me">Remember me</label>
- </p>
- <p class="fieldset">
- <input class="full-width" type="submit" value="Login">
- </p>
- </form>
- <p class="cd-form-bottom-message"><a href="#0">Forgot your password?</a></p>
- <!-- <a href="#0" class="cd-close-form">Close</a> -->
- </div> <!-- cd-login -->
- <div id="cd-signup"> <!-- sign up form -->
- <form class="cd-form">
- <p class="fieldset">
- <label class="image-replace cd-username" for="signup-username">Username</label>
- <input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="Username">
- <span class="cd-error-message">Error message here!</span>
- </p>
- <p class="fieldset">
- <label class="image-replace cd-email" for="signup-email">E-mail</label>
- <input class="full-width has-padding has-border" id="signup-email" type="email" placeholder="E-mail">
- <span class="cd-error-message">Error message here!</span>
- </p>
- <p class="fieldset">
- <label class="image-replace cd-password" for="signup-password">Password</label>
- <input class="full-width has-padding has-border" id="signup-password" type="text" placeholder="Password">
- <a href="#0" class="hide-password">Hide</a>
- <span class="cd-error-message">Error message here!</span>
- </p>
- <p class="fieldset">
- <input type="checkbox" id="accept-terms">
- <label for="accept-terms">I agree to the <a href="#0">Terms</a></label>
- </p>
- <p class="fieldset">
- <input class="full-width has-padding" type="submit" value="Create account">
- </p>
- </form>
- <!-- <a href="#0" class="cd-close-form">Close</a> -->
- </div> <!-- cd-signup -->
- <div id="cd-reset-password"> <!-- reset password form -->
- <p class="cd-form-message">Lost your password? Please enter your email address. You will receive a link to create a new password.</p>
- <form class="cd-form">
- <p class="fieldset">
- <label class="image-replace cd-email" for="reset-email">E-mail</label>
- <input class="full-width has-padding has-border" id="reset-email" type="email" placeholder="E-mail">
- <span class="cd-error-message">Error message here!</span>
- </p>
- <p class="fieldset">
- <input class="full-width has-padding" type="submit" value="Reset password">
- </p>
- </form>
- <p class="cd-form-bottom-message"><a href="#0">Back to log-in</a></p>
- </div> <!-- cd-reset-password -->
- <a href="#0" class="cd-close-form">Close</a>
- </div> <!-- cd-user-modal-container -->
- </div> <!-- cd-user-modal -->
- <script>
- jQuery(document).ready(function($){
- var $form_modal = $('.cd-user-modal'),
- $form_login = $form_modal.find('#cd-login'),
- $form_signup = $form_modal.find('#cd-signup'),
- $form_forgot_password = $form_modal.find('#cd-reset-password'),
- $form_modal_tab = $('.cd-switcher'),
- $tab_login = $form_modal_tab.children('li').eq(0).children('a'),
- $tab_signup = $form_modal_tab.children('li').eq(1).children('a'),
- $forgot_password_link = $form_login.find('.cd-form-bottom-message a'),
- $back_to_login_link = $form_forgot_password.find('.cd-form-bottom-message a'),
- $main_nav = $('.main-nav');
- //open modal
- $main_nav.on('click', function(event){
- if( $(event.target).is($main_nav) ) {
- // on mobile open the submenu
- $(this).children('ul').toggleClass('is-visible');
- } else {
- // on mobile close submenu
- $main_nav.children('ul').removeClass('is-visible');
- //show modal layer
- $form_modal.addClass('is-visible');
- //show the selected form
- ( $(event.target).is('.cd-signup') ) ? signup_selected() : login_selected();
- }
- });
- //close modal
- $('.cd-user-modal').on('click', function(event){
- if( $(event.target).is($form_modal) || $(event.target).is('.cd-close-form') ) {
- $form_modal.removeClass('is-visible');
- }
- });
- //close modal when clicking the esc keyboard button
- $(document).keyup(function(event){
- if(event.which=='27'){
- $form_modal.removeClass('is-visible');
- }
- });
- //switch from a tab to another
- $form_modal_tab.on('click', function(event) {
- event.preventDefault();
- ( $(event.target).is( $tab_login ) ) ? login_selected() : signup_selected();
- });
- //hide or show password
- $('.hide-password').on('click', function(){
- var $this= $(this),
- $password_field = $this.prev('input');
- ( 'password' == $password_field.attr('type') ) ? $password_field.attr('type', 'text') : $password_field.attr('type', 'password');
- ( 'Hide' == $this.text() ) ? $this.text('Show') : $this.text('Hide');
- //focus and move cursor to the end of input field
- $password_field.putCursorAtEnd();
- });
- //show forgot-password form
- $forgot_password_link.on('click', function(event){
- event.preventDefault();
- forgot_password_selected();
- });
- //back to login from the forgot-password form
- $back_to_login_link.on('click', function(event){
- event.preventDefault();
- login_selected();
- });
- function login_selected(){
- $form_login.addClass('is-selected');
- $form_signup.removeClass('is-selected');
- $form_forgot_password.removeClass('is-selected');
- $tab_login.addClass('selected');
- $tab_signup.removeClass('selected');
- }
- function signup_selected(){
- $form_login.removeClass('is-selected');
- $form_signup.addClass('is-selected');
- $form_forgot_password.removeClass('is-selected');
- $tab_login.removeClass('selected');
- $tab_signup.addClass('selected');
- }
- function forgot_password_selected(){
- $form_login.removeClass('is-selected');
- $form_signup.removeClass('is-selected');
- $form_forgot_password.addClass('is-selected');
- }
- //REMOVE THIS - it's just to show error messages
- $form_login.find('input[type="submit"]').on('click', function(event){
- event.preventDefault();
- $form_login.find('input[type="email"]').toggleClass('has-error').next('span').toggleClass('is-visible');
- });
- $form_signup.find('input[type="submit"]').on('click', function(event){
- event.preventDefault();
- $form_signup.find('input[type="email"]').toggleClass('has-error').next('span').toggleClass('is-visible');
- });
- //IE9 placeholder fallback
- //credits http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
- if(!Modernizr.input.placeholder){
- $('[placeholder]').focus(function() {
- var input = $(this);
- if (input.val() == input.attr('placeholder')) {
- input.val('');
- }
- }).blur(function() {
- var input = $(this);
- if (input.val() == '' || input.val() == input.attr('placeholder')) {
- input.val(input.attr('placeholder'));
- }
- }).blur();
- $('[placeholder]').parents('form').submit(function() {
- $(this).find('[placeholder]').each(function() {
- var input = $(this);
- if (input.val() == input.attr('placeholder')) {
- input.val('');
- }
- })
- });
- }
- });
- //credits https://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
- jQuery.fn.putCursorAtEnd = function() {
- return this.each(function() {
- // If this function exists...
- if (this.setSelectionRange) {
- // ... then use it (Doesn't work in IE)
- // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
- var len = $(this).val().length * 2;
- this.setSelectionRange(len, len);
- } else {
- // ... otherwise replace the contents with itself
- // (Doesn't work in Google Chrome)
- $(this).val($(this).val());
- }
- });
- };
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement