rct-tree/src/modules/tree/style/treeNode.less

A tree component based on ReactJS and Typescript.

.tree-node-wrapper {
    display       : flex;
    flex-direction: row;
    height        : 32px;
    align-items   : center;
    cursor        : pointer;
}

.tree-node {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: center;
    margin-left    : 5px;
}

.tree-node-left-title {
    background-color: rgba(196, 222, 248, .35);
    box-shadow      : 0 0px 3px #8d858556;
    border-radius   : 2px;
}

.tree-node-left-checkbox {
    position: relative;
    left    : .15rem;
}

.tree-node-left-checkbox-disabled {
    cursor: not-allowed;
}

.tree-node-left-item-disabled {
    pointer-events: none; // css 的方式禁用 dom 的点击事件, 但是会导致上面设置的 cursor 不生效
}

.arrow-right {
    height: 16px;
}

.arrow-down {
    height    : 16px;
    transform : rotate(90deg);
    transition: .3s;
}

.tree-node-img {
    height     : 16px;
    width      : 16px;
}

.rct-icon-star {
    background     : url('../assets//images/icons/star.svg');
    width          : 16px;
    height         : 16px;
    background-size: 100%;
}

.rct-icon-file {
    background     : url('../assets//images//icons/file.svg');
    width          : 16px;
    height         : 16px;
    background-size: 100%;
}

.rct-icon-directory {
    background     : url('../assets//images//icons/directory.svg');
    width          : 16px;
    height         : 16px;
    background-size: 100%;
}

.rct-icon-tag {
    background     : url('../assets//images/icons/tag.svg');
    width          : 16px;
    height         : 16px;
    background-size: 100%;
}