@nodeject/ui-components/esm/tree-view/TreeView.module.less

UI library for non-trivial components

@verticalChildrenListOffset: 1.5rem;

.treeViewContainer {
	display: flex;
	width: 100%;
	justify-content: center;
	.treeView {
		:global {
			// node hover or selected background
			// .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected,
			// .ant-tree li .ant-tree-node-content-wrapper:hover {
			//   background-color: unset;
			// }
			box-sizing: border-box;

			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;
					}
				}
			}
		}
	}
}