Instagram and FB style title bar buttons

[intellix]

Hey, I was wondering if theres anything already created or at my disposal for creating Instagram/Facebook style buttons?

For instance the back or refresh button as shown here: http://www.geekloudy.com/wp-content/uploads/2012/04/2.png

I'm going to have to translate my app into a couple of languages as well so the 'Back' text could potentially get out of hand.

I've created an image-less tab navigation mixin within Compass for a website already but I'm not entirely sure how it works with Sencha cause it adds about 200 random div's all over the place and I can't quite grasp what's going on

[mitchellsimoens]

So are you just asking how to create a new ui for the button to use?

[intellix]

I guess any information would be great :D I figured maybe it had been done before

[mitchellsimoens]

You can use the mixin in SASS to create a new ui, very simple

[intellix]

Ok so this is basically how I created it... it makes me cringe to have to !important things but I guess there's no escaping this.



.x-toolbar {
padding: 0;
}


.x-button-full {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
min-width: 46px;
margin: -1px !important;
z-index: 1;
@include border-radius(0);}


When I want to have this back button on a Ext.navigation.Bar I have to change the change the backButton setting to have a 'full' UI.

I also had one issue actually with Ext.navigation.Bar, when you click the first back button, none of the other back buttons that slide in work anymore which I think is related to me making the button position: absolute. Looking at the code through Chrome inspector it doesn't look like the animation ever finishes when the back button is set to position: absolute; ​Bug I guess?