1. #1
    Sencha User bklaas's Avatar
    Join Date
    Oct 2010
    Location
    Minneapolis, MN
    Posts
    6
    Vote Rating
    0
    bklaas is on a distinguished road

      0  

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

    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?

    cheers,
    #!/ben

  2. #2
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    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.

    Code:
    .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

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi