IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-25 10:20:58 -06:00
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats 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='filter'>
{{fa-icon 'search'}}
<input type='text' name="filter" placeholder="{{i18n 'emoji_picker.filter_placeholder'}}" autocomplete="off" autofocus/>
<button class='clear-filter'>
{{fa-icon 'times'}}

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

@ -163,19 +163,34 @@ body img.emoji {
}
.emoji-picker .filter {
background-color: #e9e9e9;
background-color: none;
border-bottom: 1px solid #e9e9e9;
padding: 5px;
display: flex;
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 {
height: 24px;
margin: 0;
flex: 1;
border: 1px solid #e9e9e9;
border: none;
box-shadow: none;
padding-right: 24px;
outline: none;
&:focus {
border: none;
box-shadow: none;
}
}
.emoji-picker .filter input::-ms-clear {
@ -197,7 +212,7 @@ body img.emoji {
.emoji-picker .filter .clear-filter {
position: absolute;
right: 10px;
right: 5px;
top: 12px;
border: 0;
background: none;