silverstripe-framework/scss/TreeDropdownField.scss

@import "../admin/scss/_mixins";

div.TreeDropdownField {
	width: 400px;
	background: #fff;
	border: 1px solid #aaa;
	cursor: pointer;
	overflow: visible;
	position:relative;

	input {
		border: none;
		background: none;
		padding: 0;
		margin: 0;
	}

	.treedropdownfield-title {
		float: left;
		padding: 7px;
		width: 90%;
		line-height: 16px;
		overflow:hidden;
		outline: none;
		z-index:1;
		@include hide-text-overflow;
	}

	.treedropdownfield-search{
		@extend .treedropdownfield-title;

		//Style search box to match chosen search
		$bgImage: '../admin/images/chosen-sprite.png';

		background:url($bgImage) no-repeat 100% -22px; //For browers that only support 1 background
		background:
			url($bgImage) no-repeat 100% -22px,
			linear-gradient(to bottom, #eeeeee 1%, #ffffff 15%);
		box-sizing: border-box;
		position:relative;
		z-index:1100; //Needed to work within modales in chrome
		border: 1px solid #aaa;
		display:inline-block;
		font-family: sans-serif;
		font-size: 1em;
		margin:1.5%;
		outline: 0;
		padding: 4px 20px 4px 5px;
		width:97%; //optimized for most common tree width
	}

	&.searchable .treedropdownfield-panel.loading{
		min-height: 16px /* icon */ + 14px /* padding */ + 34px /* approx height search input */; // Ensure there's room for loading indicator
		background-position: 98% 39px;
	}

	.treedropdownfield-panel {
		clear: left;
		position: absolute;
		display: none;
		cursor: default;
		border: 1px solid #aaa;
		border-top: none;
		margin: 1px 0 0 -1px; /* account for border on container div */
		background-color: #fff;
		z-index: 70;
		-webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15);
		-moz-box-shadow   : 0 4px 5px rgba(0,0,0,.15);
		-o-box-shadow     : 0 4px 5px rgba(0,0,0,.15);
		box-shadow        : 0 4px 5px rgba(0,0,0,.15);

		&.loading {
			min-height: 16px /* icon */ + 14px /* padding */; // Ensure there's room for loading indicator
			background: #fff url("../images/network-save.gif") 98% 7px no-repeat;
		}

		.tree-holder{
			position:relative;
			z-index:1;
			> ul{
				position:relative;
				max-height:200px;
				overflow-y: auto;
			}
		}

		ul{
			overflow-x:hidden;
			float:left;
			width:100%;
			.jstree-icon{
				margin-left:5px; //move to align with possible search box
			}
			.jstree-open > ins{
				background-position:-18px 0; //move to align with possible search box
			}
		}

		ul.tree {
			margin: 0;
			a {
				font-size: 12px;
			}
		}
	}

	.treedropdownfield-toggle-panel-link {
		border: none;
		margin: 0;
		z-index: 0;
		padding: 7px 3px;
		overflow: hidden;
		-webkit-border-radius: 0 4px 4px 0;
		-moz-border-radius: 0 4px 4px 0;
		border-radius: 0 4px 4px 0;

		&.treedropdownfield-open-tree {
			background: transparent;
			border: none;
		}

		a {
			text-decoration: none;
			display: block;
			border: 0;
			margin: 0;
			opacity: 0.5;
		}
	}

	a.jstree-loading .jstree-pageicon {
		// Apply to .jstree-pageicon since .jstree-icon is hidden
		background: #fff url("../images/network-save.gif") center center no-repeat;
	}
}