angular-multi-select/dist/dev/angular-multi-select.css

A multi select dropdown directive for AngularJS

/*
 █████  ███    ██  ██████  ██    ██ ██       █████  ██████      ███    ███ ██    ██ ██   ████████ ██     ███████ ███████ ██      ███████  ██████ ████████
██   ██ ████   ██ ██       ██    ██ ██      ██   ██ ██   ██     ████  ████ ██    ██ ██      ██    ██     ██      ██      ██      ██      ██         ██
███████ ██ ██  ██ ██   ███ ██    ██ ██      ███████ ██████      ██ ████ ██ ██    ██ ██      ██    ██     ███████ █████   ██      █████   ██         ██
██   ██ ██  ██ ██ ██    ██ ██    ██ ██      ██   ██ ██   ██     ██  ██  ██ ██    ██ ██      ██    ██          ██ ██      ██      ██      ██         ██
██   ██ ██   ████  ██████   ██████  ███████ ██   ██ ██   ██     ██      ██  ██████  ███████ ██    ██     ███████ ███████ ███████ ███████  ██████    ██
*/

.ams-button {
	display: inline-flex;
	position: relative;
	text-align: center;
	cursor: pointer;
	border: 1px solid #c6c6c6;
	padding: 6px 8px 6px 8px;
	font-size: 14px;
	border-radius: 4px;
	color: #555;
	white-space: normal;
	background-color: #fff;
	background-image: linear-gradient(#fff, #f7f7f7);

	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* IE/Edge */
	user-select: none;           /* non-prefixed version, currently not supported by any browser */
}

.ams-button:hover {
	border: 1px solid #999;
}

/*
 ██████  ██████  ███    ██ ████████  █████  ██ ███    ██ ███████ ██████
██      ██    ██ ████   ██    ██    ██   ██ ██ ████   ██ ██      ██   ██
██      ██    ██ ██ ██  ██    ██    ███████ ██ ██ ██  ██ █████   ██████
██      ██    ██ ██  ██ ██    ██    ██   ██ ██ ██  ██ ██ ██      ██   ██
 ██████  ██████  ██   ████    ██    ██   ██ ██ ██   ████ ███████ ██   ██
*/
.ams-container {
	display: flex;
	flex-direction: column;
	position: absolute;
	border: 1px solid rgba(0, 0, 0, 0.15);;
	background: white;
	color: DimGrey;
	padding: 5px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	z-index: 1000;
}

/*
██   ██ ███████ ██      ██████  ███████ ██████  ███████
██   ██ ██      ██      ██   ██ ██      ██   ██ ██
███████ █████   ██      ██████  █████   ██████  ███████
██   ██ ██      ██      ██      ██      ██   ██      ██
██   ██ ███████ ███████ ██      ███████ ██   ██ ███████
*/
.ams-helpers {
	display: flex;
	width: 100%;
}

.ams-helpers .ams-btn,
.ams-search .ams-btn {
	display: flex;
	white-space: nowrap;
	border: 1px solid #ccc;
	font-size: 13px;
	border-radius: 4px;
	color: DimGrey;
	background-color: #f1f1f1;
	line-height: 1.6;
	padding: 2px 8px;
}

.ams-helpers .ams-btn:hover,
.ams-search .ams-btn:hover {
	border: 1px solid #999;
}

.ams-helpers .selects .ams-btn:nth-child(2) {
	margin-left: 5px;
}

.ams-helpers .selects {
	display: flex;
	float: left;
}

.ams-helpers .selects .all::before {
	content: "✓";
	margin-right: 3px
}

.ams-helpers .selects .all {
	margin-bottom: 5px;
}

.ams-helpers .selects .none::before {
	content: "×";
	margin-right: 3px
}

.ams-helpers .none {
	margin-bottom: 5px;
}

.ams-helpers .resets {
	display: flex;
	float: right;
}

.ams-helpers .resets .reset::before {
	content: "↶";
	margin-right: 3px
}

.ams-helpers .reset {
	margin-left: 5px;
	margin-bottom: 5px;
}

/*
███████ ███████  █████  ██████   ██████ ██   ██
██      ██      ██   ██ ██   ██ ██      ██   ██
███████ █████   ███████ ██████  ██      ███████
     ██ ██      ██   ██ ██   ██ ██      ██   ██
███████ ███████ ██   ██ ██   ██  ██████ ██   ██
*/
.ams-search {
	display: flex;
	position: relative;
	margin-bottom: 5px;
}

.ams-search .ams-search-field {
	border-radius: 2px;
	border: 1px solid #ccc;
	height: 26px;
	font-size: 14px;
	width: 100%;
	color: #888;
	padding-left: 7px;
	outline: none;
}

.ams-search .clear::before {
	content: "×";
	line-height: normal;
}

.ams-search .clear {
	position: absolute;
	right: 2px;
	top: 2px;
	height: calc(100% - 4px);
}

/*
███████ ██████  ██ ███    ██ ███    ██ ███████ ██████
██      ██   ██ ██ ████   ██ ████   ██ ██      ██   ██
███████ ██████  ██ ██ ██  ██ ██ ██  ██ █████   ██████
     ██ ██      ██ ██  ██ ██ ██  ██ ██ ██      ██   ██
███████ ██      ██ ██   ████ ██   ████ ███████ ██   ██
*/
.ams-spinner {
	position: absolute;
	right: 30px;
	top: 6px;
	border: 2px solid rgba(0, 0, 0, 0.2);
	border-left: 2px solid #000;
	transform: translateZ(0);
	animation: spin 1.1s infinite linear;
}
.ams-spinner,
.ams-spinner:after {
	border-radius: 50%;
	width: 15px;
	height: 15px;
}
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/*
██ ████████ ███████ ███    ███ ███████
██    ██    ██      ████  ████ ██
██    ██    █████   ██ ████ ██ ███████
██    ██    ██      ██  ██  ██      ██
██    ██    ███████ ██      ██ ███████
*/
.ams-items {
	max-height: 50vh;
	overflow: auto;
	border: 1px solid #ddd;
}

/*
██ ████████ ███████ ███    ███
██    ██    ██      ████  ████
██    ██    █████   ██ ████ ██
██    ██    ██      ██  ██  ██
██    ██    ███████ ██      ██
*/
.ams-item {
	display: flex;
	align-items: center;
	/*The right padding will be set to as many pixel as the width of the .check element*/
	padding: 2px 0px 2px 0px;
}

.ams-item:hover {
	background-color: #efefef;
}

.ams-item-text {
	display: flex;
	align-items: center;
	white-space: nowrap;
	cursor: default;

	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* IE/Edge */
	user-select: none;           /* non-prefixed version, currently not supported by any browser */
}

.ams-item-focused {
	background-color: #ddd;
}

/*
 ██████  ██████  ███████ ███    ██ ███████ ██████      ███████ ████████  █████  ████████ ███████
██    ██ ██   ██ ██      ████   ██ ██      ██   ██     ██         ██    ██   ██    ██    ██
██    ██ ██████  █████   ██ ██  ██ █████   ██   ██     ███████    ██    ███████    ██    █████
██    ██ ██      ██      ██  ██ ██ ██      ██   ██          ██    ██    ██   ██    ██    ██
 ██████  ██      ███████ ██   ████ ███████ ██████      ███████    ██    ██   ██    ██    ███████
*/
.ams-caret {
	width: 10px;
	margin: 0px 0px 0px 5px;
	cursor: pointer;
}

.ams-item .ams-caret {
	width: 10px;
	margin-right: 5px;
	cursor: pointer;
}

.ams-item.leaf .ams-caret {
	cursor: default;
	color: transparent; /* Hack to conserve the width of the element without making it visible */
}

.ams-caret::before,
.ams-item:not(.leaf) .ams-caret.open::before {
	content: '▾';
}

.ams-item:not(.leaf) .ams-caret.closed::before {
	content: '▸';
}

/*
 ██████ ██   ██ ███████  ██████ ██   ██ ███████ ██████      ███████ ████████  █████  ████████ ███████
██      ██   ██ ██      ██      ██  ██  ██      ██   ██     ██         ██    ██   ██    ██    ██
██      ███████ █████   ██      █████   █████   ██   ██     ███████    ██    ███████    ██    █████
██      ██   ██ ██      ██      ██  ██  ██      ██   ██          ██    ██    ██   ██    ██    ██
 ██████ ██   ██ ███████  ██████ ██   ██ ███████ ██████      ███████    ██    ██   ██    ██    ███████
*/
.ams-item .check {
	cursor: pointer;
	width: 15px;
	text-align: center;
}

.ams-item .check.checked::before {
	content: '✓';
	color: green;
}

.ams-item .check.unchecked::before {
	content: '✗';
	color: red;
}

.ams-item .check.mixed::before {
	content: '~';
	color: goldenrod;
	padding-left: 3px;
}

/*
██ ███    ██ ██████  ███████ ███    ██ ██████   █████  ████████ ██  ██████  ███    ██
██ ████   ██ ██   ██ ██      ████   ██ ██   ██ ██   ██    ██    ██ ██    ██ ████   ██
██ ██ ██  ██ ██   ██ █████   ██ ██  ██ ██   ██ ███████    ██    ██ ██    ██ ██ ██  ██
██ ██  ██ ██ ██   ██ ██      ██  ██ ██ ██   ██ ██   ██    ██    ██ ██    ██ ██  ██ ██
██ ██   ████ ██████  ███████ ██   ████ ██████  ██   ██    ██    ██  ██████  ██   ████
*/
.ams-item-level-0 {
	padding-left: 20px;
}