zui/src/less/views/tree.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// ZUI: tree.less
/// http://openzui.com
/// ========================================================================
/// Copyright 2016 cnezsoft.com; Licensed MIT
/// ========================================================================


// Tree view

.tree {
  padding-left: 0;

  ul {
    display: none;
    padding-left: 0;
    position: relative;
  }

  li {
    list-style: none;
    position: relative;
    padding: 2px 0 2px 20px;

    &:before {
      display: block;
      content: ' ';
      width: 3px;
      height: 3px;
      background-color: #999;
      position: absolute;
      left: 8px;
      top: 10px;
    }

    &.has-list:before { display: none; }

    > .list-toggle {
      position: absolute;
      left: 0;
      top: -1px;
      width: 20px;
      line-height: 24px;
      text-align: center;
      color: @color-gray;
      cursor: pointer;
      z-index: 10;

      &:before { content: @icon-check-plus; }

      &:hover,
      &:active {
        color: @link-hover-color;
      }
    }

    &.open {
      > ul { display: block; }

      > .list-toggle:before { content: @icon-check-minus; }
    }
  }
}

.tree-actions {
  display: inline-block;
  margin-left: 5px;
  opacity: 0;
  transition: opacity 0.1s;
}

.tree-action {
  display: inline-block;
  margin-left: 5px;
  color: @color-gray;

  &:hover,
  &:active {
    text-decoration: none;
  }
}

.tree li:hover > .tree-actions,
.tree-item-wrapper:hover > .tree-actions {
  opacity: 1;
}

.tree-drag-holder {
  opacity: 0.4;
  background-color: @color-pale;
}

.tree .sort-handler { cursor: move; }

.tree-animate {
  ul {
    opacity: 0;
    transform: scale(1, .5);
    .transition-fast(opacity, transform);
  }

  li {
    &.open.in {
      > ul {
        transform: scale(1, 1);
        opacity: 1;
      }
    }
  }

  &.tree-lines li.has-list.open > ul:after {left: -11px; top: -5px; bottom: 12px;}
}

.tree-lines {
  ul > li {
    &:after {
      display: block;
      position: absolute;
      content: ' ';
      border-top: 1px dotted #999;
      top: 11px;
      left: -10px;
      z-index: 1;
      width: 22px;
    }

    &:before,
    &.has-list:before {
      background: none;
      content: ' ';
      display: block;
      position: absolute;
      width: auto;
      height: auto;
      border: none;
      border-left: 1px dotted #999;
      top: -12px;
      bottom: 12px;
      left: -11px;
    }

    &:last-child:before {
      bottom: auto;
      height: 23px;
    }

    &:first-child:before {
      top: -5px;
    }

    &.tree-single-item:before {
      height: 19px;
    }

    &.has-list:after {
      width: 14px;
    }

    &.drag-shadow:after {display: none}
  }
}

.tree-folders {
  li > .list-toggle:before {content: '\e6ef'}
  li.open > .list-toggle:before {content: '\e6f0'}

  &.tree-lines ul > li:first-child:before {top: -6px;}

  &.tree-lines li.has-list.open > ul:after {top: 16px}
  ul > li.has-list:after {width: 13px}
  ul > li.has-list.open:after {width: 15px}
}

.tree-chevrons {
  li > .list-toggle:before {content: '\e710'}
  li.open > .list-toggle:before {content: '\e712'}

  li:before {background-color: @color-gray-light; width: 10px; height: 10px; border-radius: 5px; left: 4px; top: 6px;}

  ul > li:after {width: 13px}
}

.tree-angles {
  li > .list-toggle:before {content: '\e6e1'}
  li.open > .list-toggle:before {content: '\e6e3'}

  ul > li.has-list:after {width: 15px}
}


// Tree menu

.tree-menu {
  border: 1px solid @nav-primary-border-color;
  border-radius: @border-radius-base;
  overflow: hidden;

  li {
    padding: 0;

    &:before {display: none;}

    > a {
      margin-bottom: -1px;
      color: @color-fore;
      padding: 8px;
      display: block;
      > .icon {
        color: inherit;
        opacity: .6;
        display: inline-block;
        width: 20px;
        text-align: left;
      }

      &:hover,
      &:active,
      &:focus {
        > .icon {
          opacity: .9;
        }
        text-decoration: none;
        background-color: rgba(0,0,0,.04);
        color: @link-hover-color;
      }
    }

    .list-toggle {
      left: auto;
      right: 4px;
      top: 6px;
      width: 24px;
      height: 24px;
      transition: all 0.3s;
      .opacity(0.45);

      &:before {
        content: @icon-chevron-right;
      }
    }

    &.open > .list-toggle {
      transform: rotate(90deg);
      .opacity(0.75);
      &:before {
        content: @icon-chevron-right;
      }
    }

    > ul {
      background-color: rgba(0,0,0,.04);
    }

    li a {
      padding-left: 28px;
      border-top-color: transparent;
      border-bottom-color: transparent;
    }
    li li a {padding-left: 48px;}
    li li li a {padding-left: 68px;}

    &.active > a {
      background-color: @component-active-bg;
      border-color: @component-active-bg;
      color: @component-active-color;
    }
    &.active > .list-toggle {
      color: @component-active-color;
    }
  }

  > li > a {
    border: 1px solid transparent;
    border-bottom-color: @nav-primary-border-color;
  }
  > li.open + li > a {
    border-top-color: @nav-primary-border-color;
  }
}