mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-12-11 00:02:19 -05:00
168 lines
3.1 KiB
Sass
168 lines
3.1 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
|
|
|
|
.close
|
|
color: white
|
|
opacity: 0.5
|
|
right: 7px
|
|
&:hover
|
|
opacity: 0.9
|
|
|
|
.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
|
|
|
|
a span
|
|
text-decoration: underline
|
|
|
|
#choose-account-type-view, #segment-check-view, #basic-info-view, #coppa-deny-view, #single-sign-on-already-exists-view, #single-sign-on-confirm-view, #confirmation-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
|
|
|
|
.form-container
|
|
width: 800px
|
|
|
|
.form-group
|
|
text-align: left
|
|
|
|
.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
|
|
|