From d0e88e328cfbe15775e9e7cc2ce1c19eb35be66d Mon Sep 17 00:00:00 2001
From: =?utf8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Wed, 25 Jan 2017 09:15:37 +0100
Subject: [PATCH] Add clear search button
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 core/css/icons.scss              |  4 +++
 core/css/styles.scss             | 61 +++++++++++++++++++++-----------
 core/img/actions/close-white.svg | 42 ++++++++++++++++++++++
 core/templates/layout.user.php   |  1 +
 4 files changed, 88 insertions(+), 20 deletions(-)
 create mode 100644 core/img/actions/close-white.svg

diff --git a/core/css/icons.scss b/core/css/icons.scss
index b1f9cc6df67..39344224522 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -131,6 +131,10 @@ img, object, video, button, textarea, input, select {
 	background-image: url('../img/actions/close.svg?v=1');
 }
 
+.icon-close-white {
+	background-image: url('../img/actions/close-white.svg?v=1');
+}
+
 .icon-comment {
 	background-image: url('../img/actions/comment.svg?v=1');
 }
diff --git a/core/css/styles.scss b/core/css/styles.scss
index d1e3a9f7be3..91fb463480e 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -159,28 +159,49 @@ body {
 
 /* Searchbox */
 
-.searchbox input[type='search'] {
+.searchbox {
 	position: relative;
-	font-size: 1.2em;
-	padding: 3px;
-	padding-left: 25px;
-	background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center;
-	color: #fff;
-	border: 0;
-	border-radius: 3px;
-	margin-top: 3px;
-	width: 0;
-	cursor: pointer;
-	-webkit-transition: all 100ms;
-	transition: all 100ms;
-	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
-	opacity: .7;
-	&:focus, &:active, &:valid {
+	input[type='search'] {
+		position: relative;
+		font-size: 1.2em;
+		padding: 3px;
+		padding-left: 25px;
+		background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center;
 		color: #fff;
-		width: 155px;
-		cursor: text;
-		background-color: #0082c9 !important;
-		border: 1px solid rgba(255, 255, 255, 0.5) !important;
+		border: 0;
+		border-radius: 3px;
+		margin-top: 3px;
+		width: 0;
+		cursor: pointer;
+		-webkit-transition: all 100ms;
+		transition: all 100ms;
+		-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
+		opacity: .7;
+		&:focus, &:active, &:valid {
+			color: #fff;
+			width: 155px;
+			cursor: text;
+			background-color: #0082c9 !important;
+			border: 1px solid rgba(255, 255, 255, 0.5) !important;
+		}
+		& ~ .icon-close-white {
+			display: inline;
+			position: absolute;
+			width: 15px;
+			height: 32px;
+			right: 3px;
+			top: 0;
+			&, &:focus, &:active, &:hover {
+				border: none;
+				background-color: transparent;
+			}
+		}
+		&:not(:valid) ~ .icon-close-white {
+			display: none;
+		}
+		&::-webkit-search-cancel-button {
+			-webkit-appearance: none;
+		}
 	}
 }
 
diff --git a/core/img/actions/close-white.svg b/core/img/actions/close-white.svg
new file mode 100644
index 00000000000..3f561939c4b
--- /dev/null
+++ b/core/img/actions/close-white.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg11"
+   version="1.1"
+   width="16"
+   height="16">
+  <metadata
+     id="metadata15">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs5">
+    <filter
+       color-interpolation-filters="sRGB"
+       x="-.3"
+       y="-.3"
+       width="1.601"
+       height="1.599"
+       id="a">
+      <feGaussianBlur
+         id="feGaussianBlur2"
+         stdDeviation="1.239" />
+    </filter>
+  </defs>
+  <path
+     style="fill:#ffffff"
+     id="path9"
+     d="M12.95 11.536l-1.414 1.414L8 9.414 4.465 12.95 3.05 11.536 6.586 8 3.05 4.464 4.465 3.05 8 6.586l3.516-3.555 1.434 1.434L9.414 8z" />
+</svg>
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 6cf4a0b8f2d..4842a94897d 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -69,6 +69,7 @@
 					<input id="searchbox" type="search" name="query"
 						value="" required
 						autocomplete="off" tabindex="5">
+					<button class="icon-close-white" type="reset"></button>
 				</form>
 				<div id="settings">
 					<div id="expand" tabindex="6" role="link" class="menutoggle">
-- 
2.39.5