PDA

View Full Version : Back buttons with SASS



Bucs
21 Apr 2011, 2:17 AM
What do I have to have in my SCSS file to create the following back button look? I can generally figure out how to style a button, either with a -ui or a buttonize mixin, but these never seem to work when it comes to having these looks also apply to the Touch button types, especially back and forward.

Trying to achieve this button look on toolbars....thanks for any pointers:

http://livingspaces.madmobile.com/ui/Assets/Images/glossy_back_button.png

Bucs
6 May 2011, 2:02 PM
BUMP...Pleaaassse! :)

Really need to know what I need to be adding to me SASS files so that that when I change a button color/style I get the pointed tips on the back and forward buttons.

Thanks

bdvr
7 May 2011, 6:44 PM
Yes, I too am looking to get the native button look. It is not possible to do with the existing variables (the glossy gradient mix-in kind of looks like it, but doesn't get the recessed look), so we're down to overriding / replacing Sencha's CSS rules. There are of course a lot of examples on the web of CSS for iOS buttons, but it's not so easy to get that to play nicely with what Sencha has and have it look right in all of the scenarios (on a toolbar, not on a toolbar, the various uis, etc.).

If anyone knows of an existing theme that implements the iOS button look and covers at least a few of the scenarios, that would be really helpful.

bdvr
7 May 2011, 6:55 PM
Yes, I too am looking to get the native button look. It is not possible to do with the existing variables, so we're down to overriding / replacing Sencha's CSS rules. There are of course a lot of examples on the web of CSS for iOS buttons, but it's not so easy to get that to play nicely with what Sencha has and have it look right in all of the scenarios (on a toolbar, not on a toolbar, the various uis, etc.).

preyz
7 May 2011, 11:41 PM
I suggest taking a look at the Sencha Touch theme's files hidden away in the resources folder. I guess you can copy the way they create the back button, and add-in your own wishes.