Changing tab height in tabbar using Compass theming

[k0smita]

I successfully used theming with Compass and Ext4.0.7 to change tab height in tabbar using:

$tab-height: 40px !default;

at the top of my-theme.scss

This, however, changes the height of tabs globally, in all TabPanels, while I would be able to customize different TabPanels of my app in different way. For Panel or ProgressBar it can be done using @mixin/ui, but there is no ui for TabPanel.

So is it possible at all to change selectively $tab-height only for some TabPanel classes?

P.S.
I would like to do it in scss theme, in a custom-ui-like way, avoiding a hassle of customizing final css like described here.

[mitchellsimoens]

You will need to specify a cls on the tabpanels you want the tabs to be changed and do some SCSS in that cls.

[k0smita]

OK, so I did as suggested, used the cls.

For the record, below I put a way that makes tweaking the tabpanel css using cls config a little bit easier.

First, of course set:

cls: 'MainPanel'

in TabPanel config.

Then, create a custom theme:

$include-default: false;
  
// customize tab variables:
$tab-height: 40px !default;
$tabbar-strip-height: 7px !default;

@import 'ext4/default/all';

// include only TabPanel-related stuff
.MainPanel { @include extjs-tabbar; };
.MainPanel { @include extjs-tab; };

$relative-image-path-for-uis: true; // defaults to "../images/" when true

and copy all tab height-related CSS rules to another CSS file.

The point of this procedure is that it will automatically generate all rules by calculating height of all elements just based on $tab-height and putting .MainPanel at front:

.MainPanel .x-border-box .x-tab-bar-top .x-tab-bar-body-default-plain {
    height: 43px;
}