Can't Get Toolbar Icon SIze to Work

[markwyner]

Hello, all.

I've searched around the web to find information about sizing toolbar button icons and can't find anything beyond the following SASS variable:

$toolbar-icon-size: .2em;

But so far I am unable to get this to change the size of the icons. I did discover a configuration for buttons in Ext.JS called "scale," which serves my purpose, but it doesn't work in Sencha Touch even though some Ext.JS components carry over.

Any thoughts on how to resize the icons? I'm using Sencha Touch 1.1.1.

Thanks in advance for any help.

[mitchellsimoens]

It looks like the SASS variable $toolbar-icon-size is used in the CSS selector:

.x-button.x-button-plain, x.toolbar .x-button.x-button-plain img

[markwyner]

That is correct. Except that the button generated doesn't include the class "x-button-plain" as you've noted which means the sass variable is ignored.

My JS looks like this:

items: [{
	icon: 'resources/themes/images/pocket-csi/icon-settings.png'
},{
	xtype: 'spacer'
},{
	icon: 'resources/themes/images/pocket-csi/icon-info.png'
}]

It doesn't matter if I use $toolbar-icon-size: 10px; or $toolbar-icon-size: 100px;. In either case the icons are the same size. This is because the CSS generated looks like this:

.x-button.x-button-plain img, .x-toolbar .x-button.x-button-plain img {
  -webkit-mask-size: 10px;
  width: 10px;
  height: 10px;
}

And the generated HTML looks like this:

<div id="ext-comp-1014" class="x-button x-button-normal x-iconalign-left">
	<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(resources/themes/images/pocket-csi/icon-settings.png)" id="ext-gen1011">
</div>

So the sass variable $toolbar-icon-size applies to a class that doesn't exist in the generated HTML. Am I missing something or is not not applying like it should?

Thanks.

P.S. I wanted to report this as a bug but wanted to make sure it was indeed a bug and not a misunderstanding of how to use this sass variable.

[UsernameIsValid]

edit: wrong thread, my solution is for scaling image buttons 8-|
What works for me is adding a new class and defining it manually in the stylesheets like so:

custom.sass:

// increase 'largebutton' size
$large-button-size: 50px;

.largebutton img.x-icon-mask {
    -webkit-mask-size: $large-button-size !important;
    width: $large-button-size;
    height: $large-button-size;
    margin: .4em auto .3em;
}

view.js

var dashboard = new Ext.Panel({
    layout: {
        type : 'vbox',
        pack : 'justify'
    },
    defaults: {
        layout: {
            type: 'hbox',
            pack: 'center'
        },
        flex: 1,
        width: '100%',
        defaults: {
            xtype: 'button',
            iconMask: true,
            iconAlign: 'top',
            iconCls: 'help',
            cls: 'largebutton',
            margin: '0 25 0 25',
            width: 150,
            height: 100
        }
    },
    items: [
        {
            items: [
                {
                    text: 'Anfragen',
                    iconCls: 'note2'
                },
                {
                    text: 'F.A.Q.'
                }
            ]
        },
        {
            items: [
                {
                    text: 'Twitter',
                    iconCls: 'twitter2'
                },
                {
                    text: 'Facebook',
                    iconCls: 'user3'
                }
            ]
        }
    ]
});