This blog is about tips
on using Sencha Touch.

Follow it via
RSS or Twitter.


Steffen Hiller is owner & lead developer of 360releases Ltd.,
a Sencha Touch, Ext JS & Ruby on Rails consultancy shop.

You can follow him on Twitter @steffenhiller.

#3 Adding inset buttons

  • February 08, 2011

Yesterday I needed to have inset buttons in a Sencha Touch project of mine. Even though it's a pretty common button style in iOS, I was surprised this isn't built-in in Sencha Touch.

But, thanks to the CSS-only theming in Sencha Touch, it turned out to be very easy to add myself. Actually, it's just one line we need to add.

Unfortunately, to add your custom mixins, you can't just extend existing mixins like you can extend a class in Sencha Touch. You have to copy all the code of the original mixin. That's why the source code of my mixin is a bit large, but for reference I commented the line which is doing the trick.

First, let's see how the inset buttons look:

For the record, that's how the buttons in Sencha Touch look by default:

That's the Sass code for greating those toolbar uis:

@include inset-toolbar-ui('green', green);
@include inset-toolbar-ui('blue', blue);
@include inset-toolbar-ui('red', red);
@include inset-toolbar-ui('gray', gray);

And that's the Sass source you need to include into your project.

@mixin inset-toolbar-button($bg-color, $type: $button-gradient) {
    &, .x-toolbar & {
        border: .1em solid darken($bg-color, 20%);
        border-top-color: darken($bg-color, 15%);
        @include color-by-background($bg-color);

        // This one here is the only line we need to add:
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3),
            0 1px 1px rgba(255, 255, 255, 0.3) !important;

        &.x-button-back:before, &.x-button-forward:before {
            background: darken($bg-color, 20%);
        }

        &, &.x-button-back:after, &.x-button-forward:after {
            @include background-gradient($bg-color, $type);
        }

        img.x-icon-mask {
            @include mask-by-background($bg-color);
        }

        @if $include-highlights {
            @include bevel-by-background($bg-color);
            -webkit-box-shadow: rgba(#fff, .1) 0 .1em 0;
        }

        &.x-button-pressed, &.x-button-active {
            &, &:after {
                @include background-gradient(darken($bg-color, 7%),
                    'recessed');
            }
            @if $include-highlights {
                -webkit-box-shadow: inset saturate(darken($bg-color,
                    15%), 5%) 0 0 .1em, rgba(#fff, .1) 0 .1em 0;
            }
        }
    }
}


@mixin inset-toolbar-ui($ui-label, $color,
        $gradient: $toolbar-gradient) {

    $toolbar-border-color: darken($color, 50%);
    $toolbar-button-color: darken($color, 10%);

    .x-toolbar-#{$ui-label} {
        @include background-gradient($color, $gradient);
        border-color: $toolbar-border-color;

        .x-toolbar-title {
            @include color-by-background($color);
            @include bevel-by-background($color);
        }

        .x-button, .x-field-select .x-input-text {
            @include inset-toolbar-button($toolbar-button-color,
                $gradient);
        }
    }
}

That's all.