Results 1 to 2 of 2

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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User bklaas's Avatar
    Join Date
    Oct 2010
    Minneapolis, MN
    Vote Rating

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

    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?


  2. #2
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Vote Rating


    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);

Similar Threads

  1. Sencha Touch adding checkbox to list
    By sim4life in forum Sencha Touch 1.x: Discussion
    Replies: 9
    Last Post: 12 Nov 2013, 6:11 AM
  2. Sencha Touch - List
    By Riaz in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 5 Mar 2012, 12:04 AM
  3. more info about themes and sass in sencha touch?
    By RobinQu in forum Sencha Touch 1.x: Discussion
    Replies: 10
    Last Post: 21 Dec 2010, 10:21 AM
  4. Sencha Touch and long list/store performance
    By bklaas in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 20 Dec 2010, 10:41 AM
  5. sencha touch list store problem
    By reminder in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 27 Jun 2010, 11:33 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts