diff options
| author | Morris Jobke <hey@morrisjobke.de> | 2017-01-26 15:42:52 -0600 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-01-26 15:42:52 -0600 |
| commit | 382e20f573d55a4e14de935c3573899816b03761 (patch) | |
| tree | 4b80746717a077bd7d25c9c8837c18bc45152ac4 /core/css | |
| parent | e21170bd1a751454bc8f6c541d5733ca88d25961 (diff) | |
| parent | 7b4b45306b2b83b5b5542eea33cca00c1746d162 (diff) | |
| download | nextcloud-server-382e20f573d55a4e14de935c3573899816b03761.tar.gz nextcloud-server-382e20f573d55a4e14de935c3573899816b03761.zip | |
Merge pull request #3249 from nextcloud/add-clear-search-button
Add clear search button
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 1e72b71ad3d..28f6bd9bbb8 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -138,6 +138,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 a709ef56152..d958a01655b 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -170,28 +170,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; + } } } |