PDA

View Full Version : simple change to button font with sass



13 Mar 2012, 3:53 PM
Hi,

OK, so with the help of the forum, I can do compass/sass stuff now, and some of the examples from the guides and videos, but I am really struggling with changing a button.

I am working on a redish theme, and would like to make the buttons a little darker than they currently are and have a white font instead of a black.

I've tried every mixin example I can find for ext-button-ui, ext-button-color, etc, but I can't find any good reference for extjs 4 mixins. Either that or I am didn't undestand what I read as well as I thought I did!

Any help would be appreciated.

Best,
Jeff

mitchellsimoens
14 Mar 2012, 9:59 AM
This is how the small button is created:


@include extjs-button-ui(
/* UI + Scale */
'default-small',

$button-small-border-radius,
$button-small-border-width,

$button-default-border-color,
$button-default-border-color-over,
$button-default-border-color-focus,
$button-default-border-color-pressed,
$button-default-border-color-disabled,

$button-small-padding,
$button-small-text-padding,

$button-default-background-color,
$button-default-background-color-over,
$button-default-background-color-focus,
$button-default-background-color-pressed,
$button-default-background-color-disabled,

$button-default-background-gradient,
$button-default-background-gradient-over,
$button-default-background-gradient-focus,
$button-default-background-gradient-pressed,
$button-default-background-gradient-disabled,

$button-default-color,
$button-default-color-over,
$button-default-color-focus,
$button-default-color-pressed,
$button-default-color-disabled,

$button-small-font-size,
$button-small-font-size-over,
$button-small-font-size-focus,
$button-small-font-size-pressed,
$button-small-font-size-disabled,

$button-small-font-weight,
$button-small-font-weight-over,
$button-small-font-weight-focus,
$button-small-font-weight-pressed,
$button-small-font-weight-disabled,

$button-small-font-family,
$button-small-font-family-over,
$button-small-font-family-focus,
$button-small-font-family-pressed,
$button-small-font-family-disabled,

$button-small-icon-size
);

14 Mar 2012, 6:22 PM
Hi Mitchell,

I appreciate your response, but I am afraid I am still missing something more basic. Can anyone provide an example of any custom button style for sass in extjs 4? I am looking for something that can be added to the my-ext-theme.scss file.

Thanks,
Jeff