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;
			}
			&.disabled > a {
				color: #aaaaaa;
				&:hover {
					background: transparent;
					cursor: default;
				}
			}
			&.edit-disabled > a {
				color: #aaaaaa;
			}
			// 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: none;
			}
			> {
				ins {
					height: 16px;
					width: 16px;
					&.jstree-checkbox{
						height:19px; //Larger to help avoid accidental page loads when trying to click checkboxes
       				}
				}
				.jstree-icon {
					margin-right: 3px;
				}
			}
		}
		.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-apple.jstree-focused {
		background: none;	
		.jstree-apple > 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: block;
	}


	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-apple {
	li, .jstree-apple ins {
		background:none;
	}
	.jstree-unchecked, .jstree-checked, .jstree-undetermined {
		> a > .jstree-checkbox {
			margin-right:3px;
		}
	}
}

.tree-holder, .cms-tree{
	&.jstree-apple{
		li{
			padding: 0px;
			clear:  left;
			&.Root {
				& strong {
					font-weight:  bold;
					padding-left:  1px;
				}
				
				& > a .jstree-icon {
					background-position: -56px -36px;
				}
			}
			&.status-deletedonlive {
				.text {
					text-decoration: line-through;
				}
			}
			&.jstree-checked{
				> a, > a:link{
					background-color: $color-cms-batchactions-menu-selected-background;
				}
			}
			&.disabled {
				> a > .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;
			display: inline-block;
			padding: 0px 3px;
			font-size: 0.75em;
			line-height: 1em;
			margin-left: 3px;
			margin-right: 6px;
			margin-top:  -1px;
			@include border-radius(2px, 2px);
	
			&.status-modified, &.status-addedtodraft  {
				color:  #7E7470;
				border: 1px solid #C9B800;
				background-color: #FFF0BC;
			}
			&.status-deletedonlive, &.status-removedfromdraft {
				color:  #636363;
				border: 1px solid #E49393;
				background-color: #F2DADB;
			}
			&.status-workflow-approval {
				color:  #56660C;
				border: 1px solid #7C8816;
				background-color: #DAE79A;
			}
		}

		/* 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:0 0; 
		}
		.jstree-open > ins { 
			background-position:-20px 0;
		}
	}
} 


a .jstree-pageicon {
	float: left;
	margin-right: 4px;
	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;
	}
}


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