mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-12-04 12:51:12 -05:00
153 lines
2.9 KiB
Sass
153 lines
2.9 KiB
Sass
|
//
|
||
|
|
Layout for CreateAccountModal is done largely with flexboxes.
|
||
|
|
Rules in this file should be ones that apply to all screens/subviews, but this
|
||
|
|
separation may not be perfect.
|
||
|
|
|
||
|
|
Currently it uses .modal-dialog, .modal-content, etc, for some parts of the modal.
|
||
|
|
Unfortunately those preexesting classes don't line up perfectly with the needs of this modal,
|
||
|
|
so many of the other styles for those classes don't apply or are overridden.
|
||
|
|
|
||
|
|
@import "app/styles/style-flat-variables"
|
||
|
|
|
||
|
|
#create-account-modal
|
||
|
|
.modal-dialog
|
||
|
|
width: 850px
|
||
|
|
|
||
|
|
.modal-content
|
||
|
|
display: flex
|
||
|
|
flex-direction: column
|
||
|
|
height: 850px
|
||
|
|
width: 850px
|
||
|
|
text-align: center
|
||
|
|
padding: 0
|
||
|
|
border: none
|
||
|
|
|
||
|
|
// General modal stuff
|
||
|
|
|
||
|
|
.modal-header, .modal-footer
|
||
|
|
&.teacher
|
||
|
|
background-color: $burgandy
|
||
|
|
|
||
|
|
&.student
|
||
|
|
background-color: $forest
|
||
|
|
|
||
|
|
.modal-header
|
||
|
|
display: flex
|
||
|
|
flex-direction: column
|
||
|
|
align-items: center
|
||
|
|
justify-content: flex-end
|
||
|
|
height: 100px
|
||
|
|
padding: 0
|
||
|
|
|
||
|
|
background-color: $navy
|
||
|
|
|
||
|
|
h3
|
||
|
|
color: white
|
||
|
|
|
||
|
|
.modal-footer
|
||
|
|
padding: 0
|
||
|
|
margin: 0
|
||
|
|
height: 50px
|
||
|
|
display: flex
|
||
|
|
align-items: center
|
||
|
|
justify-content: center
|
||
|
|
|
||
|
|
background-color: $navy
|
||
|
|
|
||
|
|
span
|
||
|
|
color: white
|
||
|
|
|
||
|
|
#choose-account-type-view, #segment-check-view, #basic-info-view, #coppa-deny-view, #single-sign-on-already-exists-view, #single-sign-on-confirm-view,
|
||
|
|
display: flex
|
||
|
|
flex-direction: column
|
||
|
|
flex-grow: 1
|
||
|
|
|
||
|
|
.modal-body
|
||
|
|
display: flex
|
||
|
|
flex-direction: column
|
||
|
|
flex-grow: 1
|
||
|
|
|
||
|
|
.modal-body-content
|
||
|
|
flex-grow: 2
|
||
|
|
display: flex
|
||
|
|
flex-direction: column
|
||
|
|
align-items: center
|
||
|
|
justify-content: center
|
||
|
|
|
||
|
|
// Back/forward buttons
|
||
|
|
|
||
|
|
.history-nav-buttons
|
||
|
|
width: 100%
|
||
|
|
display: flex
|
||
|
|
flex-direction: row-reverse
|
||
|
|
flex-grow: 1
|
||
|
|
align-items: flex-end
|
||
|
|
justify-content: space-between
|
||
|
|
|
||
|
|
.btn
|
||
|
|
// Undo .style-flat's .btn ~ .btn margin
|
||
|
|
margin: 0
|
||
|
|
|
||
|
|
&.just-one
|
||
|
|
flex-direction: row
|
||
|
|
|
||
|
|
// Forms
|
||
|
|
|
||
|
|
.full-name
|
||
|
|
display: flex
|
||
|
|
flex-direction: row
|
||
|
|
|
||
|
|
.form-group
|
||
|
|
display: flex
|
||
|
|
flex-direction: column
|
||
|
|
align-content: flex-start
|
||
|
|
|
||
|
|
&.text-center
|
||
|
|
text-align: center
|
||
|
|
|
||
|
|
input
|
||
|
|
height: 40px
|
||
|
|
|
||
|
|
&.row
|
||
|
|
display: block
|
||
|
|
|
||
|
|
&.last-initial
|
||
|
|
margin-left: 30px
|
||
|
|
width: auto
|
||
|
|
|
||
|
|
input
|
||
|
|
width: 70px
|
||
|
|
|
||
|
|
&.subscribe
|
||
|
|
width: 100%
|
||
|
|
|
||
|
|
// Fancy text inside horizontal rules
|
||
|
|
|
||
|
|
.hr-text
|
||
|
|
position: relative
|
||
|
|
hr
|
||
|
|
width: 430px
|
||
|
|
padding: 0
|
||
|
|
border: none
|
||
|
|
border-top: thin solid #444
|
||
|
|
color: #444
|
||
|
|
span
|
||
|
|
position: absolute
|
||
|
|
left: 50%
|
||
|
|
top: 0.45em
|
||
|
|
transform: translateX(-50%)
|
||
|
|
padding: 0 0.75em
|
||
|
|
font-weight: bold
|
||
|
|
font-size: 10pt
|
||
|
|
background: white
|
||
|
|
|
||
|
|
|
||
|
|
// Glyphicon colors
|
||
|
|
|
||
|
|
.glyphicon-ok-circle
|
||
|
|
color: green
|
||
|
|
|
||
|
|
.glyphicon-remove-circle
|
||
|
|
color: red
|
||
|
|
|