@nodeject/ui-components/esm/node/node-container/NodeContainer.module.less

UI library for non-trivial components

@maxNodeContentSize: 200px;

.addNodeButton {
	// font-size: 2rem;
}

.nodeWrappersBorders {
	z-index: 50;
}

.nodeWrappersHidden {
	opacity: 0;
	transition: .4s;
}

.nodeWrappersVisible {
	opacity: 1;
	transition: .4s;
}

.verticalAlignCenter {
	display: inline-flex;
	justify-content: center;
	flex-direction: column;
}

.horizontalAlignBottom {
	display: inline-flex;
	justify-content: flex-end;
	flex-direction: column;
}

.nodeContainer {
	text-align: initial;
	display: inline-grid;
	grid-template-columns: 25px @maxNodeContentSize 14px;	
	grid-template-areas: "top-left top top-right" "left content right" "bottom-left bottom bottom-right";
	position: relative;

	.nodeWrapperTop {
		&:extend(.nodeWrappersBorders);
		&:extend(.nodeWrappersHidden);
		grid-area: top;
		text-align: center;
		position: relative;

		.insertParentButton {
			&:extend(.addNodeButton);
			position: absolute;
			top: -.4rem;
			left: 0;
			right: 0;
		}
	}

	.nodeWrapperTopRight {
		&:extend(.nodeWrappersBorders);
		&:extend(.nodeWrappersHidden);
		&:extend(.horizontalAlignBottom);
		grid-area: top-right;

		:global {
			.anticon {
				text-align: left;
			}
		}

		.deleteButton {
			position: absolute;
			right: -.7rem;
			top: -.4rem;
		}
	}

	.nodeWrapperRight {
		&:extend(.nodeWrappersBorders);
		&:extend(.nodeWrappersHidden);
		&:extend(.verticalAlignCenter);
		grid-area: right;
		position: relative;

		.addSiblingAfterButton {
			&:extend(.addNodeButton);
			position: absolute;
			left: -.4rem;
		}
	}

	.nodeWrapperBottomRight {
		&:extend(.nodeWrappersBorders);
		&:extend(.nodeWrappersHidden);
		&:extend(.horizontalAlignBottom);
		&:extend(.verticalAlignCenter);
		grid-area: bottom-right;

		.menuButton {
			font-size: 1.5rem;
			// width: 1.5rem;
			// background-color: white;
			// border-radius: 50%;
			color: rgb(11, 182, 25);
		}
	}

	.nodeWrapperBottom {
		&:extend(.nodeWrappersBorders);
		&:extend(.nodeWrappersHidden);
		grid-area: bottom;
		text-align: center;
		position: relative;
		box-sizing: border-box;
        
		.addChildButton {
            &:extend(.addNodeButton);            
			position: absolute;
			bottom: -.6rem;
			left: 0;
			right: 0;
		}
	}

	.nodeWrapperBottomLeft {
		grid-area: bottom-left;		
	}

	.nodeWrapperLeft {
		&:extend(.nodeWrappersBorders);
		&:extend(.nodeWrappersHidden);
		&:extend(.verticalAlignCenter);
		grid-area: left;
		position: relative;

		.addSiblingBeforeButton {
			&:extend(.addNodeButton);
			position: absolute;
			left: -.8rem;
		}
	}

	.nodeWrapperTopLeft {
		grid-area: top-left;
	}

	.nodeWrapperContent {
    white-space: normal;
		grid-area: content;
		background-color: #f9fcff;
		// border: 1px solid black;
		box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0), 0 2px 5px 0 rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		padding: .3rem;
	}
}