_tree.sass 15.8 KB
Newer Older
1 2
$forest-layout-top-teaser-height: 24px
$forest-layout-bottom-teaser-height: 24px // ~line-height to 1.5 (covering tree)
3 4
$node-popup-width: 544px

arturo's avatar
arturo committed
5 6 7 8 9 10 11 12 13
/////////////////////////////////////////

.maintree
  $self: &
  // empirical vertical alignments for folder carets
  $caret-y-offset: 2px

  position: relative

arturo's avatar
arturo committed
14 15 16 17 18
  // @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"

arturo's avatar
arturo committed
19 20
  &__node
    margin-bottom: space-x(0.25)
21 22 23 24 25 26
    min-width: 0

    a:hover,
    a:focus
      text-decoration: none
      border-bottom: 1px dashed currentColor
27 28

  @include right-handed
arturo's avatar
arturo committed
29 30 31 32
    &__node
      margin-left: space-x(2)
    & > &__node
      margin-right: space-x(2)
33 34

  @include left-handed
arturo's avatar
arturo committed
35 36 37 38
    &__node
      margin-right: space-x(2)
    & > &__node
      margin-left: space-x(2)
39

arturo's avatar
arturo committed
40 41 42 43 44
  &--with-child > &__node > &::before
    color: $gray-400
    position: absolute
    font-size: 11px
    top: $caret-y-offset
arturo's avatar
arturo committed
45 46
    // z-index macro-management due to "node__link::before" overlay
    z-index: z-index("tree", "content")
47

arturo's avatar
arturo committed
48 49 50 51
    @include right-handed
      content: "└"
    @include left-handed
      content: "┘"
52

arturo's avatar
arturo committed
53 54
  // for <Cloak> use cases
  animation: 15ms fade-in
55

arturo's avatar
arturo committed
56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
  &--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: &

  display: flex
  align-items: center
77 78
  padding-top: 2px
  padding-bottom: 2px
arturo's avatar
arturo committed
79 80 81
  // 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
82 83
  // (as a "min-width" rule instead of "width" to allow the relative stacking
  // context used for the selected UI border)
84
  min-width: 0
85
  position: relative
arturo's avatar
arturo committed
86

87 88 89
  &:hover
    background-color: $gray-100

arturo's avatar
arturo committed
90
  @include right-handed
91
    flex-direction: row
arturo's avatar
arturo committed
92
    padding-right: space-x(2)
93
    padding-left: space-x(.5)
94

arturo's avatar
arturo committed
95 96 97
  @include left-handed
    flex-direction: row-reverse
    padding-left: space-x(2)
98
    padding-right: space-x(.5)
99

arturo's avatar
arturo committed
100
  //----------------------------
101

arturo's avatar
arturo committed
102 103 104 105
  &__folder-icon
    font-size: 14px
    // @XXX Glyphicon icons lack of homogeneous width
    width: 16px
arturo's avatar
arturo committed
106 107
    // z-index macro-management due to "node__link::before" overlay
    z-index: z-index("tree", "content")
arturo's avatar
arturo committed
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 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164

    &--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-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
arturo's avatar
arturo committed
165
    z-index: z-index("tree", "badge")
arturo's avatar
arturo committed
166

167 168 169 170 171 172 173 174
    // (?) unknown regresion: empirical offset re-alignement
    .b-icon-button__inner
      $offset-y: -3px
      $offset-x: 1px

      top: $offset-y
      left: $offset-x

arturo's avatar
arturo committed
175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190
    // (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
191
    min-width: 0
arturo's avatar
arturo committed
192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218

    @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 })

arturo's avatar
arturo committed
219 220 221
    // creating a new stacking context due to the "::before" overlay
    & a
      position: relative
222 223 224 225 226 227 228 229 230 231 232 233 234
      span
        $span-padding: space-x(3)
        
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
        display: block
        
        @include right-handed
          padding-right: $span-padding

        @include left-handed
          padding-left: $span-padding
arturo's avatar
arturo committed
235

arturo's avatar
arturo committed
236
  //----------------------------
237
  $icon-button-margin: space-x(1.75)
arturo's avatar
arturo committed
238 239 240

  &__settings-icon
    visibility: hidden
241
    position: absolute
arturo's avatar
arturo committed
242 243 244 245 246

  &:hover &__settings-icon
    visibility: visible

    @include right-handed
arturo's avatar
arturo committed
247
      margin-left: $icon-button-margin
248
      right: space-x(2)
arturo's avatar
arturo committed
249
    @include left-handed
arturo's avatar
arturo committed
250
      margin-right: $icon-button-margin
251
      left: space-x(2)
arturo's avatar
arturo committed
252

253 254 255 256 257 258 259 260 261 262 263 264 265 266
  &__pin-icon
    visibility: hidden
    position: absolute

  &:hover &__pin-icon
    visibility: visible

    @include right-handed
      margin-left: $icon-button-margin
      right: space-x(8)
    @include left-handed
      margin-right: $icon-button-margin
      left: space-x(8)

arturo's avatar
arturo committed
267
  &__update-icon
268
    position: absolute
arturo's avatar
arturo committed
269 270

    @include right-handed
arturo's avatar
arturo committed
271
      margin-left: $icon-button-margin
272
      right: space-x(5)
arturo's avatar
arturo committed
273
    @include left-handed
arturo's avatar
arturo committed
274
      margin-right: $icon-button-margin
275
      left: space-x(5)
arturo's avatar
arturo committed
276 277 278

  //----------------------------

279 280
  // &__update-icon,
  // &__settings-icon
arturo's avatar
arturo committed
281 282
    // altering component overlay offset to fit it with the ".mainleaf" overlay
    // dimension
283 284
    // $aside-icon-offset-y: -5px
    // $aside-icon-offset-x: -6px
arturo's avatar
arturo committed
285

286 287 288 289 290
    // &.b-icon-button::before
    //   top: $aside-icon-offset-y
    //   bottom: $aside-icon-offset-y
    //   left: $aside-icon-offset-x
    //   right: $aside-icon-offset-x
arturo's avatar
arturo committed
291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312

  //----------------------------

  &__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

313 314
      .progress-text
        color: $info
315 316 317 318
        font-size: 0.55rem
        line-height: 0.55rem
        white-space: nowrap
        overflow: hidden
319

arturo's avatar
arturo committed
320 321
    @include right-handed
      margin-left: space-x(2)
322 323
      &:last-child
        margin-right: space-x(3)
arturo's avatar
arturo committed
324 325
    @include left-handed
      margin-right: space-x(2)
326 327
      &:last-child
        margin-left: space-x(3)
arturo's avatar
arturo committed
328 329 330 331 332

  //----------------------------

  &__version-comparator
    margin-top: space-x(1)
333 334

    li
arturo's avatar
arturo committed
335 336 337 338 339 340
      margin-left: space-x(3)
      list-style-type: disc
      line-height: 1.4

  //----------------------------

341 342 343
  &--selected
    background-color: $gray-100

arturo's avatar
arturo committed
344
  &--selected &
345 346 347 348

    // &__node-link::before
    //   content: ""
    //   background-color: $gray-100
arturo's avatar
arturo committed
349

arturo's avatar
arturo committed
350
    &__node-link a
arturo's avatar
arturo committed
351 352 353 354 355 356 357 358 359 360 361 362 363 364 365
      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
arturo's avatar
arturo committed
366
    $blank-link-width: 120px // roughly max size of a truncated node link text
arturo's avatar
arturo committed
367 368 369 370 371 372 373 374 375 376 377
    $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

378
      &::after
arturo's avatar
arturo committed
379 380 381 382
        content: ""
        background-color: $blank-color
        height: $blank-link-height
        width: $blank-link-width
383
        position: absolute
arturo's avatar
arturo committed
384
        top: $blank-link-offset-y
385

386 387 388 389 390 391 392

.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
393
  padding: space-x(.25) 0
394 395 396

  top: 0
  right: 0
397
  width: 3px
398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414
  background-color: $primary
  position: absolute

  // 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


arturo's avatar
arturo committed
415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437
// (?) 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
438

arturo's avatar
arturo committed
439 440
////////////////////////////////////////

441 442 443 444 445 446
.subtree
  $self: &

  &__node
    margin-top: space-x(0.25)

arturo's avatar
arturo committed
447
    &__inner
448 449 450 451 452 453 454 455 456 457 458 459
      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)

arturo's avatar
arturo committed
460 461 462
    &__text
      margin-left: space-x(0.5)

463 464 465 466
    &--can-be-selected
      text-decoration: underline
      text-underline-offset: 2px // easing node reading (empirical)

arturo's avatar
arturo committed
467 468
    &--is-selected > &__inner
      // (only current node, not its children)
arturo's avatar
arturo committed
469 470 471
      text-decoration: underline
      font-weight: bold

472 473
    @include right-handed

arturo's avatar
arturo committed
474
      &__inner
475 476 477 478 479 480 481 482 483 484 485
        flex-direction: row
        text-align: left

      &__icons
        flex-direction: row

      &__children > #{ $self }__node
        padding-left: space-x(2)

    @include left-handed

arturo's avatar
arturo committed
486
      &__inner
487 488 489 490 491 492 493 494 495
        flex-direction: row-reverse
        text-align: right

      &__icons
        flex-direction: row-reverse

      &__children > #{ $self }__node
        padding-right: space-x(2.5)

arturo's avatar
arturo committed
496
/////////////////////////////////////////
497

498 499 500 501 502 503 504 505
.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
506

507
  .panel-actions
508 509 510 511 512
    font-size: 90%
    padding-left: space-x(2.5)

    .b-icon
      margin-right: space-x(1)
513
      font-size: 11px
514

515
    &__almost-useable
516
      color: $almost-useable
517
    &__development-in-progress
518
      color: $development-in-progress
519
    &__ok-to-use
520 521 522
      color: $ok-to-use
      // (?) avoid unnecessary informations
      display: none
523 524 525

  .popup-container
    display: flex
526
    flex-direction: column
527

528 529 530 531 532 533 534 535 536 537
    &__header
      .b-wad
        .fa-pencil
          visibility: hidden

        &:hover
          .fa-pencil
            visibility: visible


538 539 540 541
    &__body
      display: flex
      justify-content: center
      background-color: $body-bg
542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569
      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

570 571 572 573 574 575 576 577
/////////////////////////////////////////

.frame-search.card
  $frame-width: 1000px
  $frame-height: 600px

  width: $frame-width
  height: $frame-height
578

arturo's avatar
arturo committed
579
/////////////////////////////////////////
580

581
.forest-layout
arturo's avatar
arturo committed
582
  @include term-window
583

arturo's avatar
arturo committed
584
  overflow-x: clip // due to resizing content
585

586 587 588 589 590
  @include right-handed
    border-right: 2px solid $border-color

  @include left-handed
    border-left: 2px solid $border-color
591

arturo's avatar
arturo committed
592
  ///////////////
593

arturo's avatar
arturo committed
594 595
  &__action
    display: flex
596

arturo's avatar
arturo committed
597 598 599 600
    @include right-handed
      flex-direction: row
      padding-left: space-x(2)
      padding-right: space-x(1)
601

arturo's avatar
arturo committed
602 603
      &__button
        margin-right: space-x(2)
604
        white-space: nowrap
605

arturo's avatar
arturo committed
606 607 608 609
    @include left-handed
      flex-direction: row-reverse
      padding-left: space-x(1)
      padding-right: space-x(2)
610

arturo's avatar
arturo committed
611 612
      &__button
        margin-left: space-x(2)
613

arturo's avatar
arturo committed
614
  ////////////////////////
615

arturo's avatar
arturo committed
616 617
  &__tree
    margin-top: space-x(3)
618

arturo's avatar
arturo committed
619 620
    &:last-child
      margin-bottom: $forest-layout-bottom-teaser-height
621

arturo's avatar
arturo committed
622 623
    // remove leaf nested caret for first entry only
    & > .maintree--with-children > .maintree__node
624

arturo's avatar
arturo committed
625 626
      &::before,
      &::after
627
        content: none
628

arturo's avatar
arturo committed
629 630 631
    // remove horizontal offset for first entry only (see ".maintree")
    & > .maintree > .maintree__node
      @include right-handed
632
        margin-left: space-x(1.5)
arturo's avatar
arturo committed
633
      @include left-handed
634
        margin-right: space-x(1.5)
635

636 637 638 639 640 641 642 643 644
/////////////////////////////////////////

.ids-selector
  .tree
    .children
      padding-left: 0.5em
      .leaf
        input
          margin: 0.1em
645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684

/////////////////////////////////////////

.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
685 686 687 688 689 690 691 692 693

////////////////////////////////////////

.file-type-tooltip
  @include centered

  position: absolute
  background-color: white
  z-index: z-index('main', 'floaty')