Light12306/Web12306/css/ui/passenger-selector.css

/*联系人搜索*/

.passenger-selector-wrap {
	position: relative;
	overflow: visible;
	display: inline-block;
}

	.passenger-selector-wrap section div.loading-indicator {
		display: none;
	}

	.passenger-selector-wrap section.loading ul,
	.passenger-selector-wrap section.loading .passenger-pager {
		display: none;
	}

	.passenger-selector-wrap section.loading div.loading-indicator {
		display: block;
	}

.passenger-selector {
	position: absolute;
	z-index: 100;
	left: 0;
	top: 35px;
	box-shadow: 3px 3px 10px rgba(110, 110, 110, 0.5);
	border-radius: 0 5px 5px 5px;
	border: 1px solid #c7c7c7;
	background-color: #ffffff;
	padding: 12px;
	display: none;
}

	.passenger-selector:hover {
		display: block;
	}

	.passenger-selector .passenger-search {
		/*
			TODO 这里要搜索何用？
			*/
		display: none;
	}

	.passenger-selector .passenger-selector-add {
		color: #616161;
		width: 26px;
		height: 26px;
		background: linear-gradient(180deg, #f4f4f4, #e9e8e9);
		border: 1px solid #d1d1d1;
		border-radius: 2px;
		cursor: pointer;
	}

		.passenger-selector .passenger-selector-add:hover {
			background: linear-gradient(180deg, #fefefe, #f3f3f3);
			border: 1px solid #e1e1e1;
		}

		.passenger-selector .passenger-selector-add:active {
			background: linear-gradient(180deg, #e9e8e9, #f4f4f4);
			border: 1px solid #d1d1d1;
		}

		.passenger-selector .passenger-selector-add:before {
			left: 7px;
			top: 7px;
			position: relative;
			color: #616161;
		}

	.passenger-selector .passenger-search div.fr:before {
		position: absolute;
		right: 6px;
		top: 6px;
		color: #6c6f83;
	}

	.passenger-selector .passenger-search-key {
		line-height: 16px;
		padding: 4px 24px 4px 6px;
		border: 1px solid #c7c7c7;
		margin: 0;
		width: 180px;
		border-radius: 2px;
	}

	.passenger-selector ul {
		width: 300px;
		margin-top: 12px;
	}

		.passenger-selector ul li {
			width: 300px;
			float: left;
			width: 98px;
			line-height: 35px;
			border: 1px solid #e1e1e1;
			text-align: center;
			color: #676767;
			cursor: pointer;
			position: relative;
			margin-top: -1px;
			margin-left: -1px;
		}

			.passenger-selector ul li.selected {
				border-right-color: #ebd0b3;
				border-bottom-color: #ebd0b3;
				background-color: #fff5e6;
				color: #f2983a;
			}

#passenger-selector ul li.selected:after {
	border-top: 1px solid #ebd0b3;
	width: 100%;
	height: 0;
	position: absolute;
	top: -1px;
	left: 0;
	content: '';
}

.passenger-selector ul li.selected:before {
	border-left: 1px solid #ebd0b3;
	height: 100%;
	width: 0;
	position: absolute;
	top: 0;
	left: -1px;
	content: '';
}

.passenger-selector ul li:hover {
	border-right-color: #e19b23;
	border-bottom-color: #e19b23;
	background: linear-gradient(to top, #f78c21, #fca818);
	color: #fef3ea;
}

	.passenger-selector ul li:hover:after {
		border-top: 1px solid #e19b23;
		width: 100%;
		height: 0;
		position: absolute;
		top: -1px;
		left: 0;
		content: '';
	}

	.passenger-selector ul li:hover:before {
		border-left: 1px solid #e19b23;
		height: 100%;
		width: 0;
		position: absolute;
		top: 0;
		left: -1px;
		content: '';
	}

.passenger-selector .passenger-pager {
	margin-top: 12px;
	text-align: center;
	width: 100%;
}

	.passenger-selector .passenger-pager button {
		line-height: 24px;
		background: linear-gradient(to top, #e6e6e6, #f9f9f9);
		color: #7d848d;
		border: 1px solid #bdbcbc;
		border-radius: 4px;
		cursor: pointer;
	}

		.passenger-selector .passenger-pager button:hover {
			background: linear-gradient(to top, #efefef, #ffffff);
		}

		.passenger-selector .passenger-pager button:disabled {
			border: 1px solid transparent;
			background: none transparent;
			color: #9da2a8;
		}