diff --git a/core/css/icons.scss b/core/css/icons.scss index b1f9cc6df6..3934422452 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 d1e3a9f7be..91fb463480 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 0000000000..3f561939c4 --- /dev/null +++ b/core/img/actions/close-white.svg @@ -0,0 +1,42 @@ + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 6cf4a0b8f2..4842a94897 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -69,6 +69,7 @@ +