zui/src/less/views/treemap.less

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

/// ========================================================================
/// ZUI: treemap.less
/// http://openzui.com
/// ========================================================================
/// Copyright 2017 cnezsoft.com; Licensed MIT
/// ========================================================================

.treemap-data {
  text-align: left;
}

.treemap-nodes {
  -moz-user-select: none;
  -webkit-user-select: none;
  padding: 10px;
  display: table;
  position: relative;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.treemap-node {
  display: table-cell;
  vertical-align: top;
}

.treemap-node-wrapper {
  display: inline-block;
  border: 1px solid #808080;
  padding: 5px 10px;
  position: relative;
  border-radius: 1px;
  z-index: 5;

  a& {
    color: @color-fore;
    cursor: pointer;

    &:active,
    &:focus,
    &:hover {
      color: @color-primary;
      background-color: @color-pale;
      border-color: @color-primary;
      text-decoration: none;
    }
  }

  .treemap-node-root > & {
    background-color: rgba(0,0,0,.1);
  }
}

.treemap-node-children {
  display: table;
  margin-top: 20px auto 0;
}

.treemap-line-top,
.treemap-line-bottom {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -1px;
  border-right: none!important;
  border-bottom: none!important;
}

.treemap-line-top {
  top: 0;
}

.treemap-node > .treemap-line {
  position: absolute;
  left: 0;
  right: 0;
  border-right: none!important;
  border-bottom: none!important;
  z-index: 1;
}

.treemap-node-fold-icon {
  transition: opacity .2s, transform .1s;
  opacity: 0;
  background-color: @color-back;
  border-radius: 5px;
  display: block!important;
  width: 10px;
  height: 10px;
  line-height: 10px;
  position: absolute;
  left: -5px;
  top: -6px;
  z-index: 10;
  color: @color-gray;

  &:before {
    content: @icon-collapse-alt;
    min-width: 10px;
  }
}
.treemap-node-wrapper:hover .treemap-node-fold-icon {
  opacity: 1;
}
.treemap-node {
  &.collapsed {
    > .treemap-line,
    .treemap-line-bottom {border-color: transparent!important;}
    > .treemap-node-children {display: none}

    .treemap-node-fold-icon {
      opacity: 1;
      color: @color-gray;
      transform: none!important;
      top: -6px;

      &:before {
        content: @icon-expand-alt;
      }
    }
  }

  &.tree-node-collapsing {
    > .treemap-line,
    > .treemap-node-children {
      visibility: hidden;
    }
  }
}