// Basic
$base-color                 : #cbcbcb;
$active-color               : #688AD2;
$base-gradient              : 'matte';
$include-default-icons      : false;
$include-default-uis        : false;

// Toolbar
$toolbar-icon-size          : 1.0em;

// Setting list
$settinglist-icon-size      : 24px;
$settinglist-image-width    : 72px;
$settinglist-image-height   : 48px;

// Image default icons
$icons-default-size         : 24px;
$icons-default-image-width  : 72px;
$icons-default-image-height : 888px;

// Image bullet icons
$bullet-icon-size           : 24px;
$bullet-icon-image-width    : 48px;
$bullet-icon-image-height   : 168px;

// Image numbering icons
$numbering-icon-size        : 74px;
$numbering-icon-image-width : 148px;
$numbering-icon-image-height: 518px;

// Image outline icons
$outline-icon-size          : 74px;
$outline-icon-image-width   : 148px;
$outline-icon-image-height  : 222px;

@import 'sencha-touch/default';

@import 'sencha-touch/default/src/Class';
@import 'sencha-touch/default/src/Button';
@import 'sencha-touch/default/src/Panel';
@import 'sencha-touch/default/src/Sheet';
@import 'sencha-touch/default/src/MessageBox';
@import 'sencha-touch/default/src/Toolbar';
@import 'sencha-touch/default/src/Toast';
@import 'sencha-touch/default/src/Menu';
//@import 'sencha-touch/default/src/carousel/Carousel';
@import 'sencha-touch/default/src/form/Panel';
@import 'sencha-touch/default/src/form/FieldSet';
@import 'sencha-touch/default/src/field/Field';
@import 'sencha-touch/default/src/field/Checkbox';
@import 'sencha-touch/default/src/field/Radio';
@import 'sencha-touch/default/src/field/Search';
@import 'sencha-touch/default/src/field/Select';
//@import 'sencha-touch/default/src/field/Slider';
@import 'sencha-touch/default/src/field/Spinner';
//@import 'sencha-touch/default/src/field/TextArea';
//@import 'sencha-touch/default/src/dataview/IndexBar';
@import 'sencha-touch/default/src/dataview/List';
@import 'sencha-touch/default/src/picker/Picker';
//@import 'sencha-touch/default/src/plugin/ListPaging';
//@import 'sencha-touch/default/src/plugin/PullRefresh';
//@import 'sencha-touch/default/src/slider/Slider';
@import 'sencha-touch/default/src/slider/Toggle';
//@import 'sencha-touch/default/src/tab/Panel';
//@import 'sencha-touch/default/src/grid/Grid';

@import 'common-buttons';
@import 'common-dataview';
@import 'common-toolbar';
@import 'common-settingspanel';
@import 'common-planarspinner';
@import 'common-settingslist';
@import 'common-messagebox';

@import 'application-mixins';
@import 'application-dataview';

@include common-settings-panel;
@include common-planar-spinner;

@include common-toolbar-ui('edit', $base-color);
@include common-toolbar-ui('search', $base-color);

@include application-icon-normal('save',          0);
@include application-icon-normal('undo',          1);
@include application-icon-normal('share',         2);
@include application-icon-normal('font-style',    3);
@include application-icon-normal('font-color',    4);
@include application-icon-normal('bold',          5);
@include application-icon-normal('italic',        6);
@include application-icon-normal('underline',     7);
@include application-icon-normal('align-left',    8);
@include application-icon-normal('align-center',  9);
@include application-icon-normal('align-right',   10);
@include application-icon-normal('align-fill',    11);
@include application-icon-normal('bullets',       12);
@include application-icon-normal('spacing',       13);
@include application-icon-normal('page-number',   14);
@include application-icon-normal('insert',        15);
@include application-icon-normal('search',        16);
@include application-icon-normal('fullscreen',    17);
@include application-icon-normal('spinner-down',  18);
@include application-icon-normal('spinner-up',    19);
@include application-icon-normal('superscript',   20);
@include application-icon-normal('subscript',     21);
@include application-icon-normal('table',         22);
@include application-icon-normal('picture',       23);
@include application-icon-normal('spacing',       24);
@include application-icon-normal('indent-inc',    25);
@include application-icon-normal('indent-dec',    26);
@include application-icon-normal('numbering',     27);
@include application-icon-normal('outline',       28);
@include application-icon-normal('insert-row',    29);
@include application-icon-normal('insert-column', 30);
@include application-icon-normal('highlightcolor',31);
@include application-icon-normal('textcolor',     32);
@include application-icon-normal('textbigger',    33);
@include application-icon-normal('textless',      34);
@include application-icon-normal('spinner-prev',  35);
@include application-icon-normal('spinner-next',  36);


@include common-button-ui('base',       $base-color);
@include common-button-ui('light',      lighten($base-color, 100%));
@include common-button-ui('base-blue',  $active-color, 'dark');
@include common-button-ui('back',       $base-color);

/*
 *  unsupport
 */

//TODO: need retina resolution
.unsuported-view {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../img/ios-only.png) no-repeat center #efefef;
    background-attachment: fixed;
    z-index: 90000;
}

/*
 * Additional styles
 */

.x-button.text-offset-12 {
  padding-left: 12px;
  padding-right: 12px;
}

.x-button.text-offset-30 {
  padding-left: 30px;
  padding-right: 30px;
}