thanks david :-) A better way for extending the existing styles would be definitely cool. Did you finished your "SenchaTouchThems.pdf" btw? Would be nice to have a more complete version of that stuff available...
Here is now my actual workflow as an intermediate solution to the problem we was talking about (is a bit hackish, but will ensure that you will not overwrite your settings if the Sencha Touch scss file will change). This example is for extending mixins:
Step 1: cut out the mixin you want to extend from the _mixins.scss file (in my case the background gradient declarations)
Step 2: extend your definitions as you like in a new scss file (im my case _test.scss)
Step 3: important!! put the @import for your custom definitions before the default sencha @import declarations
Step 4: enjoy your new styling
Example for custom gradients:
Code:
@import 'compass/css3';
// options: matte, bevel, glossy, recessed, blackglossy (blackglossy is an extended feature)
@mixin background-gradient($bg-color, $type: $base-gradient) {
background-color: $bg-color;
@if $include-highlights {
@if $type == bevel {
@include linear-gradient(color_stops(lighten($bg-color, 30%), lighten($bg-color, 15%) 2%, lighten($bg-color, 8%) 30%, $bg-color 65%, darken($bg-color, 10%)));
} @else if $type == glossy {
@include linear-gradient(color_stops(lighten($bg-color, 15%), lighten($bg-color, 5%) 50%, $bg-color 51%, darken($bg-color, 5%)));
} @else if $type == recessed {
@include linear-gradient(color_stops(darken($bg-color, 10%), darken($bg-color, 5%) 10%, $bg-color 65%, lighten($bg-color, .5%)));
} @else if $type == matte {
@include linear-gradient(color_stops(lighten($bg-color, 30%), lighten($bg-color, 10%) 2%, darken($bg-color, 7%)));
} @else if $type == blackglossy {
@include linear-gradient(color_stops(lighten($bg-color, 60%) 0%, lighten($bg-color, 60%) 1%, lighten($bg-color, 50%) 2%, lighten($bg-color, 40%) 10%, lighten($bg-color, 21%) 49%, lighten($bg-color, 0%) 51%, lighten($bg-color, 0%) 100%));
}
}
}
Example for the app.scss file:
Code:
// vars
$complement: #666;
$base-color: #2a2a2a;
$alert-color: red !default;
$confirm-color: #92cf00 !default; // Green
$active-color: #00d2ff;
// For list items, toolbars, etc. (acts as min-height)
$global-row-height: 2.7em !default;
$include-highlights: true;
// Now you can use your own gradient declaration here!
$base-gradient: 'blackglossy';
// Lists
$list-active-gradient: 'matte';
$list-header-bg-color: transparentize(saturate($base-color, 10%), .25);
$list-header-gradient: 'matte';
$list-pressed-color: #92cf00;
$list-active-color: #92cf00;
// extended gradient scss file
@import 'test';
// framework and base components
@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-msgbox;
// custom styles
@import 'general';
@import 'toolbars';
Cheers,