alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Search] Search icon

Browse Source 
Moved the search icon to appear within the
text input area, and dissapears when the
input area is focused.
This commit is contained in:
slhale
2015-08-11 10:35:08 -07:00
parent 7141c2818a
commit 7b471e5379
3 changed files with 67 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
platform/commonUI/general/res/sass/search/_search.scss
View File

@@ -34,18 +34,37 @@
.search {
.search-bar {
width: 100%;
$heightAdjust: 4px;
$textInputHeight: 19px;
.search-icon {
color: $colorItemTreeIcon;
float: left;
font-size: $iconWidth;
margin-right: 2px;
}
width: 100%;
margin-top: $heightAdjust;
.search-input {
width: 120px;
width: 100%;
float: left;
position: relative;
top: -$heightAdjust;
}
.search-icon {
color: $colorItemFg;
font-size: 12px;//$iconWidth;
// Make the icon within the left edge of the input area
margin-left: 3px;
float: left;
width: 0;
height: 0;
// Line up icon with text input vertically
margin-top: -$textInputHeight;
}
.search-input:focus~div.search-icon {
// Make icon invisible when the text input is focused
display: none;
}
}