mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-12-11 00:02:19 -05:00
73bbe598da
Improve image gallery Add How to Copy/Paste section Fix modal close button Add specs for image gallery Fix up i18n Fix render resetting scroll Address code review feedback Ensure afterRender is called
170 lines
3.2 KiB
Sass
170 lines
3.2 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
|
|
max-height: 90vh
|
|
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
|
|
max-height: 10.5vh
|
|
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, #extras-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
|
|
|