Foundation 5 and Chosen CSS Merger

foundation-chosen.sass

// Foundation and Chosen CSS Merger
// ZURB Foundation v5 - Harvest Chosen v1.1
// Add to the bottom of foundation_and_overrides.scss: `@import 'foundation-chosen';`

$chosen-form-spacing: $form-spacing / 4 + rem-calc(1)
$chosen-input-height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
$chosen-input-height-multi: ($input-font-size + ($form-spacing * 1.5) - rem-calc(5))
$chosen-border-radius: 0
$chosen-highlighted: $primary-color

.chosen-container
  margin: 0 0 $form-spacing 0
  font-size: $input-font-size
  ul, ol, dl
    font-size: $input-font-size
  .no-results
    font-size: 85%
  .chosen-results
    li.highlighted
      background: $chosen-highlighted
      color: #fff

.chosen-container .chosen-results, .chosen-container-active .chosen-choices li.search-field input[type="text"]
  color: $input-font-color !important

.chosen-container-single, .chosen-container-multi, .chosen-container-active
  .chosen-choices, .chosen-drop, .chosen-single, &.chosen-with-drop .chosen-single
    border-color: $input-border-color
    border-radius: $chosen-border-radius

.chosen-container-multi
  .chosen-choices
    // box-shadow: $input-box-shadow
    padding: 0 ($form-spacing / 2)
    li.search-field
      input[type="text"]
        padding: 0
        height: $chosen-input-height-multi
    li.search-choice
      padding-top: $chosen-form-spacing
      padding-bottom: $chosen-form-spacing
      margin: $chosen-form-spacing $chosen-form-spacing 0 0
      border-color: darken($input-border-color, 10%)
      background: $secondary-color
      .search-choice-close
        top: $input-font-size / 2

.chosen-container-single
  .chosen-single
    height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
    padding-top: $chosen-form-spacing
    padding-bottom: $chosen-form-spacing
  .chosen-search
    input[type="text"]
      height: $chosen-input-height
      background-position-y: -20px // TODO: Need to bring down, but breaks Chosen's sprite
      padding-left: $form-spacing / 2

.chosen-container-single, .chosen-container-active.chosen-with-drop
  .chosen-single 
    div b
      background-position-y: $chosen-form-spacing + rem-calc(3)

Were you able to get this going?

Hey, thanks for the time you put into this. I just dropped it into my app, and it works like a champ!

Just a side note for anyone else using this. I just noticed one minor problem when using the "allow_single_deselect: true". The x is offset, and the pointer is a question mark.

Here is a possible fix.

.chosen-container
.search-choice-close
margin-top: 7px
&:hover
cursor: pointer
cursor: hand