quasar-framework/src/components/tree/tree.mat.styl

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

.q-tree-node
  margin 0
  list-style-type none
  position relative
  padding 0 0 3px 22px

  &:after
    content ''
    position absolute
    top -3px
    bottom 0
    width 1px
    right auto
    left -13px
    border-left 1px solid currentColor
  &:last-child:after
    display none

.q-tree-node-header:before
  content ''
  position absolute
  top -3px
  bottom 50%
  width 35px
  left -35px
  border-left 1px solid currentColor
  border-bottom 1px solid currentColor

.q-tree-children
  padding-left 25px
  &.disabled
    pointer-events none
.q-tree-node-body
  padding 5px 0 8px 5px

.q-tree-node-parent
  padding-left 2px
  > .q-tree-node-header:before
    width 15px
    left -15px
  > .q-tree-node-collapsible > .q-tree-node-body
    padding 5px 0 8px 27px
    &:after
      content ''
      position absolute
      top 0
      width 1px
      height 100%
      right auto
      left 12px
      border-left 1px solid currentColor
      bottom 50px

.q-tree-node-link
  cursor pointer

.q-tree-node-selected
  background rgba(0, 0, 0, .15)
.q-tree-dark .q-tree-node-selected
  background rgba(255, 255, 255, .4)

body.desktop
  .q-tree-node-link:hover
    background rgba(0, 0, 0, .1)
  .q-tree-dark .q-tree-node-link:hover
    background rgba(255, 255, 255, .3)

.q-tree-node-header
  padding 4px
  margin-top 3px
  border-radius $generic-border-radius
  &.disabled
    pointer-events none
.q-tree-icon
  font-size 1.5em
.q-tree-img
  height 3em
  &.avatar
    width 2em
    height 2em

.q-tree-arrow
  font-size 1rem
  width 1rem
  height 1rem
.q-tree-arrow-rotate
  transform rotate(90deg)
[dir=rtl]
  .q-tree-arrow
    transform rotate(180deg) /* rtl:ignore */
  .q-tree-arrow-rotate
    transform rotate(90deg) /* rtl:ignore */

.q-tree
  // Remove connectors before root
  > .q-tree-node
    padding 0
    &:after, > .q-tree-node-header:before
      display none
  // leave space for root empty node
  > .q-tree-node-child > .q-tree-node-header
    padding-left 24px