magiccube-vue3/package/style/permission-tree.less

vue3-js版组件库

@import './theme';

.mc-permission-tree {
    user-select: none;

    &__panel {
        padding-left: 22px;

        &--node {
            &--content {
                display: flex;
                align-items: center;
                margin-bottom: 12px;

                &--symbol {
                    cursor: pointer;
                    width: 14px;
                    height: 14px;
                    text-align: center;
                    line-height: 12px;
                    border: 1px solid #d9d9d9;
                    box-sizing: border-box;
                    border-radius: 2px;
                    font-size: 12px;

                    &:hover {
                        color: @color-default;
                        border-color: @color-default;
                    }
                }

                .mc-checkbox {
                    margin-left: 10px;
                }
                &--text {
                    margin-left: 8px;
                }

                &--edit,
                &--copy {
                    margin-left: 8px;
                    font-size: 12px;
                    color: #999999;
                }

                &--text-clickable,
                &--edit,
                &--copy {
                    cursor: pointer;
                    &:hover {
                        color: @color-default;                        
                    }
                }
                &--text-active {
                    color: @color-default;
                }
            }

            &--placeholder::before {
                display: block;
                content: '';
                width: 14px;
                height: 14px;
            }
        }

    }
}

.mc-permission-tree>.mc-permission-tree__panel {
    padding: 0;
}