diff options
| author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2017-01-25 09:15:37 +0100 |
|---|---|---|
| committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2017-01-25 09:15:37 +0100 |
| commit | d0e88e328cfbe15775e9e7cc2ce1c19eb35be66d (patch) | |
| tree | e0edae12b453204ac5796e0a23d6dd05f0112978 /core/css | |
| parent | 5d985deb4d981c61e4e7620c4fde7c2d888519e2 (diff) | |
| download | nextcloud-server-d0e88e328cfbe15775e9e7cc2ce1c19eb35be66d.tar.gz nextcloud-server-d0e88e328cfbe15775e9e7cc2ce1c19eb35be66d.zip | |
Add clear search button
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'core/css')
| -rw-r--r-- | core/css/icons.scss | 4 | ||||
| -rw-r--r-- | core/css/styles.scss | 61 |
2 files changed, 45 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; + } } } |