Results 1 to 3 of 3

Thread: SASS Theming on tabpanel...

  1. #1
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    46
    Answers
    1
    Vote Rating
    2
      0  

    Default SASS Theming on tabpanel...

    Hi All,

    I'm currentily modifying the neptune theme using sass.

    Here is my custom sass
    Code:
    $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 :
    ModNeptune.jpg

    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.
    Attached Images Attached Images

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,382
    Answers
    3997
    Vote Rating
    1529
      0  

    Default

    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?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    46
    Answers
    1
    Vote Rating
    2
      0  

    Default

    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 :
    Code:
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •