Better design for core search, fixes and style to scss

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

2 files changed, 102 insertions, 105 deletions

diff --git a/core/search/css/results.css b/core/search/css/results.css
deleted file mode 100644
index e2ccfe36ef8..00000000000
--- a/core/search/css/results.css
+++ /dev/null
@@ -1,105 +0,0 @@
-/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
- This file is licensed under the Affero General Public License version 3 or later.
- See the COPYING-README file. */
-
-#searchresults {
-	background-color: #fff;
-	overflow-x: hidden;
-	text-overflow: ellipsis;
-	padding-top: 65px;
-	box-sizing: border-box;
-	z-index: 75;
-	/* account for margin-bottom in files list */
-	margin-top: -250px;
-}
-#searchresults.filter-empty {
-	/* remove whitespace on bottom when no search results, to fix layout */
-	margin-top: 0 !important;
-}
-
-#searchresults.hidden {
-	display: none;
-}
-#searchresults * {
-	box-sizing: content-box;
-}
-
-#searchresults .status {
-	background-color: rgba(255, 255, 255, .85);
-	height: 12px;
-	padding: 28px 0 28px 56px;
-	font-size: 18px;
-}
-.has-selection:not(.hidden) ~ #searchresults .status {
-	padding-left: 105px;
-}
-#searchresults .status.fixed {
-	position: fixed;
-	bottom: 0;
-	width: 100%;
-	z-index: 10;
-}
-
-#searchresults .status .spinner {
-	height: 16px;
-	width: 16px;
-	vertical-align: middle;
-	margin-left: 10px;
-}
-#searchresults table {
-	border-spacing:0;
-	table-layout:fixed;
-	top:0;
-	width:100%;
-}
-
-#searchresults td {
-	padding: 5px 14px;
-	font-style: normal;
-	vertical-align: middle;
-	border-bottom: none;
-}
-#searchresults td.icon {
-	text-align: right;
-	width: 40px;
-	height: 40px;
-	padding: 5px 0;
-	background-position: right center;
-	background-repeat: no-repeat;
-}
-.has-selection:not(.hidden) ~ #searchresults td.icon {
-	width: 91px;
-	background-size: 32px;
-}
-
-#searchresults tr.template {
-	display: none;
-}
-
-#searchresults .name,
-#searchresults .text,
-#searchresults .path {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-#searchresults .text {
-	white-space: normal;
-	color: #545454;
-}
-#searchresults .path {
-	opacity: .5;
-}
-#searchresults .text em {
-	color: #545454;
-	font-weight: bold;
-	opacity: 1;
-}
-
-#searchresults tr.result * {
-	cursor:pointer;
-}
-
-#searchresults tr.current {
-	background-color:#ddd;
-}
diff --git a/core/search/css/results.scss b/core/search/css/results.scss
new file mode 100644
index 00000000000..0530d4ec851
--- /dev/null
+++ b/core/search/css/results.scss
@@ -0,0 +1,102 @@
+/*
+ * @copyright Copyright (c) 2018 Jan-Christoph Borchardt <hey@jancborchardt.net>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ * @author Jan-Christoph Borchardt <hey@jancborchardt.net>
+ *
+ * @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/>.
+ *
+ */
+
+#searchresults {
+	overflow-x: hidden;
+	text-overflow: ellipsis;
+	padding-top: 51px; /* table row is 51px height */
+	box-sizing: border-box;
+	z-index: 75;
+	/* account for margin-bottom in files list */
+	margin-top: -250px;
+	table {
+		border-spacing: 0;
+		table-layout: fixed;
+		top: 0;
+		width: 100%;
+	}
+	tr {
+		&.result {
+			border-bottom: 1px solid $color-border;
+			* {
+				cursor: pointer;
+			}
+		}
+		&.template {
+			display: none;
+		}
+		&:hover,
+		&.current {
+			background-color: nc-darken($color-main-background, 3%);
+		}
+		td {
+			padding: 5px 9px;
+			font-style: normal;
+			vertical-align: middle;
+			border-bottom: none;
+			&.icon {
+				text-align: right;
+				width: 40px;
+				height: 40px;
+				padding: 5px 0;
+				background-position: right center;
+				background-repeat: no-repeat;
+			}
+			.has-selection:not(.hidden) ~ &.icon {
+				width: 50px;
+				padding-left: 41px;
+				background-size: 32px;
+			}
+		}
+
+		.name,
+		.text,
+		.path {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.text {
+			white-space: normal;
+			color: #545454;
+		}
+		.path {
+			opacity: 0.5;
+		}
+		.text em {
+			color: #545454;
+			font-weight: bold;
+			opacity: 1;
+		}
+	}
+	.hidden {
+		display: none;
+	}
+	&.filter-empty {
+		/* remove whitespace on bottom when no search results, to fix layout */
+		margin-top: 0 !important;
+	}
+	.status.summary .info {
+		margin-left: 100px;
+	}
+}