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:
in TabPanel config.
Then, create a custom theme:
Code:
$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:
Code:
.MainPanel .x-border-box .x-tab-bar-top .x-tab-bar-body-default-plain {
height: 43px;
}