CODEWITHSUNDEEP
jquerycssjquery-ui
DNS
DNS

Reputation: 38189

Is there a way to prevent nested icons from inheriting ui-state-active?

I'm writing a jQuery UI widget and trying to stick to the built-in styles whenever possible, to allow theme-roller skinning. I have a structure that looks (simplified) roughly like this:

<div class='ui-state-active'>
    <div class='ui-state-default'>
        <div class='ui-icon ui-icon-triangle-1-e'/>
    </div>
</div>

The problem is that ui-icon switches its icon set depending on the ui-state of its ancestors. But ui-state-active on the element further up the hierarchy appears to take precedence over ui-state-default on its immediate parent, resulting in an icon that typically blends in with its background.

I could manually override the background for the ui-icon element, but then the widget is no longer themeable. Is there another way to prevent ui-state-active from affecting that icon?

Upvotes: 3

Views: 558

Answers (2)

Sinetheta
Sinetheta

Reputation: 9429

You're going to have to either make some small modifications to the css, match the active to the default icon colour, or rethink why you have "inactive" items inside of "active items.

I would suggest the third option ;) but the lines of interest are:

/* Icons
----------------------------------*/

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsHeader}*/; }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsHover}*/; }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsActive}*/; }
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png)/*{iconsHighlight}*/; }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/; }

As you can see, the default and active states have the same specificity but the active state comes later, so without a change to their code or yours (or a blasphemous jQuery over-ride) you're stuck.

Upvotes: 1

Andrew
Andrew

Reputation: 13853

The relevant ui css is this,

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }
...
.ui-state-default .ui-icon { background-image: url(images/ui-icons_cccccc_256x240.png); }
...
.ui-state-active .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }

It doesn't look like there is anything you can do while keeping themeroller compatibility. Apart from rethinking the layout of your DOM. 

<div class='ui-state-active'>

</div>
<div class='ui-state-default'>
    <div class='ui-icon ui-icon-triangle-1-e'/>
</div>

Upvotes: 2

Related Questions