@import bootstrap
@import bootstrap-tree
@import bootstrap-tagsinput
@import font-awesome


body
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif
  font-size: 15px
  line-height: 1.428571429
  padding-top: 60px

/* Hide for mobile, show later */
.sidebar
  display: none

@media (min-width: 768px)
  .sidebar
    position: fixed
    top: 51px
    bottom: 0
    left: 0
    z-index: 1000
    display: block
    padding: 0px
    overflow-x: hidden
    overflow-y: auto // Scrollable contents if viewport is shorter than content. */
    // background-color: #f5f5f5
    background-color: #ecf0f1
    border-right: 1px solid #eee

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif

.label.title
  display: table-caption
  margin: 0
  margin-bottom: .25em

.label.label-task
  @extend .label-warning

.btn.btn-task
  @extend .btn-warning

.label.label-bug
  @extend .label-danger

.btn.btn-bug
  @extend .btn-danger

.label.label-story
  @extend .label-primary

.btn.btn-story
  @extend .btn-primary

.label.label-project
  @extend .label-info

.btn.btn-project
  @extend .btn-info

.bootstrap-tagsinput
  width: 100% !important

.ticket-placeholder, .page-placeholder
  outline: 1px dashed #4183C4
  border-radius: 3px

.tree > ol
  padding: 0

li.mjs-nestedSortable-collapsed 
  > ol 
    display: none

  > .panel > .panel-body > .node-handle > .node-toggle > i.fa
    @extend .fa-plus-circle
    cursor: pointer

  // .node-handle:last > .node > i.fa
  //   content: ''

li.mjs-nestedSortable-expanded
  > .panel > .panel-body > .node-handle > .node-toggle > i.fa
    @extend .fa-minus-circle
    cursor: pointer

  // .node-handle:last-of-type > .node > i.fa
  //   cursor: ''

.story_who, .story_what, .story_why
  display: inline

  input
    display: inline

.story_who input
  width: 20%

.story_what input
  width: 62%

.story_why input
  width: 87%

// .breadcrumb li a
//   width: 110px
//   overflow: hidden
//   text-overflow: ellipsis
//   white-space: nowrap
//   display: inline-block

//   &:hover
//     display: inline

.ticket-state
  position: relative

.mce-content-body
  outline: 1px dotted #333

.node-handle
  cursor: move

.tree
  .tree-node
    margin: 3px 0

    .panel
      margin-bottom: 5px

    .node-title
      padding-left: 85px
      padding-right: 80px

    .panel-body
      padding: 5px

    .node-handle
      position: absolute
      top: 0
      left: 0
      height: 100%

      border: none
      height: 100%
      border-top-right-radius: 0
      border-bottom-right-radius: 0
      border-bottom-left-radius: 3px
      border-top-left-radius: 3px
      width: 75px
      padding: 5px 10px
      color: white
      background-color: #aeb1b1
      
      &.node-story
        background-color: $brand-primary

      &.node-task
        background-color: $brand-warning

      &.node-bug
        background-color: $brand-danger

    .details
      width: 110px
      position: absolute
      top: 0
      right: 0
      height: 100%

      .ticket-state
        height: 100%

        button.btn
          padding-right: 5px
          padding-top: 4px
          text-align: right
          width: 100px
          height: 100%
          border-top-right-radius: 3px
          border-bottom-right-radius: 3px
          border-bottom-left-radius: 0px
          border-top-left-radius: 0px

          &[data-state=open]
            border-color: $brand-primary
            background-color: $brand-primary

          &[data-state=completed]
            border-color: $brand-info
            background-color: $brand-info

          &[data-state=current]
            border-color: #aeb1b1
            background-color: #aeb1b1

          &[data-state=verified]
            border-color: $brand-success
            background-color: $brand-success

          i.fa
            margin-left: 3px

.page.tree-node
  .node-handle
    width: 35px
  .node-title
    padding-left: 45px

.page-list-item ul.nav-list-sub
  padding-left: 10px
  li a
    padding-left: 15px

.nav-list-panel .selected > a,
.nav-list-panel .selected > a:hover,
.nav-list-panel .selected > a:focus
  color: #fff
  background-color: #2986b9
  text-decoration: none

.wiki-title
  border-bottom: 1px dashed lightgray
  margin-bottom: 5px
  padding-bottom: .25em

.wiki-content
  min-height: 5em
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif
  font-size: 18px
  line-height: 1.6em

  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
    font-family: "Ubuntu", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif

.content-description
  clear: both

  table
    @extend .table

  h1
    border-bottom: 1px solid lightgray
    padding-bottom: .25em

.last-updated
  text-align: right
  .user, .time
    display: inline 

.space-link
  font-weight: bold

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
  font-family: "Bitter", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif

.attachment
  .actions a
    margin-right: .5em

div.tokenfield.form-control
  border: none

  &.focus
    border: none
    outline: none
    box-shadow: none

.meta
  margin-bottom: 10px