search

jquery / themeroller.jquerymobile.com

ThemeRoller site for jQuery Mobile
Other
140 stars 73 forks source link

icon color selection #79

Closed jaspermdegroot closed 12 years ago

jaspermdegroot commented 12 years ago

When you select black icon color instead of white, only the regular global icon set gets the right background-image url. The rule for HD/Retina is still linking to the white image sprite. Also the alt icon set doesn't change from black to white.

/* Icons -----------------------------------------------------------------------------------------------------------/ .ui-icon, .ui-icon-searchfield:after { background-image: url(images/icons-18-black.png) /{global-icon-set}/; } / Alt icon color -----------------------------------------------------------------------------------------------------------/ .ui-icon-alt { background-image: url(images/icons-18-black.png); } / HD/"retina" sprite -----------------------------------------------------------------------------------------------------------*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { .ui-icon-plus, .ui-icon-minus, etc., etc. { background-image: url(images/icons-36-white.png); } .ui-icon-alt { background-image: url(images/icons-36-black.png); } }

tybenz commented 12 years ago

Working on the HD retina icons. To my knowledge, .ui-icon-alt never gets used by jQuery Mobile.

jaspermdegroot commented 12 years ago

You are right about jQuery Mobile JS not using .ui-icon-alt. Don't know why it is in the CSS while you can't use it. Maybe in the future a data attribute data-iconcolor="alt" will become available. Would be nice.

jaspermdegroot commented 12 years ago

@TylerBenziger

It looks like the fix doesn't work. Can you reopen this issue?

seweryn commented 12 years ago

@TylerBenziger

I can confirm this, I've generated CSS yesterday and it's not fixed. I can see white icons on Samsung Galaxy S II while on my desktop browser they're black.

tybenz commented 12 years ago

Sorry about this again. NOW it should be fixed. Check the CSS to confirm

jaspermdegroot commented 12 years ago

Thanks Tyler! I can confirm it is fixed.

jbosse commented 11 years ago

I just used the theme roller last night and am having the same issue on my iphone and ipad retina displays. 1.3.0-rc.1

eliotdill commented 11 years ago

Same as @jbosse with me. Temporarily resolved it with the following CSS:

[data-theme=f] .ui-icon, [data-theme=f] .ui-icon-searchfield:after { background-image: url(images/icons-18-black.png); }