Added external link support

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

3 files changed, 61 insertions, 29 deletions

diff --git a/css/ContactDetailsAvatar.scss b/css/ContactDetailsAvatar.scss
index 95a7cf1a..34920f37 100644
--- a/css/ContactDetailsAvatar.scss
+++ b/css/ContactDetailsAvatar.scss
@@ -52,8 +52,8 @@
 		width: 100%;
 		height: 100%;
 		&:hover,
-		a:active,
-		a:focus {
+		&:active,
+		&:focus {
 			opacity: .7;
 		}
 	}
diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss
index 817627c8..d27ee5f8 100644
--- a/css/Properties/Properties.scss
+++ b/css/Properties/Properties.scss
@@ -35,37 +35,12 @@
 	&--addressbooks &__delete {
 		display: none !important;
 	}
-	
-	&__delete {
-		position: absolute;
-		top: 0;
-		right: 0;
-		width: $grid-height-unit;
-		height: $grid-height-unit;
-		margin: 0;
-		border: 0;
-		background-color: transparent;
-		opacity: .5;
-		display: none;
-		&:hover,
-		a:active,
-		a:focus {
-			opacity: .7;
-		}
-	}
-	
-	&:hover &__delete,
-	a:active &__delete,
-	a:focus &__delete {
-		display: block;
-	}
-	
+		
 	// property row
 	&__row {
 		display: flex;
 		align-items: center;
 		padding-right: 44px;
-		// height: $grid-height-unit;
 		position: relative;
 	}
 	
@@ -129,7 +104,7 @@
 		}
 	}
 
-	// property value within row, after label
+	// Property value within row, after label
 	&__value {
 		flex: 1 1;
 
@@ -143,5 +118,58 @@
 		&:read-only {
 			border-color: var(--color-border-dark);
 		}
+		input&--with-ext {
+			// ext icon width + 8px padding
+			padding-right: 24px;
+			&:hover,
+			&:focus,
+			&:active {
+				~ .property__ext, 
+				~ .property__delete {
+					opacity: .5;
+				}
+			}
+		}
+	}
+
+	// show ext & delete button on full row hover
+	&:hover &__ext,
+	&:hover &__delete {
+		opacity: .5;
+	}
+
+	// External link (tel, mailto, http, ftp...)
+	&__ext {
+		position: absolute;
+		// property row rightPadding + 8px;
+		right: 52px;
+		opacity: 0;
+		&:hover,
+		&:focus,
+		&:active {
+			opacity: .7;
+			// still show the delete button for keyboard accessibility
+			~ .property__delete {
+				opacity: .7;
+			}
+		}
+	}
+	
+	// Delete property button
+	&__delete {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: $grid-height-unit;
+		height: $grid-height-unit;
+		margin: 0;
+		border: 0;
+		background-color: transparent;
+		opacity: 0;
+		&:hover,
+		&:active,
+		&:focus {
+			opacity: .7;
+		}
 	}
 }
diff --git a/css/icons.scss b/css/icons.scss
index 00f390e9..5549a162 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -28,6 +28,10 @@
 	@include icon-color('address-book', 'contacts', $color-black, 1);
 }
 
+.icon-phone {
+	@include icon-color('phone', 'contacts', $color-black, 1);
+}
+
 .icon-eye-white {
 	@include icon-color('eye', 'contacts', $color-white, 1);
 }