PDA

View Full Version : SASS Theming on tabpanel...



bcarollo
3 Jan 2013, 11:53 PM
Hi All,

I'm currentily modifying the neptune theme using sass.

Here is my custom sass

$include-default: false;

$base-dark-color:black;
$base-color: lighten($base-dark-color,5);
$base-light-color: lighten($base-dark-color,15);
$neutral-color: lighten($base-dark-color,15);

$panel-base-color: lighten($base-dark-color,5);
$panel-background-color: lighten($base-dark-color,5);
$tab-base-color-active: lighten($base-dark-color,25);


// Library
@import 'compass';
@import 'neptune/default/all';

// Your custom code goes here...

@include extjs-panel;
@include extjs-viewport;
@include extjs-form;
@include extjs-window;
@include extjs-button;
@include extjs-toolbar;
@include extjs-tab;
@include extjs-scroller;

and here is an image of the tabs on my tab panel :
41074

The tab named "Reading Workspace" is the one that is actally selected.
Now the question: What I need to do in order to make the unselected tab appear with a black background and a white text?

I've spent almost three ours yestarday without success :-(

Thanks a lot for you help

Ben.

mitchellsimoens
7 Jan 2013, 10:34 AM
In my theme $tab-base-color-active variable does that for me. Did you inspect the DOM to see if there was something going wrong?

bcarollo
7 Jan 2013, 11:32 PM
Hi Mitchell,

thanks a lot for your reply but unfortunately I gave up with the Neptune theme :-( as I was getting other errors while adding elements to a panel header in the following way :

Ext.define("ReadingWorkspaceUXPrototype.view.BaseView", {
extend: 'Ext.panel.Panel',
alias: 'widget.baseview',
layout: 'fit',
closable: true,
draggable: {
moveOnDrag: false
},
header:{
layout: {
type: 'hbox',
align: 'stretch'

},
style: {
overflow: 'visible'
},
items: [
{
xtype: 'button',
text: 'I like Ext',
menu: {
floating: 'true',
items: [
{
text: 'I Like Extjs',
checked: true
},
{
xtype: 'menuseparator'
},
{
text: 'Radio Options',
menu: { // <-- submenu by nested config object
title: 'Options',
items: [
{
text: 'Option 01',
checked: true,
group: 'option'
},
{
text: 'Option 02',
checked: false,
group: 'option'
},
{
text: 'Option 03',
checked: false,
group: 'option'
},
{
text: 'Option 04',
checked: false,
group: 'option'
}
]
}
}

]
}
}
]
},
....

Because I needed something working quicly as proof of concept I've used the accessibility theme, and everything works well.
I haven't inspected the DOM, I'll do that later on today or tomorrow and I'll post the results.

Thanks again for the help


Ben