.tree margin-top: 10px .file-dropped background-color: #d8dfe5 .node-actions padding-left: 5px .update-button &.enabled cursor: pointer &.disabled cursor: wait // 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)