View Full Version : Problem create a round button UI with an icon

6 Jun 2014, 8:14 AM
ExtJS v4.1.3, Sencha Cmd v3.0.2.288

I'm am able to create a round button UI in my themes app.scss, just by setting the border-radius to half the button height, and it's working OK (with no text or icon).

However, if I try to add an icon (via the iconCls property), then the icon is positioned outside of the button area in IE9 (and isn't visible at all in FF).

I assume the problem is that CSS3 alignment (or something) isn't working correctly given that my button only has "border" space.

Is there a solution to this (creating a button UI)?

My current work-around is to just use a static image that I've created myself for the button and graphic, but it would be nice to be able to use the button UI to save the manual efforts (I'm not a graphics person).



Phil Guerrant
10 Jun 2014, 8:21 AM
Could you post your SASS/js code?

10 Jun 2014, 8:45 AM
Here you go:

@include extjs-button-ui(
$ui: 'round-medium',

$font-family: $button-font-family,
$font-size: 16px,
$font-weight: normal,

$background-color: $location-button-color,
$background-color-over: $location-button-color-over,
$background-color-focus: $location-button-color-over,
$background-color-pressed: $location-button-color-over,
$background-color-disabled: lighten($location-button-color, 50%),

$background-gradient: color-stops($location-button-gradient-start, $location-button-gradient-end),
$background-gradient-over: color-stops($location-button-gradient-over-end, $location-button-gradient-over-start),
$background-gradient-focus: color-stops($location-button-gradient-over-end, $location-button-gradient-over-start),
$background-gradient-pressed: color-stops($location-button-gradient-over-end, $location-button-gradient-over-end),
$background-gradient-disabled: color-stops(lighten($location-button-gradient-start, 50%), lighten($location-button-gradient-end, 50%)),

$icon-size: 25px,

$padding: 4px,
$text-padding: 4px,

$color: #fff,
$color-disabled: gray,

$border-color: transparent,
$border-color-over: transparent,
$border-color-focus: #000,
$border-color-pressed: transparent,
$border-color-disabled: transparent,

$border-width: 0px,
$border-radius: 20px