Created
April 21, 2015 19:18
-
-
Save pbeshai/e1317e59d50333bb8812 to your computer and use it in GitHub Desktop.
typeahead.js styled in SCSS
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
/* | |
* typehead.js-bootstrap3.less | |
* @version 0.2.3 | |
* https://github.com/hyspace/typeahead.js-bootstrap3.less | |
* | |
* Licensed under the MIT license: | |
* http://www.opensource.org/licenses/MIT | |
*/ | |
//custom mixin for .form-control-validation | |
@mixin typeahead-form-control($border-color: #ccc) { | |
border-color: $border-color; | |
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work | |
&:focus { | |
border-color: darken($border-color, 10%); | |
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); | |
@include box-shadow($shadow); | |
} | |
} | |
// ****** Change from typeahead.less ***** | |
// Couldn't figure out how to pass the 'parent' properly, so I moved these declarations here | |
.input-group.input-group-sm .twitter-typeahead { | |
@include input-size('.tt-hint', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small); | |
@include input-size('.tt-input', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small); | |
} | |
.input-group.input-group-lg .twitter-typeahead { | |
@include input-size('.tt-hint', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large); | |
@include input-size('.tt-input', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large); | |
} | |
// ****** End change from typeahead.less ***** | |
//main styles for control | |
.tt-input, | |
.tt-hint { | |
.twitter-typeahead &{ | |
//validation states | |
.has-warning &{ | |
@include typeahead-form-control($state-warning-text); | |
} | |
.has-error &{ | |
@include typeahead-form-control($state-danger-text); | |
} | |
.has-success &{ | |
@include typeahead-form-control($state-success-text); | |
} | |
} | |
//border | |
.input-group .twitter-typeahead:first-child &{ | |
@include border-left-radius($border-radius-base); | |
width: 100%; | |
} | |
.input-group .twitter-typeahead:last-child &{ | |
@include border-right-radius($border-radius-base); | |
width: 100%; | |
} | |
// ****** Change from typeahead.less ***** | |
// Couldn't figure out how to pass the parent properly, so I moved it up. | |
//sizing - small:size and border | |
// .input-group.input-group-sm .twitter-typeahead &{ | |
// @include input-size('<parent here>', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small); | |
// } | |
// ****** End change from typeahead.less ***** | |
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) &{ | |
border-radius: 0; | |
} | |
.input-group.input-group-sm .twitter-typeahead:first-child &{ | |
@include border-left-radius($border-radius-small); | |
@include border-right-radius(0); | |
} | |
.input-group.input-group-sm .twitter-typeahead:last-child &{ | |
@include border-left-radius(0); | |
@include border-right-radius($border-radius-small); | |
} | |
// ****** Change from typeahead.less ***** | |
// Couldn't figure out how to pass the parent properly, so I moved it up. | |
//sizing - large:size and border | |
// .input-group.input-group-lg .twitter-typeahead &{ | |
// @include input-size('<parent here>', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large); | |
// } | |
// ****** End change from typeahead.less ***** | |
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) &{ | |
border-radius: 0; | |
} | |
.input-group.input-group-lg .twitter-typeahead:first-child &{ | |
@include border-left-radius($border-radius-large); | |
@include border-right-radius(0); | |
} | |
.input-group.input-group-lg .twitter-typeahead:last-child &{ | |
@include border-left-radius(0); | |
@include border-right-radius($border-radius-large); | |
} | |
} | |
//for wrapper | |
.twitter-typeahead { | |
width: 100%; | |
// float: left; | |
.input-group &{ | |
//overwrite `display:inline-block` style | |
display: table-cell!important; | |
} | |
} | |
//particular style for each other | |
.twitter-typeahead .tt-hint { | |
color: $text-muted;//color - hint | |
} | |
.twitter-typeahead .tt-input { | |
z-index: 2; | |
//disabled status | |
//overwrite inline styles of .tt-query | |
&[disabled], | |
&[readonly], | |
fieldset[disabled] & { | |
cursor: not-allowed; | |
//overwirte inline style | |
background-color: $input-bg-disabled!important; | |
} | |
} | |
//dropdown styles | |
.tt-dropdown-menu { | |
//dropdown menu | |
position: absolute; | |
top: 100%; | |
left: 0; | |
z-index: $zindex-dropdown; | |
min-width: 160px; | |
width: 100%; | |
padding: 5px 0; | |
margin: 2px 0 0; | |
list-style: none; | |
font-size: $font-size-base; | |
background-color: $dropdown-bg; | |
border: 1px solid $dropdown-fallback-border; | |
border: 1px solid $dropdown-border; | |
border-radius: $border-radius-base; | |
@include box-shadow(0 6px 12px rgba(0,0,0,.175)); | |
background-clip: padding-box; | |
*border-right-width: 2px; | |
*border-bottom-width: 2px; | |
.tt-suggestion { | |
//item | |
display: block; | |
padding: 3px 20px; | |
clear: both; | |
font-weight: normal; | |
line-height: $line-height-base; | |
color: $dropdown-link-color; | |
&.tt-cursor { | |
//item selected | |
cursor: pointer; | |
text-decoration: none; | |
outline: 0; | |
background-color: $dropdown-link-hover-bg; | |
color: $dropdown-link-hover-color; | |
a { | |
//link in item selected | |
color: $dropdown-link-hover-color; | |
} | |
} | |
p { | |
margin: 0; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Mixins are from bootstrap's sass code