silverstripe-framework/admin/scss/_tree.scss

/**
 * This file defines the jstree base styling (see http://jstree.com), as well as any
 * customizations (see bottom of file).
 * 
 * The styles are usually added through jstree.js on DOM load, 
 * but we need it earlier in order to correctly display the uninitialized tree.
 */
.cms, .TreeDropdownField .treedropdownfield-panel {
	.jstree {
		> ul > li {
			margin-left: 0px;
		}
		ul, li {
			display: block;
			margin: 0;
			padding: 0;
			background: none;
			list-style-type: none;
		}
		li {
			min-height: 18px;
			line-height: 25px;
			white-space: nowrap;
			margin-left: 18px;
			min-width: 18px;
			&.jstree-open > ul {
				display: block;
			}
			&.jstree-closed > ul {
				display: none;
			}
			// Expand/collapse arrows
			& > .jstree-icon {
				cursor: pointer;
			}
		}
		ins {
			display: inline-block;
			text-decoration: none;
			width: 18px;
			height: 18px;
			margin: 0 0 0 0;
			padding: 0;
			float: left;
		}
		a {
			display: inline-block;
			line-height: 16px;
			height: 16px;
			color: black;
			white-space: nowrap;
			text-decoration: none;
			padding: 1px 2px;
			margin: 0;
			border: 1px solid #fff;
			&:focus,
			&:active,
			&:hover {
				text-decoration: none;
				cursor: pointer;
				text-shadow:1px 1px 1px white;
			}
			ins {
				height: 16px;
				width: 12px;
				&.jstree-checkbox {
					height: 19px; //Larger to help avoid accidental page loads when trying to click checkboxes
					width: 16px;
				}
			}
		}
		.jstree-real-checkbox {
			display: none;
		}
		.jstree-wholerow-real {
			position: relative;
			z-index: 1;
			li {
				cursor: pointer;
			}
			a {
				border-left-color: transparent !important;
				border-right-color: transparent !important;
			}
		}

		.jstree-wholerow {
			position: relative;
			z-index: 0;
			height: 0;
			margin: 0 !important;
			padding: 0 !important;
			background: transparent !important;
			ul,li {
				margin: 0 !important;
				padding: 0 !important;
				background: transparent !important;
				width: 100%;
			}
			a, a:hover {
				margin: 0 !important;
				padding: 0 !important;
				text-indent: -9999px !important;
				width: 100%;
				border-right-width: 0px !important;
				border-left-width: 0px !important;				
			}
			ins, 
			span, 
			input {
				display: none !important;
			}
		}
		.jstree-wholerow-span {
			position: absolute;
			left: 0;
			margin: 0px;
			padding: 0;
			height: 18px;
			border-width: 0;
			padding: 0;
			z-index: 0;
		}
	}

	// Custom styles
	.jstree.jstree-focused {
		background: none;	
		.jstree > ul {
			background: none;
		}
	}

	// Hide drag icons by default. Actual page icons
	// are in nested <span>, not handled directly through jstree lib
	a > .jstree-icon {
		display: none;
	}

	// Show drag icons when draggable class is applied
	.draggable a > .jstree-icon {
		display: none;
		cursor: move; // Fallback for IE users
		cursor: -moz-grab;
		cursor: -webkit-grab;
		cursor: grab;

		&:active {
			cursor: -moz-grabbing;
			cursor: -webkit-grabbing;
			cursor: grabbing;
		}
	}


	li.jstree-open > ul {
		display: block;
		margin-left: -13px;
		li ul {
			margin-left:2px;
		}
	}
	li.jstree-closed > ul {
		display: none;
	}

	.jstree-rtl {
		a > .jstree-icon {
			margin-left: 3px;
			margin-right: 0;
		}
		li {
			margin-left: 0;
			margin-right: 18px;
		}
		> ul > li {
			margin-right: 0px;
		}
	}

	.jstree-themeroller {
		a {
			padding: 0 2px;
		}
		.ui-icon {
			overflow: visible;
		}
		.jstree-no-icon {
			display: none;
		}
	} 

	#jstree-marker {
		padding: 0;
		margin: 0;
		overflow: hidden;
		position: absolute;
		top: -30px;
		background-repeat: no-repeat;
		display: none;
		line-height: 10px;
		font-size: 12px;		
		height: 12px;		
		width: 8px;		
		z-index: 10001;		
		background-color: transparent;
		text-shadow: 1px 1px 1px white;
		color: black;		
	}
	#jstree-marker-line {
		padding: 0;
		margin: 0;
		overflow: hidden;
		position: absolute;
		top: -30px;
		background-repeat: no-repeat;
		display: none;
		line-height: 0%;
		font-size: 1px;		
		height: 1px;
		width: 100px;		
		z-index: 10000;		
		background-color: #456c43;
		cursor: pointer;
		border: 1px solid #eeeeee;
		border-left: 0;
		-moz-box-shadow: 0px 0px 2px #666;
		-webkit-box-shadow: 0px 0px 2px #666;
		box-shadow: 0px 0px 2px #666;
		-moz-border-radius: 1px;
		border-radius: 1px;
		-webkit-border-radius: 1px;
	}

	#vakata-contextmenu {
		display: block;
		visibility: hidden;
		left: 0;
		top: -200px;
		position: absolute;
		margin: 0;
		padding: 0;
		min-width: 180px;
		background: #FFF;
		border: 1px solid silver;
		z-index: 10000; *width:180px;
		@include box-shadow(0 0 10px #CCC);
		&::before {
			content:"";
			display:block; /* reduce the damage in FF3.0 */
			position:absolute;
			top: -10px;
			left: 24px;
			width:0;
			border-width: 0 6px 10px 6px  ;
			border-color:  #FFF transparent;
			border-style: solid;
			z-index: 10000;
		}
		&::after {
			content:"";
			display:block; /* reduce the damage in FF3.0 */
			position:absolute;
			top: -11px;
			left: 23px;
			width:0;
			border-width: 0 7px 11px 7px  ;
			border-color:  #CCC transparent;
			border-style: solid;
		}
		ul {
			min-width: 180px; 
			*width:180px;
		}
		ul,li {
			margin: 0;
			padding: 0 ;
			list-style-type: none;
			display: block;
		}
		li {
			line-height: 20px;
			min-height: 23px;
			position: relative;
			padding: 0px;
			&:last-child {
				margin-bottom: 1px;
			}
			a {
				padding: 1px 10px;
				line-height: 23px;
				display: block;
				text-decoration: none;
				margin: 1px 1px 0 1px;
				border: 0; 
				&:hover {
					padding: 1px 10px;
					background: #3875d7;
					@include background-image(linear-gradient(top, #3875d7 20%, #2a62bc 90%));
					color: #FFF;
					border: none;
				}
			}
			ins {
				float: left;
				width: 0;
				height: 0;
				text-decoration: none;
				margin-right: 2px;
			}
			.jstree-pageicon {
				margin-top: 3px;
				margin-right: 5px;
			}
			&.vakata-hover > a {
				padding: 1px 10px;
				background: #3875d7;
				@include background-image(linear-gradient(top, #3875d7 20%, #2a62bc 90%));
				color: #FFF;
				border: none;
			} 
		}
	}
	
	#vakata-contextmenu {
		.right {
			right: 100%;
			left: auto;
		}
		.bottom {
			bottom: -1px;
			top: auto;
		}
		li ul {
			display: none;
			position: absolute;
			top: -2px;
			left: 100%;
			background: #FFF;
			border: 1px solid silver;
			@include box-shadow(0 0 10px #CCC);
			&.col-2{
				width:180px * 2; // 2x the size of the original ul
				li {
					width:50%;
				}
			}
			&.col-3{
				width:180px * 3; // 3x the size of the original ul
				li {
					width:33%;
				}
			}
			li {
				min-width:180px; 
				float:left;
				a {
					@include hide-text-overflow;
				}
			}
		}
		li {
			&.vakata-separator {
				min-height: 0;
				height: 1px;
				line-height: 1px;
				font-size: 1px;
				overflow: hidden;
				margin: 0 2px;
				background: #ccc; 
				padding:0;
			}
		}
	} 

	#vakata-dragged {
		display: block;
		margin: 0 0 0 0;
		padding: 4px 4px 4px 24px;
		position: absolute;
		top: -2000px;
		line-height: 16px;
		z-index: 10000;
		ins {
			display: block;
			text-decoration: none;
			width: 16px;
			height: 16px;
			margin: 0 0 0 0;
			padding: 0;
			position: absolute;
			top: 4px;
			left: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			-webkit-border-radius: 4px;
		}
		.jstree-ok {
			background: green;
		}
		.jstree-invalid {
			background: red;
		}
	}

}

.jstree {
	li, .jstree ins {
		background:none;
	}
	.jstree-unchecked, .jstree-checked, .jstree-undetermined {
		> a > .jstree-checkbox {
			margin-right:3px;
		}
	}
}

.tree-holder, .cms-tree {
	&.jstree {
		li {
			padding: 0px;
			clear:  left;
			&.Root {
				& strong {
					font-weight:  bold;
					padding-left:  1px;
				}
				
				& > a .jstree-icon {
					background-position: -56px -36px;
				}
			}
			&.status-deletedonlive,
			&.status-archived {
				> a, > a:link {
					.text {
						text-decoration: line-through;
					}
				}
			}
			&.jstree-checked {
				> a, > a:link {
					background-color: $color-cms-batchactions-menu-selected-background;
				}
			}
			&.disabled,
			&.edit-disabled {
				> a, > a:link {
					color: $color-text-disabled;
					background-color: transparent;
					cursor: default;
					
					> .jstree-checkbox {
						background-position: -57px -54px;
					}
				}
			}
			&.readonly {
				color: $color-text-disabled;
				padding-left: 18px;

				// Don't show drag icons or required spacing
				a, a:link {
					margin: 0;
					padding: 0;
				}
				.jstree-icon {
					display: none;
				}
			}
		}	
		a, a:link {
			color:  $color-text-blue-link;
			padding: 3px 6px 3px 3px;
			border: none;
			display:  inline-block;
			margin-right: 5px;
		}	
		ins {
			background-color: transparent;
			background-image: url(../images/sitetree_ss_default_icons.png);
		}	
		span.badge {
			clear: both;
			text-transform: uppercase;
			text-shadow: none;
			display: inline-block;
			position: relative;
			padding: 3px 3px 1px;
			font-size: 0.75em;
			line-height: 1em;
			margin-left: 3px;
			margin-top:  -1px;
			@include border-radius(2px, 2px);
		}

		/* comment speech bubble - ccs3 only - source: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */
		span.comment-count {
			clear: both;
			position: relative;
			text-transform: uppercase;
			display: inline-block;
			overflow: visible;
			padding: 0px 3px;
			font-size: 0.75em;
			line-height: 1em;
			margin-left: 3px;
			margin-right: 6px;
			@include border-radius(2px, 2px);
			color:  #7E7470;
			border: 1px solid #C9B800;
			background-color: #FFF0BC;

			&:before {
				content:"";
			    position:absolute;
			    border-style:solid;
			    display:block; 
			    width:0;
			    bottom:-4px; /* value = - border-top-width - border-bottom-width */
			    left:3px; /* controls horizontal position */
			    border-width:4px 4px 0;			    
			    border-color:#C9B800 transparent;			  
			}
			&:after {
				content:"";
			    position:absolute;
			    border-style:solid;
			    /* reduce the damage in FF3.0 */
			    display:block;
			    width:0;
			    bottom:-3px; /* value = - border-top-width - border-bottom-width */
			    left:4px; /* value = (:before left) + (:before border-left) - (:after border-left) */
			    border-width:3px 3px 0;			    
			    border-color:#FFF0BC transparent;			    
			}		
		}

		.jstree-hovered {
			text-shadow: none;
			text-decoration: none;
		}	
		.jstree-closed > ins { 
			background-position:2px -1px;
		}
		.jstree-open > ins { 
			background-position:-18px -1px;
		}
	}

	// Applied to trees when displaying filter / search results.
	&.filtered-list {
		li:not(.filtered-item) > a {
			color: $color-text-disabled;
		}
	}
}


// For drag and drop icons to not appear whilst in multi-selection
.cms-tree {
	&.jstree {
		.jstree-no-checkboxes {
			li {
				a {
					padding-left: 12px;
				}

				.jstree-hovered,
				.jstree-clicked,
				a:focus {
					padding-left: 0;
				}

				.jstree-hovered,
				.jstree-clicked,
				a:focus {
					.jstree-icon {
						display: block;
					}
				}
			}
		}
	}
}

// Override thirdparty themes
.jstree-default a .jstree-icon,
.jstree-default-rtl a .jstree-icon,
.jstree-classic a .jstree-icon,
.jstree-apple a .jstree-icon { 
	background-position:-60px -19px;
}

/* ensure status is visible in sidebar */
.cms-content-tools .cms-tree.jstree {
	li {
		min-width: 159px;
	}
	a {
		overflow: hidden;
		display: block;
		position: relative;
	}
	span.badge {
		position: absolute;
		top: 0;
		right: 0;
		padding: 7px 9px 6px 5px;
		margin: 0;
		max-width: 40%;
		@include transition(max-width .75s linear);
	}
	span.badge:hover {
		max-width: 150px;
	}
}

a .jstree-pageicon {
	float: left;
	margin-right: 4px;
	position: relative;
	li.class-HomePage > &{
		background-position: 0 -48px;
	}
	li.class-RedirectorPage > & {
		background-position: 0 -16px;
	}
	li.class-VirtualPage > & {
		background-position: 0 -32px;
	}
	li.class-ErrorPage > & {
		background-position: 0 -112px;
	}
}

/* tree status icons and labels */
%tree-status-icon-before {
	content:"";
	display: block;
	width:5px;
	height: 5px;
	position: absolute;
	bottom: 0;
	right: 0;
	background: #fce2d0;
	border: 1px solid #ff9344;
	border-radius: 100px;
	box-shadow: 0px 0px 0px 1px #fff;
}
@mixin tree-status-icon($label, $color, $bgColor) {
	.cms-tree.jstree .status-#{$label} > a .jstree-pageicon:before {
		@extend %tree-status-icon-before;
	}
	.jstree .status-#{$label} > .jstree-hovered,
	.jstree .status-#{$label} > .jstree-clicked,
	.cms-tree.jstree span.badge.status-#{$label},
	.cms-tree.jstree .status-#{$label} > a .jstree-pageicon:before  {
		background-color:$bgColor;
		border-color:$color;
	}
	#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-#{$label}  {
		box-shadow: 0px 0px 6px 2px $bgColor;
	}
	.cms-tree.jstree span.badge.status-#{$label}  {
		color: $color;
	}
}
@include tree-status-icon('modified', #EE6214, #FFF4ED);
@include tree-status-icon('addedtodraft', #EE6214, #FFF4ED);
@include tree-status-icon('deletedonlive', #5F7688, #F5F5F5);
@include tree-status-icon('archived', #5F7688, #F5F5F5);
@include tree-status-icon('removedfromdraft', #5F7688, #F5F5F5);
@include tree-status-icon('workflow-approval', #0070B4, #E8FAFF);

.cms-tree {
	visibility: hidden; // enabled by JS to avoid layout glitches
	&.multiple {
		li > a {
			// Hide draggable icon when multiselect is enabled
			 > .jstree-icon {
				display: none;
				// But show the checkbox
				 &.jstree-checkbox {
					display: inline-block;
				}
			}			
		}

		li#record-0 {
			// Hide checkbox on root node (shouldn't be selectable to avoid weird states when trying to e.g. remove it)
			> a .jstree-checkbox {
				display: none;
			}
		}
	}

	&.jstree-loading {
		li#record-0 > .jstree-icon {
			background: url(../images/throbber.gif) top left no-repeat;
		}
	}

	// Show the loading indicator on the page icon rather than the default
	// jstree icon (which is only used for its dragging handles)
	a.jstree-loading {
		.jstree-icon {
			background-image: none !important;
		}
		.jstree-pageicon {
			background: url(../images/throbber.gif) top left no-repeat;
		}
	} 
}