1. #1
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    5
    markwyner is on a distinguished road

      0  

    Default Is There a Complete List of SASS Variables for the Touch Theme?

    Is There a Complete List of SASS Variables for the Touch Theme?


    I'm just wondering if there is a complete list of the variables used in the touch theme? There are references to some of the big variables like $base-color and $base-gradient, but there is a sea of variables used throughout the theme's core CSS files.

    Any chance there's a complete reference somewhere? I feel like the ST developers likely have this, but I can't find it posted anywhere. It would be a great resource to have handy.

    Thanks in advance.
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  2. #2
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    if you have downloaded sencha-touch example folders. Look in to the inner folder resources/themes/stylesheets/sencha-touch/default. You can find independent sass files used for each components.

    Hope this helps you.

  3. #3
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by markwyner View Post
    I'm just wondering if there is a complete list of the variables used in the touch theme? There are references to some of the big variables like $base-color and $base-gradient, but there is a sea of variables used throughout the theme's core CSS files.

    Any chance there's a complete reference somewhere? I feel like the ST developers likely have this, but I can't find it posted anywhere. It would be a great resource to have handy.

    Thanks in advance.
    Hi markwyner,
    I suggest you to take a look at this video:

    http://vimeo.com/17879651

    At one point during the presentation, there is a screen with a complete list of all SASS variables used to theme Sencha Touch.

    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  4. #4
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    5
    markwyner is on a distinguished road

      0  

    Default


    @tomalex:

    Yes, I'm aware of the setup and where the core files are. That's how I've been working to date. I started to make a list of the variables and then wondered if someone had compiled one elsewhere. Namely the developers. But thank you for the suggestion.

    @andreacammarata:

    I watched part of that video but not all of it. I'll watch all of it to look for that list. If I find the full list I'll create a post with them in the "examples and showcases" section of the forum.

    Update: I found the list at 9:12 in the video andreacammarata mentions. But here is a complete list, alphabetized:

    $active-color
    $alert-color
    $base-color
    $base-gradient
    $bright-color
    $button-gradient
    $button-height
    $button-radius
    $button-stroke-weight
    $carousel-indicator-size
    $carousel-indicator-spacing
    $carousel-track-size
    $form-bg-color
    $form-dark
    $form-field-bg-color
    $form-field-height
    $form-fieldset-radius
    $form-label-width
    $form-light
    $form-slider-size
    $form-spacing
    $form-textarea-height
    $form-thumb-size
    $form-thumb-space
    $form-toggle-size
    $global-row-height
    $include-bottom-tabs
    $include-button-uis
    $include-default-icons
    $include-default-uis
    $include-form-sliders
    $include-highlights
    $include-html-style
    $include-tabbar-uis
    $include-toolbar-uis
    $include-top-tabs
    $light-tab-active
    $light-tab-color
    $page-bg-color
    $sheet-bg-color
    $sheet-button-spacing
    $sheet-padding
    $tabs-bottom-active-gradient
    $tabs-bottom-icon-size
    $tabs-bottom-gradient
    $tabs-bottom-radius
    $tabs-dark-active-color
    $tabs-dark-color
    $toolbar-gradient
    $toolbar-highlights
    $toolbar-icon-size
    $toolbar-input-bg
    $toolbar-input-color
    $toolbar-input-height
    $toolbar-spacing
    $top-tab-height
    Most of them should be obvious as to what they style. However, I would recommend digging through the core theme stylesheets to assess what properties, other variables, and mix-ins are applied to each of them. This will enable you to create appropriate overrides. Once you have a good idea about what kinds of styling each variable controls, this list is a great cheat sheet of sort.

    Enjoy!
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  5. #5
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    Just came across a slide, it covers what we see in the video

    http://www.slideshare.net/senchainc/...g-sencha-touch

  6. #6
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    5
    markwyner is on a distinguished road

      0  

    Default


    Good call. Those are the slides from the video.
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  7. #7
    Sencha User davidkaneda's Avatar
    Join Date
    Jan 2010
    Location
    Bay Area, CA
    Posts
    147
    Vote Rating
    0
    davidkaneda is on a distinguished road

      0  

    Default


    In 1.1, we've also documented (in-code) all variables/mixins, but we're still working on the parser/generated docs. Will update with a link once it's in-hand.

  8. #8
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    5
    markwyner is on a distinguished road

      0  

    Default


    Yeah, that will be awesome. A list is a great foundation, but having some notes about them too will be that much greater.

    Thanks, David!
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  9. #9
    Sencha User
    Join Date
    Jan 2011
    Posts
    1
    Vote Rating
    0
    sugarfreejones is on a distinguished road

      0  

    Default


    thanks for posting these! I was just about to transcribe them from the video, but you've already done it

  10. #10
    Touch Premium Member
    Join Date
    Apr 2011
    Posts
    17
    Vote Rating
    0
    Magic Software is on a distinguished road

      0  

    Default SASS Variable for toolbar image

    SASS Variable for toolbar image


    Want to add an image as toolbar BG. Which SASS variable can be used?

Similar Threads

  1. Ext4 Theme + SASS
    By dmackerman in forum Ext: Discussion
    Replies: 1
    Last Post: 9 Mar 2011, 9:44 PM
  2. How to use sencha touch css in SASS
    By kevinv1990 in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 3 Mar 2011, 12:58 AM
  3. SASS & Sencha Touch: how do I apply a gradient to a pressed list item?
    By bklaas in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 26 Feb 2011, 1:30 PM
  4. 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
  5. Replies: 2
    Last Post: 2 Dec 2010, 4:47 PM

Thread Participants: 11

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