combojs/lib/combo.styl

A combobox for intelligent, responsive search and filtering.

.combo-container
  padding-right 28px
  height 18px
  position relative
  border 1px solid #647484
  font-size 11px
  font-family "Arial", "Helvetica", sans-serif

  input.combo-input
    padding 0px 6px 0px 4px
    border 0
    outline 0
    font-size 11px
    width 100%
    height 100%

  button.combo-button
    background-image url('images/trigger.png')
    width 18px
    right 0px
    top 0px
    border 0
    position absolute
    height 100%

  ul.combo-list
    z-index 2 // to avoid visual collision with other combo-input (see position: absolute)
    max-height 300px
    position absolute
    left -1px // compensate for combo-container border
    right -1px // compensate for combo-container border
    top 19px
    overflow-x hidden
    overflow-y auto
    margin 0 0 0 0
    padding 0
    border 1px solid #ccc
    background #c1c7cc
    clear both

    li
      background #d6dfe5
      padding 5px 5px
      cursor default
      line-height 1.1
      margin-bottom 1px

      &.active
        background #bfcdd7

      &:last-child
        margin-bottom 0px
      
      &.secondary-source.first
        border-top 1px solid black

// STATE DEPENDENT STYLES
button.combo-button

  &:active:not([disabled])
    background-position 0 -20px

  &:disabled
    opacity 0.5

  &:focus
    outline 0

ul.combo-list li  
  &.disabled
    color #afafaf

  &.unmatched-raw-value
    border-bottom-style solid
    border-width 1px
    border-color grey
    margin-bottom 0px