Tab bar buttons not changing on mouse over.

[Cuberic]

I'm thememing ext js 4 and the tab bar buttons are not changing when I mouse over them. I've checked the buttons with developer tools and the buttons do gain the x-tab and x-tab-over class but there are no styles for either of those class.

My code for the tabs looks like this:

$tab-color:#000;
$tab-base-color:#d8dfea;
$tabbar-base-color:#D8DFEA;
$tabbar-background-gradient: color_stops( #dde6f5,#cbdaef);
$tab-inner-border: true;
$tab-inner-border-color: #FFF;


$tab-color-active: #333;
$tab-border-color: #8db2e3;
$tab-border-color-active: #8db2e3;
$tab-background-gradient: color-stops(#ccdef6, #deecfd);
$tab-background-gradient-over: color-stops(#deecfd, #ccdef6);
$tab-background-gradient-active: color-stops(#ffffff, #deecfd);

I'm new to ext js and I'm not sure what I am missing.

[bt_bruno]

It's seems to be bug, reported here: x-tab-top-over never inserted into any element (http://www.sencha.com/forum/showthread.php?153954-x-tab-top-over-never-inserted-into-any-element). I gave a workaround solution, so check this previous link.

Basically, Ext has this CSS class defined:
.x-tab-top-over {
background-image: none;
background-color: #e8f2ff;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d7e5fd), color-stop(25%, #e0edff), color-stop(45%, #e8f2ff));
background-image: -webkit-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
background-image: -moz-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
background-image: -o-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
background-image: -ms-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
background-image: linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
}

But the class itself is never inserted into the element when you hover, so it's useless at the moment.