ng2-branchy/src/branchy.component.styl

angular2 component for visualizing data that can be naturally represented as a tree

@import 'common/styles/colors'
@import 'common/styles/fonts'

// mixins
node-folding(icon)
  content icon
  color color-dark-grey

// styles
ul
  padding 3px 0 3px 25px

li
  padding 0
  margin 0
  list-style none

.over-drop-target
  border 4px solid color-dark-grey
  transition: padding 0.2s ease-out
  padding 5px
  border-radius 5%

.tree
  box-sizing border-box
  font-family primary-font-family

  li
    list-style none
    cursor default

    div
      display inline-block
      box-sizing border-box

  .node-value
    display inline-block
    color color-black

    &:after
      display block
      padding-top -3px
      width 0
      height 2px
      background-color color-black
      content ''
      transition width 0.3s

    &:hover:after
      width 100%

  .node-selected
    &:after
      width 100%

  .folding
    width 25px
    display inline-block
    line-height 1px
    padding 0 5px
    font-weight bold

    &.node-collapsed
      cursor pointer
      &:before
        node-folding(folder-icon)

    &.node-expanded
      cursor pointer
      &:before
        node-folding(folder-opened-icon)

    &.node-leaf
      color color-black
      text-align center
      font-size 0.89em
      &:before
        node-folding(tag-icon)