Created
May 17, 2014 09:21
-
-
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.
This file contains hidden or 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
// 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