Important: the themes directory includes a copy of part of the Sencha Touch SDK, placed here for your convenience to get started quickly with your theming work. This directory is distributed under the [same licence](http://dev.sencha.com/deploy/touch/license.txt) as the [Sencha Touch SDK](http://sencha.com/products/touch) as a whole.
7 |
8 | To create your custom theme for the Roookies app:
9 |
10 | 1. Add a style query string to the app's URL to reference a custom CSS file:
11 |
12 | http://myserver/roookies/?style=theming/roookies.css
13 |
14 | 2. Add an additional font parameter if you need to reference a Google font by name:
15 |
16 | http://myserver/roookies/?style=theming/roookies.css&font=Perfecto
17 |
18 | 3. Refresh the application. You should now see the green and wood of [Jen Gordon's](http://tapptics.com) sample theme.
19 |
20 | 4. To compile your own theme, ensure you have Compass 0.11.beta.3 (or later) installed:
21 |
22 | > sudo gem install compass -v 0.11.beta.3
23 |
24 | > compass -v
25 | Compass 0.11.beta.3
26 |
27 | 5. Make changes to the roookies.scss file (or a copy of your own)
28 |
29 | 6. Run compass to compile the CSS:
30 |
31 | > compass compile roookies.scss
32 |
33 | 7. Refresh the application to see the changes.
34 |
35 |
36 | You will need to submit the resulting CSS file to enter the theming competition. However, feel free to submit the Sass (.scss) file too if you want to show us how clever you've been!
37 |
--------------------------------------------------------------------------------
/theming/themes/stylesheets/sencha-touch/default/widgets/_indexbar.scss:
--------------------------------------------------------------------------------
1 | @import '../global';
2 |
3 | /**
4 | * @global {measurement} [$index-bar-width=2.1em]
5 | * Width of the index bar.
6 | *
7 | * @class Ext.IndexBar
8 | * @xtype indexbar
9 | */
10 | $index-bar-width: 2.1em !default;
11 |
12 | /**
13 | * @global {color} [$index-bar-bg-color=hsla(hue($base-color), 10%, 60%, .8)]
14 | * Background-color of the index bar.
15 | *
16 | * @class Ext.IndexBar
17 | * @xtype indexbar
18 | */
19 | $index-bar-bg-color: hsla(hue($base-color), 10%, 60%, .8) !default;
20 |
21 | /**
22 | * @global {color} [$index-bar-color=darken(desaturate($base-color, 5%), 15%)]
23 | * Text color of the index bar.
24 | *
25 | * @class Ext.IndexBar
26 | * @xtype indexbar
27 | */
28 | $index-bar-color: darken(desaturate($base-color, 5%), 15%) !default;
29 |
30 | /**
31 | * Includes default index bar styles.
32 | *
33 | * @class Ext.FormPanel
34 | * @xtype indexbar
35 | */
36 | @mixin sencha-indexbar {
37 | .x-indexbar {
38 | padding: 0 .3em;
39 | width: $index-bar-width;
40 | @include display-box;
41 | @include box-orient(vertical);
42 | @include box-align(stretch);
43 | @include box-pack(center);
44 | position: absolute;
45 | top: 1.5em;
46 | right: 0;
47 | bottom: 1em;
48 | z-index: 3;
49 | }
50 |
51 | .x-indexbar-body {
52 | padding: .3em 0;
53 | }
54 |
55 | .x-indexbar-pressed .x-indexbar-body {
56 | @include border-radius(($index-bar-width - .6em)/2);
57 | background-color: $index-bar-bg-color;
58 | }
59 |
60 | .x-indexbar-item {
61 | color: $index-bar-color;
62 | font-size: 0.6em;
63 | text-align: center;
64 | line-height: 1.1em;
65 | font-weight: bold;
66 | display: block;
67 | }
68 | }
--------------------------------------------------------------------------------
/theming/themes/stylesheets/sencha-touch/default/widgets/_panel.scss:
--------------------------------------------------------------------------------
1 | @import '../global';
2 |
3 | $panel-border-radius: .3em;
4 |
5 | @mixin sencha-panel($include-floating: $include-floating-panels) {
6 | .x-panel,
7 | .x-panel-body {
8 | position: relative;
9 | }
10 |
11 | @if $include-floating {
12 | .x-floating.x-panel, .x-floating.x-carousel {
13 | padding: 6px;
14 | @if $include-border-radius { @include border-radius($panel-border-radius); }
15 | -webkit-box-shadow: rgba(0,0,0,.8) 0 .2em .6em;
16 | @include background-gradient(darken($base-color, 40%), 'flat');
17 |
18 | &.x-panel-light {
19 | @include background-gradient($base-color, 'flat');
20 | }
21 | }
22 |
23 | .x-floating .x-panel-body, .x-floating .x-carousel-body {
24 | background-color: #fff;
25 | @if $include-border-radius { @include border_radius($panel-border-radius); }
26 | }
27 |
28 | $anchor-height: .7em;
29 | $anchor-width: $anchor-height*2.33;
30 |
31 | .x-anchor {
32 | width: $anchor-width;
33 | height: $anchor-height;
34 | position: absolute;
35 | z-index: 1;
36 | -webkit-mask: 0 0 theme_image($theme-name, "tip_horizontal.png") no-repeat;
37 | -webkit-mask-size: $anchor-width $anchor-height;
38 | overflow: hidden;
39 | background-color: darken($base-color, 40%);
40 |
41 | &.x-anchor-bottom {
42 | -webkit-transform: rotate(180deg);
43 | background-color: darken($base-color, 40%);
44 | }
45 |
46 | &.x-anchor-left {
47 | -webkit-transform: rotate(270deg);
48 | }
49 |
50 | &.x-anchor-right {
51 | -webkit-transform: rotate(90deg);
52 | }
53 | }
54 | .x-floating.x-panel-light {
55 | &:after {
56 | background-color: $base-color;
57 | }
58 | }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/theming/themes/stylesheets/sencha-touch/default/widgets/_msgbox.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Includes default message box styles.
3 | *
4 | * @class Ext.MessageBox
5 | * @xtype messagebox
6 | */
7 | @mixin sencha-msgbox {
8 | div.x-sheet.x-msgbox {
9 | width: 15em;
10 | -webkit-box-shadow: rgba(#000, .4) 0 .1em .5em;
11 | @if $include-border-radius { @include border-radius($panel-border-radius); }
12 | border: .15em solid $base-color;
13 | .x-toolbar-title {
14 | font-size: .9em;
15 | line-height: 1.4em;
16 | }
17 | .x-toolbar {
18 | background: transparent none;
19 | -webkit-box-shadow: none;
20 |
21 | &.x-docked-top {
22 | border-bottom: 0;
23 | height: 1.3em;
24 | }
25 |
26 | &.x-docked-bottom {
27 | border-top: 0;
28 | }
29 | }
30 | }
31 | .x-msgbox-body {
32 | padding: 6px 0;
33 | position: relative;
34 | text-align: center;
35 | }
36 | .x-msgbox-text {
37 | font-size: .9em;
38 | }
39 | .x-msgbox-buttons {
40 | // @include box-direction(reverse);
41 | .x-button {
42 | min-width: 4.5em;
43 | }
44 |
45 | .x-button-normal span {
46 | opacity: .7;
47 | }
48 | }
49 | .x-msgbox-input {
50 | margin-top: .4em;
51 | -webkit-appearance: none;
52 | @if $include-border-radius { @include border-radius(.2em); }
53 | }
54 |
55 | // TODO: Refactor along with Sheet
56 | @include msgbox-ui('dark');
57 | }
58 |
59 | @mixin msgbox-ui($ui-label) {
60 | .x-msgbox-#{$ui-label} {
61 | .x-msgbox-text {
62 | @include color-by-background($sheet-bg-color, 80%);
63 | @include bevel-by-background($sheet-bg-color);
64 | }
65 | .x-msgbox-input {
66 | @include background-gradient(lighten($sheet-bg-color, 80%), 'recessed');
67 | border: .1em solid lighten($sheet-bg-color, 40%);
68 | }
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Roookies
5 |
6 |
7 |
8 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/app/views/ShotDetail.js:
--------------------------------------------------------------------------------
1 | roookies.views.ShotDetail = Ext.extend(Ext.Panel, {
2 | dockedItems: [{
3 | xtype: 'toolbar',
4 | title: 'Roookies',
5 | items: [
6 | {
7 | text: 'Back',
8 | ui: 'back',
9 | listeners: {
10 | 'tap': function () {
11 | Ext.dispatch({
12 | controller: roookies.controllers.shots,
13 | action: 'index',
14 | animation: {type:'slide', direction:'right'}
15 | });
16 | }
17 | }
18 | },
19 | ]
20 | }],
21 | scroll: 'vertical',
22 | items: [
23 | {
24 | cls: 'shot',
25 | tpl: [
26 | '',
27 | '',
28 | roookies.views.avatarTpl(),
29 | '',
30 | '
{title}
',
31 | '',
32 | ' by {username}',
33 | '',
34 | '',
35 | roookies.views.imgTpl()
36 | ]
37 | }, {
38 | tpl: roookies.views.metaTpl(false)
39 | }
40 |
41 | ],
42 |
43 | updateWithRecord: function(record) {
44 |
45 | Ext.each(this.items.items, function(item) {
46 | item.update(record.data);
47 | });
48 | this.doComponentLayout();
49 |
50 | },
51 |
52 | initComponent: function (shot) {
53 | roookies.views.ShotDetail.superclass.initComponent.apply(this, arguments);
54 |
55 | this.comments = new Ext.List({
56 | itemTpl: [
57 | '',
58 | roookies.views.avatarTpl(),
59 | '{username}
',
60 | '',
61 | '{body}'
62 | ],
63 | itemCls: 'comment',
64 | scroll: false,
65 | store: new Ext.data.Store({
66 | model: 'roookies.models.Comment',
67 | proxy: {
68 | type: 'scripttag',
69 | url: '',
70 | reader: {
71 | type: 'json',
72 | root: 'comments'
73 | }
74 | },
75 | autoLoad: false
76 | }),
77 | update: function(data) {
78 | this.store.proxy.url = 'http://api.dribbble.com/shots/' + data.id + '/comments';
79 | this.store.load();
80 | }
81 | });
82 |
83 | this.add(
84 | this.comments
85 | );
86 | }
87 |
88 |
89 | });
90 |
--------------------------------------------------------------------------------
/theming/themes/stylesheets/sencha-touch/default/widgets/_toolbar.scss:
--------------------------------------------------------------------------------
1 | @import '../global';
2 |
3 | /**
4 | * @global {measurement} [$toolbar-spacing=.2em]
5 | * Space between items in a toolbar (like buttons and fields)
6 | *
7 | * @class Ext.Toolbar
8 | * @xtype toolbar
9 | */
10 | $toolbar-spacing: .2em !default;
11 |
12 | /**
13 | * @global {string} [$toolbar-gradient=$base-gradient]
14 | * Background gradient style for toolbars.
15 | *
16 | * @class Ext.Toolbar
17 | * @xtype toolbar
18 | * @see background-gradient
19 | */
20 | $toolbar-gradient: $base-gradient !default;
21 |
22 | /**
23 | * @global {boolean} [$include-toolbar-uis=$include-default-uis]
24 | * Optionally disable separate toolbar UIs (light and dark).
25 | *
26 | * @class Ext.Toolbar
27 | * @xtype toolbar
28 | */
29 | $include-toolbar-uis: $include-default-uis !default;
30 |
31 | /**
32 | * Includes default toolbar styles.
33 | *
34 | * @class Ext.Toolbar
35 | * @xtype toolbar
36 | */
37 | @mixin sencha-toolbar {
38 |
39 | .x-toolbar {
40 | height: $global-row-height;
41 | padding: 0 $toolbar-spacing;
42 | overflow: hidden;
43 | position: relative;
44 |
45 | & > * {
46 | z-index: 1;
47 | }
48 |
49 | &.x-docked-top {
50 | border-bottom: .1em solid;
51 | }
52 |
53 | &.x-docked-bottom {
54 | border-top: .1em solid;
55 | }
56 | }
57 |
58 | .x-toolbar-title {
59 | @include stretch;
60 | z-index: 0;
61 | line-height: $global-row-height - .5em;
62 | font-size: 1.2em;
63 | text-align: center;
64 | font-weight: bold;
65 | }
66 |
67 | @if $include-toolbar-uis {
68 | @include sencha-toolbar-ui('dark', darken($base-color, 10%));
69 | @include sencha-toolbar-ui('light', $base-color);
70 | }
71 | }
72 |
73 | /**
74 | * Creates a theme UI for toolbars.
75 | *
76 | * @param {string} $ui-label The name of the UI being created.
77 | * Can not included spaces or special punctuation (used in class names)
78 | * @param {color} $color Base color for the UI.
79 | * @param {string} [$gradient: $toolbar-gradient] Background gradient style for the UI.
80 | *
81 | * @example
82 | * // SCSS
83 | * @include sencha-toolbar-ui('sub', #58710D, 'glossy');
84 | *
85 | * // JS
86 | * var myTb = new Ext.Toolbar({title: 'My Green Glossy Toolbar', ui: 'sub'})
87 | *
88 | * @class Ext.Toolbar
89 | * @xtype toolbar
90 | */
91 | @mixin sencha-toolbar-ui($ui-label, $color, $gradient: $toolbar-gradient) {
92 |
93 | $toolbar-border-color: darken($color, 50%);
94 | $toolbar-button-color: darken($color, 10%);
95 |
96 | .x-toolbar-#{$ui-label} {
97 | @include background-gradient($color, $gradient);
98 | border-color: $toolbar-border-color;
99 |
100 | .x-toolbar-title {
101 | @include color-by-background($color);
102 | @include bevel-by-background($color);
103 | }
104 |
105 | .x-button, .x-field-select .x-input-text, .x-field-select:before {
106 | @include toolbar-button($toolbar-button-color, $gradient);
107 | }
108 | }
109 | }
--------------------------------------------------------------------------------
/theming/themes/stylesheets/sencha-touch/default/widgets/_form-sliders-basic.scss:
--------------------------------------------------------------------------------
1 | @import '../global';
2 |
3 | /**
4 | * Includes basic form slider styles.
5 | *
6 | * @class Ext.form.Slider
7 | * @xtype sliderfield
8 | */
9 | @mixin sencha-form-sliders {
10 |
11 | .x-slider {
12 | position: relative;
13 | height: $form-thumb-size;
14 | margin: $form-spacing;
15 | min-height: 0;
16 | }
17 |
18 | .x-thumb {
19 | position: absolute;
20 | height: $form-thumb-size;
21 | width: $form-thumb-size;
22 | border: 1px solid red;
23 |
24 | &.x-dragging {
25 | background-color: red;
26 | }
27 | }
28 |
29 | .x-input-slider {
30 | width: auto;
31 | background-color: #000;
32 | }
33 |
34 | .x-field-toggle, .x-field-slider {
35 | background-color: #fff;
36 | @extend .x-input-el;
37 | }
38 |
39 | .x-field-toggle .x-slider {
40 | width: $form-thumb-size * 2;
41 | @if $include-border-radius { @include border-radius($form-thumb-size/2); }
42 | overflow: hidden;
43 | border: .1em solid darken($form-light, 15%);
44 | // -webkit-transform: translate3d(0px, 0px, 0px);
45 | @include background-gradient($form-light, 'recessed');
46 | z-index: 2;
47 |
48 | // Masking the slider doesn't work in iOS 3, so we're fake-masking the outer area
49 | // UPDATED: Doesnt fly on Android...
50 | // &:after {
51 | // @include insertion($form-thumb-size*2, $form-thumb-size, 0, 0);
52 | // -webkit-mask: theme_image($theme-name, "trackmask_outer.png");
53 | // background-color: white;
54 | // -webkit-mask-size: $form-thumb-size*2 $form-thumb-size;
55 | // pointer-events: none;
56 | // z-index: 4;
57 | // }
58 |
59 | .x-thumb {
60 |
61 | .x-toggle-thumb-off, .x-toggle-thumb-on {
62 | display: none;
63 | }
64 |
65 | &.x-dragging {
66 | opacity: 1;
67 | }
68 |
69 | &:before {
70 | top: ($form-thumb-size - $form-toggle-size) / 2;
71 | }
72 |
73 | // Actual thumb
74 | // &:after {
75 | // @include insertion($form-thumb-size, $form-thumb-size, 0, 0);
76 | // -webkit-box-shadow: rgba(0,0,0,.5) 0 0 .15em;
77 | // @if $include-border-radius { @include border-radius($form-thumb-size/2); }
78 | // -webkit-transform: scale(.65);
79 | // @include background-gradient($complement_light, 'glossy');
80 | // border: 1px solid $complement;
81 | // overflow: visible;
82 | // z-index: 2;
83 | // }
84 |
85 | // &.x-dragging {
86 | // &:after {
87 | // -webkit-transform: scale(.75);
88 | // }
89 | // }
90 | //
91 | // Used to animate the thumb. class added/removed by javascript when needed.
92 | // &.x-animate {
93 | // -webkit-transition: left .2s ease-in-out;
94 | // }
95 | }
96 |
97 | &.x-toggle-on {
98 | @include background-gradient($confirm-color, 'recessed');
99 | }
100 | }
101 |
102 | .x-android .x-field-toggle .x-slider {
103 | //-webkit-transform: translate(0px, 0px);
104 | }
105 | }
106 |
--------------------------------------------------------------------------------
/theming/roookies.scss:
--------------------------------------------------------------------------------
1 | $base-color: #709e3f;
2 | $include-default-icons: false;
3 |
4 | @import 'sencha-touch/default/all';
5 | @include sencha-panel;
6 | @include sencha-buttons;
7 | @include sencha-sheet;
8 | @include sencha-tabs;
9 | @include sencha-toolbar;
10 | @include sencha-layout;
11 | @include sencha-loading-spinner;
12 |
13 | @include pictos-iconmask('user');
14 | @include pictos-iconmask('favorites');
15 | @include pictos-iconmask('team');
16 |
17 | * {
18 | -webkit-font-smoothing: antialiased;
19 | }
20 |
21 | .x-toolbar-title {
22 | font-family: 'Pacifico', arial, serif;
23 | font-weight: normal;
24 | font-size: 1.6em;
25 | line-height: 1.4em;
26 | }
27 |
28 | .x-list {
29 | @include background-gradient(#333, 'recessed');
30 | }
31 |
32 | .shot {
33 | padding: 8px 0;
34 | border-bottom: 1px solid #a37229;
35 | border-top: 1px solid #f3ce96;
36 |
37 | img.shot-image {
38 | display:block;
39 | padding: 8px;
40 | margin: 0px auto;
41 | border: 1px solid #666;
42 | -webkit-box-shadow: 0 0 4px rgba(#333, .5);
43 | background:#eee;
44 | clear:both;
45 | width:304px;
46 | }
47 |
48 | .title {
49 | margin: 0px auto 8px;
50 | width: 304px;
51 | text-shadow: 0 1px 0 rgba(#fff, .5) ;
52 | h2 {
53 | font-size:1.3em;
54 | overflow : hidden;
55 | text-overflow: ellipsis;
56 | display: -webkit-box;
57 | -webkit-line-clamp: 2;
58 | -webkit-box-orient: vertical;
59 | }
60 | .player {
61 | color:#ce2e41;
62 | }
63 |
64 | }
65 | }
66 |
67 | .comment {
68 | padding: 8px;
69 | border-bottom: 1px solid #a37229;
70 | border-top: 1px solid #f3ce96;
71 | text-shadow: 0 1px 0 rgba(#fff, .5);
72 | min-height: 96px;
73 | .player {
74 | color:#ce2e41;
75 | }
76 | }
77 |
78 | .shot, .comment {
79 | background:inline-image("wood.jpg", 'image/jpg');
80 | }
81 |
82 | .shot-meta {
83 | @include background-gradient(#333, 'recessed');
84 | overflow:hidden;
85 | text-align:center;
86 | line-height:2em;
87 |
88 | span {
89 | margin:0 .5em;
90 | color:#fff;
91 | text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
92 |
93 | img {
94 | -webkit-mask-size: 1.2em;
95 | width: 1.2em;
96 | height: 1.2em;
97 | background-color:#fff;
98 | margin-right: .25em;
99 | vertical-align: text-bottom;
100 | @include background-gradient(#aaa, $base-gradient);
101 | }
102 |
103 | &.views img {
104 | -webkit-mask-image: theme_image($theme-name, "pictos/look.png");
105 | }
106 |
107 | &.likes img {
108 | -webkit-mask-image: theme_image($theme-name, "pictos/heart.png");
109 | }
110 |
111 | &.rebounds img {
112 | -webkit-mask-image: theme_image($theme-name, "pictos/shuffle.png");
113 | }
114 |
115 | &.comments img {
116 | -webkit-mask-image: theme_image($theme-name, "pictos/chat1.png");
117 | @include background-gradient($base-color, $base-gradient);
118 | }
119 |
120 | }
121 |
122 | .noun {
123 | display:none;
124 | }
125 |
126 | }
127 |
128 | .avatar {
129 | border-color: #333;
130 | clear:both;
131 | float:left;
132 | margin:0 8px 8px 0;
133 | }
134 |
--------------------------------------------------------------------------------
/theming/themes/stylesheets/sencha-touch/default/widgets/_picker.scss:
--------------------------------------------------------------------------------
1 | @import '../global';
2 |
3 | $picker-row-height: 2.5em !default;
4 | $picker-active-border: .12em solid $active-color !default;
5 | $picker-sheet-radius: .4em !default;
6 | $picker-title-color: darken(desaturate($base-color, 10%), 25%) !default;
7 | $picker-title-bg-color: lighten(saturate($base-color, 10%), 5%) !default;
8 | $picker-title-bg-gradient: $base-gradient !default;
9 | $include-picker-highlights: $include-highlights !default;
10 | $picker-bar-gradient: $base-gradient !default;
11 |
12 | @mixin sencha-picker {
13 |
14 | .x-sheet.x-picker {
15 | padding: 0;
16 | }
17 |
18 | .x-sheet.x-picker > .x-sheet-body {
19 | position: relative;
20 | background-color: #fff;
21 | @if $include-border-radius { @include border-radius($picker-sheet-radius); }
22 | @include background-clip(padding-box);
23 | overflow: hidden;
24 | margin: $sheet-padding;
25 |
26 | @if $include-picker-highlights {
27 | &:before, &:after {
28 | z-index: 1;
29 | @include insertion(100%, 30%, 0, 0);
30 | }
31 |
32 | &:before {
33 | top: auto;
34 | @if $include-border-radius { @include border-bottom-radius($picker-sheet-radius); }
35 | bottom: 0;
36 | @include background-image(linear-gradient(color-stops(#fff, #bbb)));
37 | }
38 | &:after {
39 | @if $include-border-radius { @include border-top-radius($picker-sheet-radius); }
40 | @include background-image(linear-gradient(color-stops(#bbb, #fff)));
41 | }
42 | }
43 | }
44 |
45 | .x-picker-slot {
46 | z-index: 2;
47 | position: relative;
48 | @if $include-highlights {
49 | -webkit-box-shadow: rgba(#000,.4) -1px 0 1px;
50 | }
51 | &:first-child {
52 | -webkit-box-shadow: none;
53 | }
54 | }
55 |
56 | .x-picker-mask {
57 | position: absolute;
58 | top: 0;
59 | left: 0;
60 | right: 0;
61 | bottom: 0;
62 | z-index: 3;
63 | @include display-box;
64 | @include box-align(stretch);
65 | @include box-orient(vertical);
66 | @include box-pack(center);
67 | pointer-events: none;
68 | }
69 |
70 | .x-picker-bar {
71 | border-top: $picker-active-border;
72 | border-bottom: $picker-active-border;
73 | height: $picker-row-height;
74 | @include background-gradient(hsla(hue($active-color), 90, 50, .3), $picker-bar-gradient);
75 | @if $include-highlights {
76 | -webkit-box-shadow: rgba(#000,0.2) 0 .2em .2em;
77 | }
78 | }
79 |
80 | .x-picker-slot-title {
81 | @include background-gradient($picker-title-bg-color, $picker-title-bg-gradient);
82 | border-top: 1px solid $picker-title-bg-color;
83 | border-bottom: 1px solid darken($picker-title-bg-color, 20%);
84 | font-weight: bold;
85 | font-size: 0.8em;
86 | color: $picker-title-color;
87 | padding: 0.2em 1.02em;
88 | @if $include-picker-highlights {
89 | -webkit-box-shadow: 0px .1em .3em rgba(0, 0, 0, 0.3);
90 | @include bevel-text('light');
91 | }
92 | }
93 |
94 | .x-picker-item {
95 | vertical-align: middle;
96 | height: $picker-row-height;
97 | line-height: $picker-row-height;
98 | font-weight: bold;
99 | padding: 0 10px 0 10px;
100 | text-overflow: ellipsis;
101 | overflow: hidden;
102 | white-space: nowrap;
103 | }
104 |
105 | .x-picker-right {
106 | text-align: right;
107 | }
108 | .x-picker-center {
109 | text-align: center;
110 | }
111 | .x-picker-left {
112 | text-align: left;
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/theming/themes/stylesheets/sencha-touch/default/_variables.scss:
--------------------------------------------------------------------------------
1 | $theme-name: 'default';
2 |
3 | /**
4 | * @global {boolean} [$include-html-style=true] Optionally remove included HTML styles/typography (for components with styleHtmlContent: true). Styles are scoped to .x-html. Set to false to reduce CSS weight.
5 | */
6 | $include-html-style: true !default;
7 |
8 | /**
9 | * @global {boolean} [$include-default-icons=true] Optionally remove the default icon set which includes the following toolbar and tab bar icons: action, add, arrow_down, arrow_left, arrow_right, arrow_up, bookmarks, compose, delete, download, favorites, home, info, locate, maps, more, organize, refresh, reply, search, settings, star, team, time, trash, and user. Set to false to reduce CSS weight.
10 | */
11 | $include-default-icons: true !default;
12 |
13 | /**
14 | * @global {boolean} [$include-form-sliders=true] Decides if default HTML styles are included (for components with styleHtmlContent: true). Class is applied to .x-html.
15 | */
16 | $include-form-sliders: true !default;
17 |
18 | /**
19 | * @global {boolean} [$include-floating-panels=true] Decides whether or not to include floating panels (useful to disable for iPhone applications which do not typically have floating menus).
20 | */
21 | $include-floating-panels: true !default;
22 |
23 | /**
24 | * @global {boolean} [$include-default-uis=true] Decides whether or not to include floating panels (useful to disable for iPhone applications which do not typically have floating menus).
25 | */
26 | $include-default-uis: true !default;
27 |
28 | /**
29 | * @global {boolean} [$include-highlights=true] Optionally disable all gradients, text-shadows, and box-shadows. Useful for CSS debugging, non-performant browsers, or minimalist designs.
30 | */
31 | $include-highlights: true !default; // Can disable all theme-generated gradients, text-shadows, and box-shadows.
32 |
33 | /**
34 | * @global {boolean} [$include-border-radius=true] Optionally disable all border-radius. Useful for CSS debugging, non-performant browsers, or minimalist designs.
35 | */
36 | $include-border-radius: true !default; // Can disable all rounded corners
37 |
38 | /**
39 | * @global {boolean} [$basic-slider=false] Optionally remove CSS3 effects from the slider component for improved performance.
40 | */
41 | $basic-slider: false !default;
42 |
43 | /**
44 | * @global {color} [$base-color=#354F6E] The primary color variable from which most elements derive their color scheme.
45 | */
46 | $base-color: #354F6E !default; // Graphite
47 |
48 | /**
49 | * @global {string} [$base-gradient='matte'] The primary gradient variable from which most elements derive their color scheme.
50 | * @see background-gradient
51 | */
52 | $base-gradient: 'matte' !default;
53 |
54 | /**
55 | * @global {color} [$alert-color=red] Color used for elements like badges, errors, and "decline" UIs (eg. on buttons).
56 | */
57 | $alert-color: red !default;
58 |
59 | /**
60 | * @global {color} [$confirm-color=#92cf00] Color used for elements like success messages, and "confirm" UIs (eg. on buttons).
61 | */
62 | $confirm-color: #92cf00 !default; // Green
63 |
64 | /**
65 | * @global {color} [$active-color=darken(saturate($base-color, 55%), 10%)] Color used for elements like selected rows, "action" UIs (eg. on buttons) and certain overlays like the picker mask.
66 | */
67 | $active-color: darken(saturate($base-color, 55%), 10%) !default;
68 |
69 | /**
70 | * @global {color} [$page-bg-color=#eee] Background color for fullscreen components.
71 | */
72 | $page-bg-color: #eee !default;
73 |
74 | /**
75 | * @global {measurement} [$global-row-height=2.6em] The minimum row height for items like toolbars and list items.
76 | */
77 | $global-row-height: 2.6em !default;
--------------------------------------------------------------------------------
/theming/themes/stylesheets/sencha-touch/default/widgets/_carousel.scss:
--------------------------------------------------------------------------------
1 | @import '../global';
2 |
3 | /**
4 | * @global {measurement} [$carousel-indicator-size=.5em] Size (width/height) of carousel indicator dots.
5 | *
6 | * @class Ext.Carousel.Indicator
7 | * @xtype carouselindicator
8 | */
9 | $carousel-indicator-size: .5em !default;
10 |
11 | /**
12 | * @global {measurement} [$carousel-indicator-spacing=.2em]
13 | * Amount of space between carousel indicator dots.
14 | *
15 | * @class Ext.Carousel.Indicator
16 | * @xtype carouselindicator
17 | */
18 | $carousel-indicator-spacing: .2em !default;
19 |
20 | /**
21 | * @global {measurement} [$carousel-track-size=1.5em] Size of the track the carousel indicator dots are in.
22 | *
23 | * @class Ext.Carousel.Indicator
24 | * @xtype carouselindicator
25 | */
26 | $carousel-track-size: 1.5em !default;
27 |
28 | /**
29 | * Includes basic carousel formatting.
30 | *
31 | * @class Ext.Carousel
32 | * @xtype carousel
33 | */
34 | @mixin sencha-carousel {
35 |
36 | .x-carousel-body {
37 | overflow: hidden;
38 | position: relative;
39 | }
40 |
41 | .x-carousel-item {
42 | position: absolute;
43 | width: 100%;
44 | height: 100%;
45 | //-webkit-transform: translate3d(0px, 0px, 0px);
46 |
47 | // This declares the default state (non-moving) for carousel items
48 | @include transition(matrix3d, 0, ease-out);
49 | }
50 |
51 | .x-android .x-carousel-item {
52 | //-webkit-transform: translate(0px, 0px);
53 | @include transition(translate, 0, ease-out);
54 | }
55 |
56 | .x-carousel-indicator {
57 | position: absolute;
58 | z-index: 1;
59 | vertical-align: middle;
60 | text-align: center;
61 | @include display-box;
62 | @include box-pack(center);
63 | @include box-align(center);
64 |
65 | span {
66 | display: block;
67 | width: $carousel-indicator-size;
68 | height: $carousel-indicator-size;
69 | @if $include-border-radius { @include border-radius($carousel-indicator-size / 2); }
70 | margin: $carousel-indicator-spacing;
71 | }
72 | }
73 |
74 | .x-carousel-indicator-horizontal {
75 | height: $carousel-track-size;
76 | bottom: 0;
77 | left: 0;
78 | width: 100%;
79 | @include box-orient(horizontal);
80 | }
81 |
82 | .x-carousel-indicator-vertical {
83 | width: $carousel-track-size;
84 | height: 100%;
85 | right: 0;
86 | top: 0;
87 | @include box-orient(vertical);
88 | }
89 |
90 | $indicator-light: rgba(#fff, .1);
91 | $indicator-light-active: rgba(#fff, .3);
92 | $indicator-dark: rgba(#000, .1);
93 | $indicator-dark-active: rgba(#000, .3);
94 |
95 | @include sencha-carousel-indicator-ui('light', $indicator-light, 'flat', $indicator-light-active, 'flat');
96 | @include sencha-carousel-indicator-ui('dark', $indicator-dark, 'flat', $indicator-dark-active, 'flat');
97 | }
98 |
99 | /**
100 | * Creates a theme UI for carousel indicator components.
101 | *
102 | * @param {string} $ui-label The name of the UI being created.
103 | * Can not included spaces or special punctuation (used in class names)
104 | * @param {color} $color Base color for the UI.
105 | * @param {string} $gradient Default gradient for the UI.
106 | * @param {color} $active-color Active color for the UI.
107 | * @param {string} $active-gradient Active gradient for the UI.
108 | *
109 | * @class Ext.Carousel.Indicator
110 | * @xtype carouselindicator
111 | */
112 | @mixin sencha-carousel-indicator-ui($ui-label, $color, $gradient, $active-color, $active-gradient) {
113 | .x-carousel-indicator-#{$ui-label} span {
114 | @include background-gradient($color, $gradient);
115 |
116 | &.x-carousel-indicator-active {
117 | @include background-gradient($active-color, $active-gradient)
118 | }
119 | }
120 | }
121 |
--------------------------------------------------------------------------------
/theming/themes/stylesheets/sencha-touch/default/widgets/_toolbar-forms.scss:
--------------------------------------------------------------------------------
1 | @import '../global';
2 |
3 | /**
4 | * @global {color} [$toolbar-input-bg=#fff]
5 | * Background-color for toolbar form fields.
6 | *
7 | * @class Ext.form.Field
8 | * @xtype field
9 | */
10 | $toolbar-input-bg: #fff !default;
11 |
12 | /**
13 | * @global {color} [$toolbar-input-color=#000]
14 | * Text color for toolbar form fields.
15 | *
16 | * @class Ext.form.Field
17 | * @xtype field
18 | */
19 | $toolbar-input-color: #000 !default;
20 |
21 | /**
22 | * @global {measurement} [$toolbar-input-height=1.5em]
23 | * Text color for toolbar form fields.
24 | *
25 | * @class Ext.form.Field
26 | * @xtype field
27 | */
28 | $toolbar-input-height: 1.5em !default;
29 |
30 | /**
31 | * @global {color} [$toolbar-input-border-color=rgba(#000, .5)]
32 | * Border color for toolbar form fields.
33 | *
34 | * @class Ext.form.Field
35 | * @xtype field
36 | */
37 | $toolbar-input-border-color: rgba(#000, .5) !default;
38 |
39 | // Private
40 | $toolbar-select-overflow-mask-width: 3em;
41 | $toolbar-search-left-padding: 1.67em;
42 |
43 | /**
44 | * Includes default toolbar form field styles.
45 | *
46 | * @class Ext.TabBar
47 | * @xtype tabbar
48 | */
49 | @mixin sencha-toolbar-forms {
50 |
51 | @if $include-highlights {
52 | .x-android .x-toolbar {
53 | .x-input-text, .x-input-search, .x-input-number {
54 | -webkit-box-shadow: inset $toolbar-input-border-color 0 .1em .1em, inset $toolbar-input-border-color 0 -.1em .1em, inset $toolbar-input-border-color .1em 0 .1em, inset $toolbar-input-border-color -.1em 0 .1em, inset rgba(#000, .5) 0 .15em .4em;
55 | }
56 | }
57 | }
58 |
59 | .x-desktop .x-toolbar {
60 | .x-input-search {
61 | padding-left: ($toolbar-search-left-padding - .61em);
62 | }
63 | }
64 |
65 | .x-toolbar {
66 | .x-field {
67 | margin: .3em .5em;
68 | min-height: 0;
69 | border-bottom: 0;
70 | width: auto;
71 | }
72 |
73 | .x-input-text, .x-input-search, .x-input-number {
74 | @if $include-border-radius { @include border-radius(.3em); }
75 | @include background-clip(padding-box);
76 | height: $toolbar-input-height;
77 | color: lighten($toolbar-input-color, 43%);
78 | background-color: $toolbar-input-bg;
79 | min-height: 0;
80 | line-height: 1.3em;
81 | -webkit-appearance: none;
82 | padding: 0em .3em;
83 | margin: 0;
84 |
85 | @if $include-highlights {
86 | -webkit-box-shadow: inset $toolbar-input-border-color 0 .1em 0, inset $toolbar-input-border-color 0 -.1em 0, inset $toolbar-input-border-color .1em 0 0, inset $toolbar-input-border-color -.1em 0 0, inset rgba(#000, .5) 0 .15em .4em;
87 | }
88 |
89 | &:focus {
90 | color: $toolbar-input-color;
91 | }
92 | }
93 |
94 | .x-input-search, .x-field-select .x-input-text {
95 | padding: 0em .5em;
96 | @if $include-border-radius { @include border-radius($toolbar-input-height/2); }
97 | }
98 |
99 | .x-input-search {
100 | background-image: -webkit-gradient(linear,0% 0%,0% 100%,from(rgba($toolbar-input-bg,.6))), theme_image($theme-name, "pictos/search.png");
101 | -webkit-background-size: .83em .83em, .83em .83em;
102 | background-repeat: no-repeat;
103 | background-position: .5em 50%;
104 | padding-left: $toolbar-search-left-padding;
105 | }
106 |
107 | .x-field-select {
108 | &:after {
109 | top: -.5em;
110 | right: -.5em;
111 | }
112 |
113 | // Background is set in _toolbar file
114 | &:before {
115 | width: $toolbar-select-overflow-mask-width;
116 | border-left: none;
117 | @if $include-border-radius { @include border-right-radius($toolbar-input-height/2); }
118 | @if $include-highlights {
119 | -webkit-mask: theme_image($theme-name, "select_mask.png");
120 | -webkit-mask-position: right top;
121 | -webkit-mask-repeat: repeat-y;
122 | -webkit-mask-size: $toolbar-select-overflow-mask-width .05em;
123 | }
124 | @else {
125 | width: 0.5em !important;
126 | }
127 | }
128 |
129 | .x-input-text, &:before {
130 | -webkit-box-shadow: none;
131 | }
132 |
133 | .x-input-text {
134 | padding-right: 1.5em;
135 | display: block;
136 | }
137 | }
138 | }
139 | }
140 |
--------------------------------------------------------------------------------
/app/views/ShotsLists.js:
--------------------------------------------------------------------------------
1 |
2 | roookies.views.ShotsInnerList = Ext.extend(Ext.List, {
3 |
4 | itemTpl: roookies.views.imgTpl(),
5 | itemTplPost: roookies.views.metaTpl(true),
6 |
7 | itemCls: 'shot',
8 |
9 | multiSelect: true,
10 | simpleSelect: true,
11 |
12 | metaOpenAnim: new Ext.Anim({
13 | from: {maxHeight:'0'},
14 | to: {maxHeight:'2em'},
15 | autoClear: false
16 | }),
17 | metaCloseAnim: new Ext.Anim({
18 | to: {maxHeight:'0'},
19 | from: {maxHeight:'2em'},
20 | autoClear: false
21 | }),
22 |
23 | afterRender: function () {
24 | this.addManagedListener(
25 | this.getTargetEl(),
26 | 'singletap',
27 | this.listeners.metadisclose,
28 | this,
29 | {delegate: 'span,small'}
30 | );
31 | roookies.views.ShotsInnerList.superclass.afterRender.call(this);
32 | },
33 |
34 | listeners: {
35 | itemtap: function (list, index, element, event) {
36 | var record = list.getRecord(element);
37 | var item = Ext.get(element);
38 |
39 | this.scroller.scrollTo({x: 0, y: item.getOffsetsTo(this.scrollEl)[1]}, 300);
40 |
41 | var meta = item.next('.shot-meta');
42 | if (!meta) {
43 | return;
44 | }
45 | if(list.selModel.isSelected(record)) {
46 | Ext.Anim.run(
47 | meta, list.metaCloseAnim
48 | );
49 | } else {
50 | Ext.Anim.run(
51 | meta, list.metaOpenAnim
52 | );
53 | }
54 | },
55 | metadisclose: function (event, element) {
56 | var detailType = element.className;
57 | var record = this.getRecord(Ext.get(element).parent('.shot-meta').prev('.x-list-item', true));
58 | Ext.dispatch({
59 | controller: roookies.controllers.shots,
60 | action: 'show',
61 | id: record.getId(),
62 | store: this.getStore(),
63 | detailType: detailType
64 | });
65 |
66 | }
67 | },
68 |
69 | initComponent: function () {
70 | roookies.views.ShotsInnerList.superclass.initComponent.call(this);
71 | var tpl = this.tpl.html;
72 | tpl = tpl.substr(0, tpl.length-6) + this.itemTplPost + '';
73 | this.tpl = new Ext.XTemplate(tpl, {});
74 | }
75 |
76 | });
77 |
78 |
79 | roookies.views.ShotsLists = Ext.extend(Ext.Panel, {
80 | layout: 'fit',
81 | dockedItems: [{
82 | xtype: 'toolbar',
83 | title: 'Roookies'
84 | }],
85 | tabBar: {
86 | dock: 'bottom',
87 | layout: {pack: 'center'}
88 | },
89 | cardSwitchAnimation: 'fade',
90 | items: [
91 | new roookies.views.ShotsInnerList({
92 | store: new Ext.data.Store({
93 | model: 'roookies.models.Shot',
94 | autoLoad: true,
95 | proxy: {
96 | type: 'scripttag',
97 | url: 'http://api.dribbble.com/shots/debuts',
98 | reader: {
99 | type: 'json',
100 | root: 'shots'
101 | }
102 | }
103 | }),
104 | iconCls: 'user'
105 | }),
106 | //new roookies.views.ShotsInnerList({
107 | // store: new Ext.data.Store({
108 | // model: 'roookies.models.Shot',
109 | // autoLoad: true,
110 | // proxy: {
111 | // type: 'scripttag',
112 | // url: 'http://api.dribbble.com/shots/popular',
113 | // reader: {
114 | // type: 'json',
115 | // root: 'shots'
116 | // }
117 | // }
118 | // }),
119 | // iconCls: 'favorites'
120 | //}),
121 | //new roookies.views.ShotsInnerList({
122 | // store: new Ext.data.Store({
123 | // model: 'roookies.models.Shot',
124 | // autoLoad: true,
125 | // proxy: {
126 | // type: 'scripttag',
127 | // url: 'http://api.dribbble.com/shots/everyone',
128 | // reader: {
129 | // type: 'json',
130 | // root: 'shots'
131 | // }
132 | // }
133 | // }),
134 | // iconCls: 'team'
135 | //}),
136 | ]
137 | });
--------------------------------------------------------------------------------
/theming/themes/stylesheets/sencha-touch/default/widgets/_form-sliders.scss:
--------------------------------------------------------------------------------
1 | @import '../global';
2 |
3 | /**
4 | * Includes default form slider styles.
5 | *
6 | * @class Ext.form.Slider
7 | * @xtype sliderfield
8 | */
9 | @mixin sencha-form-sliders {
10 |
11 | .x-slider {
12 | position: relative;
13 | height: $form-thumb-size;
14 | margin: $form-spacing;
15 | min-height: 0;
16 | }
17 |
18 | @if $basic-slider {
19 | .x-thumb {
20 | position: absolute;
21 | height: $form-thumb-size;
22 | width: $form-thumb-size;
23 | border: #000;
24 | background-color: #777;
25 |
26 | &.x-dragging {
27 | background-color: #AAA;
28 | }
29 | }
30 |
31 | // Create the slider track
32 | .x-input-slider:after {
33 | @include insertion(auto, $form-slider-size, $form-toggle-size / 2 - $form-slider-size/2 + $form-spacing/2 - $form-thumb-space / 2, 0);
34 | right: 0;
35 | margin: 0 $form-toggle-size/2;
36 | border: .1em solid rgba(#000, .1);
37 | border-bottom: 0;
38 | background-color: $form-light;
39 | }
40 | } @else {
41 | .x-thumb {
42 | position: absolute;
43 | height: $form-thumb-size;
44 | width: $form-thumb-size;
45 |
46 | // The actual thumb
47 | &:before {
48 | @include insertion($form-toggle-size, $form-toggle-size, $form-thumb-space, $form-thumb-space);
49 | border: .1em solid darken($form-light, 30%);
50 | @if $include-border-radius { @include border-radius($form-toggle-size/2); }
51 | // overflow: visible;
52 | @include background-gradient($form-light);
53 | -webkit-box-shadow: inset rgba(#fff, .5) 0 0 .1em, inset rgba(#fff, .3) 0 -.1em 0;
54 | @include background-clip(padding-box);
55 | }
56 |
57 | &.x-dragging {
58 | &:before {
59 | @include background-gradient(darken($form-light, 5%));
60 | }
61 | opacity: 1;
62 | }
63 | }
64 |
65 | .x-input-slider {
66 | width: auto;
67 | }
68 |
69 | // Create the slider track
70 | .x-input-slider:after {
71 | @include insertion(auto, $form-slider-size, $form-toggle-size / 2 - $form-slider-size/2 + $form-spacing/2 - $form-thumb-space / 2, 0);
72 | right: 0;
73 | margin: 0 $form-toggle-size/2;
74 | @include background-gradient($form-light, 'recessed');
75 | border: .1em solid rgba(#000, .1);
76 | border-bottom: 0;
77 | -webkit-box-shadow: rgba(#fff,.7) 0 .1em 0;
78 | @if $include-border-radius { @include border-radius($form-slider-size/2); }
79 | }
80 | }
81 |
82 | .x-field-toggle, .x-field-slider {
83 | background-color: #fff;
84 | @extend .x-input-el;
85 | }
86 |
87 | .x-field-toggle .x-slider {
88 | width: $form-thumb-size * 2;
89 | @if $include-border-radius { @include border-radius($form-thumb-size/2); }
90 | overflow: hidden;
91 | border: .1em solid darken($form-light, 15%);
92 | // -webkit-transform: translate3d(0px, 0px, 0px);
93 | @include background-gradient($form-light, 'recessed');
94 | z-index: 2;
95 |
96 | // Masking the slider doesn't work in iOS 3, so we're fake-masking the outer area
97 | // UPDATED: Doesnt fly on Android...
98 | // &:after {
99 | // @include insertion($form-thumb-size*2, $form-thumb-size, 0, 0);
100 | // -webkit-mask: theme_image($theme-name, "trackmask_outer.png");
101 | // background-color: white;
102 | // -webkit-mask-size: $form-thumb-size*2 $form-thumb-size;
103 | // pointer-events: none;
104 | // z-index: 4;
105 | // }
106 |
107 | .x-thumb {
108 |
109 | .x-toggle-thumb-off, .x-toggle-thumb-on {
110 | display: none;
111 | }
112 |
113 | &.x-dragging {
114 | opacity: 1;
115 | }
116 |
117 | &:before {
118 | top: ($form-thumb-size - $form-toggle-size) / 2;
119 | }
120 |
121 | // Actual thumb
122 | // &:after {
123 | // @include insertion($form-thumb-size, $form-thumb-size, 0, 0);
124 | // -webkit-box-shadow: rgba(0,0,0,.5) 0 0 .15em;
125 | // @if $include-border-radius { @include border-radius($form-thumb-size/2); }
126 | // -webkit-transform: scale(.65);
127 | // @include background-gradient($complement_light, 'glossy');
128 | // border: 1px solid $complement;
129 | // overflow: visible;
130 | // z-index: 2;
131 | // }
132 |
133 | // &.x-dragging {
134 | // &:after {
135 | // -webkit-transform: scale(.75);
136 | // }
137 | // }
138 | //
139 | // Used to animate the thumb. class added/removed by javascript when needed.
140 | // &.x-animate {
141 | // -webkit-transition: left .2s ease-in-out;
142 | // }
143 | }
144 |
145 | &.x-toggle-on {
146 | @include background-gradient($confirm-color, 'recessed');
147 | }
148 | }
149 |
150 | .x-android .x-field-toggle .x-slider {
151 | //-webkit-transform: translate(0px, 0px);
152 | }
153 | }
154 |
--------------------------------------------------------------------------------
/theming/themes/stylesheets/sencha-touch/default/widgets/_loading-spinner.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * @global {color} [$loading-spinner-color=#aaa]
3 | * Background-color for the bars in the loading spinner.
4 | *
5 | * @class Ext.LoadMask
6 | */
7 | $loading-spinner-color: #aaa !default;
8 |
9 | // Private
10 | $loading-spinner-size: 1em;
11 | $loading-spinner-bar-width: .1em;
12 | $loading-spinner-bar-height: .25em;
13 |
14 | /**
15 | * Includes default loading spinner styles (for dataviews).
16 | *
17 | * @class Ext.LoadMask
18 | */
19 | @mixin sencha-loading-spinner {
20 | .x-loading-spinner {
21 | font-size: 250%;
22 | height: $loading-spinner-size;
23 | width: $loading-spinner-size;
24 | position: relative;
25 |
26 | -webkit-transform-origin: $loading-spinner-size/2 $loading-spinner-size/2;
27 |
28 | /* Shared Properties for all the bars */
29 | & > span, & > span:before, & > span:after {
30 | display: block;
31 | position: absolute;
32 | width: $loading-spinner-bar-width;
33 | height: $loading-spinner-bar-height;
34 | top: 0;
35 | -webkit-transform-origin: $loading-spinner-bar-width/2 $loading-spinner-size/2;
36 | @if $include-border-radius { @include border-radius($loading-spinner-bar-width/2); }
37 | content: " ";
38 | }
39 |
40 | & > span {
41 | &.x-loading-top { background-color: rgba($loading-spinner-color,0.99); }
42 | &.x-loading-top::after { background-color: rgba($loading-spinner-color,0.90); }
43 | &.x-loading-left::before { background-color: rgba($loading-spinner-color,0.80); }
44 | &.x-loading-left { background-color: rgba($loading-spinner-color,0.70); }
45 | &.x-loading-left::after { background-color: rgba($loading-spinner-color,0.60); }
46 | &.x-loading-bottom::before{ background-color: rgba($loading-spinner-color,0.50); }
47 | &.x-loading-bottom { background-color: rgba($loading-spinner-color,0.40); }
48 | &.x-loading-bottom::after { background-color: rgba($loading-spinner-color,0.35); }
49 | &.x-loading-right::before { background-color: rgba($loading-spinner-color,0.30); }
50 | &.x-loading-right { background-color: rgba($loading-spinner-color,0.25); }
51 | &.x-loading-right::after { background-color: rgba($loading-spinner-color,0.20); }
52 | &.x-loading-top::before { background-color: rgba($loading-spinner-color,0.15); }
53 | }
54 | }
55 |
56 | .x-loading-spinner > span {
57 | left: 50%;
58 | margin-left: -0.05em;
59 | }
60 |
61 | // .x-loading-spinner > span::before, .x-loading-spinner > span::after{ content: " "; }
62 |
63 | /* Rotate each of the 4 Spans */
64 |
65 | .x-loading-spinner > span.x-loading-top{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); }
66 | .x-loading-spinner > span.x-loading-right{ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); }
67 | .x-loading-spinner > span.x-loading-bottom{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); }
68 | .x-loading-spinner > span.x-loading-left{ -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); }
69 |
70 | /* These are the two lines that surround each of the 4 Span lines */
71 |
72 | .x-loading-spinner > span::before{-webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); }
73 | .x-loading-spinner > span::after{ -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); }
74 |
75 | /* Set Animation */
76 |
77 | .x-loading-spinner {
78 | -webkit-animation-name: x-loading-spinner-rotate;
79 | -webkit-animation-duration: .5s;
80 | -webkit-animation-iteration-count: infinite;
81 | -webkit-animation-timing-function: linear;
82 | }
83 |
84 | @-webkit-keyframes x-loading-spinner-rotate{
85 | 0%{ -webkit-transform: rotate(0deg); }
86 | 8.32%{ -webkit-transform: rotate(0deg); }
87 |
88 | 8.33%{ -webkit-transform: rotate(30deg); }
89 | 16.65%{ -webkit-transform: rotate(30deg); }
90 |
91 | 16.66%{ -webkit-transform: rotate(60deg); }
92 | 24.99%{ -webkit-transform: rotate(60deg); }
93 |
94 | 25%{ -webkit-transform: rotate(90deg); }
95 | 33.32%{ -webkit-transform: rotate(90deg); }
96 |
97 | 33.33%{ -webkit-transform: rotate(120deg); }
98 | 41.65%{ -webkit-transform: rotate(120deg); }
99 |
100 | 41.66%{ -webkit-transform: rotate(150deg); }
101 | 49.99%{ -webkit-transform: rotate(150deg); }
102 |
103 | 50%{ -webkit-transform: rotate(180deg); }
104 | 58.32%{ -webkit-transform: rotate(180deg); }
105 |
106 | 58.33%{ -webkit-transform: rotate(210deg); }
107 | 66.65%{ -webkit-transform: rotate(210deg); }
108 |
109 | 66.66%{ -webkit-transform: rotate(240deg); }
110 | 74.99%{ -webkit-transform: rotate(240deg); }
111 |
112 | 75%{ -webkit-transform: rotate(270deg); }
113 | 83.32%{ -webkit-transform: rotate(270deg); }
114 |
115 | 83.33%{ -webkit-transform: rotate(300deg); }
116 | 91.65%{ -webkit-transform: rotate(300deg); }
117 |
118 | 91.66%{ -webkit-transform: rotate(330deg); }
119 | 100%{ -webkit-transform: rotate(330deg); }
120 | }
121 | }
--------------------------------------------------------------------------------
/theming/themes/stylesheets/sencha-touch/default/core/_core.scss:
--------------------------------------------------------------------------------
1 | @import '../global';
2 | @import 'compass/css3/box-sizing';
3 | @import 'blueprint/typography';
4 |
5 | $experimental-support-for-mozilla: false;
6 | $experimental-support-for-opera: false;
7 | $experimental-support-for-microsoft: false;
8 | $experimental-support-for-khtml: false;
9 |
10 | html, body {
11 | font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif;
12 | font-weight: normal;
13 | position: relative;
14 | }
15 |
16 | *, *:after, *:before {
17 | @include box-sizing(border-box);
18 | -webkit-user-select: none;
19 | -webkit-text-size-adjust: none;
20 | -webkit-touch-callout: none;
21 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
22 | }
23 |
24 | /*.x-android {*/
25 | /*input[type=checkbox], input[type=radio] {*/
26 | /*-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;*/
27 | /*}*/
28 |
29 | /*input, textarea {*/
30 | /*-webkit-tap-highlight-color: rgba(0, 0, 0, 1) !important;*/
31 | /*}*/
32 | /*}*/
33 |
34 | html, body, .x-body-stretcher {
35 | width: 100%;
36 | height: 100%;
37 | }
38 |
39 | .x-ios.x-tablet .x-landscape * {
40 | -webkit-text-stroke: 1px transparent;
41 | }
42 |
43 | /*
44 | .x-ipad {
45 | .x-container, .x-panel, .x-toolbar, .x-mask {
46 | -webkit-transform: translate3d(0, 0, 0);
47 | }
48 | }
49 | */
50 |
51 | body {
52 | font-size: 104%;
53 | }
54 |
55 | body.x-ios {
56 | -webkit-backface-visibility: hidden;
57 | }
58 |
59 | body.x-android.x-phone {
60 | font-size: 116%;
61 | }
62 |
63 | body.x-ios.x-phone {
64 | font-size: 114%;
65 | }
66 |
67 | body.x-desktop {
68 | font-size: 114%;
69 | }
70 |
71 | input, textarea {
72 | -webkit-user-select: text;
73 | }
74 |
75 | .x-hidden-visibility {
76 | visibility: hidden !important;
77 | }
78 |
79 | .x-hidden-display {
80 | display: none !important;
81 | }
82 |
83 | .x-hidden-offsets {
84 | position: absolute !important;
85 | left: -10000em;
86 | top: -10000em;
87 | visibility: hidden;
88 | }
89 |
90 | .x-fullscreen {
91 | position: absolute !important;
92 | top: 0px;
93 | left: 0px;
94 | }
95 |
96 | .x-desktop .x-body-stretcher {
97 | margin-bottom: 0px;
98 | }
99 |
100 | .x-scroller-parent {
101 | overflow: hidden !important;
102 | }
103 |
104 | .x-scroller-parent, .x-scroller {
105 | position: relative;
106 | }
107 |
108 | .x-ios .x-scroller, .x-ios .x-scroller > * {
109 | -webkit-transform: translate3d(0, 0, 0);
110 | }
111 |
112 | .x-draggable {
113 | z-index: 1;
114 | }
115 |
116 | .x-scrollbar {
117 | position: absolute;
118 | z-index: 10;
119 | @if $include-border-radius {
120 | -webkit-transition-property: opacity;
121 | -webkit-transition-duration: 250ms;
122 | -webkit-border-radius: 4px;
123 | }
124 | opacity: 0;
125 | }
126 |
127 | .x-android .x-scrollbar {
128 | -webkit-transition-property: none;
129 | -webkit-transition-duration: 0ms;
130 | -webkit-border-radius: 0px;
131 | }
132 |
133 | .x-scrollbar-dark {
134 | background-color: rgba(0, 0, 0, .6);
135 | border: 1px solid rgba(255, 255, 255, 0.2);
136 | }
137 |
138 | .x-scrollbar-light {
139 | background-color: rgba(255, 255, 255, .6);
140 | border: 1px solid rgba(0, 0, 0, 0.2);
141 | }
142 |
143 | .x-scrollbar-vertical {
144 | top: 0;
145 | right: 4px;
146 | width: 4px;
147 | }
148 |
149 | .x-scrollbar-horizontal {
150 | left: 0;
151 | bottom: 4px;
152 | height: 4px;
153 | }
154 |
155 | .x-mask {
156 | position: absolute;
157 | top: 0;
158 | left: 0;
159 | z-index: 8000;
160 | @include display-box;
161 | @include box-align(center);
162 | @include box-pack(center);
163 | background: rgba(0,0,0,.3) center center no-repeat;
164 |
165 | &.x-mask-gray {
166 | background-color: rgba(0, 0, 0, 0.5);
167 | }
168 |
169 | .x-mask-loading {
170 | @include display-box;
171 | @include box-orient(vertical);
172 | @include box-align(center);
173 | @include box-pack(center);
174 | @if $include-border-radius { @include border-radius(.5em); }
175 | color: #fff;
176 | text-align: center;
177 | padding: .4em;
178 | font-weight: bold;
179 | display: block;
180 | width: 8.5em;
181 | height: 8.5em;
182 | background: rgba(0, 0, 0, .25);
183 | }
184 |
185 | .x-loading-spinner {
186 | margin: 1em auto .2em;
187 | }
188 |
189 | .x-loading-msg {
190 | font-size: .95em;
191 | @include bevel-text;
192 | }
193 | }
194 |
195 | .x-floating {
196 | position: absolute !important;
197 | z-index: 10000 !important;
198 | top: 0;
199 | left: 0;
200 | }
201 |
202 | .x-dragging {
203 | opacity: 0.7;
204 | }
205 |
206 | .x-panel-list {
207 | background-color: saturate(lighten($base-color, 50%), 15%);
208 | }
209 |
210 | @if $include-html-style {
211 | .x-html {
212 | -webkit-user-select: auto;
213 | -webkit-touch-callout: inherit;
214 |
215 | @include blueprint-typography;
216 | line-height: 1.5;
217 | color: #333;
218 | font-size: .8em;
219 | padding: 1.2em;
220 |
221 | ul li {
222 | list-style-type: circle;
223 | }
224 | ol li {
225 | list-style-type: decimal;
226 | }
227 | }
228 | }
229 |
230 | .x-video {
231 | background-color: #000;
232 | }
233 |
234 | .x-sortable .x-dragging {
235 | opacity: 1;
236 | z-index: 5;
237 | }
238 |
239 | .x-fullscreen {
240 | background: $page-bg-color;
241 | }
242 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Sencha Touch Theming Contest, April 2011
2 | ========================================
3 |
4 | This project is the application to be used in the Sencha Touch Theming Contest. By default it uses the standard Sencha Touch theme, but it also includes a sample custom theme which can be easily switched in.
5 |
6 | Read more about the contest [here](http://www.sencha.com/theme-contest/), and be sure to read [the rules](http://www.sencha.com/theme-contest/contest-rules/) too.
7 |
8 | You can try out the (unthemed) application live [here](http://senchalearn.github.com/roookies/), or with the sample custom theme [here](http://senchalearn.github.com/roookies/?style=demo). Think you can do better?
9 |
10 | To get an idea of how this all works, take a look at the sample roookies.scss (and the resulting roookies.css) files that are shipped in the theming directory of this project. This theme was crafted by Jen Gordon of the awesome [Tapptics](http://www.tapptics.com/)
11 |
12 | For more information about how to use SCSS and Compass, please consult the [Sass](http://sass-lang.com/) and [Compass](http://compass-style.org) web sites.
13 |
14 | Other resources that will help you include:
15 |
16 | * [Sass and Compass - The Next Wave in Styling and Theming](http://vimeo.com/18084338)
17 | * [An introduction to theming Sencha Touch](http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch/)
18 | * [Theming Sencha Touch](http://vimeo.com/17879651)
19 | * [Sencha Touch SASS Variables and Mixins Reference](http://dev.sencha.com/deploy/touch/docs/theme/)
20 | * [Contest help in the Sencha forums](http://www.sencha.com/forum/showthread.php?130834-Sencha-Touch-Theme-Contest-April-2011)
21 |
22 | Entries to the competition should comprise a single CSS file only: no changes are allowed to the JavaScript of the application. We recommend that images are included inline in the generated CSS (as they are in the example), simply so that the judges can easily test them without having to extract directories of additional resources. However, you may also wish to submit your SCSS source too, to show us how elegant your Sass is.
23 |
24 |
25 | Creating a custom theme
26 | -----------------------
27 |
28 | Use the contents of the theming folder for creating your custom theme for the Roookies application.
29 |
30 | Important: the themes directory includes a copy of part of the Sencha Touch SDK, placed here for your convenience to get started quickly with your theming work. This directory is distributed under the (same licence)[http://dev.sencha.com/deploy/touch/license.txt] as the [Sencha Touch SDK](http://sencha.com/products/touch) as a whole.
31 |
32 | To create your custom theme for the Roookies app:
33 |
34 | 1. Add a style query string to the app's URL to reference a custom CSS file:
35 |
36 | http://myserver/roookies/?style=theming/roookies.css
37 |
38 | 2. Add an additional font parameter if you need to reference a Google font by name:
39 |
40 | http://myserver/roookies/?style=theming/roookies.css&font=Perfecto
41 |
42 | 3. Refresh the application. You should now see the green and wood of (Jen Gordon's)[http://tapptics.com] sample theme.
43 |
44 | 4. To compile your own theme, ensure you have Compass 0.11.beta.3 (or later) installed:
45 |
46 | > sudo gem install compass -v 0.11.beta.3
47 |
48 | > compass -v
49 | Compass 0.11.beta.3
50 |
51 | 5. Make changes to the roookies.scss file (or a copy of your own)
52 |
53 | 6. Run compass to compile the CSS:
54 |
55 | > compass compile roookies.scss
56 |
57 | 7. Refresh the application to see the changes.
58 |
59 |
60 | You will need to submit the resulting CSS file to enter the theming competition. However, feel free to submit the Sass (.scss) file too if you want to show us how clever you've been!
61 |
62 |
63 |
64 | Installing Sencha Touch
65 | -----------------------
66 |
67 | By default, the Roookies app links to online versions of the JavaScript and CSS files, and uses the query string of the app to switch CSS. However, you may also want to download the Sencha Touch SDK and link to those files locally - this means you will be able to work on the app offline, and you get the benefits of the documentation and examples present in the SDK.
68 |
69 | Download the Sencha Touch v1.1 SDK from [here](http://www.sencha.com/products/touch/download/) and place (or symlink) the unzipped directory, renamed to touch, into the lib folder.
70 |
71 | You can alter the <link> and <script> tags in the index.html of the application itself point to the correct locations for the local JavaScript and CSS resources if you wish:
72 |
73 |
74 |
75 |
76 | (If you link to your CSS files explicitly like this, you should remove the <script> block that writes them in based on the query string).
77 |
78 | You should then be able to test that the application works by opening the index.html file in a WebKit desktop browser. To try your local copy of the application on a mobile simulator (or real handset), you will have to deploy this directory onto a local (or external) web server.
79 |
80 |
81 |
82 | Submitting your entry
83 | ---------------------
84 |
85 | To submit an entry, you'll need to provide at least an external link to your resulting CSS file. You can try out your CSS on our live application by altering the style parameter of the URL. For example:
86 |
87 | http://senchalearn.github.com/roookies/?style=http://mysite.com/awesome.css
88 |
89 | If you have used a custom font face in your theme, don't forget to provide the name of the [Google web font](http://www.google.com/webfonts) used. Again, check this works using the query string:
90 |
91 | http://senchalearn.github.com/roookies/?style=http://mysite.com/awesome.css&font=bangers
92 |
93 | To submit your theme to the competition, use [this form](https://spreadsheets.google.com/a/extjs.com/spreadsheet/viewform?formkey=dDNEbzA5N2UyckhsaGxESjR1WlhZNHc6MQ) to provide both the CSS URL and the font name, and be sure to get your entry in before the deadline, 2nd May 2011.
94 |
95 | Good luck!
--------------------------------------------------------------------------------
/theming/themes/stylesheets/sencha-touch/default/_mixins.scss:
--------------------------------------------------------------------------------
1 | @import 'compass/css3';
2 |
3 | /**
4 | * Add a background gradient to a selector.
5 | *
6 | * @param {color} $bg-color The base color of the gradient.
7 | * @param {string} [$type=$base-gradient] The style of the gradient, one of five pre-defined options: matte, bevel, glossy, recessed, or flat.
8 | *
9 | * @example
10 | * .my-element {
11 | * @include background-gradient(green, 'recessed')
12 | * }
13 | */
14 | @mixin background-gradient($bg-color, $type: $base-gradient) {
15 | background-color: $bg-color;
16 | @if $include-highlights {
17 | @if $type == bevel {
18 | @include background-image(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%))));
19 | } @else if $type == glossy {
20 | @include background-image(linear-gradient(color_stops(lighten($bg-color, 15%), lighten($bg-color, 5%) 50%, $bg-color 51%, darken($bg-color, 5%))));
21 | } @else if $type == recessed {
22 | @include background-image(linear-gradient(color_stops(darken($bg-color, 10%), darken($bg-color, 5%) 10%, $bg-color 65%, lighten($bg-color, .5%))));
23 | } @else if $type == matte {
24 | @include background-image(linear-gradient(color_stops(lighten($bg-color, 30%), lighten($bg-color, 7%) 2%, darken($bg-color, 7%))));
25 | } @else {
26 | background-image: none;
27 | }
28 | }
29 | }
30 |
31 | /**
32 | * Includes a base64-encoded icon for use within tab bars and buttons (With the component parameter iconMask: true).
33 | *
34 | * @param {string} $name The name of the icon to be included. This is to match the name of the icon file (located at resources/themes/images/default/pictos) without its extention (.png).
35 | *
36 | * @example
37 | * @include pictos-iconmask('attachment');
38 | */
39 | @mixin pictos-iconmask($name) {
40 | .x-tab img.#{$name}, .x-button img.x-icon-mask.#{$name} {
41 | -webkit-mask-image: theme_image($theme-name, "pictos/" + $name + ".png");
42 | }
43 | }
44 |
45 | /**
46 | * Includes the default styles for toolbar buttons, mostly used as a helper function.
47 | *
48 | * @param {color} $bg-color Base color to be used for the button.
49 | * @param {color} [$type=$button-gradient] $type Gradient style for the button, will automatically use "recessed" when pressed.
50 | */
51 | @mixin toolbar-button($bg-color, $type: $button-gradient){
52 | &, .x-toolbar & {
53 | border: .1em solid darken($bg-color, 20%);
54 | border-top-color: darken($bg-color, 15%);
55 | @include color-by-background($bg-color);
56 |
57 | &.x-button-back:before, &.x-button-forward:before {
58 | background: darken($bg-color, 20%);
59 | }
60 |
61 | &, &.x-button-back:after, &.x-button-forward:after {
62 | @include background-gradient($bg-color, $type);
63 | }
64 |
65 | img.x-icon-mask {
66 | @include mask-by-background($bg-color);
67 | }
68 |
69 | @if $include-highlights {
70 | @include bevel-by-background($bg-color);
71 | -webkit-box-shadow: rgba(#fff, .1) 0 .1em 0;
72 | }
73 |
74 | &.x-button-pressed, &.x-button-active {
75 | &, &:after {
76 | @include background-gradient(darken($bg-color, 7%), 'recessed');
77 | }
78 | @if $include-highlights {
79 | -webkit-box-shadow: inset saturate(darken($bg-color, 15%), 5%) 0 0 .1em, rgba(#fff, .1) 0 .1em 0;
80 | }
81 | }
82 | }
83 | }
84 |
85 | /**
86 | * Adds a small text shadow (or highlight) to give the impression of beveled text.
87 | *
88 | * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark.
89 | */
90 | @mixin bevel-text($type: 'shadow') {
91 | @if $include-highlights {
92 | @if $type == shadow {
93 | text-shadow: rgba(0,0,0,.5) 0 -.08em 0;
94 | } @else {
95 | text-shadow: rgba(255,255,255,.25) 0 .08em 0;
96 | }
97 | }
98 | }
99 |
100 | /**
101 | * Adds a small box shadow (or highlight) to give the impression of being beveled.
102 | *
103 | * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark.
104 | */
105 | @mixin bevel-box($type: 'light') {
106 | @if $include-highlights {
107 | @if $type == shadow {
108 | -webkit-box-shadow: rgba(#000, .5) 0 -.06em 0;
109 | } @else {
110 | -webkit-box-shadow: rgba(#fff, .35) 0 .06em 0;
111 | }
112 | }
113 | }
114 |
115 | /**
116 | * Adds basic styles to :before or :after pseudo-elements.
117 | *
118 | * @param {measurement} [$width=30px] Height of pseudo-element.
119 | * @param {measurement} [$height=30px] Height of pseudo-element.
120 | * @param {measurement} [$top=0] Top positioning of pseudo-element.
121 | * @param {measurement} [$left=0] Left positioning of pseudo-element.
122 | *
123 | * @example
124 | * .my-element:after {
125 | * @include insertion(50px, 50px);
126 | * }
127 | */
128 | @mixin insertion($width: 30px, $height: 30px, $top: 0, $left: 0) {
129 | content: "";
130 | position: absolute;
131 | width: $width;
132 | height: $height;
133 | top: $top;
134 | left: $left;
135 | }
136 |
137 | /**
138 | * Makes an element stretch to its parent's bounds.
139 | *
140 | */
141 | @mixin stretch {
142 | position: absolute;
143 | top: 0;
144 | right: 0;
145 | bottom: 0;
146 | left: 0;
147 | }
148 |
149 | /**
150 | * Colors the text of an element based on lightness of its background.
151 | *
152 | * @param {color} $bg-color Background color of element.
153 | * @param {percent} [$contrast=100%] Contrast of text color to its background.
154 | *
155 | * @example
156 | * .my-element {
157 | * @include color-by-background(#fff); // Colors text black.
158 | * }
159 | *
160 | * @example
161 | * .my-element {
162 | * @include color-by-background(#fff, 40%); // Colors text gray.
163 | * }
164 | *
165 | */
166 | @mixin color-by-background($bg-color, $contrast: 100%) {
167 | @if (lightness($bg-color) > 50) { color: darken($bg-color, $contrast) }
168 | @else { color: lighten($bg-color, $contrast) }
169 | }
170 |
171 | /**
172 | * Bevels the text based on its background.
173 | *
174 | * @param {color} $bg-color Background color of element.
175 | * @see bevel-text
176 | *
177 | */
178 | @mixin bevel-by-background($bg-color) {
179 | @if (lightness($bg-color) > 50) { @include bevel-text(light) }
180 | @else { @include bevel-text; }
181 | }
182 |
183 | /**
184 | * Creates a background gradient for masked elements, based on the lightness of their background.
185 | *
186 | * @param {color} $bg-color Background color of element.
187 | * @param {percent} [$percent=100%] Contrast of the new gradient to its background.
188 | * @param {percent} [$style=$base-gradient] Gradient style of the gradient.
189 | * @see background-gradient
190 | *
191 | */
192 | @mixin mask-by-background($bg-color, $contrast: 100%, $style: $base-gradient) {
193 | @if (lightness($bg-color) > 50) { @include background-gradient(darken($bg-color, $contrast), $style) }
194 | @else { @include background-gradient(lighten($bg-color, $contrast), $style) }
195 | }
--------------------------------------------------------------------------------
/theming/themes/stylesheets/sencha-touch/default/widgets/_list.scss:
--------------------------------------------------------------------------------
1 | @import '../global';
2 |
3 |
4 | /**
5 | * @global {color} [$list-color=#000]
6 | * Text color for list rows.
7 | *
8 | * @class Ext.List
9 | * @xtype list
10 | */
11 | $list-color: #000 !default;
12 |
13 | /**
14 | * @global {color} [$list-bg-color=#f7f7f7]
15 | * Background-color for list rows.
16 | *
17 | * @class Ext.List
18 | * @xtype list
19 | */
20 | $list-bg-color: #f7f7f7 !default;
21 |
22 | /**
23 | * @global {color} [$list-pressed-color=lighten($active-color, 50%)]
24 | * Background-color for pressed list rows.
25 | *
26 | * @class Ext.List
27 | * @xtype list
28 | */
29 | $include-list-highlights: $include-highlights !default;
30 |
31 | /**
32 | * @global {color} [$list-pressed-color=lighten($active-color, 50%)]
33 | * Background-color for pressed list rows.
34 | *
35 | * @class Ext.List
36 | * @xtype list
37 | */
38 | $list-pressed-color: lighten($active-color, 50%) !default;
39 |
40 | /**
41 | * @global {color} [$list-active-color=$active-color]
42 | * Background-color for selected list rows.
43 | *
44 | * @class Ext.List
45 | * @xtype list
46 | */
47 | $list-active-color: $active-color !default;
48 |
49 | /**
50 | * @global {string} [$list-active-gradient=$base-gradient]
51 | * Gradient style for selected list rows.
52 | *
53 | * @class Ext.List
54 | * @xtype list
55 | */
56 | $list-active-gradient: $base-gradient !default;
57 |
58 | /**
59 | * @global {color} [$list-header-bg-color=lighten(saturate($base-color, 10%), 20%)]
60 | * Background-color for list header rows (in grouped lists).
61 | *
62 | * @class Ext.List
63 | * @xtype list
64 | */
65 | $list-header-bg-color: lighten(saturate($base-color, 10%), 20%) !default;
66 |
67 | /**
68 | * @global {string} [$list-header-gradient=$base-gradient]
69 | * Gradient style for list header rows (in grouped lists).
70 | *
71 | * @class Ext.List
72 | * @xtype list
73 | * @see background-gradient
74 | */
75 | $list-header-gradient: $base-gradient !default;
76 |
77 | /**
78 | * @global {measurement} [$list-disclosure-size=1.7em]
79 | * Default size (width/height) for disclosure icons.
80 | *
81 | * @class Ext.List
82 | * @xtype list
83 | */
84 | $list-disclosure-size: 1.7em;
85 |
86 | /**
87 | * Includes default list styles.
88 | *
89 | * @class Ext.List
90 | * @xtype list
91 | */
92 | @mixin sencha-list {
93 | .x-list {
94 | background-color: $list-bg-color;
95 | position: relative;
96 |
97 | .x-list-disclosure {
98 | overflow: visible;
99 | -webkit-mask: 0 0 theme_image($theme-name, "disclosure.png") no-repeat;
100 | -webkit-mask-size: $list-disclosure-size;
101 | @include background-gradient(saturate($active-color, 10%));
102 | width: $list-disclosure-size;
103 | height: $list-disclosure-size;
104 | }
105 |
106 | &.x-list-indexed .x-list-disclosure {
107 | margin-right: 1.3em;
108 | }
109 |
110 | .x-item-selected .x-list-disclosure {
111 | background: #fff none;
112 | }
113 |
114 | .x-list-item {
115 | position: relative;
116 | color: $list-color;
117 | padding: 0.5em 0.8em;
118 |
119 | min-height: $global-row-height;
120 | @include display-box;
121 |
122 | border-top: 1px solid darken($list-bg-color, 15%);
123 |
124 | &:first-child {
125 | border-top: none;
126 | }
127 |
128 | &:last-child {
129 | border-bottom: 1px solid darken($list-bg-color, 15%);
130 | }
131 |
132 | .x-list-item-body {
133 | @include box-flex(1);
134 | /*@include display-box;*/
135 | @include box-align(center);
136 | @include box-orient(horizontal);
137 |
138 | span {
139 | font-size: .95em;
140 | }
141 | }
142 |
143 | &.x-item-pressed {
144 | @if $include-list-highlights {
145 | border-top-color: $list-pressed-color;
146 | }
147 |
148 | background: $list-pressed-color none;
149 | }
150 |
151 | &.x-item-selected {
152 | @include background-gradient($list-active-color, $list-active-gradient);
153 | @include color-by-background($list-active-color);
154 | @include bevel-by-background($list-active-color);
155 |
156 | @if $include-list-highlights {
157 | border-top-color: lighten($list-active-color, 10%);
158 | border-bottom-color: darken($list-active-color, 15%);
159 | }
160 | }
161 | }
162 | }
163 |
164 | .x-list-header {
165 | @include background-gradient($list-header-bg-color, $list-header-gradient);
166 | @include color-by-background($list-header-bg-color, 30%);
167 | @include bevel-by-background($list-header-bg-color);
168 | border-top: 1px solid $list-header-bg-color;
169 | border-bottom: 1px solid darken($list-header-bg-color, 20%);
170 | font-weight: bold;
171 | font-size: 0.8em;
172 | padding: 0.2em 1.02em;
173 | @include bevel-by-background($list-header-bg-color);
174 | @if $include-list-highlights {
175 | -webkit-box-shadow: 0px .1em .3em rgba(0, 0, 0, 0.3);
176 | }
177 | }
178 |
179 | .x-list-header-swap {
180 | z-index: 1;
181 | position: absolute;
182 | top: 0;
183 | left: 0;
184 | width: 100%;
185 | }
186 |
187 | .x-list-round {
188 | background-color: darken($list-bg-color, 5%);
189 | .x-list-group-items > *,
190 | &.x-list-flat .x-list-parent > * {
191 | border-right: 1px solid darken($list-bg-color, 15%);
192 | border-left: 1px solid darken($list-bg-color, 15%);
193 | background-color: $list-bg-color;
194 | margin: 0 1.2em;
195 | &:first-child {
196 | margin: 1.2em 1.2em 0;
197 | border-top: 1px solid darken($list-bg-color, 15%);
198 | @if $include-border-radius { @include border-top-radius(.4em); }
199 | }
200 | &:last-child {
201 | margin: 0 1.2em 1.2em;
202 | border-bottom: 1px solid darken($list-bg-color, 15%);
203 | @include border-bottom-radius(.4em)
204 | }
205 | }
206 | }
207 | }
208 |
209 | @mixin sencha-list-paging {
210 | .x-list-paging {
211 | height: 50px;
212 | .x-loading-spinner {
213 | display: none;
214 | margin: auto;
215 | }
216 |
217 | .x-list-paging-msg {
218 | text-align: center;
219 | color: $active-color;
220 | padding-top: 10px;
221 | @if $include-border-radius { @include border-radius(6px); }
222 | }
223 |
224 | &.x-loading {
225 | .x-loading-spinner {
226 | display: block;
227 | }
228 |
229 | .x-list-paging-msg {
230 | display: none;
231 | }
232 | }
233 | }
234 | }
235 |
236 | @mixin sencha-list-pullrefresh {
237 | .x-list-pullrefresh {
238 | @include display-box;
239 | @include box-orient(horizontal);
240 | @include box-align(center);
241 | @include box-pack(center);
242 | position: absolute;
243 | top: -5em;
244 | left: 0;
245 | width: 100%;
246 | height: 4.5em;
247 |
248 | .x-loading-spinner {
249 | display: none;
250 | }
251 | }
252 |
253 | .x-list-pullrefresh-arrow {
254 | width: 2.5em;
255 | height: 4.5em;
256 |
257 | -webkit-mask: center center theme_image($theme-name, "pullarrow.png") no-repeat;
258 | -webkit-mask-size: 2em 3em;
259 | /*-webkit-transition-property: -webkit-transform;*/
260 | /*-webkit-transition-duration: 200ms;*/
261 | -webkit-transform: rotate(0deg);
262 | background-color: #111;
263 | }
264 |
265 | .x-list-pullrefresh-release .x-list-pullrefresh-arrow {
266 | -webkit-transform: rotate(-180deg);
267 | }
268 |
269 | .x-list-pullrefresh-wrap {
270 | width: 20em;
271 | font-size: 0.7em;
272 | }
273 |
274 | .x-list-pullrefresh-message {
275 | font-weight: bold;
276 | font-size: 1.3em;
277 | margin-bottom: 0.1em;
278 | text-align: center;
279 | }
280 |
281 | .x-list-pullrefresh-updated {
282 | text-align: center;
283 | }
284 |
285 | .x-list-pullrefresh-loading {
286 | /*position: relative;*/
287 | /*top: 0;*/
288 |
289 | .x-loading-spinner {
290 | display: block;
291 | }
292 |
293 | .x-list-pullrefresh-arrow {
294 | display: none;
295 | }
296 | }
297 | }
298 |
--------------------------------------------------------------------------------
/theming/themes/stylesheets/sencha-touch/default/widgets/_tabs.scss:
--------------------------------------------------------------------------------
1 | // Tab icons used with permission from Drew Wilson
2 | // http://pictos.drewwilson.com/
3 | // Pictos icons are (c) 2010 Drew Wilson
4 |
5 | @import '../global';
6 |
7 | /**
8 | * @global {boolean} [$include-tabbar-uis=$include-default-uis] Optionally disable separate tabbar UIs (light and dark).
9 | *
10 | * @class Ext.TabBar
11 | * @xtype tabbar
12 | */
13 | $include-tabbar-uis: $include-default-uis !default;
14 |
15 | /**
16 | * @global {boolean} [$include-top-tabs=true]
17 | * Optionally exclude top tab styles by setting to false.
18 | *
19 | * @class Ext.TabBar
20 | * @xtype tabbar
21 | */
22 | $include-top-tabs: true !default;
23 |
24 | /**
25 | * @global {boolean} [$include-bottom-tabs=true]
26 | * Optionally exclude bottom tab styles by setting to false.
27 | *
28 | * @class Ext.TabBar
29 | * @xtype tabbar
30 | */
31 | $include-bottom-tabs: true !default;
32 |
33 | /**
34 | * @global {color} [$tabs-light=lighten(desaturate($base-color, 10%), 5%)]
35 | * Base color for "light" UI tabs.
36 | *
37 | * @class Ext.TabBar
38 | * @xtype tabbar
39 | */
40 | $tabs-light: lighten(desaturate($base-color, 10%), 5%) !default;
41 |
42 | /**
43 | * @global {color} [$tabs-light-active=saturate($active-color, 20%)]
44 | * Active color for "light" UI tabs.
45 | *
46 | * @class Ext.TabBar
47 | * @xtype tabbar
48 | */
49 | $tabs-light-active: saturate($active-color, 20%) !default;
50 |
51 | /**
52 | * @global {color} [$tabs-dark=darken($base-color, 20%)]
53 | * Base color for "dark" UI tabs.
54 | *
55 | * @class Ext.TabBar
56 | * @xtype tabbar
57 | */
58 | $tabs-dark: darken($base-color, 20%) !default;
59 |
60 | /**
61 | * @global {color} [$tabs-dark-active=saturate(lighten($active-color, 30%), 70%)]
62 | * Active color for "dark" UI tabs.
63 | *
64 | * @class Ext.TabBar
65 | * @xtype tabbar
66 | */
67 | $tabs-dark-active-color: saturate(lighten($active-color, 30%), 70%) !default;
68 |
69 | /**
70 | * @global {string} [$tabs-bar-gradient=$base-gradient]
71 | * Background gradient style for tab bars.
72 | *
73 | * @class Ext.TabBar
74 | * @xtype tabbar
75 | */
76 | $tabs-bar-gradient: $base-gradient !default;
77 |
78 | /**
79 | * @global {string} [$tabs-bottom-radius=.25em]
80 | * Border-radius for bottom tabs.
81 | *
82 | * @class Ext.Tab
83 | * @xtype tab
84 | */
85 | $tabs-bottom-radius: .25em !default;
86 |
87 | /**
88 | * @global {string} [$tabs-bottom-icon-size=1.65em]
89 | * Icon size for bottom tabs
90 | *
91 | * @class Ext.Tab
92 | * @xtype tab
93 | */
94 | $tabs-bottom-icon-size: 1.65em !default;
95 |
96 | /**
97 | * @global {string} [$tabs-bottom-active-gradient='glossy']
98 | * Background gradient style for active bottom tabs.
99 | *
100 | * @class Ext.Tab
101 | * @xtype tab
102 | */
103 | $tabs-bottom-active-gradient: 'glossy' !default;
104 |
105 | // Private
106 |
107 | $tabs-top-height: $global-row-height - .8em;
108 |
109 | /**
110 | * Includes default tab styles.
111 | *
112 | * @class Ext.TabBar
113 | * @xtype tabbar
114 | */
115 | @mixin sencha-tabs {
116 | @if $include-top-tabs {
117 | @include sencha-top-tabs;
118 | }
119 | @if $include-bottom-tabs {
120 | @include sencha-bottom-tabs;
121 | }
122 |
123 | @if $include-tabbar-uis {
124 | @include sencha-tabbar-ui('light', $tabs-light, $tabs-bar-gradient, $tabs-light-active);
125 | @include sencha-tabbar-ui('dark', $tabs-dark, $tabs-bar-gradient, $tabs-dark-active-color);
126 | }
127 |
128 | // Rules for all tabs
129 | .x-tab.x-item-disabled span.x-button-label, .x-tab.x-item-disabled img {
130 | opacity: .5;
131 | }
132 | .x-tab.x-draggable {
133 | opacity: .7;
134 | }
135 | }
136 |
137 |
138 | @mixin sencha-top-tabs {
139 |
140 | .x-tabbar.x-docked-top {
141 | border-bottom: .1em solid;
142 | height: $global-row-height;
143 | padding: 0 .8em;
144 |
145 | .x-tab {
146 | margin: .4em .2em;
147 | padding: (($tabs-top-height - 1em) / 2) .8em;
148 | height: $tabs-top-height;
149 | @if $include-border-radius { @include border-radius($tabs-top-height / 2); }
150 | }
151 |
152 | @if ($include-highlights) {
153 | .x-tab-active {
154 | -webkit-box-shadow: rgba(#fff, .2) 0 .1em .1em, inset rgba(#000, .3) 0 .1em .2em;
155 | }
156 | }
157 |
158 | .x-button-label {
159 | font-size: .8em;
160 | line-height: 1.2em;
161 | text-rendering: optimizeLegibility;
162 | -webkit-font-smoothing: antialiased;
163 | }
164 | }
165 | }
166 |
167 |
168 | @mixin sencha-bottom-tabs {
169 | .x-tabbar.x-docked-bottom {
170 | border-top: .1em solid;
171 | height: 3em;
172 |
173 | .x-tab {
174 | @include display-box;
175 | @include box-direction(reverse);
176 | @include box-orient(vertical);
177 | @if $include-border-radius { @include border-radius($tabs-bottom-radius); }
178 | margin: .15em;
179 | min-width: 3.3em;
180 | position: relative;
181 |
182 | img {
183 | -webkit-mask-size: $tabs-bottom-icon-size;
184 | width: $tabs-bottom-icon-size;
185 | height: $tabs-bottom-icon-size;
186 | display: block;
187 | margin: .4em auto .1em;
188 | position: relative;
189 | }
190 |
191 | // Start of automatic tab icon shadows...
192 | // &:before {
193 | // @include insertion;
194 | // background: red;
195 | // width: $tabs-bottom-icon-size;
196 | // height: $tabs-bottom-icon-size;
197 | // position: absolute;
198 | // top: -.1em;
199 | // }
200 |
201 | .x-button-label {
202 | margin: 0;
203 | font-size: 9px;
204 | line-height: 12px;
205 | text-rendering: optimizeLegibility;
206 | -webkit-font-smoothing: antialiased;
207 | }
208 | }
209 |
210 | @if ($include-highlights) {
211 | .x-tab-active {
212 | -webkit-box-shadow: inset rgba(#fff, .3) 0 0 .1em;
213 | }
214 | }
215 | }
216 |
217 | @if $include-default-icons {
218 | @include pictos-iconmask('bookmarks');
219 | @include pictos-iconmask('download');
220 | @include pictos-iconmask('favorites');
221 | @include pictos-iconmask('info');
222 | @include pictos-iconmask('more');
223 | @include pictos-iconmask('time');
224 | @include pictos-iconmask('user');
225 | @include pictos-iconmask('team');
226 | }
227 | }
228 |
229 | /**
230 | * Creates a theme UI for tabbar/tab components.
231 | *
232 | * @param {string} $ui-label The name of the UI being created.
233 | * Can not included spaces or special punctuation (used in class names)
234 | * @param {color} $bar-color Base color for the tab bar.
235 | * @param {string} $bar-gradient Background gradient style for the tab bar.
236 | * @param {color} $tab-active-color Background-color for active tab icons.
237 | *
238 | * @example
239 | * // SCSS
240 | * @include sencha-button-ui('pink', #333, 'matte', #AE537A);
241 | *
242 | * // JS
243 | * var tabs = new Ext.TabPanel({
244 | * tabBar: {
245 | * ui: 'pink',
246 | * dock: 'bottom',
247 | * layout: { pack: 'center' }
248 | * },
249 | * ...
250 | * });
251 | *
252 | * @class Ext.TabBar
253 | * @xtype tabbar
254 | */
255 | @mixin sencha-tabbar-ui($ui-label, $bar-color, $bar-gradient, $tab-active-color) {
256 | .x-tabbar-#{$ui-label} {
257 | @include background-gradient($bar-color, $bar-gradient);
258 | border-color: darken($bar-color, 5%);
259 |
260 | .x-tab {
261 | @include color-by-background($bar-color, 40%);
262 | }
263 |
264 | .x-tab-active {
265 | @include color-by-background($bar-color, 90%);
266 | }
267 |
268 | .x-tab-pressed {
269 | @include color-by-background($bar-color, 100%);
270 | }
271 | }
272 |
273 | @if $include-bottom-tabs {
274 | .x-tabbar-#{$ui-label}.x-docked-bottom {
275 | .x-tab {
276 | @include bevel-by-background($bar-color);
277 | img {
278 | @include mask-by-background($bar-color, 20%, $tabs-bar-gradient);
279 | }
280 | }
281 |
282 | .x-tab-active {
283 | @include background-gradient(lighten($bar-color, 5%), $tabs-bar-gradient);
284 | @include bevel-by-background(lighten($bar-color, 10%));
285 |
286 | img {
287 | @include background-gradient($tab-active-color, $tabs-bottom-active-gradient);
288 | }
289 | }
290 | }
291 | }
292 |
293 | @if $include-top-tabs {
294 | .x-tabbar-#{$ui-label}.x-docked-top {
295 |
296 | .x-tab-active {
297 | @include background-gradient(darken($bar-color, 5%), 'recessed');
298 | @include color-by-background(darken($bar-color, 5%));
299 | }
300 | }
301 | }
302 | }
303 |
--------------------------------------------------------------------------------
/theming/themes/stylesheets/sencha-touch/default/widgets/_buttons.scss:
--------------------------------------------------------------------------------
1 | // Toolbar icons used with permission from Drew Wilson
2 | // http://pictos.drewwilson.com/
3 | // Pictos icons are (c) 2010 Drew Wilson
4 |
5 | @import '../global';
6 |
7 | /**
8 | * @global {measurement} $button-height Default height for buttons.
9 | *
10 | * @class Ext.Button
11 | * @xtype button
12 | */
13 | $button-height: 1.8em;
14 |
15 | /**
16 | * @global {measurement} $button-radius Default border-radius for buttons.
17 | *
18 | * @class Ext.Button
19 | * @xtype button
20 | */
21 | $button-radius: .4em !default;
22 |
23 | /**
24 | * @global {measurement} $button-stroke-weight Default border width for buttons.
25 | *
26 | * @class Ext.Button
27 | * @xtype button
28 | */
29 | $button-stroke-weight: .1em !default;
30 |
31 | /**
32 | * @global {string} $button-gradient Default gradient for buttons.
33 | *
34 | * @class Ext.Button
35 | * @xtype button
36 | * @see background-gradient
37 | */
38 | $button-gradient: $base-gradient !default;
39 |
40 | /**
41 | * @global {string} $toolbar-icon-size Default size (width and height) for toolbar icons.
42 | *
43 | * @class Ext.Button
44 | * @xtype button
45 | */
46 | $toolbar-icon-size: 1.4em !default;
47 |
48 | /**
49 | * @global {boolean} $include-button-uis Optionally disable separate button UIs, including action, confirm, and decline.
50 | *
51 | * @class Ext.Button
52 | * @xtype button
53 | */
54 | $include-button-uis: $include-default-uis !default;
55 |
56 | /**
57 | * @global {boolean} $include-button-uis Optionally disable special CSS3 effects on buttons including gradients, text-shadows, and box-shadows.
58 | *
59 | * @class Ext.Button
60 | * @xtype button
61 | */
62 | $include-button-highlights: $include-highlights !default;
63 |
64 |
65 | /**
66 | * Includes default button styles.
67 | *
68 | * @class Ext.Button
69 | * @xtype button
70 | * @see background-gradient
71 | */
72 | @mixin sencha-buttons {
73 | // Basic button style
74 | .x-button {
75 | @include background-clip(padding-box);
76 | @if $include-border-radius { @include border-radius($button-radius); }
77 | @include display-box;
78 | @include box-align(center);
79 | @include toolbar-button(#ccc, $button-gradient);
80 | min-height: $button-height;
81 | padding: .3em .6em;
82 | position: relative;
83 | overflow: hidden;
84 |
85 | // Default icon style
86 | img {
87 | width: 2.1em;
88 | height: 2.1em;
89 | background-repeat: no-repeat;
90 | background-position: center;
91 | display: block;
92 |
93 | &.x-icon-mask {
94 | width: 1.3em;
95 | height: 1.3em;
96 | -webkit-mask-size: 1.3em;
97 | }
98 | }
99 |
100 | &.x-item-disabled .x-button-label, &.x-item-disabled img {
101 | opacity: .5;
102 | }
103 | }
104 |
105 | .x-button-round {
106 | @if $include-border-radius { @include border-radius($button-height/2); }
107 | padding: .1em $button-height/2;
108 | }
109 |
110 | .x-button-small, .x-toolbar .x-button-small {
111 | @if $include-border-radius { @include border-radius(.3em); }
112 | padding: .2em .4em;
113 | min-height: 0;
114 |
115 | .x-button-label {
116 | font-size: .6em;
117 | }
118 |
119 | img {
120 | width: .75em;
121 | height: .75em;
122 | }
123 | }
124 |
125 | // Button icon alignment
126 | .x-iconalign-left, .x-icon-align-right {
127 | @include box-orient(horizontal);
128 | @include box-direction(reverse);
129 | }
130 | .x-iconalign-top, .x-iconalign-bottom {
131 | @include box-orient(vertical);
132 | }
133 | .x-iconalign-bottom, .x-iconalign-right {
134 | @include box-direction(normal);
135 | }
136 | .x-iconalign-left, .x-iconalign-top {
137 | @include box-direction(reverse);
138 | }
139 | .x-iconalign-left .x-button-label {
140 | margin-left: $toolbar-spacing * 1.5;
141 | }
142 | .x-iconalign-right .x-button-label {
143 | margin-right: $toolbar-spacing * 1.5;
144 | }
145 |
146 | // Button labels
147 | .x-button-label {
148 | @include box-flex(1);
149 | @include box-align(center);
150 | white-space: nowrap;
151 | text-overflow: ellipsis;
152 | text-align: center;
153 | font-weight: bold;
154 | line-height: 1.2em;
155 | display: block;
156 | overflow: hidden;
157 | }
158 |
159 | // Toolbar button styling
160 | .x-toolbar .x-button {
161 | margin: 0 .2em;
162 | padding: .3em .6em;
163 |
164 | .x-button-label {
165 | font-size: .7em;
166 | }
167 | }
168 |
169 | // Back/Forward buttons
170 | $shadow-width: .065em; // Space between tip and its shadow
171 | $overlap-width: .2em; // how far the mask is clipped
172 |
173 | // $mask-height: $button-height + $button-stroke-weight * 2; // Ugh, this is non-specific... borders?
174 | $mask-height: $button-height;
175 | $mask-width: $mask-height/2.33;
176 |
177 | $mask-offset: $button-radius - $overlap-width - $button-stroke-weight + $shadow-width - .02em;
178 |
179 | $tip-width: $mask-width - $mask-offset + $shadow-width;
180 |
181 | .x-button-forward, .x-button-back {
182 | position: relative;
183 | overflow: visible;
184 | height: $button-height;
185 | z-index: 1;
186 | &:before, &:after {
187 | @include insertion($mask-width, $mask-height, -$button-stroke-weight, auto);
188 | z-index: 2;
189 | -webkit-mask: $mask-offset 0 theme_image($theme-name, "tip.png") no-repeat;
190 | -webkit-mask-size: $mask-width $mask-height;
191 | overflow: hidden;
192 | }
193 | }
194 |
195 | .x-button-back, .x-toolbar .x-button-back {
196 | margin-left: $tip-width - $shadow-width + $toolbar-spacing;
197 | padding-left: .4em;
198 | &:before {
199 | left: - $tip-width;
200 | }
201 | &:after {
202 | left: - $tip-width + $shadow-width;
203 | }
204 | }
205 |
206 | .x-button-forward, .x-toolbar .x-button-forward {
207 | margin-right: $tip-width - $shadow-width + $toolbar-spacing;
208 | padding-right: .4em;
209 | &:before, &:after {
210 | -webkit-mask: -$mask-offset 0 theme_image($theme-name, "tip_right.png") no-repeat;
211 | }
212 | &:before {
213 | right: - $tip-width;
214 | }
215 | &:after {
216 | right: - $tip-width + $shadow-width;
217 | }
218 | }
219 |
220 | // Plain buttons automatically use a margin trick to have a
221 | // wide gradial glow for pressed state.
222 | .x-button.x-button-plain, .x-toolbar .x-button.x-button-plain {
223 | background: none;
224 | border: 0 none;
225 | @include box-shadow(none);
226 | @if $include-border-radius { @include border-radius(none); }
227 | min-height: 0;
228 | text-shadow: none;
229 | height: auto;
230 | line-height: auto;
231 |
232 | margin: -1.5em -.5em;
233 | padding: 1.3em 1em;
234 | height: 1.8em;
235 |
236 | & > * {
237 | overflow: visible;
238 | margin-top: -.75em;
239 | }
240 |
241 | img {
242 | -webkit-mask-size: $toolbar-icon-size;
243 | width: $toolbar-icon-size;
244 | height: $toolbar-icon-size;
245 | }
246 |
247 | &.x-button-pressed {
248 | background: none;
249 | -webkit-box-shadow: none;
250 |
251 | $mask-radial-glow: lighten($active-color, 50%);
252 | @include background-image(radial-gradient(fade-out($mask-radial-glow, .3), fade-out($mask-radial-glow, 1) 24px));
253 | img {
254 | @include background-gradient(#fff, 'recessed');
255 | }
256 | }
257 | }
258 |
259 | // SegmentedButtons
260 | .x-segmentedbutton .x-button {
261 | @if $include-border-radius { @include border-radius(0); }
262 | margin: 0;
263 | &:first-child {
264 | @if $include-border-radius { @include border-left-radius($button-radius); }
265 | }
266 | &:last-child {
267 | @if $include-border-radius { @include border-right-radius($button-radius); }
268 | }
269 | &:not(:first-child) {
270 | border-left: 0;
271 | }
272 | }
273 |
274 | // Badges
275 | $badge-size: 2em !default;
276 | $badge-bg-color: darken($alert-color, 20%) !default;
277 | $badge-bg-gradient: 'glossy';
278 |
279 | .x-hasbadge {
280 | overflow: visible;
281 | .x-badge {
282 | @extend .x-button-label;
283 | @if $include-border-radius { @include border-radius($badge-size/2); }
284 | @include background-clip(padding-box);
285 | padding: .15em .25em;
286 | z-index: 30;
287 | @if $include-button-highlights {
288 | @include bevel-by-background($badge-bg-color);
289 | -webkit-box-shadow: #000 0 .1em .2em;
290 | }
291 | overflow: hidden;
292 | color: #fff;
293 | border: 2px solid #fff;
294 | position: absolute;
295 | width: auto;
296 | min-width: $badge-size;
297 | height: $badge-size;
298 | line-height: 1.2em;
299 | font-size: .6em;
300 | top: -.15em;
301 | right: 0px;
302 | max-width: 100%;
303 |
304 | @include background-gradient($badge-bg-color, $badge-bg-gradient);
305 | display: inline-block;
306 | }
307 | }
308 |
309 | @if $include-default-icons {
310 | @include pictos-iconmask('action');
311 | @include pictos-iconmask('add');
312 | @include pictos-iconmask('arrow_down');
313 | @include pictos-iconmask('arrow_left');
314 | @include pictos-iconmask('arrow_right');
315 | @include pictos-iconmask('arrow_up');
316 | @include pictos-iconmask('compose');
317 | @include pictos-iconmask('delete');
318 | @include pictos-iconmask('organize');
319 | @include pictos-iconmask('refresh');
320 | @include pictos-iconmask('reply');
321 | @include pictos-iconmask('search');
322 | @include pictos-iconmask('settings');
323 | @include pictos-iconmask('star');
324 | @include pictos-iconmask('trash');
325 | @include pictos-iconmask('maps');
326 | @include pictos-iconmask('locate');
327 | @include pictos-iconmask('home');
328 | }
329 |
330 | @if $include-button-uis {
331 | @include sencha-button-ui('action', $active-color);
332 | @include sencha-button-ui('confirm', desaturate(darken($confirm-color, 10%), 5%));
333 | @include sencha-button-ui('decline', desaturate(darken($alert-color, 10%), 5%));
334 | }
335 | }
336 |
337 |
338 | /**
339 | * Creates a theme UI for buttons.
340 | * Also automatically generates UIs for {ui-label}-round and {ui-label}-small.
341 | *
342 | * @param {string} $ui-label The name of the UI being created.
343 | * Can not included spaces or special punctuation (used in class names)
344 | * @param {color} $color Base color for the UI.
345 | * @param {string} [$gradient: $button-gradient] Default gradient for the UI.
346 | *
347 | * @example
348 | * // SCSS
349 | * @include sencha-button-ui('secondary', #99A4AE, 'glossy');
350 | *
351 | * // JS
352 | * var cancelBtn = new Ext.Button({text: 'Cancel', ui: 'secondary'});
353 | *
354 | * @class Ext.Button
355 | * @xtype button
356 | */
357 | @mixin sencha-button-ui($ui-label, $color, $gradient: $button-gradient) {
358 | .x-button.x-button-#{$ui-label}, .x-button.x-button-#{$ui-label}-round, .x-button.x-button-#{$ui-label}-small {
359 | @include toolbar-button($color, $gradient);
360 | }
361 |
362 | .x-button.x-button-#{$ui-label}-round {
363 | @extend .x-button-round;
364 | }
365 |
366 | .x-button.x-button-#{$ui-label}-small {
367 | @extend .x-button-small;
368 | }
369 | }
370 |
--------------------------------------------------------------------------------