Hands-On Sencha Touch 2

Appendix B. Custom Stylesheet for the FindACab App

Example B-1 gives the full code of the custom Sass theme for the FindACab app.

Example B-1. resources/sass/app.scss

@font-face{
 font-family: "Bebas";
 src: url(data:font/ttf;base64,-some-base-64-string) format('woff');
}

$yellow: rgba(250,178,68,1);
$black: #494949;
$base-color: $yellow;
$alternative-color: lighten(#494949, 5%);
$alert-color: #B0886D;
$confirm-color: #FFA500;
$active-color: darken($base-color, 1%);

// GRADIENTS
$base-gradient: 'none';

// LISTS
$list-color: darken($active-color, 20%);
$list-active-color: transparentize($active-color, .2);
$list-active-gradient: 'recessed';
$list-header-bg-color: darken($alternative-color, 10%);
$list-pressed-color: lighten($list-active-color, 10%);
$list-bg-color: #353535;

$global-list-height : 40px;
$list-disclosure-round-size: 2em;
$list-disclosure-size: 1.7em;
$list-round-padding: 20px !default;

$include-pictos-font: false;
$include-default-icons: false;

$experimental-support-for-opera:false;
$experimental-support-for-khtml:false;
$experimental-support-for-microsoft :false;
@import "compass/css3";

@import 'sencha-touch/default';
/*@import 'sencha-touch/default/all'*/;

@import 'sencha-touch/default/src/_Class.scss';
@import 'sencha-touch/default/src/_Button.scss';
@import 'sencha-touch/default/src/_Panel.scss';
/*@import 'sencha-touch/default/src/_Sheet.scss';*/
@import 'sencha-touch/default/src/_MessageBox.scss';
@import 'sencha-touch/default/src/_Toolbar.scss';
/*@import 'sencha-touch/default/src/_Menu.scss';*/ ...