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;

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

		.b-header-toolbar {

			height: 40px;

			color: #fff;

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

			.close {
				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;
				text-align: right;
			}
		}

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

			.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 {
				.checkboxItem {
					visibility: hidden;
				}
			}

			// .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: 0;
				border: 0;
				border-left: 6px solid #eee;
				z-index: 100;
				border-bottom: 1px solid #ddd;

				&.focused {
					border-left-color: #bbb;
				}

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

				.checkboxItem {
					display: inline-block;
					float: left;
					padding: 0 8px 0 6px;
					line-height: 45px;
				}

				.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 {
					border-left-color: #69A8F5;
					z-index: 101;

					&.focused {
						border-left-color: darken(#69A8F5, 5%);
					}
				}

				&.selected {

					background-color: #fff;
					border-left-color: #398CF2;
					z-index: 102;

					&.focused {
						border-left-color: darken(#398CF2, 5%);
					}
				}
			}
		}

		.b-view-content-toolbar {
			background-color: #f5f5f5;
			padding: 7px;
			position: absolute;
			top: 0;
			right: 0;
			left: @contacts-popup-left-width;
			height: 31px;
			text-align: right;
			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;
				}

				&::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: 0;
		border: 0;
		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;
		}
	}
}