Tab styling variance from 4.1.1 to 4.2

[jkyoutsey]

I just switched from 4.1.1 to 4.2 and my tabs are wildly different than they were previously. The font is tolerable, but the lines below the tabs are not. What am I missing?
4.1.1:
41style.png
4.2:
42style.png

[Animal]

Have you updated all your CSS (or rebuilt your CSS), and cleared the cache?

Because I do not see any lines under my tabs.

I don't think the font changed either. It's still

font-family: tahoma,arial,verdana,sans-serif;

[jkyoutsey]

Animal, I don't really know what you mean by "rebuilt". CSS is just CSS. I completely replaced my 4.1 ExtJS with 4.2 in a completely different folder. So it should not be cached. The path is entirely different.

[Animal]

CSS is built from SASS. You can theme your app using SASS and build that into a stylesheet.

What browser do you see that effect on? What are the rules that create it?

[jkyoutsey]

Okay, I guess we have done more heavy styling than I knew of. These are the CSS overrides in our stylesheet. I've got most of it fixed, but there is still a line under the active tab. I can't tell if this is some sort of z-ordering issue or if there is a style override that worked in 4.1 that now doesn't in 4.2, or some new style name we need to override.

activetabline.png

.x-tab-bar {	background: #E7E7E7;
   background-image: none !important;
   height: 33px !important;
   border-width: 0px !important;
   border-bottom: 0px none!important;
}


.x-tab-default-top-active {
   background-image: none !important;
   background-color: white !important;
}


.x-tab-top {
   background-image: none !important;
   background: #E7E7E7 !important;
   border-color: #E7E7E7 !important;
}


.x-tab button .x-tab-inner {
   color: #333;
   float: left;
   font-weight: bold;
   font-size: 12px;
   cursor: pointer;
   outline: none;
   text-decoration: none;
   height: 24px;
}


.x-tab-default-top {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   -o-box-shadow: none;
   box-shadow: none;
   border-width: 0px !important;
   border-color:  #ADADB0 !important;
}


.x-tab-bar-body {
   border-color: #ADADB0;
}


.x-tab-bar-strip-default {
   border-color: transparent;
   border-top-color: #ADADB0;
   top: 32px !important;
   background-color: transparent;
}


.x-tab-default-top button, .x-tab-default-top .x-tab-inner {
   height: 100%;
   line-height: 23px;
}


.x-tab-active {
   background-color: white !important;
   border-color: #ADADB0 !important;
   border-width:  1px !important;
   border-bottom-width: 0 !important;
}


.x-border-box .x-tab-bar-top .x-tab-bar-body {
   height: 33px;
}


.x-border-box .x-tab-default-top {
   height: 31px;
}

[Animal]

Is that your extra styling?

Which bit of that is actually necessary?

It breaks the tabs

What is the effect you are after?

[jkyoutsey]

My tabs are working just fine. Look at the 4.1.1 image in the first post in the thread. That's the styling I need. The rules I posted above are the ones that work just fine in 4.1.1. Only that bottom line on the active tab is incorrect.

[Animal]

Seems a lot of code for not much change. What is the effect on top of the standard theme that you want to achieve?

[jkyoutsey]

As the image clearly shows, white tabs, grey background, taller tab, dark grey outline colors. It is wildly different from the default ExtJS theme.

It's is an old 3.x style sheet that we stole from for 4.1.1. IT WORKS IN 4.1.1. So there is obviously something quite different about 4.2. If 411 and 42 were SO similar then I wouldn't have spent two days working on fixing things.

How about this. Is there ONE or TWO styles that I can override to get white tabs with grey backgrounds and dark grey outlines?

[Animal]

What about using the grey theme?