typeahead.js styled in SCSS

typeahead.scss

/*
 * 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;
    }
  }
}

Mixins are from bootstrap's sass code

@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
  #{$parent} {
    height: $input-height;
    padding: $padding-vertical $padding-horizontal;
    font-size: $font-size;
    line-height: $line-height;
    border-radius: $border-radius;
  }

  select#{$parent} {
    height: $input-height;
    line-height: $input-height;
  }

  textarea#{$parent},
  select[multiple]#{$parent} {
    height: auto;
  }
}


@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
          box-shadow: $shadow;
}

@mixin border-top-radius($radius) {
  border-top-right-radius: $radius;
   border-top-left-radius: $radius;
}
@mixin border-right-radius($radius) {
  border-bottom-right-radius: $radius;
     border-top-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
  border-bottom-right-radius: $radius;
   border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
  border-bottom-left-radius: $radius;
     border-top-left-radius: $radius;
}