@ctmobile/ui-tree/umd/index.css

支持移动端的UI组件-Tree

.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-input {
  color: #808080;
}
.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-input.fa-check-square,
.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-input.fa-minus-square {
  color: #007aff;
}
.ct-tree {
  font-size: 14px;
}
.ct-tree .ct-tree-node > .ct-tree-item {
  display: flex;
  align-items: center;
  margin: 5px 0;
}
.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-trigger {
  flex-shrink: 0;
  font-size: 18px;
  transition: transform 0.1s linear;
  transform-origin: center;
  color: gray;
  padding: 0 0.5em;
}
.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-trigger:before,
.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-trigger:after {
  vertical-align: middle;
}
.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-trigger.animation {
  animation: loading 1s linear infinite;
  font-size: 20px;
}
.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-trigger.invisible {
  visibility: hidden;
}
.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-input {
  font-size: 18px;
  width: 14px;
  height: 18px;
  display: block;
  margin-right: 0.5em;
}
.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-input:before,
.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-input:after {
  vertical-align: middle;
}
.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-input > .ct-tree-item-input-field {
  display: none;
}
.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-icon {
  margin-right: 0.25em;
}
.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-icon:before,
.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-icon:after {
  vertical-align: middle;
}
.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-icon.invisible {
  visibility: hidden;
}
.ct-tree .ct-tree-node > .ct-tree-item > .ct-tree-item-label {
  flex-grow: 1;
  min-width: 0;
  white-space: nowrap;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.ct-tree .ct-tree-node > .ct-tree-item:not(.ct-tree-item-trigger) > .ct-tree-item-label {
  margin-left: 0.25em;
}
.ct-tree .ct-tree-node > .ct-tree-children {
  padding-left: 22px;
  display: none;
}
.ct-tree .ct-tree-node.expand > .ct-tree-item > .ct-tree-item-trigger {
  transform: rotate(90deg);
}
.ct-tree .ct-tree-node.expand > .ct-tree-children {
  display: block;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}