Discourse/discourse
Discourse/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-09-06 10:50:21 +08:00
Code Packages Activity Actions 9

improve emoji picker filter style

Browse source
This commit is contained in:
Joffrey JAFFEUX 2017-07-19 20:20:52 +02:00
parent 0b9f39a406
commit 69a52cca83
2 changed files with 19 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb
View file

@ -24,6 +24,7 @@
<div class='main-column'> <div class='main-column'>
<div class='filter'> <div class='filter'>
{{fa-icon 'search'}}
<input type='text' name="filter" placeholder="{{i18n 'emoji_picker.filter_placeholder'}}" autocomplete="off" autofocus/> <input type='text' name="filter" placeholder="{{i18n 'emoji_picker.filter_placeholder'}}" autocomplete="off" autofocus/>
<button class='clear-filter'> <button class='clear-filter'>
{{fa-icon 'times'}} {{fa-icon 'times'}}

21
app/assets/stylesheets/common/base/emoji.scss
View file

@ -163,19 +163,34 @@ body img.emoji {
} }
.emoji-picker .filter { .emoji-picker .filter {
background-color: #e9e9e9; background-color: none;
border-bottom: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9;
padding: 5px; padding: 5px;
display: flex; display: flex;
position: relative; position: relative;
align-items: center;
}
.emoji-picker .filter .fa.fa-search {
color: $primary;
font-size: 16px;
margin-left: 5px;
margin-right: 5px;
} }
.emoji-picker .filter input { .emoji-picker .filter input {
height: 24px; height: 24px;
margin: 0; margin: 0;
flex: 1; flex: 1;
border: 1px solid #e9e9e9; border: none;
box-shadow: none;
padding-right: 24px; padding-right: 24px;
outline: none;
&:focus {
border: none;
box-shadow: none;
}
} }
.emoji-picker .filter input::-ms-clear { .emoji-picker .filter input::-ms-clear {
@ -197,7 +212,7 @@ body img.emoji {
.emoji-picker .filter .clear-filter { .emoji-picker .filter .clear-filter {
position: absolute; position: absolute;
right: 10px; right: 5px;
top: 12px; top: 12px;
border: 0; border: 0;
background: none; background: none;