Add clear search button

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

diff --git a/core/css/icons.scss b/core/css/icons.scss
index b1f9cc6df674836937641cba7e9767d90b260f99..393442245221f25bb2fa8f513b35f15ff7baf187 100644 (file)
--- 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 d1e3a9f7be324a3801540fdc2d69b44ceb659cdd..91fb463480efdefb78dda23720c405e1560e8fdb 100644 (file)
--- 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 (file)
index 0000000..3f56193
--- /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 6cf4a0b8f2db448bf783d25d89828f3c09d1c0b7..4842a94897dcb1b6e19f784d56d4beebbe7cd284 100644 (file)
--- 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">