icon color selection #79

Closed
jaspermdegroot opened this Issue Mar 2, 2012 · 8 comments

Projects

None yet

5 participants

@jaspermdegroot
Member

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
Contributor
tybenz commented Mar 4, 2012

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

@jaspermdegroot
Member

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.

@tybenz tybenz added a commit that referenced this issue Mar 27, 2012
@tybenz tybenz Fixed issue #79 - icon color selection bce1d32
@tybenz tybenz closed this Apr 13, 2012
@jaspermdegroot
Member

@TylerBenziger

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

@seweryn
seweryn commented Apr 16, 2012

@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 tybenz reopened this Apr 16, 2012
@tybenz
Contributor
tybenz commented Apr 16, 2012

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

@jaspermdegroot
Member

Thanks Tyler! I can confirm it is fixed.

@tybenz tybenz closed this Apr 16, 2012
@jbosse
jbosse commented Feb 7, 2013

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

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);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment