added default iconic.css for better autocomplete styling

This commit is contained in:
Sanj 2011-08-31 01:11:58 +05:30
parent 7e072f5e88
commit 2438b51c1c
2 changed files with 49 additions and 0 deletions

View File

@ -0,0 +1,48 @@
/*
most of the css that makes it look good is in the jquery.autocomplete.css that comes with the autocomplete plugin.
that formats the dropdown of search results.
one class is used on the html interface itself and that's the X that allows you to remove an item.
here is the styling I use. add this to your main css file and season to taste.
*/
.iconic {
background: #fff;
color: #000;
border: 1px solid #ddd;
padding: 2px 4px;
font-weight: bold;
font-family: Courier;
text-decoration: none;
}
.iconic:hover {
text-decoration: none;
color: #fff;
background: #000;
cursor: pointer;
}
input.ac_loading {
background: #FFF url('../images/loading-indicator.gif') no-repeat;
background-position: right;
}
/* change the X to an image */
.results_on_deck .iconic, .results_on_deck .iconic:hover {
float: left;
background: url(../shared/images/Trashcan.gif) no-repeat;
color: transparent;
border: 0;
}
/* specific to a site I worked on. the formatted results were tables. I sized them and floated them left, next to the icon */
.results_on_deck div table {
float: left;
width: 300px;
border: 0;
}
/* and each div in the result clears to start a new row */
.results_on_deck > div {
clear: both;
}

View File

@ -8,6 +8,7 @@
<script type="text/javascript" src="/static/js/feature_admin.js"></script>
<link rel="stylesheet" href="/static/css/feature_admin.css" />
<link rel="stylesheet" href="/static/css/jquery.autocomplete.css" />
<link rel="stylesheet" href="/static/css/iconic.css" />
<script type="text/javascript">
FEATURE_ID = {{ object_id }}
</script>