ShangHaiYuan-AnXin/src/app/ngZorroTree.css

.ant-tree-checkbox,
.ant-tree-checkbox-wrapper {
  margin: 0;
  padding: 0;
  list-style: none;
  font-feature-settings: 'tnum';
  font-size: 14px
}

@keyframes antCheckboxEffect {
  0% {
    transform: scale(1);
    opacity: .5
  }

  100% {
    transform: scale(1.6);
    opacity: 0
  }
}

.ant-tree.ant-tree-directory .ant-tree-treenode {
  position: relative
}

.ant-tree.ant-tree-directory .ant-tree-treenode::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 4px;
  left: 0;
  transition: background-color .3s;
  content: '';
  pointer-events: none
}

.ant-tree.ant-tree-directory .ant-tree-treenode:hover::before {
  background: #f5f5f5
}

.ant-tree.ant-tree-directory .ant-tree-treenode>* {
  z-index: 1
}

.ant-tree.ant-tree-directory .ant-tree-treenode .ant-tree-switcher {
  transition: color .3s
}

.ant-tree.ant-tree-directory .ant-tree-treenode .ant-tree-node-content-wrapper {
  border-radius: 0;
  user-select: none
}

.ant-tree.ant-tree-directory .ant-tree-treenode .ant-tree-node-content-wrapper:hover {
  background: 0 0
}

.ant-tree.ant-tree-directory .ant-tree-treenode .ant-tree-node-content-wrapper.ant-tree-node-selected {
  color: #fff;
  background: 0 0
}

.ant-tree.ant-tree-directory .ant-tree-treenode-selected::before,
.ant-tree.ant-tree-directory .ant-tree-treenode-selected:hover::before {
  background: #1890ff
}

.ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-switcher {
  color: #fff
}

.ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-node-content-wrapper {
  color: #fff;
  background: 0 0
}

.ant-tree-checkbox {
  box-sizing: border-box;
  color: rgba(0, 0, 0, .65);
  font-variant: tabular-nums;
  position: relative;
  top: -.09em;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  outline: 0;
  cursor: pointer
}

.ant-tree-checkbox-input:focus+.ant-tree-checkbox-inner,
.ant-tree-checkbox-wrapper:hover .ant-tree-checkbox-inner,
.ant-tree-checkbox:hover .ant-tree-checkbox-inner {
  border-color: #1890ff
}

.ant-tree-checkbox-checked::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #1890ff;
  border-radius: 2px;
  visibility: hidden;
  animation: antCheckboxEffect .36s ease-in-out;
  animation-fill-mode: backwards;
  content: ''
}

.ant-tree-checkbox-wrapper:hover .ant-tree-checkbox::after,
.ant-tree-checkbox:hover::after {
  visibility: visible
}

.ant-tree-checkbox-inner {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 16px;
  height: 16px;
  direction: ltr;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  border-collapse: separate;
  transition: all .3s
}

.ant-tree-checkbox-inner::after {
  position: absolute;
  top: 50%;
  left: 22%;
  display: table;
  width: 5.71px;
  height: 9.14px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) scale(0) translate(-50%, -50%);
  opacity: 0;
  transition: all .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s;
  content: ' '
}

.ant-tree-checkbox-input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0
}

.ant-tree-checkbox-disabled,
.ant-tree-checkbox-disabled .ant-tree-checkbox-input,
.ant-tree-checkbox-disabled+span {
  cursor: not-allowed
}

.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after {
  position: absolute;
  display: table;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) scale(1) translate(-50%, -50%);
  opacity: 1;
  transition: all .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
  content: ' '
}

.ant-tree-checkbox-checked .ant-tree-checkbox-inner {
  background-color: #1890ff;
  border-color: #1890ff
}

.ant-tree-checkbox-disabled.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after {
  border-color: rgba(0, 0, 0, .25);
  animation-name: none
}

/* .ant-tree-checkbox-disabled .ant-tree-checkbox-inner {
  background-color: #f5f5f5;
  border-color: #d9d9d9 !important
} */

.ant-tree-checkbox-disabled .ant-tree-checkbox-inner::after {
  border-color: #f5f5f5;
  border-collapse: separate;
  animation-name: none
}

.ant-tree-checkbox-disabled+span {
  color: rgba(0, 0, 0, .25)
}

.ant-tree-checkbox-disabled:hover::after,
.ant-tree-checkbox-wrapper:hover .ant-tree-checkbox-disabled::after {
  visibility: hidden
}

.ant-tree-checkbox-wrapper {
  box-sizing: border-box;
  color: rgba(0, 0, 0, .65);
  font-variant: tabular-nums;
  display: inline-block;
  line-height: unset;
  cursor: pointer
}

.ant-tree-checkbox-wrapper.ant-tree-checkbox-wrapper-disabled {
  cursor: not-allowed
}

.ant-tree-checkbox-wrapper+.ant-tree-checkbox-wrapper {
  margin-left: 8px
}

.ant-tree-checkbox+span {
  padding-right: 8px;
  padding-left: 8px
}

.ant-tree,
.ant-tree-checkbox-group {
  box-sizing: border-box;
  padding: 0;
  color: rgba(0, 0, 0, .65);
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: 'tnum'
}

.ant-tree-checkbox-group {
  margin: 0;
  font-size: 14px;
  display: inline-block
}

.ant-tree-checkbox-group-item {
  display: inline-block;
  margin-right: 8px
}

.ant-tree-checkbox-group-item:last-child {
  margin-right: 0
}

.ant-tree-checkbox-group-item+.ant-tree-checkbox-group-item {
  margin-left: 0
}

.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner {
  background-color: #fff;
  border-color: #d9d9d9
}

.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner::after {
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: #1890ff;
  border: 0;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  content: ' '
}

.ant-tree-checkbox-indeterminate.ant-tree-checkbox-disabled .ant-tree-checkbox-inner::after {
  background-color: rgba(0, 0, 0, .25);
  border-color: rgba(0, 0, 0, .25)
}

.ant-tree {
  margin: 0;
  font-size: 14px;
  background: #fff;
  border-radius: 2px;
  transition: background-color .3s
}

.ant-tree-focused:not(:hover):not(.ant-tree-active-focused) {
  background: #e6f7ff
}

.ant-tree-list-holder-inner {
  align-items: flex-start
}

.ant-tree.ant-tree-block-node .ant-tree-list-holder-inner {
  align-items: stretch
}

.ant-tree.ant-tree-block-node .ant-tree-list-holder-inner .ant-tree-node-content-wrapper {
  flex: auto
}

.ant-tree .ant-tree-treenode {
  display: flex;
  align-items: flex-start;
  padding: 0;
  outline: 0
}

.ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper {
  color: rgba(0, 0, 0, .25);
  cursor: not-allowed
}

.ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper:hover {
  background: 0 0
}

.ant-tree .ant-tree-treenode-active .ant-tree-node-content-wrapper {
  background: #f5f5f5
}

.ant-tree-indent {
  align-self: stretch;
  white-space: nowrap;
  user-select: none
}

.ant-tree-indent-unit {
  display: inline-block;
  width: 24px
}

.ant-tree .ant-tree-switcher {
  flex: none;
  width: 24px;
  height: 35px;
  margin: 0;
  line-height: 35px;
  font-size: 18px;
  text-align: center;
  cursor: pointer
}

.ant-tree .ant-tree-switcher .ant-select-tree-switcher-icon,
.ant-tree .ant-tree-switcher .ant-tree-switcher-icon {
  font-size: 10px;
  display: inline-block;
  font-weight: 700
}

.ant-tree .ant-tree-switcher .ant-select-tree-switcher-icon svg,
.ant-tree .ant-tree-switcher .ant-tree-switcher-icon svg {
  transition: transform .3s
}

.ant-tree .ant-tree-switcher-noop {
  cursor: default
}

.ant-tree .ant-tree-switcher_close .ant-tree-switcher-icon svg {
  transform: rotate(-90deg)
}

.ant-tree .ant-tree-checkbox {
  top: initial;
  margin: 4px 8px 0 0
}

.ant-tree .ant-tree-node-content-wrapper {
  min-height: 24px;
  margin: 0;
  padding: 0;
  color: inherit;
  line-height: 24px;
  background: 0 0;
  border-radius: 2px;
  cursor: pointer;
  transition: all .3s
}

.ant-tree .ant-tree-node-content-wrapper:hover {
  background-color: #f5f5f5
}

/* .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background-color: #bae7ff
} */

.ant-tree .ant-tree-node-content-wrapper .ant-tree-iconEle {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  vertical-align: top
}

.ant-tree .ant-tree-node-content-wrapper .ant-tree-iconEle:empty,
.ant-tree .ant-tree-treenode-loading .ant-tree-iconEle,
.ant-tree-show-line .ant-tree-indent-unit-end::before,
.ant-tree-show-line .ant-tree-treenode-motion:not(.ant-motion-collapse-leave):not(.ant-motion-collapse-appear-active) .ant-tree-indent-unit::before {
  display: none
}

.ant-tree-node-content-wrapper[draggable=true] {
  overflow: hidden;
  width: 100%;
  line-height: 35px;
  /* border-top: 2px transparent solid;
  border-bottom: 2px transparent solid; */
  user-select: none
}

.ant-tree .ant-tree-treenode.drag-over>[draggable] {
  color: #fff;
  background-color: #1890ff;
  opacity: .8
}

.ant-tree .ant-tree-treenode.drag-over-gap-top>[draggable] {
  border-top-color: #1890ff
}

.ant-tree .ant-tree-treenode.drag-over-gap-bottom>[draggable] {
  border-bottom-color: #1890ff
}

.ant-tree-show-line .ant-tree-indent-unit {
  position: relative;
  height: 100%
}

.ant-tree-show-line .ant-tree-indent-unit::before {
  position: absolute;
  top: calc(100% - 4px);
  right: -12px;
  bottom: -28px;
  border-right: 1px solid #d9d9d9;
  content: ''
}

.ant-tree-show-line .ant-tree-switcher {
  z-index: 1;
  background: #fff
}

.ant-tree .ant-tree-treenode-rtl,
.ant-tree-rtl {
  direction: rtl
}

.ant-tree-rtl.ant-tree .ant-tree-switcher_close .ant-tree-switcher-icon svg {
  transform: rotate(90deg)
}

.ant-tree-rtl.ant-tree-show-line .ant-tree-indent-unit::before {
  right: auto;
  left: -12px;
  border-right: none;
  border-left: 1px solid #d9d9d9
}

.font-highlight {
  color: #ff4d4f
}

.ant-tree-child-tree {
  overflow: hidden
}

nz-tree {
  display: block
}