SASS & Sencha Touch: how do I apply a gradient to a pressed list item?

[bklaas]

I'm trying to theme a Sencha Touch app with SASS.

In an scss file, I can define a color for a pressed list item:

$white: #fff;
$list_pressed_color: $white;

this makes the pressed behavior render the list item in flat white. works.

I can also define a gradient for an "active" item:
$list_active_gradient: 'bevel';

this makes the "active" behavior render the list item with a bevel gradient. works. (I don't know the exact definition of "active", but it definitely is well after "pressed")

How do I add a gradient for the list item for "pressed"? I've tried $list_pressed_gradient and $list_selected_gradient, and neither work.

I have only found beta documentation for sass theming, and none of this is yet documented. Is there a more complete documentation available for sass variables somewhere?

cheers,
#!/ben

[existdissolve]

Out of the box, there are no variables for the "pressed" gradient, and even if you created the variable yourself, the default "pressed" class is setup in SASS to handle a single color. That doesn't mean, of course, that you can't roll your own.

Here's what I'd do. Start by looking in resources/themes/stylesheets/sencha-touch/default/widgets/_list.scss. This is where the core classes for lists are defined. Make a note of the section where the .x-list-pressed class is setup, as well as .x-list-selected (this is the one you'll probably want to emulate). Don't modify this file--you can override it in your own custom scss.

Now, in your custom .scss, you can simply define .x-list-pressed as you'd like it. In this example, I just used the existing $list-active-gradient and $list-active-color, but you could always create your own custom color and gradient for .x-list-pressed and pass them.

In the following example, I've set up .x-item-pressed to look exactly like .x-item-selected. Swapping out $list-active-color and $list-active-gradient with custom colors and gradients for the "pressed" state should be trivial from this point.

.x-list {
	.x-list-item {
		&.x-item-pressed {
			@include background-gradient($list-active-color, $list-active-gradient);
			@include color-by-background($list-active-color);
			@include bevel-by-background($list-active-color);
		}
	}
}