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 500px
    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
    .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
    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 15px
        font-size 1.5em
        color brandColor
      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
      .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
      .manageMember
        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()
            .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