PDA

View Full Version : Custom UI for Buttons Does not Compile, Syntax Error



tinaliu
12 Dec 2013, 10:23 AM
Hi, I am quite new to the Sencha Community. Currently I am creating a custom theme by extending the Neptune theme. I have reset many base variables and component variables such as $base-color, $button-toolbar-background-color etc. But my custom ui for button does not seem to compile when I make changes to it, and I keep getting errors in the command line.

My file structure for the custom button ui is var/button/Button.scss

My code for Button.scss is like this:

@include extjs-button-ui(
'insert-coin',
$border-radius: 0px,
$border-width: 3px
);

The error that I get in my browser is:


Syntax error: "null" is not a color for 'mix'


Please help me!

bricemason
16 Dec 2013, 8:14 PM
The extjs-button-ui mixin is a big mixin with only a few of the parameters marked as optional. With that said, you can actually get away with a just a few parameters defined when you execute it. Given your example, you'll need two additional parameters defined to make it compile, specifically the $background-color and $glyph-color parameters (I've defined some sample colors here):

@include extjs-button-ui(
'insert-coin-small',
$border-radius : 0px,
$border-width : 3px,
$background-color : #ff0000,
$glyph-color : #00ff00
);


You need at least these two additional parameters because if you look in the source of the extjs-button-ui mixin itself, you'll notice that it's marking a line where a call to the mix function is being done. Here's a snippet of that source:

$mix-color: $background-color;
@if $mix-color == transparent {
$mix-color: #fff;
}
.#{$prefix}ie8m & {
color: mix($glyph-color, $mix-color, $glyph-opacity * 100);
}


The $mix-color variable relies on $background-color and $glyph-color also needs to be defined for the mix function to execute.

Now at this point even though you'll get a compile, you'll also receive some warnings about missing theme images as well which you'll need to resolve.

Another thing to consider is that the ui you've defined doesn't factor in scaling, that is there's no ui for 'insert-coin-small' etc. The docs for 4.2.2 talk about this and even offer additional mixins, so give that a review as well if you wish.

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.button.Button-css_mixin-extjs-button-ui

I hope this helped you,

Brice

Kevin Jackson
17 Dec 2013, 8:14 AM
Brice - Thanks for assisting here. You're correct. The button mixin is pretty extensive and has many values that must be there for it to compile correctly. Theming is greatly improved but it still takes some time to master. I'd recommend the following to helpThe theming guide is a good overview http://docs.sencha.com/extjs/4.2.2/#!/guide/themingAdditionally, Phil Guerrant from the Theming Team has several excellent videos that will take you through it.All the SenchaCon videos are here. http://vimeo.com/album/2541003For Theming Check out http://vimeo.com/album/2541003/video/75264459 and http://vimeo.com/75258562Finally we are just now releasing a new Advanced Theming class that is rolling out next month.http://www.sencha.com/company/events/jan-27-31-advanced-theming-for-sencha-ext-js-training-live-online/