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;
    }
  }
}

.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: flex;
  align-items: start;
  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: @read-only-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;
    flex-grow: 1;
    #scout.overflow-ellipsis-nowrap();
  }

  & > .icon {
    vertical-align: top;
    padding-right: 10px;
    display: inline-block;
    text-align: center;
    min-width: @tree-node-icon-width;
    /* 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 {
      /* 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 */
  color: @tree-node-control-color;

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

    .tree-node.lazy > & {
      font-family: @font-default-family;
      font-size: @font-size-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 {
    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,
        /* Selecting a node will remove all child-of-selected classes of the parent's children, hence the selected node will be temporarily invisible.
        If that happens the active state won't be removed correctly (browser bug?). To prevent this we make sure the node will not get invisible when touched. */
      &:active {
        display: flex;
      }

      &.selected {
        display: flex;
        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;
      }
    }
  }

  &: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;
}