eclipse-scout-core/src/tree/Tree.less

/*
 * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *     BSI Business Systems Integration AG - initial API and implementation
 */
.tree {
  position: relative;

  &:focus,
  &.focused {
    outline: none;

    & .tree-node.selected {
      background-color: @item-selection-background-color;
      border-color: @item-selection-border-color;
    }

    /* first child is the scrollbar */

    .tree-node:nth-of-type(1).selected {
      border-top-color: @item-selection-nonfocus-background-color;
    }
  }

  & > .menubar {
    padding-left: 8px;
    padding-right: 8px;
  }
}

.tree-data {
  /* necessary for scrollbars */
  position: relative;
  overflow: hidden;
  width: 100%; /* expand to outer container, needed for breadcrumb */

  /* required because text shouldn't go into ellipsis mode when scrollbars are enabled */

  &.scrollable-tree {
    overflow-anchor: none;

    & > .tree-node,
    & > .animation-wrapper > .tree-node {
      overflow: visible;
    }

    & > .tree-node > .text,
    & > .animation-wrapper > .tree-node > .text {
      text-overflow: clip;
    }
  }

  &.checkable {
    & > .tree-node,
    & > .animation-wrapper > .tree-node {
      cursor: pointer;
    }
  }
}

.navigation-breadcrumb .tree-data {
  float: left;
}

.tree-node {
  display: block;
  position: relative;
  border: 1px solid transparent;
  border-left: 0 solid transparent;
  border-right: 0 solid transparent;
  padding: @tree-node-padding-y @tree-node-padding-right @tree-node-padding-y @tree-node-padding-left;
  #scout.overflow-ellipsis-nowrap();

  &:active {
    background-color: @tree-node-active-background-color;
  }

  &.selected {
    background-color: @item-selection-nonfocus-background-color;
    border-color: @item-selection-nonfocus-border-color;
    border-left-color: transparent;
    border-right-color: transparent;
  }

  &.disabled {
    /* Tree node is disabled -> use lighter disabled color */
    color: @disabled-color;
  }

  .disabled > & {
    /* Whole tree is disabled -> use darker disabled color */
    color: @text-disabled-color;
  }

  .disabled.read-only > .tree-data > & {
    color: @text-color;
  }

  /*first child is the scrollbar*/

  &:nth-of-type(1).selected {
    border-top-color: @item-selection-nonfocus-background-color;
  }

  & > .text {
    vertical-align: top;
    display: inline-block;
    width: 100%; /* required for ellipsis */
    #scout.overflow-ellipsis-nowrap();
  }

  & > .icon {
    vertical-align: top;
    padding-right: 7px;
    display: inline-block;
    /* Use content-box for images because it leads to wrong behavior when someone sets a min-width/height
     * on an IMG element that has padding and the available space for the image is 'min-width' - 'padding'
     * See ticket 208111 */
    box-sizing: content-box;

    &.image-icon {
      margin-top: @tree-node-bitmap-icon-margin-top;
      /* required to reserve space for bitmap icons in the tree when image resource is not yet loaded */
      min-width: @tree-node-bitmap-icon-size;
      min-height: @tree-node-bitmap-icon-size;
    }

    &.font-icon {
      padding-right: 10px;
      /* Necessary to align with the text, depends on the used font size */
      line-height: @tree-node-font-icon-line-height;
    }
  }
}

.tree-node-checkbox {
  display: block;
  position: absolute;
  top: auto;
  left: auto;
  margin-top: @tree-node-checkbox-margin-top;
  margin-left: -@tree-node-checkbox-size - 8px;
  width: @tree-node-checkbox-size;
  height: @tree-node-checkbox-size;

  & .check-box {
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: @font-size-normal;
    #scout.checkbox();

    &.disabled,
    .tree.disabled > .tree-data > .tree-node > &,
    .tree.disabled > .tree-data > .animation-wrapper > .tree-node > & {

      cursor: default;
    }

    &::before {
      #scout.checkbox-before();
    }

    &.checked::before {
      #scout.checkbox-before-checked();
    }

    &.disabled,
    .tree.disabled > .tree-data > .tree-node > &,
    .tree.disabled > .tree-data > .animation-wrapper > .tree-node > & {
      #scout.checkbox-disabled();

      &::before {
        #scout.checkbox-before-disabled();
      }

      :hover::before {
        #scout.checkbox-before-disabled();
      }
    }

    &:not(.checked).children-checked::after {
      #scout.checkbox-after-children-checked();
    }

    &.disabled:not(.checked).children-checked::after {
      #scout.checkbox-after-children-checked-disabled();
    }
  }
}

.tree-node-control {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  padding: @tree-node-padding-y 8px @tree-node-padding-y @tree-node-control-padding-left;
  height: 100%;
  line-height: @tree-node-control-line-height; /* Necessary to align with the text, depends on the used font size */

  &::before {
    display: block;
    transition: transform 0.3s;
    #scout.font-icon();
    font-size: @tree-node-control-size;
    content: @icon-angle-right;
    color: @tree-node-control-color;

    .tree-node.lazy > & {
      #scout.font-text-normal();
      content: '+';
      /* Move to left because '+' sign is not as wide as 'arrow-down' */
      margin-left: -2px;
    }

    .tree-node.expanded > & {
      /* This "imprecise" angle is a workround for firefox to prevent shifting the div a little when the animation finishes. */
      /* See https://bugzilla.mozilla.org/show_bug.cgi?id=739176 */
      #scout.transform(rotate(89.99deg));
    }

  }

  &:hover::before {
    color: @highlight-color;
  }
}

/* bread crumb style */
.tree.breadcrumb {

  & > .tree-data {
    & > .tree-node,
    & > .animation-wrapper > .tree-node {
      overflow: visible;
      white-space: normal;
      display: none;
      border-top: 0;
      border-bottom: 1px solid @border-color;
      padding: 8px;

      &.ancestor-of-selected,
      &.child-of-selected,
      &.selected {
        display: block;
      }

      &.selected {
        color: @outline-selection-color;
        cursor: default;
      }

      /* arrow is created using ::before and ::after*/

      &.ancestor-of-selected::before,
      &.ancestor-of-selected::after,
      &.selected::before,
      &.selected::after {
        position: absolute;
        left: 50%;
        margin-left: -13px;
        border: solid transparent;
        content: '';
        height: 0;
        width: 0;
        z-index: 1;
      }

      &.ancestor-of-selected::before,
      &.selected::before {
        border-color: @border-color transparent transparent transparent;
        border-width: 6px 12px 0 12px;
        bottom: -7px;
      }

      &.ancestor-of-selected::after,
      &.selected::after {
        border-color: @control-background-color transparent transparent transparent;
        border-width: 6px 12px 0 12px;
        bottom: -6px;
      }

      &:active::after {
        border-top-color: @tree-node-active-background-color;
      }

      &.selected::after {
        border-top-color: @item-selection-nonfocus-background-color;
      }

      &.ancestor-of-selected.leaf::before,
      &.ancestor-of-selected.leaf::after,
      &.selected.leaf::before,
      &.selected.leaf::after {
        display: none;
      }

      & > .tree-node-control {
        display: none;
      }

      & > .text {
        white-space: normal;
        width: auto;
      }
    }
  }

  &:focus > .tree-data,
  &.focused > .tree-data {
    & > .tree-node,
    & > .animation-wrapper > .tree-node {

      &.parent-of-selected {
        border-color: @item-selection-border-color;
      }

      &.parent-of-selected::before {
        border-top-color: @item-selection-border-color;
      }

      &.selected {
        border-color: @item-selection-border-color;
      }

      &.selected::before {
        border-top-color: @item-selection-border-color;
      }

      &.selected::after {
        border-top-color: @item-selection-background-color;
      }
    }
  }
}

/* key handling */

.tree-node .key-box {
  top: calc(~'50% - 11px');
}

.tree > .tree-data > .key-box {
  top: 6px;
  left: 4px;
}