_tree.sass 3.77 KB
Newer Older
1 2 3 4 5 6 7
body > .tree ul > li:first-child::before
  top: 12px

li
  .leaf
    display: flex
    flex-direction: row
8
    color: #005a9aff
9

10 11
    .folder-icon
      padding: 0 2 0 2
12 13 14
      cursor: pointer

    .node-link
15 16 17 18
      a
        cursor: pointer
      & > .node-text
        color: #000000
19

20 21 22 23 24 25 26 27 28 29 30
    a.settings
      cursor: pointer
      display: block
      padding: 0 2 0 2
      text-decoration: none
      visibility: hidden
      z-index: 1
    &:hover
      a.settings
        visibility: visible

31 32 33 34
.forest
  & > .tree
    margin-top: 20px

35
.tree
36 37 38 39 40 41 42 43 44 45 46
  ul
    li
      position: relative
      &::after
        content: " "
        height: 1px
        position: absolute
        top: 12px
      &::before
        bottom: -12px
        content: " "
47
        height: 7px
48 49 50 51 52 53 54 55 56 57 58 59
        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
60 61 62 63 64
      &.with-children
        &::after
          background-color: #000
        &::before
          background-color: #000
65 66

  .lefthanded
67 68
    .leaf
      justify-content : flex-end
69
    ul
70
      margin-right : 5px
71
      li
72
        margin-right: 10px
73
        padding-right: 5px
74 75 76 77 78 79 80 81 82
        &.with-children
          &::after
            right: -10px
            width: 5px
          &::before
            right: -10px
            width: 1px
          &:only-child::before
            //right: 1px
83
  .righthanded
84 85
    .leaf
      justify-content : flex-start
86
    ul
87
      margin-left : 5px
88
      li
89
        margin-left: 10px
90
        padding-left: 5px
91 92 93 94 95 96 97 98 99 100
        &.with-children
          &::after
            left: -10px
            width: 5px
          &::before
            left: -10px
            width: 1px
          &:only::before
            background-color: #000
            right: 10px
101

102 103 104 105 106 107 108 109 110
  .file-dropped
    background-color: #d8dfe5
  .node-actions
    padding-left: 5px
    .update-button
      &.enabled
        cursor: pointer
      &.disabled
        cursor: wait
111 112
  .node
    margin-top: 1px
113 114 115
    &.node-type-valid
      .text
        text-decoration: underline
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 142 143 144 145 146 147 148 149 150 151 152 153
// 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)
154 155 156 157 158 159 160 161

#node-popup-tooltip
  .tree
    .node
      margin-top: 5px
    .children
      .node
        padding-left: 15px
162 163 164 165 166 167 168 169

.panel-actions
  .almost-useable
    color: orange
  .development-in-progress
    color: red
  .ok-to-use
    color: black
170

171 172 173 174 175 176 177 178 179 180 181 182
.forest-layout
  background-color: #fff
  position: fixed
  top: 3.7em
  width: 15%
  z-index: 999
.left-handed
  .forest-layout
    left: 80%
.right-handed
  .forest-layout
    left: 2%