$forest-layout-top-teaser-height: 24px $forest-layout-bottom-teaser-height: 24px // ~line-height to 1.5 (covering tree) $node-popup-width: 544px ///////////////////////////////////////// .maintree $self: & // empirical vertical alignments for folder carets $caret-y-offset: 2px position: relative // @NOTE #386: React Awesome Popover not suited for the feature UX // ↪ for now just avoiding to create a new stacking context // could be a long term issue // z-index: 0 // new stacking context "tree" &__node margin-bottom: space-x(0.25) @include right-handed &__node margin-left: space-x(2) & > &__node margin-right: space-x(2) @include left-handed &__node margin-right: space-x(2) & > &__node margin-left: space-x(2) &--with-child > &__node > &::before color: $gray-400 position: absolute font-size: 11px top: $caret-y-offset // z-index macro-management due to "node__link::before" overlay z-index: z-index("tree", "content") @include right-handed content: "└" @include left-handed content: "┘" // for <Cloak> use cases animation: 15ms fade-in &--blank @extend %placeholder // adding an phase on top of <Cloak> ones // (aim is to only display the cloack fallback when // 1s has passed, in parallel of maintaining the Element // dimension) animation-name: fade-in animation-delay: 100ms animation-duration: 50ms animation-timing-function: ease-in-out animation-fill-mode: forwards opacity: 0 //////////////////////////////////// .mainleaf $self: & $leaf-margin-bottom: 3px display: flex align-items: center margin-bottom: $leaf-margin-bottom // forcing inline width to overflow its container width // this is mainly due to the multi-level of nested folders that keeps // increasing the mainleaf width // (as a "min-width" rule instead of "width" to allow the relative stacking // context used for the selected UI border) min-width: max-content position: relative @include right-handed flex-direction: row padding-right: space-x(2) @include left-handed flex-direction: row-reverse padding-left: space-x(2) //---------------------------- &__folder-icon font-size: 14px // @XXX Glyphicon icons lack of homogeneous width width: 16px // z-index macro-management due to "node__link::before" overlay z-index: z-index("tree", "content") &--leaf color: $gray-400 // padding instead of margin will ensure to add a gap for the icon call // to action area @include right-handed padding-right: space-x(1) @include left-handed padding-left: space-x(1) //---------------------------- &__node-icon position: relative font-size: 16px // @XXX Glyphicon icons lack of homogeneous width // (this also means that we can not align harmoniously the leaf // content) width: 14px // Micromanaging icons width as an attempt of alignment harmony .fa-address-card-o, .fa-newspaper-o font-size: 14px .fa-share-alt, .fa-globe-circle, .fa-folder-open-o, .fa-file-code-o, .fa-list, .fa-signal font-size: 15px .fa-user font-size: 17px .fa-lock, .fa-fork font-size: 18px .fa-circle font-size: 20px @include right-handed margin-right: space-x(1) @include left-handed margin-left: space-x(1) //---------------------------- &__version-badge // pin the icon on bottom-right of the "&__node-icon" $offset-y: -8px $offset-x: -4px position: absolute font-size: 12px background-color: $white border: 1px solid $white border-radius: 50% bottom: $offset-y right: $offset-x z-index: z-index("tree", "badge") // (?) unknown regresion: empirical offset re-alignement .b-icon-button__inner $offset-y: -3px $offset-x: 1px top: $offset-y left: $offset-x // (remove hover effect to maintain continuity with folder + node icon // lack of hover effect) &--matched &.b-icon-button, &.b-icon-button:hover color: $success &--mismatched &.b-icon-button, &.b-icon-button:hover color: $warning //---------------------------- &__node-link position: relative font-size: 15px @include right-handed margin-right: space-x(1) @include left-handed margin-left: space-x(1) // preparing "before" content (see "&--selected", "&--file-dropped") &::before // margin for the before background $overlay-offset: -2px // left extra offset: used to include besides icons, caret, ... $extra-left-overlay-offset: -56px // right extra offset: adding extra margin $extra-right-overlay-offset: - 12px position: absolute top: $overlay-offset bottom: $overlay-offset border-radius: $overlay-radius @include right-handed left: calc( #{ $overlay-offset } + #{ $extra-left-overlay-offset }) right: calc( #{ $overlay-offset } + #{ $extra-right-overlay-offset }) @include left-handed right: calc( #{ $overlay-offset } + #{ $extra-left-overlay-offset }) left: calc( #{ $overlay-offset } + #{ $extra-right-overlay-offset }) // creating a new stacking context due to the "::before" overlay & a position: relative //---------------------------- $icon-button-margin: space-x(2.25) &__settings-icon visibility: hidden &:hover &__settings-icon visibility: visible @include right-handed margin-left: $icon-button-margin @include left-handed margin-right: $icon-button-margin &__update-icon @include right-handed margin-left: $icon-button-margin @include left-handed margin-right: $icon-button-margin //---------------------------- &__update-icon, &__settings-icon // altering component overlay offset to fit it with the ".mainleaf" overlay // dimension $aside-icon-offset-y: -5px $aside-icon-offset-x: -6px &.b-icon-button::before top: $aside-icon-offset-y bottom: $aside-icon-offset-y left: $aside-icon-offset-x right: $aside-icon-offset-x //---------------------------- &__progress-bar $progress-bar-width: 64px $progress-bar-height: 8px width: $progress-bar-width position: relative &::before @include fit-positions(-3px) content: "" position: absolute border: 1px solid $info border-radius: $overlay-radius .b-progress-bar height: $progress-bar-height background-color: $white @include right-handed margin-left: space-x(2) @include left-handed margin-right: space-x(2) //---------------------------- &__version-comparator margin-top: space-x(1) li margin-left: space-x(3) list-style-type: disc line-height: 1.4 //---------------------------- &--selected & &__node-link::before content: "" background-color: $gray-100 &__node-link a color: $primary font-weight: bold //---------------------------- &--file-dropped #{ $self }__node-link::before content: "" border: 1px dotted $secondary //---------------------------- &--blank // for <Cloak> use cases $blank-color: $gray-100 $blank-link-width: 120px // roughly max size of a truncated node link text $blank-link-height: 12px $blank-link-offset-y: 5px color: $blank-color #{ $self }__folder-icon visibility: hidden // making a text placeholder block #{ $self }__node-link &::after content: "" background-color: $blank-color height: $blank-link-height width: $blank-link-width position: absolute top: $blank-link-offset-y .mainleaf-selection-indicator // blank line, but relying on the inserted blank character to set a // line-height → thus, this will define a block with the same height of the // "mainleaf" one @include virtual-space height: fit-content top: 0 right: 0 width: 4px background-color: $primary position: absolute box-shadow: 0 0 0 4px $white // z-index macro-management due to "node__link::before" overlay z-index: z-index("tree", "content") @include right-handed right: 0 border-top-left-radius: $border-radius border-bottom-left-radius: $border-radius @include left-handed left: 0 border-top-right-radius: $border-radius border-bottom-right-radius: $border-radius // (?) Chrome engine adds extra height to the overlay embedded settings icon // → set an empirical icon overlay position @media screen and (-webkit-min-device-pixel-ratio:0) $icon-overlay-bottom: -5px .awesome-popover .b-icon-button--overlay::before bottom: $icon-overlay-bottom // (?) FireFox engine adds extra height to the embedded settings // → set an empirical fixed height on its wrapper to avoid // an height flickering alteration (on mainleaf hover) ; // and modify the icon overlay position @-moz-document url-prefix() $simulated-mainleaf-overlay-height: 22.5px $icon-overlay-bottom: -3px .awesome-popover max-height: $simulated-mainleaf-overlay-height .b-icon-button--overlay::before bottom: $icon-overlay-bottom //////////////////////////////////////// .subtree $self: & &__node margin-top: space-x(0.25) &__inner 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) &__text margin-left: space-x(0.5) &--can-be-selected text-decoration: underline text-underline-offset: 2px // easing node reading (empirical) &--is-selected > &__inner // (only current node, not its children) text-decoration: underline font-weight: bold @include right-handed &__inner flex-direction: row text-align: left &__icons flex-direction: row &__children > #{ $self }__node padding-left: space-x(2) @include left-handed &__inner flex-direction: row-reverse text-align: right &__icons flex-direction: row-reverse &__children > #{ $self }__node padding-right: space-x(2.5) ///////////////////////////////////////// .forest-tree-node-modal // will enlarge popup when inner content is larger (see issue #315), // with a minimal width to avoid row item collapsing (see issue #324) width: fit-content min-width: $node-popup-width max-width: 100vw // override Bootstrap modal rules (via sizing props) .node-popup-tooltip .panel-actions font-size: 90% padding-left: space-x(2.5) .b-icon margin-right: space-x(1) font-size: 11px &__almost-useable color: $almost-useable &__development-in-progress color: $development-in-progress &__ok-to-use color: $ok-to-use // (?) avoid unnecessary informations display: none .popup-container display: flex flex-direction: column &__body display: flex justify-content: center background-color: $body-bg padding: space-x(5) space-x(7) gap: space-x(6) &__cta position: relative &__button font-size: 18px &__icon $offset-y: -9px $offset-x: -13px position: absolute top: $offset-y right: $offset-x font-size: 11px // @XXX SASS lacking of immediate parent selector &--almost-useable .popup-container__cta__icon color: $almost-useable &--development-in-progress .popup-container__cta__icon color: $development-in-progress &--ok-to-use .popup-container__cta__icon color: $ok-to-use // (?) avoid unnecessary informations display: none ///////////////////////////////////////// .frame-search.card $frame-width: 1000px $frame-height: 600px width: $frame-width height: $frame-height ///////////////////////////////////////// .forest-layout @include term-window overflow-x: clip // due to resizing content @include right-handed border-right: 2px solid $border-color @include left-handed border-left: 2px solid $border-color /////////////// &__action display: flex @include right-handed flex-direction: row padding-left: space-x(2) padding-right: space-x(1) &__button margin-right: space-x(2) @include left-handed flex-direction: row-reverse padding-left: space-x(1) padding-right: space-x(2) &__button margin-left: space-x(2) //////////////////////// &__tree margin-top: space-x(3) &:last-child margin-bottom: $forest-layout-bottom-teaser-height // remove leaf nested caret for first entry only & > .maintree--with-children > .maintree__node &::before, &::after content: none // remove horizontal offset for first entry only (see ".maintree") & > .maintree > .maintree__node @include right-handed margin-left: space-x(2) @include left-handed margin-right: space-x(2) ///////////////////////////////////////// .ids-selector .tree .children padding-left: 0.5em .leaf input margin: 0.1em ///////////////////////////////////////// .main-page__horizontal-tiles border-top: 2px solid $border-color .tile-block:not(:first-child) border-left: 2px solid $border-color .main-page__vertical-tiles border-left: 2px solid $border-color .tile-block:not(:first-child) border-top: 2px solid $border-color .tile-menu__popover border-radius: $border-radius background-color: $body-bg ///////////////////////////////////////// .phylo-config-form // @TODO: manage background color for all node Box popup background-color: $card-bg // @TODO: manage the blue color set on all node Box popup color: $body-color &__group padding-left: $card-spacer-x padding-right: $card-spacer-x // Apply Bootstrap "cart-footer" rules (see "_card.scss") &__submit padding: $card-spacer-y $card-spacer-x color: $card-cap-color background-color: $card-cap-bg border-top: $card-border-width solid $card-border-color //////////////////////////////////////// .file-type-tooltip @include centered position: absolute background-color: white z-index: z-index('main', 'floaty')