c1-cms/styles/default/trees/trees-base.less

Contains React components distributed with C1 CMS.

ui|tree {
	display: block;
	overflow: hidden;
	position: relative;
}

ui|treebody {
	display: block;
	color: @text-color;
	overflow: auto !important;
	padding-top: 10px;
	background: @tree-bg-color;
}

ui|treenode,
ui|treecontent {
	display: block;
	float: none;
	clear: both;
	overflow: visible;
}

ui|treenode {
	margin: 0;
	padding: 0 8px;
	position: relative;

	> ui|labelbox {
		padding-bottom: 3px;
		padding-left: 12px;
		float: none;
		height: 28px;
		position: relative;

		&.image-and-text {
			ui|labeltext {
				display: inline;
				margin-left: 4px;
			}
		}

		svg {
			margin-top: 3px;
			color: @tree-icon-color;

			&.disabled {
				color: lighten(@tree-icon-color, 20%);
			}
		}

		ui|labelbody {
			height: 28px;
			width: 100%;
		}

		ui|labeltext {
			color: @tree-text-color;
			font-size: @tree-font-size;
			border-radius: 2px;
			padding: 3px 4px 5px 4px;
			line-height: 24px;
		}

		&:before, &:after {
			position: absolute;
			left: -2px;
			display: block;
			content: "";
			border: 5px solid transparent;
		}

		&.open {
			&:before {
				top: 11px;
				border-top-color: #999; /*Chevron Color*/
			}

			&:after {
				top: 10px;
				border-top-color: @tree-bg-color;
			}

			svg {
				color: @tree-node-open-icon-color;
			}
		}

		&.closed {
			&:before {
				top: 8px;
				border-left-color: @primary-color; /*Chevron Color*/
				left: 2px;
			}

			&:after {
				top: 8px;
				border-left-color: @tree-bg-color;
				left: 1px;
			}
		}

		&.focused {
			svg {
				color: @tree-node-focused-icon-color;
			}

			ui|labeltext {
				background-color: @tree-text-focused-bg-color;
				color: @tree-text-focused-color;
			}
		}
	}

	ui|treenode {
		padding-left: 30px;

		&::before, &::after {
			content: '';
			position: absolute;
		}

		&::before {
			border-top: 1px solid #999;
			top: 12px;
			width: 15px;
			height: 0;
			left: 17px;
		}

		&::after {
			border-left: 1px solid #999;
			height: 100%;
			width: 0px;
			top: -3px;
			left: 17px;
		}

		&.open, &.closed {
			&::before {
				width: 8px;
			}
		}

		&:last-of-type::after {
			height: 16px;
		}
	}

	&.closed {
		ui|treenode, ui|treecontent {
			display: none;
		}
	}

	&[pin='true'] {
		> ui|labelbox {
			&.open{
				&:before {
					display: none;
				}

				&:after {
					display: none;
				}
			}
		}
	}
}

ui|tree > ui|treebody > ui|treenode.open {

	> ui|labelbox svg {
		color: @tree-root-open-icon-color;
	}
}


ui|treecontent {
	padding-left: 40px;
	.user-select(none); /* hope we don't need an input field */
}


ui|treepositionindicator {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 140px;
	height: 1px;
	overflow: hidden;
	background-color: #3399FF;
	z-index: -1;
}

/* Template selector */
ui|tree#templatetree {
	ui|treebody {
		background: #fff;
		padding-top: 19px;
	}

	ui|treenode {
		padding: 1px 4px;
	}

	ui|labelbody {
		position: relative;

		svg {
			display: none;
		}

		&:before {
			content: '';
			position: absolute;
			width: 14px;
			height: 14px;
			border: 1px solid @field-border-color;
			border-radius: 50%;
			left: 0px;
			top: 4px;
			background: #FFFFFF;
		}
	}

	ui|labelbox {
		ui|labeltext {
			margin-left: 28px;
		}

		&.focused {
			ui|labeltext {
				background: transparent;
				color: #333;
			}

			ui|labelbody:after {
				content: '';
				position: absolute;
				width: 8px;
				height: 8px;
				border-radius: 4px;
				background: @primary-color;
				left: 4px;
				top: 8px;
			}
		}
	}
}