thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add magnifying glass to search field // Fixes #737

Browse source 
// FREEBIE
This commit is contained in:
lilia 2016-04-12 18:00:33 -07:00
parent 72dd93aa02
commit 826d4c4301
3 changed files with 40 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
background.html
View file

@ -21,6 +21,7 @@
<h1>Signal</h1> <h1>Signal</h1>
<div class='tool-bar clearfix'> <div class='tool-bar clearfix'>
<input type='search' class='search' placeholder='{{ searchForPeopleOrGroups }}'> <input type='search' class='search' placeholder='{{ searchForPeopleOrGroups }}'>
<span class='search-icon'></span>
</div> </div>
</div> </div>
<div class='content'> <div class='content'>

22
stylesheets/_index.scss
View file

@ -85,17 +85,35 @@
border-color: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.05);
} }
.tool-bar {
position: relative;
.search-icon {
content: '';
display: inline-block;
float: left;
width: 24px;
height: 100%;
-webkit-mask: url('/images/search.svg') no-repeat left center;
-webkit-mask-size: 100%;
background-color: #ccc;
position: absolute;
left: 20px;
top: 0;
}
}
input.search { input.search {
border: none; border: none;
padding: 0; padding: 0 10px 0 65px;
margin: 0; margin: 0;
outline: 0; outline: 0;
height: $search-height; height: $search-height;
line-height: $search-height;
width: 100%; width: 100%;
padding: 10px;
border: solid 1px $grey_l; border: solid 1px $grey_l;
outline-offset: -2px; outline-offset: -2px;
font-size: inherit; font-size: inherit;
position: relative;
&.active { &.active {
outline: solid 1px $blue; outline: solid 1px $blue;

22
stylesheets/manifest.css
View file

@ -561,17 +561,33 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
color: #454545; color: #454545;
border-color: rgba(0, 0, 0, 0.05); } border-color: rgba(0, 0, 0, 0.05); }
.tool-bar {
position: relative; }
.tool-bar .search-icon {
content: '';
display: inline-block;
float: left;
width: 24px;
height: 100%;
-webkit-mask: url("/images/search.svg") no-repeat left center;
-webkit-mask-size: 100%;
background-color: #ccc;
position: absolute;
left: 20px;
top: 0; }
input.search { input.search {
border: none; border: none;
padding: 0; padding: 0 10px 0 65px;
margin: 0; margin: 0;
outline: 0; outline: 0;
height: 36px; height: 36px;
line-height: 36px;
width: 100%; width: 100%;
padding: 10px;
border: solid 1px #f3f3f3; border: solid 1px #f3f3f3;
outline-offset: -2px; outline-offset: -2px;
font-size: inherit; } font-size: inherit;
position: relative; }
input.search.active { input.search.active {
outline: solid 1px #2090ea; } outline: solid 1px #2090ea; }
input.search::-webkit-search-cancel-button { input.search::-webkit-search-cancel-button {