Opened 8 years ago

Closed 8 years ago

#13965 closed defect (fixed)

css for disabled inputs in dijit.css is more specific than theme css for webkit

Reported by: ben hockey Owned by: bill
Priority: high Milestone: 1.7
Component: themes Version: 1.7.0b1
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by ben hockey)

when trying to make a custom theme based on claro i discovered that adjusting @disabled-text-color in variables.less is ineffective in webkit because http://bugs.dojotoolkit.org/browser/dojo/dijit/trunk/themes/dijit.css?rev=26471#L359 is more specific than http://bugs.dojotoolkit.org/browser/dojo/dijit/trunk/themes/claro/form/Common.css?rev=24192#L87.

to demonstrate, try setting @disabled-text-color: #f00; in variables.less, compile the less files and then view the text input widgets tab of the theme tester. in FF, the disabled inputs will have red text but in chrome the disabled inputs have gray text.

Change History (11)

comment:1 Changed 8 years ago by ben hockey

Owner: changed from nonken to bill

comment:2 Changed 8 years ago by bill

I see the problem you are talking about, but not sure what a good fix is. The problem is that webkit automatically lightens the text in disabled input and textarea controls, especially textarea controls, and we are trying to counteract that.

The following CSS in forms/Common.less will work well for the standard claro colors.

.claro .dijitTextBoxDisabled,
.claro .dijitTextBoxDisabled .dijitInputInner {
	color: @disabled-text-color;
}
.dj_webkit .claro .dijitTextBoxDisabled input {
    /* because WebKit lightens disabled input/textarea no matter what color you specify */
	color: darken(@disabled-text-color, 5%)
}
.dj_webkit .claro textarea.dijitTextAreaDisabled {
    /* because WebKit lightens disabled input/textarea no matter what color you specify */
	color: darken(@disabled-text-color, 50%)
}

Specifically, it will address the problem where the disabled Textarea text is too light on webkit.

However, in your example where you changed the disabled-text-color to red, the darken() calls will wash out the red, making it black.

I tried saturate() instead but strangely that seems to make everything red even if the original color is gray.

What do you think?

Last edited 8 years ago by bill (previous) (diff)

comment:3 Changed 8 years ago by ben hockey

Description: modified (diff)

the red used as an example was just to highlight the issue. I was actually just trying a light text on a dark background. Using darken is probably an adequate solution and at the least is better than the current situation.

comment:4 Changed 8 years ago by ben hockey

grr... I didn't mean to change the description. I guess my phone did that for me. feel free to change it back - otherwise I'll change it next chance I get.

comment:5 Changed 8 years ago by ben hockey

Description: modified (diff)

comment:6 Changed 8 years ago by bill

Milestone: tbd1.7
Status: newassigned

comment:7 Changed 8 years ago by bill

Resolution: fixed
Status: assignedclosed

In [26669]:

Fixes #13965: css for disabled inputs in dijit.css is more specific than theme css for webkit.

comment:8 in reply to:  7 Changed 8 years ago by ben hockey

Replying to bill:

In [26669]:

Fixes #13965: css for disabled inputs in dijit.css is more specific than theme css for webkit.

typo in this commit - darker should be darken. you can see that the generated css still has darker in it.

comment:9 Changed 8 years ago by ben hockey

Resolution: fixed
Status: closedreopened

comment:10 Changed 8 years ago by bill

In [26678]:

fix typo, refs #13965

comment:11 Changed 8 years ago by bill

Resolution: fixed
Status: reopenedclosed

woops, thanks for catching that.

Note: See TracTickets for help on using tickets.