Add clear search button

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

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');
 }

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;
+		}
 	}
 }
 

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>

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">