ng2-branchy/src/menu/node-menu.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-menu-item-icon(content)
  content: content
  font-family primary-icons-font-family

// styles
.node-menu
  position relative
  width 150px

  .node-menu-content
    width 100%
    padding 5px
    position absolute
    border 1px solid color-grey
    border-radius 5%
    box-shadow 0 0 5px color-grey
    background-color color-light-grey
    color color-black
    font-family primary-font-family

    li.node-menu-item
      list-style none
      padding 3px

    .node-menu-item
      &:hover
        border-radius 5%
        opacity unset
        cursor pointer
        background-color color-grey
        transition background-color 0.2s ease-out

      .node-menu-item-icon
        display inline-block
        width 16px

        &.new-tag:before
          node-menu-item-icon(tag-icon)

        &.new-folder:before
          node-menu-item-icon(folder-icon)

        &.rename:before
          node-menu-item-icon(rename-icon)

        &.remove:before
          node-menu-item-icon(remove-icon)

      .node-menu-item-value
        margin-left 5px