<commit_before>﻿//Trees
//
//A tree structure is used to show relations between different items. Selected items are marked with a checkmark and a background along with a left side border.  
//
//Markup:
//<div class="tree">
//<div class="angular-ui-tree">
//	<ol id="tree-root" class="tree-line angular-ui-tree-nodes">
//		<li class="angular-ui-tree-node">
//			<div class="tree-toggle-group">
//				<div class="toggle-handle open"><i class="mdi mdi-chevron-right"></i></div>
//				<div class="angular-ui-tree-handle selected">
//					Super parent
//					<span><i class="mdi mdi-check"></i></span>
//				</div>
//			</div>
//			<ol class="angular-ui-tree-nodes">
//				<li class="angular-ui-tree-node">
//					<div class="tree-toggle-group">
//						<div class="toggle-handle open"><i class="mdi mdi-chevron-right"></i></div>
//						<div class="angular-ui-tree-handle">
//							Parent
//							<span><i class="mdi mdi-check"></i></span>
//						</div>
//					</div>
//					<ol class="angular-ui-tree-nodes">
//						<li class="angular-ui-tree-node">
//							<div class="tree-toggle-group">
//								<div class="toggle-handle"></i></div>
//								<div class="angular-ui-tree-handle selected">
//									Child
//									<span><i class="mdi mdi-check"></i></span>
//								</div>
//							</div>
//						</li>
//					</ol>
//				</li>
//			</ol>
//			<ol class="angular-ui-tree-nodes">
//				<li class="angular-ui-tree-node">
//					<div class="tree-toggle-group">
//						<div class="toggle-handle open"><i class="mdi mdi-chevron-right"></i></div>
//						<div class="angular-ui-tree-handle">
//							Parent
//							<span><i class="mdi mdi-check"></i></span>
//						</div>
//					</div>
//					<ol class="angular-ui-tree-nodes">
//						<li class="angular-ui-tree-node">
//							<div class="tree-toggle-group">
//								<div class="toggle-handle"></i></div>
//								<div class="angular-ui-tree-handle">
//									Child
//									<span><i class="mdi mdi-check"></i></span>
//								</div>
//							</div>
//						</li>
//					</ol>
//				</li>
//			</ol>
//		</li>
//	</ol>
//</div>
//</div>
//
//Styleguide 1.3
//


.tree {
	max-height: 800px;
	overflow-y: auto;
	background-color: $gray012;
	vertical-align: middle;


	ol { 
		list-style: none;
	}

	li{
		border-top: 1px solid $gray012;
	}
}

.angular-ui-tree-handle span{
	opacity:0;
	float:right;
	text-align: center;
}

.angular-ui-tree-handle.selected span{
	opacity:1;
	float:right;
	text-align: center;
	color: $gray087;
}

.angular-ui-tree-handle {
	@extend .wfm-block;
	cursor: pointer;
	font-weight: 500;
	transition: $transition-timing;
	border-left: 3px solid transparent;
	
	&:hover {
		background-color: $gray012;
	}
}
<commit_msg>tree checkmark is now explained<commit_after>﻿//Trees
//
//A tree structure is used to show relations between different items. Selected items are marked with a checkmark and a background along with a left side border.  
//Each tree line has a right align span child that could show an icon if the line is selected.
//
//Markup:
//<div class="tree">
//<div class="angular-ui-tree">
//	<ol id="tree-root" class="tree-line angular-ui-tree-nodes">
//		<li class="angular-ui-tree-node">
//			<div class="tree-toggle-group">
//				<div class="toggle-handle open"><i class="mdi mdi-chevron-right"></i></div>
//				<div class="angular-ui-tree-handle selected">
//					Super parent
//					<span><i class="mdi mdi-check"></i></span>
//				</div>
//			</div>
//			<ol class="angular-ui-tree-nodes">
//				<li class="angular-ui-tree-node">
//					<div class="tree-toggle-group">
//						<div class="toggle-handle open"><i class="mdi mdi-chevron-right"></i></div>
//						<div class="angular-ui-tree-handle">
//							Parent
//							<span><i class="mdi mdi-check"></i></span>
//						</div>
//					</div>
//					<ol class="angular-ui-tree-nodes">
//						<li class="angular-ui-tree-node">
//							<div class="tree-toggle-group">
//								<div class="toggle-handle"></i></div>
//								<div class="angular-ui-tree-handle selected">
//									Child
//									<span><i class="mdi mdi-check"></i></span>
//								</div>
//							</div>
//						</li>
//					</ol>
//				</li>
//			</ol>
//			<ol class="angular-ui-tree-nodes">
//				<li class="angular-ui-tree-node">
//					<div class="tree-toggle-group">
//						<div class="toggle-handle open"><i class="mdi mdi-chevron-right"></i></div>
//						<div class="angular-ui-tree-handle">
//							Parent
//							<span><i class="mdi mdi-check"></i></span>
//						</div>
//					</div>
//					<ol class="angular-ui-tree-nodes">
//						<li class="angular-ui-tree-node">
//							<div class="tree-toggle-group">
//								<div class="toggle-handle"></i></div>
//								<div class="angular-ui-tree-handle">
//									Child
//									<span><i class="mdi mdi-check"></i></span>
//								</div>
//							</div>
//						</li>
//					</ol>
//				</li>
//			</ol>
//		</li>
//	</ol>
//</div>
//</div>
//
//Styleguide 1.3
//


.tree {
	max-height: 800px;
	overflow-y: auto;
	background-color: $gray012;
	vertical-align: middle;


	ol { 
		list-style: none;
	}

	li{
		border-top: 1px solid $gray012;
	}
}

.angular-ui-tree-handle span {
	opacity:1;
	float:right;
	text-align: center;
	color: $gray087;
	
	i{
		opacity:0;
	}
}

.angular-ui-tree-handle.selected span i{
	opacity:1;
}

.angular-ui-tree-handle {
	@extend .wfm-block;
	cursor: pointer;
	font-weight: 500;
	transition: $transition-timing;
	border-left: 3px solid transparent;
	
	&:hover {
		background-color: $gray012;
	}
}

{'fraction_non_alphanumeric': 0.22399131536095532, 'fraction_numerical': 0.008865569024787407, 'mean_word_length': 2.2748815165876777, 'pattern_counts': {'":': 0, '<': 167, '<?xml version=': 0, '>': 167, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4773206', 'n_tokens_mistral': 2563, 'n_tokens_neox': 2123, 'n_words': 399}