Results 1 to 3 of 3

Thread: Problem create a round button UI with an icon

  1. #1
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    117
    Answers
    3

    Question Problem create a round button UI with an icon

    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).

    Thanks.

    -Chris

  2. #2
    Sencha User Phil Guerrant's Avatar
    Join Date
    May 2011
    Location
    Colorado
    Posts
    352
    Answers
    32

    Default

    Could you post your SASS/js code?
    Phil Guerrant
    Ext JS - Development Team

  3. #3
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    117
    Answers
    3

    Default

    Here you go:

    Code:
    @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 
    );
    Thanks.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •