@use "./abstract/_members" as * $forest-layout-top-teaser-height: 24px $forest-layout-bottom-teaser-height: 24px // ~line-height to 1.5 (covering tree) $node-popop-radius: 6px $node-popup-width: 544px @mixin forest-layout-gutter @include right-handed padding-left: space-x(2) padding-right: space-x(1) @include left-handed padding-left: space-x(1) padding-right: space-x(2) ///////////////////////////////////////// body > .tree ul > li:first-child::before top: 12px li .leaf display: flex flex-direction: row color: #005a9aff .folder-icon padding: 0 2 0 2 cursor: pointer .node-link a cursor: pointer & > .node-text color: #000000 a.settings cursor: pointer display: block padding: 0 2 0 2 text-decoration: none visibility: hidden z-index: 1 &:hover a.settings visibility: visible .tree ul li position: relative &::after content: " " height: 1px position: absolute top: 12px &::before bottom: -12px content: " " height: 7px 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 &.with-children &::after background-color: #000 &::before background-color: #000 .lefthanded .leaf justify-content : flex-end ul margin-right : 5px li margin-right: 10px padding-right: 5px &.with-children &::after right: -10px width: 5px &::before right: -10px width: 1px &:only-child::before //right: 1px .righthanded .leaf justify-content : flex-start ul margin-left : 5px li margin-left: 10px padding-left: 5px &.with-children &::after left: -10px width: 5px &::before left: -10px width: 1px &:only::before background-color: #000 right: 10px .file-dropped background-color: #d8dfe5 .node-actions padding-left: 5px .update-button &.enabled cursor: pointer &.disabled cursor: wait .node margin-top: 1px &.node-type-valid .text text-decoration: underline .subtree $self: & &__node margin-top: space-x(0.25) &__text display: flex align-items: center // align icon with text cursor: pointer font-size: 15px &__icons display: flex .fa margin-left: space-x(0.25) margin-right: space-x(0.25) &--can-be-selected text-decoration: underline text-underline-offset: 2px // easing node reading (empirical) @include right-handed &__text flex-direction: row text-align: left &__icons flex-direction: row &__children > #{ $self }__node padding-left: space-x(2) @include left-handed &__text flex-direction: row-reverse text-align: right &__icons flex-direction: row-reverse &__children > #{ $self }__node padding-right: space-x(2.5) .node-text display: inline-flex &--selected font-weight: bold text-decoration: underline @include right-handed flex-direction: row @include left-handed flex-direction: row-reverse // 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) #node-popup-tooltip // @XXX "react-awesome-popover" lack of parent host parameter // // hence, the popover will be added from within the overflow context // of component where its CTA lies, causing an issue with the hidden // overflow of its parent component // // to avoid a truncated popover, this position workaround has to be set // (so the popover will be hoisted to the overflow context of the window) // // @link https://gitlab.iscpif.fr/gargantext/purescript-gargantext/issues/302 position: fixed background-color: white border-radius: $node-popop-radius &:hover border: none text-decoration: none // @XXX "react-awesome-popover" lack of parent host parameter // // as the container where the popover will be appended is actually a // a heighthy sidebar (which a large is hidden with a scrollbar), // the library tends to add the tooltip position in the middle of the // sidebar height: which can be off screen // // this workaround appends the tooltip in a static position @include right-handed $offset-x: 16.6666666667% // simulate "col-2" sidebar attributes top: 50% left: $offset-x transform: translateY(-50%) @include left-handed $offset-x: 16.6666666667% // simulate "col-2" sidebar attributes top: 50% right: $offset-x transform: translateY(-50%) .tree .node margin-top: 5px .children .node padding-left: 15px .panel-actions .almost-useable color: orange .development-in-progress color: red .ok-to-use color: black .popup-container display: flex flex-direction: colum & > .card // will enlarge popup when inner content is larger (see issue #315), // with a minimal width to avoid row item collapsing (see issue #324) width: auto !important min-width: $node-popup-width border: 1px solid rgba(0,0,0,0.2) box-shadow: 0 2px 5px rgba(0,0,0,0.2) margin-bottom: initial .fa-pencil color: black .card-body display: flex justify-content: center background-color: white border: none .spacer margin: space-x(1) .frame-search.card border: 1px solid rgba(0,0,0,0.2) box-shadow: 0 2px 5px rgba(0,0,0,0.2) height: 600px width: 1000px .popup-container-body // empirical value (see issue #308, #315) max-height: 70vh overflow-y: auto .forest-layout-wrapper // removing Bootstrap "col" padding padding-left: 0 padding-right: 0 .forest-layout $offset-y: 56px z-index: 909 // make the sidebar a scrollable component // `max-width` rule is an addition due to Bootstrap "col-2" applied on its // parent position: fixed height: calc(100vh - #{ $offset-y }) width: 100% max-width: inherit // avoiding ugly scrollbar scrollbar-width: none overflow-y: scroll overflow-x: visible &::-webkit-scrollbar display: none transition: border 150ms .forest-layout-action @include forest-layout-gutter display: flex @include right-handed flex-direction: row &__button margin-right: space-x(2) @include left-handed flex-direction: row-reverse &__button margin-left: space-x(2) // UX addition: visually delimiting the sidebar on hover // -- for now in "_common.scss" file (see @TODO: More SASS structure) // UX best pratice: when a lengthy column is overflowy hidden (with a scroll), a teaser // UI element shows to the user that a scroll is possible .forest-layout-bottom-teaser $width: 16.6666666667% // simulate "col-2" sidebar attributes $minus-parent-border: 1px // border size of the sidebar on hover z-index: 1 // @TODO z-index stacking context management pointer-events: none position: fixed bottom: 0 height: $forest-layout-bottom-teaser-height width: calc(#{ $width } - #{ $minus-parent-border}) // background -- for now in "_common.scss" file (@TODO: More SASS structure) @include right-handed left: 0 @include left-handed right: 0 .forest-layout-top-teaser $minus-parent-border: 1px // border size of the sidebar on hover z-index: 1 // @TODO z-index stacking context management pointer-events: none position: sticky top: 0 height: $forest-layout-top-teaser-height width: calc(100% - #{ $minus-parent-border}) // background -- for now in "_common.scss" file (@TODO: More SASS structure) @include right-handed left: 0 @include left-handed right: 0 .forest-layout-content & > ul.tree // `ul` prefixed to override bootstrap "_reboot.scss" rules @include forest-layout-gutter margin-top: space-x(3) margin-bottom: 0 &:last-child margin-bottom: $forest-layout-bottom-teaser-height ///////////////////////////////////////// .ids-selector .tree .children padding-left: 0.5em .leaf input margin: 0.1em