Add clear search button
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
parent
5d985deb4d
commit
d0e88e328c
4 changed files with 88 additions and 20 deletions
|
|
@ -131,6 +131,10 @@ img, object, video, button, textarea, input, select {
|
||||||
background-image: url('../img/actions/close.svg?v=1');
|
background-image: url('../img/actions/close.svg?v=1');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-close-white {
|
||||||
|
background-image: url('../img/actions/close-white.svg?v=1');
|
||||||
|
}
|
||||||
|
|
||||||
.icon-comment {
|
.icon-comment {
|
||||||
background-image: url('../img/actions/comment.svg?v=1');
|
background-image: url('../img/actions/comment.svg?v=1');
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -159,28 +159,49 @@ body {
|
||||||
|
|
||||||
/* Searchbox */
|
/* Searchbox */
|
||||||
|
|
||||||
.searchbox input[type='search'] {
|
.searchbox {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 1.2em;
|
input[type='search'] {
|
||||||
padding: 3px;
|
position: relative;
|
||||||
padding-left: 25px;
|
font-size: 1.2em;
|
||||||
background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center;
|
padding: 3px;
|
||||||
color: #fff;
|
padding-left: 25px;
|
||||||
border: 0;
|
background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center;
|
||||||
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;
|
color: #fff;
|
||||||
width: 155px;
|
border: 0;
|
||||||
cursor: text;
|
border-radius: 3px;
|
||||||
background-color: #0082c9 !important;
|
margin-top: 3px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.5) !important;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
42
core/img/actions/close-white.svg
Normal file
42
core/img/actions/close-white.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -69,6 +69,7 @@
|
||||||
<input id="searchbox" type="search" name="query"
|
<input id="searchbox" type="search" name="query"
|
||||||
value="" required
|
value="" required
|
||||||
autocomplete="off" tabindex="5">
|
autocomplete="off" tabindex="5">
|
||||||
|
<button class="icon-close-white" type="reset"></button>
|
||||||
</form>
|
</form>
|
||||||
<div id="settings">
|
<div id="settings">
|
||||||
<div id="expand" tabindex="6" role="link" class="menutoggle">
|
<div id="expand" tabindex="6" role="link" class="menutoggle">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue