scout.tree.Tree.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of org.eclipse.scout.rt.ui.html Show documentation
There is a newer version: 25.1.0-beta.0
Show newest version
/*******************************************************************************
 * Copyright (c) 2014-2015 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-node-padding: 6px;

.tree {
  position: relative;
  height: 100%;
  width: 100%;

  &: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 */

  &.scrollable-tree >.tree-node{
    overflow: visible;
    text-overflow: initial;
    whitespace: normal;
  }
}

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

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

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

  &.disabled {
    color: @disabled-color;
  }

  /*first child is the scrollbar*/
  &:nth-of-type(1).selected {
    border-top-color: @item-selection-nonfocus-background-color;
  }

  & > .text {
    width: 100%;
    #scout.overflow-ellipsis-nowrap();
  }
}

.tree-node-checkbox {
  display: block;
  position: absolute;
  top: auto;
  left: auto;
  margin-top: -2px;
  margin-left: -@tree-node-checkbox-size - 4px;
  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 {
      cursor: default;
    }

    &::before {
      #scout.checkbox-before();
      margin-top: -12px;
    }

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

    &.disabled {
      #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: auto;
  left: auto;
  transition: transform 0.3s;
  cursor: pointer;

  /* adjust control position */
  margin-left: -@tree-node-control-size - 2px;
  margin-top: -1px;

  /* for good animation, ensure that the control is a square and the icon is centered */
  width: @tree-node-control-size;
  height: @tree-node-control-size;
  line-height: @tree-node-control-size;
  text-align: center;

  &::before {
    #scout.font-icon();
    font-size: @tree-node-control-size;
    content: @icon-angle-right;
    color: @border-color;

    .tree-node.leaf > & {
      content: '';
    }

    .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-control:hover::before {
      color: @hover-color;
    }
  }

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

  &.checkable {
    margin-left: -@tree-node-control-checkbox-size - 8px;
  }
}

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

  & > .tree-data {
    & > .tree-node,
    & > .animation-wrapper > .tree-node {
      overflow: visible;
      text-align: center;

      display: none;
      border-top: 0;
      border-bottom: 1px solid @border-color;

      /* !important is necessary here to override the element specific left-padding (calculated by Tree.js for level indentation). */
      padding: 10px @tree-node-padding 8px @tree-node-padding !important;

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

      &.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 !important;
}