codecombat/app/views/core/CreateAccountModal/create-account-modal.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