Grid fixes and title update

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

4 files changed, 151 insertions, 78 deletions

diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss
new file mode 100644
index 00000000..bddf8edf
--- /dev/null
+++ b/css/Properties/Properties.scss
@@ -0,0 +1,99 @@
+/**
+ * @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/>.
+ *
+ */
+
+.property {
+	@include generate-grid-span(1);
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: column;
+	position: relative;
+	width: $grid-column-width;
+	margin-bottom: $grid-height-unit;
+	
+	&__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;
+
+		input {
+			flex: 1 1;
+		}
+	
+	}
+	
+	// label or multiselect
+	&__label,
+	&__label.multiselect {
+		margin: $grid-input-margin;
+		margin: $grid-input-margin 5px $grid-input-margin 0;
+		height: $grid-input-height-with-margin;
+		padding: $grid-input-padding 0;
+		width: 120px;
+		opacity: .7;
+
+		&,
+		.multiselect__input::placeholder {
+			text-align: right;
+		}
+
+		&:not(.multiselect) {
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+			overflow-x: hidden;
+		}
+
+		&.multiselect {
+			&:hover,
+			&:focus {
+				opacity: 1;
+			}
+		}
+	}
+}
diff --git a/css/Properties/PropertyTitle.scss b/css/Properties/PropertyTitle.scss
new file mode 100644
index 00000000..c70ba855
--- /dev/null
+++ b/css/Properties/PropertyTitle.scss
@@ -0,0 +1,33 @@
+/**
+ * @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/>.
+ *
+ */
+
+.property__title {
+	display: flex;
+	align-items: center;
+	margin: 0;
+	opacity: 0.6;
+	user-select: none;
+
+	.property__title--icon {
+		background-origin: center right;
+	}
+}
\ No newline at end of file
diff --git a/css/contacts.scss b/css/contacts.scss
index d1b2da3e..0d8ed0e6 100644
--- a/css/contacts.scss
+++ b/css/contacts.scss
@@ -1,2 +1,21 @@
+$grid-height-unit: 40px;
+$grid-input-padding: 7px;
+$grid-input-margin: 3px;
+$grid-column-width: 380px;
+$grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2};
+
+@mixin generate-grid-span($default-unit) {
+	// we only supports 10 props of the same type
+	@for $i from 1 through 10 {
+		&.grid-span-#{$i} {
+			// default unit + title + bottom padding
+			grid-row-start: span #{$i * $default-unit};
+		}
+	}
+}
+
+
 @import 'settings';
 @import 'details';
+@import './Properties/Properties';
+@import './Properties/PropertyTitle';
\ No newline at end of file
diff --git a/css/details.scss b/css/details.scss
index 09807a9b..c8c8a31e 100644
--- a/css/details.scss
+++ b/css/details.scss
@@ -113,21 +113,7 @@
 		}
 	}
 
-	$grid-height-unit: 40px;
-	$grid-input-padding: 7px;
-	$grid-input-margin: 3px;
 	$grid-column-width: 380px;
-	$grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2};
-	
-	@mixin generate-grid-span($default-unit) {
-		/* we only supports 10 props of the same type */
-		@for $i from 1 through 10 {
-			&.grid-span-#{$i} {
-				/* default unit + title + bottom padding */
-				grid-row-start: span #{$i * $default-unit};
-			}
-		}
-	}
 
 	// contact details
 	section.contact-details {
@@ -135,69 +121,5 @@
 		/* unquote is a strange hack to avoid removal of the comma by the scss compiler */
 		grid-template-columns: repeat(auto-fit, minmax(unquote('#{$grid-column-width}'), 1fr));
 		grid-column-gap: 20px;
-		.contact-details-property {
-			@include generate-grid-span(1);
-			display: flex;
-			flex-wrap: wrap;
-			flex-direction: column;
-			position: relative;
-			width: $grid-column-width;
-			.icon-delete {
-				position: absolute;
-				top: 0;
-				right: 0;
-				width: 44px;
-				height: 100%;
-				margin: 0;
-				border: 0;
-				background-color: transparent;
-				opacity: .5;
-				display: none;
-				&:hover,
-				a:active,
-				a:focus {
-					opacity: .7;
-				}
-			}
-			&:hover,
-			a:active,
-			a:focus {
-				.icon-delete {
-					display: block;
-				}
-			}
-		}
-		.contact-details-label {
-			margin: $grid-input-margin;
-			margin: $grid-input-margin 5px $grid-input-margin 0;
-			width: 120px;
-			height: $grid-input-height-with-margin;
-			padding: $grid-input-padding 0;
-			opacity: .7;
-			&, .multiselect__input::placeholder {
-				text-align: right;
-			}
-			&:not(.multiselect-vue) {
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				overflow: hidden;
-				overflow-x: hidden;
-			}
-			&.multiselect-vue {
-				&:hover,
-				&:focus {
-					opacity: 1;
-				}
-			}
-		}
-		.contact-details-property-row {
-			display: flex;
-			align-items: center;
-			margin-right: 44px;
-			input {
-				flex: 1 1;
-			}
-		}
-		
 	}
 }
\ No newline at end of file