@pfiller @tjschuck @koenpunt
This is a very large and significant design/css change. It most definitely breaks currently open PRs that touch CSS. It's probably the biggest since the last time we updated the design of Chosen.
The design of Chosen is currently quite dated. Single Chosen's gradient (also used on Multi Chosen search-choices) is based off of OS X select boxes, but those have been redesigned as of Mavericks. The design of both Single and Multi are not terribly consistent, which causes extra and unnecessary CSS to accommodate. At the same time, the repo's Sass has been growing cruft. Properties are out of order and inconsistent across the Sass file.
This has been bugging me for quite awhile. When I come across Chosen in the wild, it sticks out like a sore thumb, since it doesn't fit in with the design around it. Or the developer had to override a ton of properties just to have it fit into their app/website. It'd be nice to work Chosen towards a possible "theme-able" future.
Doing something about it was a slightly overwhelming task, considering how much Chosen is used, and how many open PRs would most likely break. We had a hackweek at Harvest last week, and I decided to give it a shot. This might be shot down because of it's size and the number of open PRs, but I do believe it is a positive step forward for Chosen. It could be considered a 2.0 (from a design-only perspective, anyway).
- The design of both Single and Multi Chosen has been updated to be simpler and more consistent
- All gradients have been removed (should allow Chosen to fit in better with both PC and Mac)
- Added the
outline property so Chosen's focus design fits into the standard OS X protocol (we could make this an option, but that requires JS)
- Started using variables for sizes and colors (this is the beginning of a possibility to allow theming of Chosen)
- Alphabetized all CSS properties (we should make this a rule, so as more changes happen, the code stays easy-to-read for everybody)
- Organized the Sass file, removing unused definitions and properties (there was stuff in here from the very first design)
I will comment directly in the code below pointing out anything helpful. Because of the alphabetizing of properties, I imagine the diff will be a little hard to read. Rather than post a bunch of screenshots, you should pull and look at this version side-by-side with the current version.