codeninjasllc/codecombat
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Using big green button for account creation.

Browse source
This commit is contained in:
Nick Winter 2014-12-06 18:18:42 -08:00
parent d2d21db08b
commit f504490a37
2 changed files with 55 additions and 11 deletions
app
styles/modal
auth-modal.sass
templates/core
auth.jade

62
app/styles/modal/auth-modal.sass
View file

@ -63,6 +63,11 @@
left: 40px left: 40px
width: 588px width: 588px
.alert
margin-top: -25px
margin-bottom: 0
padding: 10px 15px
#recover-account-wrapper #recover-account-wrapper
float: right float: right
margin-top: 7px margin-top: 7px
@ -80,32 +85,32 @@
background-color: rgb(239, 232, 216) background-color: rgb(239, 232, 216)
border: 2px solid rgb(26, 21, 18) border: 2px solid rgb(26, 21, 18)
border-radius: 4px border-radius: 4px
label label
font-size: 20px font-size: 20px
text-transform: uppercase text-transform: uppercase
font-family: 'Open Sans Condensed' font-family: 'Open Sans Condensed'
margin-bottom: 0 margin-bottom: 0
//- Check boxes //- Check boxes
.form-group.checkbox .form-group.checkbox
margin: 10px 0 margin: 10px 0
label label
position: relative position: relative
line-height: 34px line-height: 34px
span:not(.custom-checkbox) span:not(.custom-checkbox)
margin-left: 40px margin-left: 40px
input input
display: none display: none
& + .custom-checkbox & + .custom-checkbox
.glyphicon .glyphicon
display: none display: none
&:checked + .custom-checkbox .glyphicon &:checked + .custom-checkbox .glyphicon
display: inline display: inline
color: rgb(248,169,67) color: rgb(248,169,67)
@ -120,7 +125,7 @@
height: 34px height: 34px
width: 34px width: 34px
position: absolute position: absolute
.custom-checkbox .custom-checkbox
border-radius: 4px border-radius: 4px
position: absolute position: absolute
@ -130,10 +135,29 @@
background: rgb(228,217,196) background: rgb(228,217,196)
text-align: center text-align: center
//- Primary auth button
#login-button, #signup-button #login-button, #signup-button
position: absolute position: absolute
top: 298px top: 298px
height: 70px height: 70px
font-size: 32px
line-height: 42px
border-image: url(/images/level/code_toolbar_submit_button_active.png) 14 20 20 20 fill round
border-width: 14px 20px 20px 20px
color: white
span
pointer-events: none
&:hover
border-image: url(/images/level/code_toolbar_submit_button_zazz.png) 14 20 20 20 fill round
color: white
&:active
border-image: url(/images/level/code_toolbar_submit_button_zazz_pressed.png) 14 20 20 20 fill round
padding: 2px 0 0 2px
color: white
//- Footer area //- Footer area
@ -159,7 +183,7 @@
left: -10px left: -10px
top: 2px top: 2px
.sign-in-blurb .sign-in-blurb
line-height: 34px line-height: 34px
margin-left: 12px margin-left: 12px
@ -235,3 +259,23 @@
.extra-pane .extra-pane
top: 408px top: 408px
html.no-borderimage #auth-modal
#login-button, #signup-button
border: 0
background-image: url(/images/level/code_toolbar_submit_button_active.png)
background-size: 100% 100%
padding: 7px 10px 10px 10px
&:hover
background-image: url(/images/level/code_toolbar_submit_button_zazz.png)
border: 0
&:active
background-image: url(/images/level/code_toolbar_submit_button_zazz_pressed.png)
padding: 9px 8px 8px 12px
border: 0

4
app/templates/core/auth.jade
View file

@ -63,9 +63,9 @@
span(data-i18n="signup.email_announcements") Receive announcements by email span(data-i18n="signup.email_announcements") Receive announcements by email
if mode === 'login' if mode === 'login'
input.btn.btn-info.btn-lg.btn-illustrated.btn-block#login-button(value=translate("login.log_in"), type="submit") input.btn.btn-lg.btn-illustrated.btn-block#login-button(value=translate("login.log_in"), type="submit")
else if mode === 'signup' else if mode === 'signup'
input.btn.btn-info.btn-lg.btn-illustrated.btn-block#signup-button(value=translate("signup.sign_up"), type="submit") input.btn.btn-lg.btn-illustrated.btn-block#signup-button(value=translate("signup.sign_up"), type="submit")
.wait.secret .wait.secret
if mode === 'login' if mode === 'login'