snappymail/dev/Styles/Contacts.less

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

.b-contacts-content {

	.control-group {
		.control-label.fix-width {
			width: 50px;
		}
		.controls.fix-width {
			margin-left: 70px;
		}
	}

	&.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, .close-custom {
				color: #fff;
				opacity: 1;
			}

			.btn {
				margin-top: 4px;
			}
		}

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

			.e-search {
				margin-top: 7px;
				width: @contacts-popup-left-width - 20;
			}
		}

		.b-list-footer-toolbar {
			position: absolute;
			left: 0;
			bottom: 0;
			height: 105px;
			width: @contacts-popup-left-width;
			background-color: #eee;
			box-shadow: inset 0 1px 0 #ccc;

			.footer-pager {
				padding: 8px 10px 0 0;
			}
		}

		.b-list-content {
			position: absolute;
			top: 45px;
			bottom: 105px;
			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;
				box-shadow: inset 0 -1px 0 #ccc;
			}

			.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;
				border-bottom: 1px solid #ddd;

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

				.wrapper {
					padding: 0;
				}

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

				&.focused .sidebarParent {
					background-color: #bbb;
				}

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

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

				.shareParent {
					display: none;
					float: right;
					position: relative;
					margin: 2px 8px 0 5px;
				}

				.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;
				}

				&.shared .shareParent {
					display: inline-block;
				}

				&.checked {
					z-index: 101;

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

					&.focused .sidebarParent {
						background-color: darken(#69A8F5, 5%) !important;
					}
				}

				&.selected {

					background-color: #fff;
					z-index: 102;

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

					&.focused .sidebarParent {
						background-color: darken(#398CF2, 5%) !important;
					}
				}
			}
		}

		.b-view-content-toolbar {
			background-color: #f5f5f5;
			padding: 7px;
			position: absolute;
			top: 0;
			right: 0;
			left: @contacts-popup-left-width;
			height: 31px;
			text-align: center;
			box-shadow: inset 0 -1px 0 #ccc;

			.button-save-contact {
				&.no-disabled.dirty {
					color: #51a351;
					font-weight: bold;
				}
			}

			&.read-only .button-save-contact {
				display: none;
			}
		}

		.b-view-content {
			position: absolute;
			top: 45px;
			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;
			}

			.contactValueStatic, .contactValueLargeStatic, .contactValueTextAreaStatic {
				height: 20px;
				line-height: 20px;
				font-size: 18px;
				display: inline-block;
				padding: 5px 7px;
				color: #555;
				display: none;
			}

			&.read-only {
				.contactValueStatic, .contactValueLargeStatic, .contactValueTextAreaStatic {
					display: inline-block;
				}

				.contactValueInput, .contactValueInputLarge, .contactValueTextArea {
					display: none;
				}
			}

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

			.top-part {
				padding-top: 20px;
			}

			.property-line {
				margin-bottom: 5px;
			}

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

			.add-link {
				margin-left: 2px;
				padding: 5px;
				font-size: 12px;
				color: #aaa;
			}

			.contactValueStatic, .contactValueLargeStatic, .contactValueTextAreaStatic {
				font-size: 18px;
				display: none;
			}

			.contactValueInput, .contactValueInputLarge, .contactValueTextArea {
				box-shadow: none;
				border-color: #fff;
				font-size: 18px;
				width: 300px;

				&:hover {
					box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
					border-color: #ccc;
				}

				&:focus {
					box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
					border-color: #999;
				}

				&::-webkit-input-placeholder {
					color: #ddd;
				}
				&::-moz-placeholder {
					color: #ddd;
				}
				&:-moz-placeholder {
					color: #ddd;
				}
				&:-ms-input-placeholder  {
					color: #ddd;
				}
			}

			.contactValueTextArea {
				width: 300px;
			}

			.contactValueInputLarge {
				width: 400px;
			}

			.hasError {
				.contactValueInput {
					color: #ee5f5b;
					border-color: #ee5f5b;
				}
			}

			.e-save-trigger {
				position: absolute;
				top: 25px;
				left: 10px;
			}

			.e-read-only-sign {
				display: none;
				position: absolute;
				top: 20px;
				right: 40px;
			}

			.e-share-sign {
				position: absolute;
				top: 20px;
				right: 20px;
				cursor: pointer;
			}

			&.read-only {
				.e-read-only-sign {
					display: inline-block;
				}

				.e-share-sign {
					display: none;
				}
			}
		}
	}

	.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;
		border-bottom: 1px solid #ddd;
	}
}


html.rl-mobile {
	.b-contacts-content {
		.b-list-content, .b-list-toolbar, .b-list-footer-toolbar {
			width: 170px;
		}
		.b-list-toolbar .e-search {
			width: 150px;
		}
		.b-view-content-toolbar, .b-view-content {
			left: 170px;
		}
	}
}