Tree.sass 3.33 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
body > .tree ul > li:first-child::before
  top: 12px

li
  .leaf
    display: flex
    flex-direction: row
    .folder-icon
      padding: 0 2 0 2
    a.settings
      cursor: pointer
      display: block
      padding: 0 2 0 2
      text-decoration: none
      visibility: hidden
      z-index: 1
    &:hover
      a.settings
        visibility: visible

21
.tree
22 23 24 25 26 27 28 29 30 31 32 33
  margin-top: 20px
  ul
    li
      position: relative
      &::after
        content: " "
        height: 1px
        position: absolute
        top: 12px
      &::before
        bottom: -12px
        content: " "
34
        height: 7px
35 36 37 38 39 40 41 42 43 44 45 46
        position: absolute
        top: 5px
      &:not(:first-child):last-child::before
        display: none
      &:only-child::before
        bottom: 7px
        content: " "
        display: list-item
        //height: 7px
        position: absolute
        width: 1px
        top: 5px
47 48 49 50 51
      &.with-children
        &::after
          background-color: #000
        &::before
          background-color: #000
52 53

  .lefthanded
54 55
    .leaf
      justify-content : flex-end
56
    ul
57
      margin-right : 5px
58
      li
59
        margin-right: 10px
60
        padding-right: 5px
61 62 63 64 65 66 67 68 69
        &.with-children
          &::after
            right: -10px
            width: 5px
          &::before
            right: -10px
            width: 1px
          &:only-child::before
            //right: 1px
70
  .righthanded
71 72
    .leaf
      justify-content : flex-start
73
    ul
74
      margin-left : 5px
75
      li
76
        margin-left: 10px
77
        padding-left: 5px
78 79 80 81 82 83 84 85 86 87
        &.with-children
          &::after
            left: -10px
            width: 5px
          &::before
            left: -10px
            width: 1px
          &:only::before
            background-color: #000
            right: 10px
88

89 90 91 92 93 94 95 96 97
  .file-dropped
    background-color: #d8dfe5
  .node-actions
    padding-left: 5px
    .update-button
      &.enabled
        cursor: pointer
      &.disabled
        cursor: wait
98 99
  .node
    margin-top: 1px
100 101 102 103
    &.node-type-valid
      .text
        color: blue
        text-decoration: underline
104

105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141
// based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
.progress-pie
  background: rgba(51, 122, 183, 0.1)
  border-radius: 100%
  height: calc(var(--size, 14) * 1px)
  overflow: hidden
  position: relative
  width: calc(var(--size, 14) * 1px)

  .progress-pie-segment
    --a: calc(var(--over50, 0) * -100%)
    --b: calc((1 + var(--over50, 0)) * 100%)
    --degrees: calc((var(--offset, 0) / 100) * 360)
    -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
    clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
    height: 100%
    position: absolute
    transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg))
    transform-origin: 50% 100%
    width: 100%
    z-index: calc(1 + var(--over50))

    &:after,
    &:before
      background: var(--bg, rgb(51, 122, 183))
      content: ''
      height: 100%
      position: absolute
      width: 100%

    &:before
      --degrees: calc((var(--value, 45) / 100) * 360)
      transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg))
      transform-origin: 50% 0%

    &:after
      opacity: var(--over50, 0)
142 143 144 145 146 147 148 149

#node-popup-tooltip
  .tree
    .node
      margin-top: 5px
    .children
      .node
        padding-left: 15px