Skip to content

Instantly share code, notes, and snippets.

@Andreyco
Created May 17, 2014 09:21
Show Gist options
  • Save Andreyco/e5855553ccb39335bbd5 to your computer and use it in GitHub Desktop.
Save Andreyco/e5855553ccb39335bbd5 to your computer and use it in GitHub Desktop.
Missing Twitter Typeahead style (in Stylus) with variables to quickly adapt to global theme.
// Query input
$tt-typeahead-width = 100%
$tt-query-height = 34px
$tt-query-shadow = inset 0 1px 1px rgba(0,0,0,0.075)
$tt-hint-color = #999
// Dropdown list with data
$tt-dropdown-background = #fefefe
$tt-dropdown-border-radius = 3px
$tt-dropdown-shadow = 0 1px 3px 0 rgba(0,0,0,.2)
// Highlighted suggestion
$tt-active-suggestion-color = #fff
$tt-active-suggestion-background = #0097cf !important
.twitter-typeahead
width $tt-typeahead-width
.tt-query
.tt-hint
height $tt-query-height
outline none
.tt-query
box-shadow $tt-query-shadow
.tt-hint
color $tt-hint-color
.tt-dropdown-menu
margin-top 5px
margin-bottom @margin-top
background $tt-dropdown-background
border-radius $tt-dropdown-border-radius
box-shadow $tt-dropdown-shadow
overflow hidden
min-width 200px
padding 0 10px
.tt-suggestion
padding 5px 10px
border-top 1px solid #eee
margin 0 -10px
line-height 20px
&:first-child
&:.tt-cursor
border-color transparent
&.tt-cursor
color $tt-active-suggestion-color
background $tt-active-suggestion-background
& > p
margin 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment