Created
June 21, 2017 17:09
-
-
Save sadiesaurus/d2b815c0c4ebbe04210533a2a3a99e9b to your computer and use it in GitHub Desktop.
search-autocomplete.liquid snippet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% comment %} Width of results box {% endcomment %} | |
{% assign results_box_width = '242px' %} | |
{% comment %} Background color of results box {% endcomment %} | |
{% assign results_box_background_color = '#ffffff' %} | |
{% comment %} Border color of results box {% endcomment %} | |
{% assign results_box_border_color = '#d4d4d4' %} | |
<!-- Some styles to get you started. --> | |
<style> | |
.search-results { | |
z-index: 8889; | |
list-style-type: none; | |
width: {{ results_box_width }}; | |
margin: 0; | |
padding: 0; | |
background: {{ results_box_background_color }}; | |
border: 1px solid {{ results_box_border_color }}; | |
border-radius: 3px; | |
-webkit-box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.1); | |
box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.1); | |
overflow: hidden; | |
} | |
.search-results li { | |
display: block; | |
width: 100%; | |
height: 38px; | |
margin: 0; | |
padding: 0; | |
border-top: 1px solid {{ results_box_border_color }}; | |
line-height: 38px; | |
overflow: hidden; | |
} | |
.search-results li:first-child { | |
border-top: none; | |
} | |
.search-results .title { | |
float: left; | |
width: {{ results_box_width | remove: 'px' | to_number | minus: 50 }}px; | |
padding-left: 8px; | |
white-space: nowrap; | |
overflow: hidden; | |
/* The text-overflow property is supported in all major browsers. */ | |
text-overflow: ellipsis; | |
-o-text-overflow: ellipsis; | |
text-align: left; | |
} | |
.search-results .thumbnail { | |
float: left; | |
display: block; | |
width: 32px; | |
height: 32px; | |
margin: 3px 0 3px 3px; | |
padding: 0; | |
text-align: center; | |
overflow: hidden; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment