Opened 11 years ago

Closed 11 years ago

#6637 closed task (fixed)

TabContainer: background image not aligned on hover

Reported by: bill Owned by: bill
Priority: high Milestone: 1.2
Component: Dijit - LnF Version: 1.1.0
Keywords: ibm Cc:
Blocked By: Blocking:

Description

The tab container does have a rollover state but the background image doesn't align on hover state which is the problem. This is caused by defining a different position for the background image on hover.

This is the hover state that is currently being used.

.tundra .dijitTabCloseButtonHover {
	color: #243C5F;
	border-top-color:#92a0b3;
	border-left-color:#92a0b3;
	border-right-color:#92a0b3;
	background:#e2e2e2 url(images/tabHover.png) repeat-x bottom;
}

You can see the shadow and highlights don't align on hover . If you remove the "bottom" alignment from the hover class you get the desired result.

.tundra .dijitTabCloseButtonHover {
	color: #243C5F;
	border-top-color:#92a0b3;
	border-left-color:#92a0b3;
	border-right-color:#92a0b3;
	background:#e2e2e2 url(images/tabHover.png) repeat-x;
}

Shadows and highlights are aligned on hover:

Taken from IBM Design Leadership recommendations.

Attachments (2)

new.gif (2.2 KB) - added by bill 11 years ago.
current.gif (2.2 KB) - added by bill 11 years ago.

Download all attachments as: .zip

Change History (3)

Changed 11 years ago by bill

Attachment: new.gif added

Changed 11 years ago by bill

Attachment: current.gif added

comment:1 Changed 11 years ago by bill

Resolution: fixed
Status: newclosed

(In [13448]) Don't change gradient so much on hover. Fixes #6637.

Note: See TracTickets for help on using tickets.