codecombat/app/styles/modal/auth-modal.sass

286 lines
5.7 KiB
Sass
Raw Normal View History

@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
#auth-modal
//- Clear modal defaults
.modal-dialog
padding: 0
width: 666px
height: 694px
//- Background
.auth-modal-background
position: absolute
top: -90px
left: -40px
//- Header
h1
position: absolute
left: 183px
top: 0px
margin: 0
width: 255px
text-align: center
color: rgb(254,188,68)
font-size: 32px
text-shadow: black 2px 2px 0, black -2px -2px 0, black 2px -2px 0, black -2px 2px 0, black 2px 0px 0, black 0px -2px 0, black -2px 0px 0, black 0px 2px 0
&.long-title
top: -14px
//- Close modal button
#close-modal
position: absolute
left: 442px
top: -15px
width: 60px
height: 60px
color: white
text-align: center
font-size: 30px
padding-top: 15px
cursor: pointer
@include rotate(-3deg)
&:hover
color: yellow
//- Modal body content
.auth-form-content
position: absolute
top: 100px
left: 40px
width: 588px
.help-block
margin: 0
.alert
margin-top: -25px
margin-bottom: 0
padding: 10px 15px
#recover-account-wrapper
float: right
margin-top: 7px
.form-group
color: rgb(51,51,51)
padding: 0
margin: 0
.input-border
border: 2px solid rgb(233, 221, 194)
border-radius: 4px
input
background-color: rgb(239, 232, 216)
border: 2px solid rgb(26, 21, 18)
border-radius: 4px
label
font-size: 20px
text-transform: uppercase
font-family: $headings-font-family
margin-bottom: 0
//- Check boxes
.form-group.checkbox
margin: 10px 0
label
position: relative
line-height: 34px
span:not(.custom-checkbox)
margin-left: 40px
input
display: none
& + .custom-checkbox
.glyphicon
display: none
&:checked + .custom-checkbox .glyphicon
display: inline
color: rgb(248,169,67)
text-align: center
text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black
font-size: 20px
position: relative
top: -2px
.input-border
border-radius: 4px
height: 34px
width: 34px
position: absolute
.custom-checkbox
border-radius: 4px
position: absolute
height: 30px
width: 30px
border: 2px solid rgb(26,21,18)
background: rgb(228,217,196)
text-align: center
//- Primary auth button
#login-button, #signup-button
position: absolute
top: 298px
height: 70px
font-size: 32px
line-height: 42px
border-style: solid
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
.auth-network-logins
position: absolute
top: 470px
width: 580px
left: 48px
padding-left: 29px
.btn.btn-lg.network-login
width: 251px
height: 60px
float: left
text-align: center
position: relative
margin-right: 15px
.network-logo
height: 30px
position: absolute
left: -10px
top: 2px
.sign-in-blurb
line-height: 34px
margin-left: 12px
.fb-login-button
$scaleX: 251 / 64
$scaleY: 60 / 23
transform: scale($scaleX, $scaleY)
position: absolute
top: 4px
left: 74px
@include opacity(0.01)
.gplus-login-wrapper
position: absolute
left: 65px
top: -6px
$scaleX: 251 / 84
$scaleY: 60 / 24
transform: scale($scaleX, $scaleY)
@include opacity(0.01)
#github-login-button
position: relative
top: -1px
border-radius: 5px
img
width: 16px
margin: 0 5px 0 -5px
#gplus-login-button
position: relative
top: 8px
//- Extra bottom pane area
.extra-pane
background-image: url(/images/pages/modal/auth/extra-pane.png)
width: 633px
height: 139px
padding: 23px 23px 23px 168px
position: absolute
top: 520px
.switch-explanation
margin: 25px 10px 0 0
width: 200px
color: rgb(254,188,68)
font-size: 20px
font-family: $headings-font-family
font-weight: bold
text-transform: uppercase
text-shadow: black 1px 1px 0, black -1px -1px 0, black 1px -1px 0, black -1px 1px 0, black 1px 0px 0, black 0px -1px 0, black -1px 0px 0, black 0px 1px 0
float: left
.btn
float: right
margin-top: 20px
width: 230px
height: 70px
line-height: 40px
//- Login-specific styling
&.login
.modal-dialog
height: 582px
#login-button, #signup-button
top: 186px
.auth-network-logins
top: 358px
.extra-pane
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