-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add register and reset password components
- Loading branch information
Showing
15 changed files
with
463 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,109 @@ | ||
| .example-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| /* sign in FORM */ | ||
| #logreg-forms{ | ||
| width:412px; | ||
| margin:10vh auto; | ||
| background-color:#f3f3f3; | ||
| box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); | ||
| transition: all 0.3s cubic-bezier(.25,.8,.25,1); | ||
| } | ||
| #logreg-forms form { | ||
| width: 100%; | ||
| max-width: 410px; | ||
| padding: 15px; | ||
| margin: auto; | ||
| } | ||
| #logreg-forms .form-control { | ||
| position: relative; | ||
| box-sizing: border-box; | ||
| height: auto; | ||
| padding: 10px; | ||
| font-size: 16px; | ||
| } | ||
| #logreg-forms .form-control:focus { z-index: 2; } | ||
| #logreg-forms .form-signin input[type="email"] { | ||
| margin-bottom: -1px; | ||
| border-bottom-right-radius: 0; | ||
| border-bottom-left-radius: 0; | ||
| } | ||
| #logreg-forms .form-signin input[type="password"] { | ||
| border-top-left-radius: 0; | ||
| border-top-right-radius: 0; | ||
| } | ||
|
|
||
| #logreg-forms .social-login{ | ||
| width:390px; | ||
| margin:0 auto; | ||
| margin-bottom: 14px; | ||
| } | ||
| #logreg-forms .social-btn{ | ||
| font-weight: 100; | ||
| color:white; | ||
| width:190px; | ||
| font-size: 0.9rem; | ||
| } | ||
|
|
||
| #logreg-forms a{ | ||
| display: block; | ||
| padding-top:10px; | ||
| color:lightseagreen; | ||
| } | ||
|
|
||
| #logreg-form .lines{ | ||
| width:200px; | ||
| border:1px solid red; | ||
| } | ||
|
|
||
|
|
||
| #logreg-forms button[type="submit"]{ margin-top:10px; } | ||
|
|
||
| #logreg-forms .facebook-btn{ background-color:#3C589C; } | ||
|
|
||
| #logreg-forms .google-btn{ background-color: #DF4B3B; } | ||
|
|
||
| #logreg-forms .form-reset, #logreg-forms .form-signup{ display: none; } | ||
|
|
||
| #logreg-forms .form-signup .social-btn{ width:210px; } | ||
|
|
||
| #logreg-forms .form-signup input { margin-bottom: 2px;} | ||
|
|
||
| .form-signup .social-login{ | ||
| width:210px !important; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| /* Mobile */ | ||
|
|
||
| @media screen and (max-width:500px){ | ||
| #logreg-forms{ | ||
| width:300px; | ||
| } | ||
|
|
||
| .example-container > * { | ||
| width: 100%; | ||
| #logreg-forms .social-login{ | ||
| width:200px; | ||
| margin:0 auto; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .example-right-align { | ||
| text-align: right; | ||
| #logreg-forms .social-btn{ | ||
| font-size: 1.3rem; | ||
| font-weight: 100; | ||
| color:white; | ||
| width:200px; | ||
| height: 56px; | ||
|
|
||
| } | ||
|
|
||
| input.example-right-align::-webkit-outer-spin-button, | ||
| input.example-right-align::-webkit-inner-spin-button { | ||
| display: none; | ||
| #logreg-forms .social-btn:nth-child(1){ | ||
| margin-bottom: 5px; | ||
| } | ||
|
|
||
| input.example-right-align { | ||
| -moz-appearance: textfield; | ||
| #logreg-forms .social-btn span{ | ||
| display: none; | ||
| } | ||
| #logreg-forms .facebook-btn:after{ | ||
| content:'Facebook'; | ||
| } | ||
|
|
||
| .loginform{ | ||
| max-width: 500px; | ||
| margin: auto; | ||
| // border: 1px solid; | ||
| // padding: 20px; | ||
|
|
||
| form{ | ||
| // padding: 0 25px; | ||
|
|
||
| input:-webkit-autofill, | ||
| input:-webkit-autofill:hover, | ||
| input:-webkit-autofill:focus, | ||
| input:-webkit-autofill:active { | ||
| box-shadow: 0 0 0 30px white inset !important; | ||
| -webkit-box-shadow: 0 0 0 30px white inset !important; | ||
| } | ||
| } | ||
| #logreg-forms .google-btn:after{ | ||
| content:'Google+'; | ||
| } | ||
|
|
||
| } |
This file was deleted.
Oops, something went wrong.
Empty file.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| <div id="logreg-forms"> | ||
|
|
||
|
|
||
| <!-- <form action="/reset/password/" class="form-reset"> | ||
| <input type="email" id="resetEmail" class="form-control" placeholder="Email address" required="" autofocus=""> | ||
| <button class="btn btn-primary btn-block" type="submit">Reset Password</button> | ||
| <a href="#" id="cancel_reset"><i class="fas fa-angle-left"></i> Back</a> | ||
| </form> --> | ||
|
|
||
| <form action="/signup/" class="form-signup"> | ||
| <div class="social-login"> | ||
| <button class="btn facebook-btn social-btn" type="button"><span><i class="fab fa-facebook-f"></i> Sign up with Facebook</span> </button> | ||
| </div> | ||
| <div class="social-login"> | ||
| <button class="btn google-btn social-btn" type="button"><span><i class="fab fa-google-plus-g"></i> Sign up with Google+</span> </button> | ||
| </div> | ||
|
|
||
| <p style="text-align:center">OR</p> | ||
|
|
||
| <input type="text" id="user-name" class="form-control" placeholder="Full name" required="" autofocus=""> | ||
| <input type="email" id="user-email" class="form-control" placeholder="Email address" required autofocus=""> | ||
| <input type="password" id="user-pass" class="form-control" placeholder="Password" required autofocus=""> | ||
| <input type="password" id="user-repeatpass" class="form-control" placeholder="Repeat Password" required autofocus=""> | ||
|
|
||
| <button class="btn btn-primary btn-block" type="submit"><i class="fas fa-user-plus"></i> Sign Up</button> | ||
| </form> | ||
| <br> | ||
|
|
||
| </div> |
Oops, something went wrong.