Feature Request: Icons with "multiple modes" (ala icon-white for Twitter Bootstrap)

[dominicbarnes]

So, I'm not sure how best to implement this feature, but the ability to have a certain icon with multiple "modes" would be really great in my particular case. I've really grown fond of Twitter Bootstrap's "white icons", where you can basically just append an additional class to switch from a black to a white icon. (for hover/active effects) The other added benefit a class name affords is the ability for me to use it as a LESS mixin to force a particular icon to change even without changing the underlying markup. I can't use the basic hover psuedo-class because the icons are part of an <li> and need to be changed along with the rest of the <li> (rather than independently)

Anyways, I know how Bootstrap implements this, they use 2 separate images. (and swap the background-image property) I'm wondering if there's another way that Glue can use and still retain a single sprite image. I imagine generating CSS that includes an additional class would increase it's specificity so the appended class would take priority. (in theory)

Of course, the best way to handle things like color changes is to use an icon font, but that's not really a possibility for my team right now, so wanted to throw this out there and maybe discuss possibilities.

I could see a couple of different ways to have Glue recognize this pattern, but am very much open to suggestions/feedback. Given a source image settings.png:

• Plus Sign (my favorite) settings+white.png
• Double Underscore settings__white.png
• Brackets/Parenthesis settings(white).png or settings[white].png

Creates a sprite with both source images as usual, and creates a CSS file like this:

/** normal **/
.sprite-settings,
.sprite-settings_white {
    background-image: ...;
    background-repeat: ...;
}

/** normal **/
.sprite-settings { background-position: ...; width: ...; height: ...; }
.sprite-settings_white { background-position: ...; width: ...; height: ...; }

/** new **/
.sprite-settings.white { **same as .sprite-settings_white** }

[JamoCA]

On Nov 8, I requested a feature like this via Twitter. I wanted to be able to add an additional class for the "hover" so I could toggle items on/off without having to bind a hover event.

• re: GlueCSS, is there an easy way to append another class to :hover? ie, graphical menu items that use an "on" class?
• I'm using IIS. I had been using this jQuery script for rollovers, but wanted to stop using 2 images. http://ow.ly/f8Ybh
• I need generation for a non-event ON status state so that the hover state can be toggled without having to hover.
• I'm not using LESS

The recommendations from Twitter were:

• I think there are only 2 dirty options and one more or less good ... a) duplicate the file b) ln -s the file...
• or c) Use LESS and do something like: li.on{ .glue-class-name-to-on-state } Are you using LESS?