_tree.sass 16.6 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
    &__node
30
      margin-left: space-x(1.75)
arturo's avatar
arturo committed
31
    & > &__node
32
      margin-right: space-x(1.75)
33 34

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

40 41 42 43 44 45 46
  // &--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")
47

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
  &:hover
88
    background-color: $gray-300
89

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

    &--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
123
    font-size: 14px
arturo's avatar
arturo committed
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
    // @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"
155
    $offset-y: -1px
arturo's avatar
arturo committed
156 157 158 159 160 161 162 163 164
    $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")
166
    height: 14px
arturo's avatar
arturo committed
167

168 169 170 171 172 173 174 175
    // (?) 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
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
191
    font-size: 14px
192
    min-width: 0
arturo's avatar
arturo committed
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 219

    @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
220 221 222
    // creating a new stacking context due to the "::before" overlay
    & a
      position: relative
223 224 225 226 227 228 229 230 231 232 233 234 235
      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
236

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

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

  &:hover &__settings-icon
    visibility: visible

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

254 255 256 257 258 259 260 261 262 263 264 265 266 267
  &__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
268
  &__update-icon
269
    position: absolute
arturo's avatar
arturo committed
270 271

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

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

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

287 288 289 290 291
    // &.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
292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313

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

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

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

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

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

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

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

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

342
  &--selected
Fabien Manière's avatar
Fabien Manière committed
343
    background-color: $gray-300
344

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

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

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

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

387 388 389 390 391 392 393 394 395 396

.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
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
  @include right-handed
587
    border-right: 1px solid $border-color
588 589 590

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

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

594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629
  @mixin top-teaser()
    background: linear-gradient(to top, mix-alpha($body-bg, 0%) 0%, mix-alpha($body-bg, 100%) 45%)

  &__actions
    z-index: 3
    border-bottom: 1px solid $gray-300

    // $teaser-height: 16px

    // &::after 
    //   @include top-teaser

    //   content: ""
    //   z-index: z-index("tile", "top-teaser")
    //   pointer-events: none
    //   position: sticky
    //   top: 0
    //   height: $teaser-height
    //   width: 100%
    //   display: block


  &__top_action
    & > span
      display: flex
    button
      padding-top: 1px !important
      padding-bottom: 1px !important
      .b-button__inner
        display: flex
        @include right-handed
          flex-direction: row
        @include left-handed
          flex-direction: row-reverse


arturo's avatar
arturo committed
630 631
  &__action
    display: flex
632

arturo's avatar
arturo committed
633 634 635 636
    @include right-handed
      flex-direction: row
      padding-left: space-x(2)
      padding-right: space-x(1)
637

arturo's avatar
arturo committed
638 639
      &__button
        margin-right: space-x(2)
640
        white-space: nowrap
641

arturo's avatar
arturo committed
642 643 644 645
    @include left-handed
      flex-direction: row-reverse
      padding-left: space-x(1)
      padding-right: space-x(2)
646

arturo's avatar
arturo committed
647 648
      &__button
        margin-left: space-x(2)
649

arturo's avatar
arturo committed
650
  ////////////////////////
651

arturo's avatar
arturo committed
652 653
  &__tree
    margin-top: space-x(3)
654

arturo's avatar
arturo committed
655 656
    &:last-child
      margin-bottom: $forest-layout-bottom-teaser-height
657

arturo's avatar
arturo committed
658 659
    // remove leaf nested caret for first entry only
    & > .maintree--with-children > .maintree__node
660

arturo's avatar
arturo committed
661 662
      &::before,
      &::after
663
        content: none
664

arturo's avatar
arturo committed
665 666 667
    // remove horizontal offset for first entry only (see ".maintree")
    & > .maintree > .maintree__node
      @include right-handed
668
        margin-left: space-x(0.5)
arturo's avatar
arturo committed
669
      @include left-handed
670
        margin-right: space-x(0.5)
671

672 673 674 675 676 677 678 679 680
/////////////////////////////////////////

.ids-selector
  .tree
    .children
      padding-left: 0.5em
      .leaf
        input
          margin: 0.1em
681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720

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

.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
721 722 723 724 725 726 727 728 729

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

.file-type-tooltip
  @include centered

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