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

[markwyner]

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.

[tomalex0]

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.

[AndreaCammarata]

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.

[markwyner]

@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!

[tomalex0]

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

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

[markwyner]

Good call. Those are the slides from the video.

[davidkaneda]

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.

[markwyner]

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!

[sugarfreejones]

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

[Magic Software]

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