landmark-serve/public/styles/landmark/select2.less

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

/* 
 * Custom theme for select2
 * Based on github.com/t0m/select2-bootstrap-css/
*/

// The min-width is important, otherwise the fields squish up when they're blank
.select2-container {
	vertical-align: middle;
	min-width: 240px;
}

// multi-select fields should fill the width like other Bootstrap fields
.select2-container-multi {
	width: 100%;
}

// Small fields for List filtering UI
.filter .select2-container {
	font-size: @font-size-small;
}

// Style the field so it looks like the other fields
.select2-container .select2-choice,
.select2-container-multi .select2-choices {
	.box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
	border: 1px solid #ccc;
	border-radius: 3px;
	line-height: @input-height-base;
	background-image: none;
	filter: none;
}
.filter .select2-container .select2-choice,
.filter .select2-container-multi .select2-choices {
	border-radius: @border-radius-small;
}

// single-select fields have a fixed height to match the Bootstrap fields
.select2-container .select2-choice {
	height: @input-height-base;
}
.filter .select2-container .select2-choice {
	height: 24px;
	line-height: 24px;
}

// multi-select fields have a min-height to match the Bootstrap fields
.select2-container-multi .select2-choices {
	min-height: 34px;
}

// reset the focused style of the field to match the other fields
.select2-container-active .select2-choice,
.select2-container-active .select2-choices,
.select2-container-multi.select2-container-active .select2-choices {
	.box-shadow( ~"inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)" );
	border-color: rgba(82, 168, 236, 0.8);
	outline: none;
}

// Add padding to the current value for single-select fields
.select2-container .select2-choice span {
	margin-right: 50px;
}

// Clean up the height, line-height and style of inputs
.select2-search .select2-input {
	height: @input-height-base - 2;
	line-height: @line-height-computed;
	border-color: #ccc;
	border-radius: @border-radius-base;
	padding: 2px 20px 2px 5px;
}
.filter .select2-input, #page-list .select2-search .select2-input {
	height: @input-height-small - 2;
	font-size: @font-size-small;
}

// Clean up the height and line-height of inputs for multi-select fields
.select2-container-multi .select2-choices .select2-search-field {
	
	height: @input-height-base - 2;
	line-height: @line-height-computed;
	input {
		height: @input-height-base - 2;
	}
}

// Remove the gradient from the selected values for multi-select fields
.select2-container-multi .select2-choices .select2-search-choice {
	background: white;
}
// Reset the focused appearance of selected values for multi-select fields
.select2-container-multi .select2-choices .select2-search-choice-focus {
	border-color: @input-border-focus;
}

// Remove the gradient from the dropdown-arrow and set the chevron position
.select2-container .select2-choice div {
	border-left: none;
	background: none;
	background-image: none;
	filter: none;
	width: 22px;
	
	b {
		height: 20px;
		margin-top: 2px;
	}
}
.filter .select2-container .select2-choice div {
	font-size: @font-size-small;
	b {
		margin-top: -2px;
	}
}

// reposition the loading spinner so it doesn't sit right up against the edge of the field
.select2-drop .select2-search input.select2-active,
.select2-container-multi .select2-choices .select2-search-field input.select2-active {
	background-position: 99% center !important
}

// reposition the close button (it really means the clear x)
.select2-container .select2-choice .select2-search-choice-close {
	top: 10px;
	right: 24px;
}
.filter .select2-container .select2-choice .select2-search-choice-close {
	top: 5px;
}

// Fix the size of the multi-select choices
.select2-container-multi .select2-choices .select2-search-choice {
	padding: 5px 6px 6px 21px;
	
	// fix the position of the close button on the left
	.select2-search-choice-close {
		top: 5px;
		left: 6px;
	}
}

// Fix the grey background and border-radius on open fields
.select2-dropdown-open .select2-choice,
.select2-dropdown-open .select2-choices {
	background: none white;
	border-radius: 3px 3px 0 0;
}

// Fix the grey background on the 'loading' item
.select2-dropdown-open .select2-choice {
	background: none white;
}

.select2-drop {
	.box-shadow( ~"0 4px 5px rgba(0, 0, 0, 0.15), 0 -5px 5px #FFFFFF" );
}
.select2-drop-above {
	.box-shadow( ~"0 -1px 4px rgba(0, 0, 0, 0.15), 0 -5px 5px #FFFFFF !important" );	
}

// Fix the style of the loading / results indicator
.select2-results .select2-no-results,
.select2-results .select2-more-results,
.select2-results .select2-searching,
.select2-results .select2-selection-limit {
	background-color: white;
	padding: 4px;
	color: @gray-light;
}

// Fix the size of empty result labels
.select2-results .select2-result-label {
	min-height: 27px;
}
#page-list .select2-results {
	font-size: @font-size-small;
	.select2-result-label {
		min-height: 20px;
		padding: 3px 7px 1px;
	}
}

// Give the hilighted results a border-radius
.select2-results .select2-highlighted {
	border-radius: 2px;
}


/**
 * This stops the quick flash when a native selectbox is shown and 
 * then replaced by a select2 input when javascript kicks in.
 */  
select.ui-select2 {
	height: @input-height-base;
	visibility: hidden;
}