PDA

View Full Version : Is There a Complete List of SASS Variables for the Touch Theme?



markwyner
22 Mar 2011, 12:39 PM
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
23 Mar 2011, 12:39 AM
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
23 Mar 2011, 2:39 AM
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
23 Mar 2011, 7:43 AM
@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 (http://vimeo.com/17879651) 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
23 Mar 2011, 7:52 PM
Just came across a slide, it covers what we see in the video :)

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

markwyner
24 Mar 2011, 9:04 AM
Good call. Those are the slides from the video.

davidkaneda
24 Mar 2011, 11:08 AM
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
24 Mar 2011, 12:23 PM
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
8 Apr 2011, 1:08 PM
thanks for posting these! I was just about to transcribe them from the video, but you've already done it :)

Magic Software
3 May 2011, 11:39 PM
Want to add an image as toolbar BG. Which SASS variable can be used?

AndreaCammarata
3 May 2011, 11:54 PM
Hi guys.
I update this post with the link to Sencha official SASS variables doc.
Here is the link:

http://dev.sencha.com/deploy/touch/docs/theme/

Hope this helps.

davidkaneda
5 May 2011, 11:08 AM
Actually there are only variables for background color/gradient. To use a custom image, you will have to target with CSS.

martinbroos
24 May 2011, 4:13 AM
Want to add an image as toolbar BG. Which SASS variable can be used?

Like to know this aswell .. And how can i change the height of the toolbar so it will match the height of my toolbar bg?

markwyner
24 May 2011, 7:08 AM
Andrea, I just noticed those theme docs you posted. So awesome. Thanks!

AndreaCammarata
24 May 2011, 7:14 AM
Andrea, I just noticed those theme docs you posted. So awesome. Thanks!

You are welcome markwyner!

benmcmath
26 Nov 2011, 9:35 AM
The URL to that document is 404'd. Anyone have it and can attach it for posterity or post a link to it's new location?

markwyner
28 Nov 2011, 9:12 AM
Man, what a drag. I'll be referencing these this week. I, too, would love to see a new URL for these. Sencha folks, a 301 redirect would have been appropriate here. Any chance you can post the new URL for us?

Benmcmath, I did post a list of these earlier in this thread:

http://www.sencha.com/forum/showthread.php?127694-Is-There-a-Complete-List-of-SASS-Variables-for-the-Touch-Theme&p=583507&viewfull=1#post583507

It likely isn't complete right now but it's a good place to begin.

davidkaneda
29 Nov 2011, 1:13 PM
Redirect is in place, sorry about that! For the record: http://docs.sencha.com/touch/theme/

markwyner
29 Nov 2011, 1:54 PM
Thanks, David!

suzzer99
7 Aug 2012, 12:40 PM
I'm trying to figure out how to use the SASS variables exposed on the Sencha picker ($sheet-bg-color, $sheet-bg-gradient, etc.) but I can't find any examples. Are these properties something that I can specify in the JS code or do I do this in the SASS compiler?

rad1964rad
8 Oct 2012, 2:37 PM
Still a 404 error to the link!

29er
25 Oct 2012, 10:13 AM
still 404 error !
where is this resource now, thanks

alile
13 May 2013, 3:22 PM
if you look at resources/css-debug/sencha-touch.css there is a long list of comments at the beginning that is most helpful. not as helpful as it would be in proper documentation, but there it is.