Boostnote/browser/styles/shared/modal.styl

.ModalBase
  fixed top left right bottom
  z-index 1000
  overflow-y auto
  overflow-x auto
  background-color modalBaseColor
  line-height 100%
  &.hide
    display none
  .modal
    width 600px
    margin 50px auto 0
    absolute top left right
    background-color white
    border-radius 10px
    padding 15px
    box-shadow popupShadow
    .modal-header
      border-bottom solid 1px borderColor
      margin-bottom 15px
      h1
        padding: 10px 0 15px;
        font-size: 1.5em;
    .modal-body
      p
        margin-bottom 15px
    .modal-footer
      clearfix()
      border-top solid 1px borderColor
      padding-top 15px
      .modal-control
        float right

  .LaunchModal
    .modal-tab
      text-align center
      margin-bottom 15px
      .btn-primary, .btn-default
        margin 0
        border-radius 0
        border-width 1px
        width 150px
        border-radius 0
        &:nth-child(1)
          border-right solid 1px borderColor
          border-top-left-radius 5px
          border-bottom-left-radius 5px
        &:nth-child(2)
          border-left none
          border-top-right-radius 5px
          border-bottom-right-radius 5px
  textarea.snippetDescription
    height 75px
    font-size 0.9em
  .Select
    .Select-control
      border-color borderColor
    &.is-focused
      .Select-control
        border-color brandBorderColor
    .Select-menu-outer
      border-color borderColor
  .ace_editor
    border-radius 5px
    border solid 1px borderColor
  .SnippetForm
    .modeSelect.Select
      display inline-block
      width 200px
      margin-top -15px
      top 14px
      height 37px
    .ace_editor
      height 258px
  .BlueprintForm
    .ace_editor
      height 358px
    .previewMode
      absolute top right
      font-size 0.8em
      line-height 24px
      padding 0 10px
      background-color transparentify(invBackgroundColor, 0.2)
      color invTextColor
      border-top-right-radius 5px
  .marked
    height 360px
    overflow-x hidden
    overflow-y auto
    box-sizing border-box
    padding 5px
    border solid 1px borderColor
    border-radius 5px
    marked()

  .PlanetCreateModal.modal, .PlanetAddUserModal.modal
    padding 60px 0
    .nameInput
      width 80%
      font-size 1.3em
      margin 35px auto
      text-align center
    .userNameSelect
      width 80%
      font-size 1.3em
      margin 35px auto
      text-align center
    .submitButton
      display block
      margin 0 auto
      box-sizing border-box
      width 55px
      height 55px
      circle()
      btnPrimary()
  .PlanetSettingModal.modal, .PersonalSettingModal.modal
    width 720px
    height 500px
    .settingNav
      absolute top bottom left
      width 200px
      box-sizing border-box
      padding 10px
      border-right solid 1px borderColor
      h1
        margin 40px auto
        font-size 1.5em
        color brandColor
        text-align center
      nav
        button
          font-size 1em
          display block
          box-sizing border-box
          padding 15px 15px
          margin 10px 0
          border none
          border-radius 10px
          width 100%
          text-align left
          background-color transparent
          color textColor
          cursor pointer
          transition 0.1s
          &:hover, &.hover
            background-color hoverBackgroundColor
          &:active, &.active
            color brandColor
    .settingBody
      absolute top bottom right
      left 200px
      padding 15px
  .PersonalSettingModal.modal
    .settingBody
      .profile
        height 500px
        padding-top 50px
        .profileTop
          box-sizing border-box
          height 200px
          border-bottom solid 1px borderColor
        .profileBottom
          margin-top 25px
          height 200px
        .profileFormRow
          clearfix()
          margin-bottom 15px
          label
            display block
            float left
            width 150px
            line-height 33px
            text-align left
          input
            float left
            width 250px
          .alertSuccess, .alertError, .alertInfo
            float right
            transition 0.1s
            overflow hidden
            white-space nowrap
            width 200px
            text-align center
            &.hide
              width 0
          .alertSuccess
            alertSuccess()
          .alertError
            alertError()
          .alertInfo
            alertInfo()
          .saveButton
            float right
      .contact
        height 500px
        padding-top 50px
        p
          text-align left
          margin-bottom 15px
          line-height 140%
        input
          margin-bottom 15px
        textarea
          margin-bottom 15px
          max-height 250px
        .contactFormRow
          clearfix()
          .saveButton
            float right
          .alertSuccess, .alertError, .alertInfo
            float right
            transition 0.1s
            overflow hidden
            white-space nowrap
            width 200px
            text-align center
            &.hide
              width 0
          .alertSuccess
            alertSuccess()
          .alertError
            alertError()
          .alertInfo
            alertInfo()
      .info
        text-align left
        .infoLabel
          margin 75px 0 25px
        .externalList
          padding-left 10px
          li
            margin 15px
      .logout
        text-align center
        .logoutLabel
          margin 100px 0 25px
          font-size 1.4em
        .userPhoto
          margin-bottom 25px
          circle()
          box-shadow 1px 1px 4px 0px #C5C5C5

  .PlanetSettingModal.modal
    .settingBody
      .planetProfile
        height 500px
        padding-top 50px
        .planetProfileForm
          height 275px
          box-sizing border-box
          border-bottom solid 1px borderColor
        .planetDeleteForm
          height 225px
          .planetDeleteControl
            margin-top 15px
            clearfix()
            .toggle
              float left
              transition width 0.3s, color 0.1s, border-color 0.1s
              overflow hidden
              white-space nowrap
              width 345px
              height 44px
              &.hide
                width 0
              .planetDeleteLabel
                display inline-block
                line-height 44px
              .cancelButton
                display inline-block
                margin-left 15px
                margin-right 0
            .deleteButton
              float left
      .members
        height 500px
        box-sizing border-box
        padding-top 50px
        .userList
          height 275px
          box-sizing border-box
          border-bottom solid 1px borderColor
          li
            clearfix()
            margin-bottom 10px
            img.userPhoto
              float left
              width 44px
              height 44px
              circle()
              box-shadow 1px 1px 4px 0px #C5C5C5
            .userName
              float left
              height 44px
              font-size 1.3em
              line-height 44px
              margin-left 15px
            .userControl
              float right
              height 44px
              .ownerLabel
                height 44px
                padding 0 15px
                line-height 44px
        .addUserForm
          height 225px
          .addUserLabel
            margin-top 15px
            font-size 1.3em
          .addUserControl
            clearfix()
            margin-top 15px
            .addUserSelect
              float left
              height 44px
              width 350px
              margin-top 5px
            .addUserSubmit
              float right