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