BIM-Monitor/assets/stylesheets/sass/modules/forms/_select2.scss

.select2-container {
	&.form-control {
		background: transparent;
		border: none;
		display: block;
		margin: 0;
		padding: 0;
	}
	.select2-choices .select2-search-field input,
	.select2-choice,
	.select2-choices {
		background: none;
		border-radius: 4px;
		color: #555;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		background-color: #FFF;
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		border-color: #ccc;
		padding: 0;
	}
}

.select2-search input {
	border-radius: 4px;
	color: #555;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: #FFF;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	border-color: #ccc;
}

.select2-container {
	.select2-choices .select2-search-field input {
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.select2-choice {
		height: 34px;
		line-height: 1.42857;
	}
	&.select2-container-multi.form-control {
		height: auto;
	}
	&.input-sm .select2-choice {
		height: 30px;
		line-height: 1.5;
		border-radius: 3px;
	}
}

.input-group-sm .select2-container .select2-choice {
	height: 30px;
	line-height: 1.5;
	border-radius: 3px;
}

.select2-container.input-lg .select2-choice,
.input-group-lg .select2-container .select2-choice {
	height: 45px;
	line-height: 1.33;
	border-radius: 6px;
}

.select2-container-multi {
	.select2-choices .select2-search-field input {
		height: 32px;
		margin: 0;
	}
	&.input-sm .select2-choices .select2-search-field input {
		height: 28px;
	}
}

.input-group-sm .select2-container-multi .select2-choices .select2-search-field input {
	height: 28px;
}

.select2-container-multi.input-lg .select2-choices .select2-search-field input,
.input-group-lg .select2-container-multi .select2-choices .select2-search-field input {
	height: 43px;
}

.select2-chosen,
.select2-choice > span:first-child,
.select2-container .select2-choices .select2-search-field input {
	padding: 6px 12px;
}

.input-sm .select2-chosen,
.input-group-sm .select2-chosen,
.input-sm .select2-choice > span:first-child,
.input-group-sm .select2-choice > span:first-child,
.input-sm .select2-choices .select2-search-field input,
.input-group-sm .select2-choices .select2-search-field input {
	padding: 5px 10px;
}

.input-lg .select2-chosen,
.input-group-lg .select2-chosen,
.input-lg .select2-choice > span:first-child,
.input-group-lg .select2-choice > span:first-child,
.input-lg .select2-choices .select2-search-field input,
.input-group-lg .select2-choices .select2-search-field input {
	padding: 10px 16px;
}

.select2-container-multi {
	.select2-choices .select2-search-choice {
		margin-top: 5px;
		margin-bottom: 3px;
		color: #fff;
		background: $color-primary;
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
		-webkit-box-shadow: none;
		box-shadow: none;
		border: 0 none;
		font-size: 75%;
		font-weight: bold;
	}
	&.input-sm .select2-choices .select2-search-choice {
		margin-top: 3px;
		margin-bottom: 2px;
	}
}

.input-group-sm .select2-container-multi .select2-choices .select2-search-choice {
	margin-top: 3px;
	margin-bottom: 2px;
}

.select2-container-multi.input-lg .select2-choices .select2-search-choice,
.input-group-lg .select2-container-multi .select2-choices .select2-search-choice {
	line-height: 24px;
}

.select2-container .select2-choice {
	.select2-arrow, div {
		border-left: 1px solid #ccc;
		background: none;
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	}
}

.select2-dropdown-open .select2-choice {
	.select2-arrow, div {
		border-left-color: transparent;
		background: none;
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	}
}

.select2-container .select2-choice {
	.select2-arrow b, div b {
		background-position: 0 3px;
	}
}

.select2-dropdown-open .select2-choice {
	.select2-arrow b, div b {
		background-position: -18px 3px;
	}
}

.select2-container.input-sm .select2-choice .select2-arrow b,
.input-group-sm .select2-container .select2-choice .select2-arrow b,
.select2-container.input-sm .select2-choice div b,
.input-group-sm .select2-container .select2-choice div b {
	background-position: 0 1px;
}

.select2-dropdown-open.input-sm .select2-choice .select2-arrow b,
.input-group-sm .select2-dropdown-open .select2-choice .select2-arrow b,
.select2-dropdown-open.input-sm .select2-choice div b,
.input-group-sm .select2-dropdown-open .select2-choice div b {
	background-position: -18px 1px;
}

.select2-container.input-lg .select2-choice .select2-arrow b,
.input-group-lg .select2-container .select2-choice .select2-arrow b,
.select2-container.input-lg .select2-choice div b,
.input-group-lg .select2-container .select2-choice div b {
	background-position: 0 9px;
}

.select2-dropdown-open.input-lg .select2-choice .select2-arrow b,
.input-group-lg .select2-dropdown-open .select2-choice .select2-arrow b,
.select2-dropdown-open.input-lg .select2-choice div b,
.input-group-lg .select2-dropdown-open .select2-choice div b {
	background-position: -18px 9px;
}

.has-warning {
	.select2-choice,
	.select2-choices {
		border-color: #c09853;
	}
	.select2-container-active .select2-choice,
	.select2-container-multi.select2-container-active .select2-choices {
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
		border-color: #a47e3c;
	}
	&.select2-drop-active {
		border-color: #a47e3c;
		&.select2-drop.select2-drop-above {
			border-top-color: #a47e3c;
		}
	}
}

.has-error {
	.select2-choice,
	.select2-choices {
		border-color: #b94a48;
	}
	.select2-container-active .select2-choice,
	.select2-container-multi.select2-container-active .select2-choices {
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
		border-color: #953b39;
	}
	&.select2-drop-active {
		border-color: #953b39;
		&.select2-drop.select2-drop-above {
			border-top-color: #953b39;
		}
	}
}

.has-success {
	.select2-choice,
	.select2-choices {
		border-color: #468847;
	}
	.select2-container-active .select2-choice,
	.select2-container-multi.select2-container-active .select2-choices {
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
		border-color: #356635;
	}
	&.select2-drop-active {
		border-color: #356635;
		&.select2-drop.select2-drop-above {
			border-top-color: #356635;
		}
	}
}

.select2-container-active .select2-choice,
.select2-container-multi.select2-container-active .select2-choices {
	outline: none;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	-webkit-transition: border-color ease-in-out .15s box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s box-shadow ease-in-out .15s;
	border-color: #66afe9;
}

.select2-drop-active {
	border-color: #66afe9;
}

.select2-drop-auto-width,
.select2-drop.select2-drop-above.select2-drop-active {
	border-top-color: #66afe9;
}

.input-group {
	&.select2-bootstrap-prepend [class^=select2-choice] {
		border-bottom-left-radius: 0 !important;
		border-top-left-radius: 0 !important;
	}
	&.select2-bootstrap-append [class^=select2-choice] {
		border-bottom-right-radius: 0 !important;
		border-top-right-radius: 0 !important;
	}
}

.select2-dropdown-open {
	[class^=select2-choice] {
		border-bottom-right-radius: 0 !important;
		border-bottom-left-radius: 0 !important;
	}
	&.select2-drop-above [class^=select2-choice] {
		border-top-right-radius: 0 !important;
		border-top-left-radius: 0 !important;
	}
}

.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
	background: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.select2-results .select2-highlighted {
	color: #FFF;
	background-color: #428bca;
}

.select2-bootstrap-append,
.select2-bootstrap-prepend {
	.select2-container-multiple {
		vertical-align: top;
	}
	.input-group-btn {
		vertical-align: top;
		.btn {
			vertical-align: top;
		}
	}
}

.select2-container-multi .select2-choices .select2-search-choice-focus {
	background: #ebebeb;
	color: #333;
	-webkit-box-shadow: none;
	box-shadow: none;
	border-color: #adadad;
}

.select2-search-choice-close {
	background: none;
	margin-top: -8px;
	top: 50%;

	&:after {
		content: 'x';
		font-size: 10px;
		color: #fff;
		padding: 0 4px;
		font-weight: bold;
	}
}

.select2-container .select2-choice abbr {
	top: 50%;
}

.select2-results {
	.select2-no-results,
	.select2-searching,
	.select2-selection-limit {
		background-color: #fcf8e3;
		color: #c09853;
	}
}

.select2-container.select2-container-disabled {
	.select2-choice,
	.select2-choices {
		cursor: not-allowed;
		background-color: #eee;
		border-color: #ccc;
	}
	.select2-choice {
		.select2-arrow, div {
			background-color: transparent;
			border-left: 1px solid transparent;
		}
	}
	.select2-choices {
		.select2-arrow, div {
			background-color: transparent;
			border-left: 1px solid transparent;
		}
	}
}

.select2-search input.select2-active,
.select2-container-multi .select2-choices .select2-search-field input.select2-active,
.select2-more-results.select2-active {
	background-position: right 4px center;
}


// DARK SKIN
// -----------------------------------------------------------------------------
html.dark {
	.select2-container {
		.select2-choices .select2-search-field input,
		.select2-choice,
		.select2-choices {
			color: #EEE;
			background-color: $dark-color-3;
			border-color: $dark-color-3;
		}
	}

	.select2-search {
		position: relative;

		input {
			color: #EEE;
			background: $dark-color-4;
			border-color: $dark-color-5;

			&.select2-active {
				background: $dark-color-4;
			}

		}

		&:before {
			font-family: 'FontAwesome';
			content: "\f002";
			position: absolute;
			right: 15px;
			top: 50%;
			color: #EEE;
			font-size: 12px;
			margin: -11px 0 0;
		}
	}

	.select2-drop {
		background-color: $dark-color-3;
		border-color: $dark-color-2;
	}

	.select2-container-multi {
		.select2-choices .select2-search-choice {
			color: #EEE;
		}
	}

	.select2-container .select2-choice .select2-arrow,
	.select2-container .select2-choice div {
		border-color: $dark-color-3;
	}

	.select2-results .select2-result-label {
		color: #EEE;
	}

}