mealcomes/theme-chalk/tree.css

MealComes 用于学习前端的组件库

.mc-tree {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  cursor: default;
}

.mc-tree-node {
  display: flex;
  padding-bottom: 4px;
  background-clip: content-box;
  transition: background-color 0.1s ease-in;
}
.mc-tree-node__expand-icon {
  display: inline-block;
  width: 24px;
  text-align: center;
  position: relative;
  cursor: pointer;
}
.mc-tree-node__expand-icon.expanded .mc-tree-node__switcher {
  transform: translate(-50%, -50%) rotate(90deg);
}
.mc-tree-node__expand-icon .mc-tree-node__switcher {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 0.3s ease-in-out;
  transform: translate(-50%, -50%);
}
.mc-tree-node__expand-icon.is-leaf {
  color: transparent;
  cursor: default;
  visibility: hidden;
}

.mc-tree-node__content {
  padding: 0 5px;
  border-radius: 5px;
  width: 100%;
  cursor: not-allowed;
}
.mc-tree-node:not(.is-disabled) .mc-tree-node__content {
  cursor: pointer;
}
.mc-tree-node:not(.is-selected) .mc-tree-node__content:hover {
  background-color: #f5f5f5;
}

.mc-tree-node.is-selected {
  background-color: #1677ff;
}

.mc-tree-node.is-disabled .mc-tree-node__content {
  color: gray;
}
.mc-tree-node.is-disabled .mc-tree-node__content:hover {
  background: none;
}