snappymail/dev/Styles/Contacts.less

@contacts-popup-left-width: 250px;

.b-contacts-content {

	&.modal {

		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		left: 0;
		width: 900px;
		min-height: 300px;
		max-height: 700px;
		margin: auto;

		.modal-body {
			overflow: auto;
			height: 100%;
			background-color: #f5f5f5;
			padding: 0;
		}

		.b-header-toolbar {

			height: 40px;

			background-color: @rlMainDarkColor;
			color: #fff;

			background-color: #333;
			background-color: rgba(0,0,0,0.8) !important;

			.close {
				color: #fff;
				.opacity(100);
			}

			.btn {
				margin-top: 4px;
			}

			.button-new-message {
				margin-left: 8px;
			}
			.button-delete {
				margin-left: 8px;
			}
		}

		.b-list-toopbar {
			padding: 0;
			height: 45px;
			text-align: center;
			width: @contacts-popup-left-width;
			.box-shadow(inset 0 -1px 0 #ccc);

			.e-search {
				margin-top: 7px;
			}
		}

		.b-list-content {
			position: absolute;
			top: 45px;
			bottom: 60px;
			left: 0;
			width: @contacts-popup-left-width;
			overflow: hidden;
			overflow-y: auto;

			.content {
				-webkit-overflow-scrolling: touch;
			}

			.listClear {
				color: #333;
				text-align: center;
				padding: 10px;
				font-size: 14px;
				line-height: 13px;
				background-color: #fff;
			}

			.listEmptyList, .listEmptyListLoading, .listEmptySearchList {
				color: #999;
				text-align: center;
				padding: 60px 10px;
				font-size: 24px;
				line-height: 30px;
			}

			&.hideContactListCheckbox {
				.checkedParent, .checkboxCkeckAll {
					display: none !important;
				}
				.sidebarParent {
					margin-right: 10px !important;
				}
			}

			.e-contact-foreach {
				border-bottom: 1px solid #ddd;
			}

			.e-contact-item {
				position: relative;
				height: 45px;
				max-height: 45px;
				line-height: 45px;
				overflow: hidden;
				cursor: pointer;

				margin: 0px;
				border: 0px solid transparent;
				z-index: 100;

				.delimiter {
					position: relative;
					display: block;
					height: 1px;
					background-color: #999;
					.opacity(20);
				}

				.wrapper {
					padding: 0;
				}

				.sidebarParent {
					display: inline-block;
					width: 6px;
					background-color: #eee;
					float: left;
					height: 100%;
				}

				&.deleted {
					max-height: 0px;
					border-color: transparent !important;
				}

				.checkedParent {
					display: inline-block;
					float: left;
					padding: 0 8px 0 6px;
				}

				.nameParent {
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #333;
					font-size: 16px;
				}

				.nameParent, .emailParent {
					white-space: nowrap;
				}

				.displayName, .displayEmail {
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.displayImg {
					display: inline-block;
					float: right;
					position: relative;
					margin: 0 5px;
				}

				&.checked {
					z-index: 101;

					.sidebarParent {
						background-color: #69A8F5;
					}
				}

				&.selected {
					background-color: #fff;
					z-index: 102;

					.sidebarParent {
						background-color: #398CF2;
					}
				}
			}
		}

		.b-view-content {
			position: absolute;
			top: 0;
			bottom: 60px;
			left: @contacts-popup-left-width;
			right: 0;
			overflow: hidden;
			overflow-y: auto;

			background-color: #fff;
			border-left: 1px solid #ddd;

			.content {
				-webkit-overflow-scrolling: touch;
			}

			.b-contact-view-desc {
				text-align: center;
				font-size: 24px;
				line-height: 30px;
				padding-top: 120px;
				color: #999;
			}

			.top-part {
				margin-top: 20px;

				.control-label {
					text-align: center;
				}
			}

			.image-wrapper {
				margin-left: 30px;
				border-radius: 10px;

				img {
					border-radius: 10px;
				}
			}

			.top-row {
				padding: 10px 0;
				height: 30px;
			}

			.contactEmptyValueClick, .contactValueClick, .contactValueInput {
				display: inline-block;
				font-size: 24px;
				line-height: 28px;
				height: 28px;
			}

			.contactEmptyValueClick, .contactValueClick {
				color: #ddd;
				cursor: pointer;
				margin: 5px 0 0 7px;
			}

			.contactValueInput {
				padding-left: 6px;
			}

			.contactEmptyValueClick {
				border-bottom: 1px dashed #ddd;
			}
			
			.contactValueClick {
				color: #555;
				border-bottom: 11px dashed transparent;
			}

			.contactValueClick:hover {
				color: #000;
				border-bottom: 1px dashed #000;
			}

			.contactValueInput {
				
			}

			.hasError {
				.contactValueClick, .contactValueInput {
					color: #ee5f5b;
					border: 1px solid #ee5f5b;
				}
			}

			.button-save-contact {
				position: absolute;
				bottom: 20px;
				right: 20px;
			}
		}
	}

	.e-contact-item {

		position: relative;
		height: 55px;
		max-height: 60px;
		line-height: 22px;
		overflow: hidden;
		cursor: pointer;

		margin: 0px;
		border: 0px solid transparent;
		z-index: 100;

	}
}