162 lines
3.2 KiB
CSS
162 lines
3.2 KiB
CSS
|
|
/* 树容器 */
|
||
|
|
.bim-tree {
|
||
|
|
width: 100%;
|
||
|
|
overflow: auto;
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--bim-ui_text_primary, #333);
|
||
|
|
user-select: none; /* 防止双击选中文字 */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 节点行容器 */
|
||
|
|
.bim-tree-node {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 节点内容行 (Flex 布局) */
|
||
|
|
.bim-tree-node-content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
height: 32px; /* 标准行高 */
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background-color 0.2s;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding-right: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bim-tree-node-content:hover {
|
||
|
|
background-color: var(--bim-ui_bg_hover, rgba(0, 0, 0, 0.05));
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 展开/折叠箭头 */
|
||
|
|
.bim-tree-switcher {
|
||
|
|
width: 24px;
|
||
|
|
height: 32px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
cursor: pointer;
|
||
|
|
color: var(--bim-ui_text_secondary, #999);
|
||
|
|
transition: transform 0.2s;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bim-tree-switcher svg {
|
||
|
|
width: 12px;
|
||
|
|
height: 12px;
|
||
|
|
fill: currentColor;
|
||
|
|
transition: transform 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bim-tree-switcher.is-expanded svg {
|
||
|
|
transform: rotate(90deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.bim-tree-switcher.is-hidden {
|
||
|
|
visibility: hidden; /*叶子节点占位但不显示*/
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 复选框 */
|
||
|
|
.bim-tree-checkbox {
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
border: 1px solid var(--bim-ui_border_color, #d9d9d9);
|
||
|
|
border-radius: 2px;
|
||
|
|
margin-right: 8px;
|
||
|
|
background-color: var(--bim-ui_bg_color, #fff);
|
||
|
|
position: relative;
|
||
|
|
cursor: pointer;
|
||
|
|
flex-shrink: 0;
|
||
|
|
transition: all 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bim-tree-checkbox:hover {
|
||
|
|
border-color: var(--bim-primary_color, #1890ff);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 选中状态 */
|
||
|
|
.bim-tree-checkbox.is-checked {
|
||
|
|
background-color: var(--bim-primary_color, #1890ff);
|
||
|
|
border-color: var(--bim-primary_color, #1890ff);
|
||
|
|
}
|
||
|
|
|
||
|
|
.bim-tree-checkbox.is-checked::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 1px;
|
||
|
|
left: 4px;
|
||
|
|
width: 5px;
|
||
|
|
height: 9px;
|
||
|
|
border: 2px solid #fff;
|
||
|
|
border-top: 0;
|
||
|
|
border-left: 0;
|
||
|
|
transform: rotate(45deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 半选状态 */
|
||
|
|
.bim-tree-checkbox.is-indeterminate {
|
||
|
|
background-color: var(--bim-ui_bg_color, #fff);
|
||
|
|
border-color: var(--bim-primary_color, #1890ff);
|
||
|
|
}
|
||
|
|
|
||
|
|
.bim-tree-checkbox.is-indeterminate::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 6px;
|
||
|
|
left: 3px;
|
||
|
|
width: 8px;
|
||
|
|
height: 2px;
|
||
|
|
background-color: var(--bim-primary_color, #1890ff);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 禁用状态 */
|
||
|
|
.bim-tree-node.is-disabled .bim-tree-checkbox {
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
border-color: #d9d9d9;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bim-tree-node.is-disabled .bim-tree-checkbox.is-checked {
|
||
|
|
background-color: #d9d9d9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bim-tree-node.is-disabled .bim-tree-node-content {
|
||
|
|
color: var(--bim-ui_text_disabled, #ccc);
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 图标 */
|
||
|
|
.bim-tree-icon {
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
margin-right: 6px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bim-tree-icon img,
|
||
|
|
.bim-tree-icon svg {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 文本 */
|
||
|
|
.bim-tree-title {
|
||
|
|
flex: 1;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 子节点容器 */
|
||
|
|
.bim-tree-children {
|
||
|
|
display: none;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bim-tree-children.is-visible {
|
||
|
|
display: block;
|
||
|
|
}
|