Cleanup contacts popup

dev/Styles/Contacts.less

@@ -8,16 +8,11 @@
 			padding-top: 0;
 			width: 50px;
 		}
-		.controls {
-			margin-left: 70px;
-		}
 	}
 
 	&.modal {
-
 		position: absolute;
 		right: 0;
-		top: 0;
 		bottom: 0;
 		left: 0;
 		width: auto;
@@ -28,9 +23,9 @@
 	}
 
 	.modal-body {
-		overflow: auto;
 		height: calc(100% - 49px);
 		padding: 0;
+		position: relative;
 	}
 
 	.b-list-toolbar {
@@ -188,23 +183,13 @@
 			-webkit-overflow-scrolling: touch;
 		}
 
-		.contactValueStatic, .contactValueLargeStatic, .contactValueTextAreaStatic {
+		span {
 			height: 20px;
 			line-height: 20px;
-			font-size: 18px;
-			display: inline-block;
-			padding: 5px 7px;
 			display: none;
-		}
-
-		&.read-only {
-			.contactValueStatic, .contactValueLargeStatic, .contactValueTextAreaStatic {
-				display: inline-block;
-			}
-
-			.contactValueInput, .contactValueInputLarge, .contactValueTextArea {
-				display: none;
-			}
+			padding: 5px 7px;
+			font-size: 18px;
+			display: none;
 		}
 
 		.b-contact-view-desc {
@@ -235,16 +220,12 @@
 			color: #aaa;
 		}
 
-		.contactValueStatic, .contactValueLargeStatic, .contactValueTextAreaStatic {
-			font-size: 18px;
-			display: none;
-		}
-
-		.contactValueInput, .contactValueInputLarge, .contactValueTextArea {
+		input, textarea {
 			box-shadow: none;
 			border-color: #fff;
 			font-size: 18px;
-			width: 300px;
+			width: 70vw;
+			max-width: 400px;
 
 			&:hover {
 				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@@ -257,16 +238,8 @@
 			}
 		}
 
-		.contactValueTextArea {
-			width: 300px;
-		}
-
-		.contactValueInputLarge {
-			width: 400px;
-		}
-
 		.hasError {
-			.contactValueInput {
+			input {
 				color: #ee5f5b;
 				border-color: #ee5f5b;
 			}
@@ -293,11 +266,11 @@
 		}
 
 		&.read-only {
-			.e-read-only-sign {
+			span, .e-read-only-sign {
 				display: inline-block;
 			}
 
-			.e-share-sign {
+			input, textarea, .e-share-sign {
 				display: none;
 			}
 		}