Fix styling

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

1 files changed, 14 insertions, 20 deletions

diff --git a/css/contact-details-avatar.scss b/css/contact-details-avatar.scss
index fe4adfab..d2ad4485 100644
--- a/css/contact-details-avatar.scss
+++ b/css/contact-details-avatar.scss
@@ -39,10 +39,18 @@
 	&__photo {
 		z-index: 10;
 		background-size: cover;
+		width: 100%;
+		height: 100%;
+		background-repeat: no-repeat;
+		background-position: center;
+		cursor: pointer;
 	}
 	label.icon-upload-white {
 		opacity: .5;
 		z-index: 2;
+		position: absolute;
+		width: 100%;
+		height: 100%;
 		&:hover,
 		a:active,
 		a:focus {
@@ -52,13 +60,6 @@
 	&__photo +  label.icon-upload-white {
 		opacity: 0;
 	}
-	&__background,
-	&__photo,
-	label.icon-upload-white {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-	}
 	&__options {
 		top: 0;
 		background-color: rgba(0, 0, 0, 0.2);
@@ -80,15 +81,13 @@
 	display: flex;
 	justify-content: center;
 	z-index: 200;
-	padding-top: 65px;
+	padding-top: $header-height;
+	flex-direction: column;
 	.contact-header-avatar__photo {
-		width: auto;
-		height: auto;
 		border-radius: 0;
-		max-height: calc(100% - 40px);
-		max-width: 100%;
 		align-self: center;
-		margin-bottom: 40px;
+		background-size: contain;
+		margin: 50px;
 	}
 	label.icon-upload-white {
 		width: 25%;
@@ -96,17 +95,12 @@
 		position: relative;
 	}
 	.contact-header-avatar__options {
-		height: 40px;
+		height: 50px;
 		width: 100%;
-		position: absolute;
-		top: calc(100% - 40px);
-		left: 0;
 		display: flex;
 		opacity: 1;
-		padding: 0;
 		flex-wrap: wrap;
-		justify-content: space-around;
-		background-color: rgba(0, 0, 0, 0.2);
+		justify-content: space-evenly;
 	}
 	.contact-header-avatar__options > [class^='icon-'] {
 		width: 25%;