Feature: Toggle instead of adding clear button (X button)

[mraaroncruz]

I have a problem in that my mockups are for vertical button lists instead of inline like the default is in this project.
I hacked on this for a minute and came up with this. Sorry, the top part (Helpers) is part of a but I was having and is part of another commit ***

https://github.com/pferdefleisch/spree_variant_options/compare/toggle-instead-of-x

here's some of the sass I used

////////////////////////////////
// Variants
////////////////////////////////
#product-variants
  h2
    display: none

  .variant-options
    font-family: $quicksand
    float: left
    width: 138px

    h6
      font-size: 20px
      font-weight: bold
      margin-bottom: 16px

    li
      float: none
      margin-bottom: 12px
      padding: 0

      a
        color: black

    .variant-option-values li a.unhovered:hover
      display: block
      background-color: #F9F9F9
      border: 2px solid #EEE
      padding: 2px 9px
      margin: 3px 3px 0 0
      text-decoration: none
      cursor: pointer
      -webkit-border-radius: 4px
      -moz-border-radius: 4px
      border-radius: 4px

    .option-value.selected, .option-value.in-stock:hover
      background-color: $green
      border-color: #999
      color: white !important

    .option-value.locked, .option-value.locked:hover
      background-color: white
      border-color: #F0F0F0
      color: #DDD !important
      cursor: default

I think this would be totally plausible as a default too because they are toggle buttons and this allows toggle on off.

Let me know what you think - this is a complete hack right now. Maybe you could create a branch with a less hackier version.

Thanks!

*** the issue may have had to do with jQuery being loaded twice, if you see that it is a real issue, I will submit a pull request. Thought the two idioms - extending natives and creating helper objects - seem to clash a bit in my head...

[mraaroncruz]

Screen shot