diff options
Diffstat (limited to 'core')
| -rw-r--r-- | core/css/icons.scss | 4 | ||||
| -rw-r--r-- | core/css/styles.scss | 61 | ||||
| -rw-r--r-- | core/img/actions/close-white.svg | 42 | ||||
| -rw-r--r-- | core/templates/layout.user.php | 1 |
4 files changed, 88 insertions, 20 deletions
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"> |
