@nodeject/ui-components/cjs/schedio-tree/SchedioTree.module.less

UI library for non-trivial components

@import (reference) "./TreeNodeComponent.module.less";

// @verticalChildrenListOffset: 2rem;
@verticalChildrenListOffset: 0;

.treeViewContainer {
	// display: flex;
	width: 100%;
	justify-content: center;
    padding: 0 2rem;
    -webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	.treeView {
		:global {
            li {               
                span[draggable],
                span[draggable='true'] {
                  line-height: 20px;
                  border-top: 2px blue;
                  border-bottom: 2px blue;
                  user-select: none;
                  /* Required to make elements draggable in old WebKit */
                  -khtml-user-drag: element;
                  -webkit-user-drag: element;
                }
                &.drag-over {
                  > span[draggable] {
                    color: white;
                    background-color: red;
                    opacity: 0.8;
                  }
                }
                &.drag-over-gap-top {
                  > span[draggable] {
                    border-top-color: red;
                  }
                }
                &.drag-over-gap-bottom {
                  > span[draggable] {
                    border-bottom-color: red;
                  }
                }
            }
			box-sizing: border-box;

			.ant-tree-title > .node {
				& > .nodeListChildLeftFirst {
					display: none;
				}
				& > .nodeListChildLeft {
					& > .tr {
						border-bottom: unset;
					}
				}
			}

			.list-parent-is-last-sibling {
				& > .ant-tree-node-content-wrapper {
					.nodeListChildLeft {
						visibility: hidden;
					}
				}
			}

			.list-is-leaf.list-is-last-sibling {
				.nodeListChildLeftLast {
					.br {
						border-left: unset;
					}
				}
			}

			.layout-style-org {
				.nodeChildBottom {
					.right {
						border-left: @edgeWidth solid @edgeColor;
					}
				}
			}

			.parent-layout-style-org {
				.nodeChildTop {
					.right {
						border-left: @edgeWidth solid @edgeColor;
					}
				}
			}

			.list-layout-style-org {
				.list-parent-layout-style-org:not(:last-child) {
					.ant-tree-node-content-wrapper {
						margin-right: 2rem;
					}
				}
			}

			.list-parent-layout-style-org:not(:first-child):not(:last-child) {
				// margin-top: @edgeWidth;
				border-top: @edgeWidth solid @edgeColor;
			}

			.list-parent-layout-style-org:first-child:not(:last-child)::before {
				content: "";
				left: 50%;
				width: 60%;
				height: @edgeWidth;
				background: @edgeColor;
				position: absolute;
				// top: @edgeWidth;
			}

			.list-is-leaf {
				.nodeChildBottom {
					visibility: hidden;
				}
			}

			.list-parent-layout-style-org:last-child {
				& > .ant-tree-node-content-wrapper {
					.nodeChildTop {
						.left {
							border-top: @edgeWidth solid @edgeColor;
						}
					}
				}
			}

			.list-parent-layout-style-org:first-child {
				position: relative;

				& > .ant-tree-node-content-wrapper {
					.nodeChildTop {
						.right {
							border-top: @edgeWidth solid @edgeColor;
						}
					}
				}
			}

			.list-has-no-siblings > .ant-tree-node-content-wrapper {
				.nodeListChildLeftLast > .br {
					border-left: unset;
				}
			}
			// // NODE SELECTION
			// .ant-tree-node-selected {
			//     background-color: unset;
			// }
			// .ant-tree-treenode-selected {
			//     background: unset;
			// }

			// // NODE HOVER
			//  .ant-tree-node-content-wrapper {
			//      background: unset;
			//  }
			// .ant-tree-node-content-wrapper:hover {
			//     background-color: unset; // #e6f7ff;
			// }

			ul {
				list-style-type: none;
				padding: 0;
				border-top: 0;
				border-bottom: 0;
			}

			.ant-tree li .ant-tree-node-content-wrapper {
				padding: 0;
			}
			.ant-tree li {
				padding: 0;
			}

			.ant-tree li span[draggable],
			.ant-tree li span[draggable='true'] {
				border-top: 0;
				border-bottom: 0;
			}
			.ant-tree {
				display: inline-flex;

				li {
					&:first-child {
						padding: 0;
						// border-top: 0;
						// border-bottom: 0;
					}

					span[draggable],
					.ant-tree-node-content-wrapper {
						display: inline-table;
					}

					.ant-tree-switcher-noop {
						display: none;
					}
					.ant-tree-switcher .ant-tree-switcher_open {
						display: inline-flex;
					}

					.ant-tree-switcher-icon {
						position: absolute;
						top: 1.6rem;
						right: .6rem;
					}

					span.ant-tree-switcher {
						display: none; // Collapsible or not
						z-index: 10;
						position: absolute;
						color: grey;
						// top: 1.3em;
						// left: .35rem;
					}
					span.ant-tree-switcher.ant-tree-switcher_close .ant-tree-switcher-icon {
						display: inline-block;
						font-size: 1.5rem;
					}
					span.ant-tree-switcher.ant-tree-switcher_open .ant-tree-switcher-icon {
						display: inline-block;
						font-size: 1.5rem;
					}

					.ant-tree-child-tree {
						// pushes node children to the right under their parent.
						margin: 0 0 0 @verticalChildrenListOffset;
					}
				}

				> li > ul {
					display: flex;
					flex-direction: row;
				}

				> .ant-tree-treenode-switcher-open {
					text-align: center;
					margin-left: -12px;

					> ul {
						text-align: initial;
					}
				}
			}
		}
	}
}