#8095 closed bug (notabug)

Opened February 02, 2012 04:41PM UTC

Closed October 10, 2012 05:18PM UTC

ThemeRoller - CSS Scope

Reported by: troberts Owned by: troberts
Priority: minor Milestone: 1.9.0
Component: [meta] ui.themeroller Version: 1.8.17
Keywords: Cc:
Blocked by: Blocking:
Description

If I use download a theme with specifying a CSS Scope (under advanced theme settings), the css scope is applied to everything BUT a few items under ui.button. Example - download the 'start' theme and apply ".start" as the css scope - the resulting jquery-ui-1.8.17.custom.css file has:

.start .ui-button { display: inline-block; ...
.start .ui-button-icon-only { width: 2.2em; }
button.ui-button-icon-only { width: 2.4em; } <-- CSS SCOPE NOT APPLIED
.start .ui-button-icons-only { width: 3.4em; } 
button.ui-button-icons-only { width: 3.7em; } <-- CSS SCOPE NOT APPLIED

/*button text element */
.start .ui-button .ui-button-text ...
.start .ui-button-text-only .ui-but...
.start .ui-button-icon-only .ui-but...
.start .ui-button-text-icon-primary...
.start .ui-button-text-icon-seconda...
.start .ui-button-text-icons .ui-bu...
/* no icon support for input elements...
input.ui-button { padding: .4em 1em; }  <-- CSS SCOPE NOT APPLIED

Without the scope and using MULTIPLE themes in an application get's buttons that are 'confused' to what theme they should render

Attachments (0)
Change History (5)

Changed February 02, 2012 04:44PM UTC by scottgonzalez comment:1

component: ui.button → [meta] ui.themeroller
owner: → jquery-infrastructure

Changed October 04, 2012 11:11PM UTC by scottgonzalez comment:2

owner: jquery-infrastructure → troberts
status: new → pending

It seems strange to me that the widget-specific rules would need to be scoped anyway. The only thing that changes between themes are the rules in jquery.ui.theme.css. What problem is this causing?

Changed October 05, 2012 03:05AM UTC by troberts comment:3

status: pending → new

I have an application that has a main page with jquery ui tabs on a page (using my 'default' theme [ie no CSS scope]). The tab panels each have their own assigned theme (a visual cue to our users). Without the CSS scope, the themeing of the buttons on those tab panels are inconsistent with the theme we assigned to the panel. Not sure if I explained that correctly - but that's what's happening.

Changed October 05, 2012 12:13PM UTC by scottgonzalez comment:4

status: new → pending

I still don't understand why that happens, as the lines you pointed to aren't affected by the theme settings. You should have exactly the same rules in both cases. Can you provide a reduced test case showing the problem?

Changed October 10, 2012 05:18PM UTC by scottgonzalez comment:5

resolution: → invalid
status: pending → closed

I'm closing this until we can get a reduced test case showing a problem. If you're able to provide a reduced test case showing the error, please file a new issue at https://github.com/jquery/download.jqueryui.com/issues/new