Hello,

I want to create a UI for buttons in a toolbar. I have the following toolbar definition:

Code:
    items: [
        {
            xtype: 'toolbar',
            height: 64,

            style: {
                background: '#282828'
            },
            itemId: 'headerBar',
            reference: 'headerBar',
            items: [
                {
                    xtype: 'component',
                    html: '<div class="logo"><img src="resources/images/logo.png">Demo</div>',
                    width: 200
                },
                {
                    xtype: 'tbseparator'
                },
                {
                    ui: 'navmenu',
                    text: 'Menu1',
                     //scale: 'medium'
                },
                {
                    text: 'Menu2',
                    ui: 'cancel'
                }
            ]
        }
    ]
I've created a custom UI as bellow:

Code:
@include extjs-button-small-ui(
    $ui: 'cancel',
    $background-color: red
);


@include extjs-button-toolbar-medium-ui(
    $ui: 'navmenu',
    
    $border-radius: 4px,
    $border-width: 1px,


    $padding: 7px,
    $text-padding: 1px,


    $background-color: #a31a45,
    $background-color-over: #b31b45,


    $color: #fff,
    $inner-border-color: #fff
);
While the 'cancel' UI works properly, the 'navmenu' UI doesn't apply the changes. In the developer window I see that the class x-btn-navmenu-medium was applied but no css in that class. I tried to add scale property on the button but with no prevail.

How to use ext-button-toolbar-medium-ui theme mixin? Do I use it wrong?

I'm using Ext 6.6.0.

Thank you,
Florin