Merge remote-tracking branch 'origin/vue' into vue-avatar-management

7 files changed, 86 insertions, 9 deletions

diff --git a/css/ContactDetails.scss b/css/ContactDetails.scss
index 4a017529..07948d3b 100644
--- a/css/ContactDetails.scss
+++ b/css/ContactDetails.scss
@@ -66,7 +66,20 @@
 		// ACTIONS
 		#contact-header-actions {
 			position: relative;
+			display: flex;
 			.menu-icon {
+				position: relative;
+				height: 44px;
+				width: 44px;
+				border-radius: 22px;
+				&.menu-icon--pulse {
+					margin: 8px;
+					width: 16px;
+					height: 16px;
+				}
+			}
+			[class^='icon-'],
+			[class*=' icon-'] {
 				height: 44px;
 				width: 44px;
 				padding: 14px;
@@ -84,5 +97,6 @@
 		grid-template-columns: repeat(auto-fit, minmax(unquote('#{$grid-column-width}'), 1fr));
 		grid-column-gap: 20px;
 		padding: 0 20px;
+		min-height: 200px;
 	}
 }
\ No newline at end of file
diff --git a/css/ContentListItem.scss b/css/ContentListItem.scss
new file mode 100644
index 00000000..510fc107
--- /dev/null
+++ b/css/ContentListItem.scss
@@ -0,0 +1,34 @@
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+.app-content-list-item-icon {
+	overflow: hidden;
+	&__avatar {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: inherit;
+		width: inherit;
+		background-size: cover;
+		cursor: pointer;
+	}
+}
\ No newline at end of file
diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss
index bf444758..d79fb758 100644
--- a/css/Properties/Properties.scss
+++ b/css/Properties/Properties.scss
@@ -100,6 +100,18 @@
 		}
 	}
 
+	&__label.multiselect {
+		.multiselect__tags {
+			border: none;
+			.multiselect__single {
+				@include icon-color('triangle-s', 'actions', $color-black, 1, true);
+				background-repeat: no-repeat;
+				background-position: center right 4px;
+				padding-right: 24px;
+			}
+		}
+	}
+
 	// property value within row, after label
 	&__value {
 		flex: 1 1;
diff --git a/css/Properties/PropertyTitle.scss b/css/Properties/PropertyTitle.scss
index 4152de6b..3511d475 100644
--- a/css/Properties/PropertyTitle.scss
+++ b/css/Properties/PropertyTitle.scss
@@ -30,4 +30,7 @@
 	.property__title--icon {
 		background-position: center right;
 	}
+	.icon-details {
+		margin-left: 7px;
+	}
 }
\ No newline at end of file
diff --git a/css/animations.scss b/css/animations.scss
new file mode 100644
index 00000000..ab49c84e
--- /dev/null
+++ b/css/animations.scss
@@ -0,0 +1,16 @@
+@keyframes pulse {
+	0% {
+		box-shadow: 0 0 0 0 rgba(50, 50, 50, .4);
+	}
+	70% {
+		box-shadow: 0 0 0 15px rgba(50, 50, 50, 0);
+	}
+	100% {
+		box-shadow: 0 0 0 0 rgba(50, 50, 50, 0);
+	}
+}
+
+[class*='--pulse '],
+[class$='--pulse'] {
+	animation: pulse 1.5s infinite;
+}
\ No newline at end of file
diff --git a/css/contacts.scss b/css/contacts.scss
index 74b70e2b..50016148 100644
--- a/css/contacts.scss
+++ b/css/contacts.scss
@@ -42,9 +42,10 @@ $grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2};
 @import 'settings/settings-addressbook';
 @import 'settings/settings-addressbook-shares';
 @import 'settings/settings-addressbook-sharee';
-@import 'details';
 @import 'ContactDetails';
 @import 'contact-details-avatar';
-@import './Properties/Properties';
-@import './Properties/PropertyTitle';
-@import 'importScreen';
\ No newline at end of file
+@import 'ContentListItem';
+@import 'Properties/Properties';
+@import 'Properties/PropertyTitle';
+@import 'importScreen';
+@import 'animations';
diff --git a/css/settings-section.scss b/css/settings-section.scss
index 31c81695..47031a88 100644
--- a/css/settings-section.scss
+++ b/css/settings-section.scss
@@ -75,11 +75,8 @@
 }
 
 // Add address book
-.new-address-book {
-	input[type='text'] + .icon-confirm, input[type='password'] + .icon-confirm, input[type='email'] + .icon-confirm {
-		opacity: 0.5;
-	}
-	.new-address-book-input {
+.new-addressbook {
+	.new-addressbook-input {
 		border-color: var(--color-border-dark);
 	}
 }