vue-ant-patterns/lib/d-switch-tree/style/index.less

vue-ant-patterns

@import '../../style/themes/index.less';
@import '../../style/mixins/flex.less';

@depot-prefix-cls: ~'@{depot-prefix}-switch-tree';

.@{depot-prefix-cls} {
  &.ant-menu-inline,
  &.ant-menu-vertical,
  &.ant-menu-vertical-left {
    border: none;
    background: none;
  }

  &.ant-menu-inline .ant-menu-item,
  &.ant-menu-inline .ant-menu-submenu-title {
    width: 100%;
  }

  &.ant-menu-inline .ant-menu-selected:after,
  &.ant-menu-inline .ant-menu-item-selected:after {
    display: none;
  }

  // .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
  //   line-height: 20px;
  //   height: 20px;
  //   font-size: 12px;
  // }
  .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title,
  .ant-menu-sub.ant-menu-inline > .ant-menu-item,
  .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title,
  &.ant-menu-vertical .ant-menu-item,
  &.ant-menu-vertical-left .ant-menu-item,
  &.ant-menu-vertical-right .ant-menu-item,
  &.ant-menu-inline .ant-menu-item,
  &.ant-menu-vertical .ant-menu-submenu-title,
  &.ant-menu-vertical-left .ant-menu-submenu-title,
  &.ant-menu-vertical-right .ant-menu-submenu-title,
  &.ant-menu-inline .ant-menu-submenu-title {
    font-size: 12px;
    line-height: 24px;
    height: 24px;
    list-style-type: disc;
    list-style-position: inside;
  }
  &.ant-tree {
    width: 100%;
  }
  &.ant-tree li ul {
    padding: 0 0 0 24px;
  }
  &.ant-tree.ant-tree-show-line li:before {
    display: none;
  }
  &.ant-tree.ant-tree-show-line {
    li.ant-tree-treenode-switcher-close,
    li.ant-tree-treenode-switcher-open {
      &:before {
        display: none !important;
      }
    }
  }
  li.ant-tree-treenode-switcher-close,
  li.ant-tree-treenode-switcher-open {
    // .ant-tree-switcher {font-size: 24px;}
    .anticon-minus-square,
    .anticon-plus-square {
      font-size: 24px;
      svg {
        path:last-child {
          display: none;
        }
      }
    }
  }

  .off-default-icon > .ant-tree-node-content-wrapper {
    .ant-tree-iconEle {
      display: none;
    }
  }

  // .ant-tree li span.ant-tree-checkbox + .ant-tree-node-content-wrapper {
  //   .ant-tree-iconEle {
  //     display: none;
  //   }
  // }
  li.on-default-icon {
    // display: flex;
    > .ant-tree-switcher-noop {
      display: none;
    }
    .ant-tree-node-content-wrapper {
      padding-left: 0;
      display: flex;
    }
    .ant-tree-title {
      overflow: hidden;
      text-overflow: ellipsis;
      width: calc(100% - 24px);
      display: block;
    }
    .ant-tree-switcher {
      float: left;
    }
    // .ant-tree-child-tree-open {
    //   li.on-default-icon {
    //     // .ant-tree-node-content-wrapper {
    //     //   padding-left: 0;
    //     //   display: flex;
    //     // }
    //     .ant-tree-title {
    //       // overflow: hidden;
    //       // text-overflow: ellipsis;
    //       width: calc(100% - 48px);
    //       // display: block;
    //     }
    //   }
    // }
  }
  li.leaf-node {
    > .ant-tree-switcher-noop {
      opacity: 0;
      display: inline-block;
      // margin-left: -6px;
    }
  }

  li.no-select > span:not(.ant-tree-switcher),
  li.no-select > .ant-tree-node-content-wrapper,
  li.no-select > .ant-tree-node-content-wrapper span {
    cursor: not-allowed;
    color: @disabled-color;
    &:hover,
    &:focus,
    &:active {
      background: transparent;
    }
  }

  .ant-tree-child-tree-open {
    .ant-tree-treenode-switcher-open + .leaf-node,
    .ant-tree-treenode-switcher-close + .leaf-node {
      > .ant-tree-switcher-noop {
        // margin-left: 0;
      }
    }
  }
  &-checkable {
    .ant-tree-switcher-noop {
      // margin-left: 0;
    }
    li.leaf-node {
      > .ant-tree-switcher-noop {
        // margin-left: 0;
      }
    }

    &.ant-tree li span.ant-tree-iconEle {
      display: none;
    }
  }

  &.ant-tree li span[draggable],
  &.ant-tree li span[draggable='true'] {
    line-height: 24px !important;
    border: 0;
    position: relative;
  }

  &.ant-tree li span[draggable]:after {
    content: ' ';
    position: absolute;
    background: @primary-color;
    height: 2px;
    top: 0;
    left: 0;
    right: 0;
    display: none;
  }
  &.ant-tree li.drag-over-gap-top > span[draggable]:after {
    display: block;
  }
  &.ant-tree li.drag-over-gap-bottom > span[draggable]:after {
    top: auto;
    bottom: 0;
    display: block;
  }
}