Style sub-theme and CSS 'tweaks'

Description

Define style 'tweaks' new style sub-theme, or CSS classes to augment or override definitions in the style.

Discussion

When working with version 3 and above styles (these include iOS7, AndroidLight, AndroidDark, Alpha), you can define style 'tweaks'. Tweaks are adjustments to the style definition that are stored in a separate file in the Web Project folder. The adjustments include new sub-themes and CSS classes and changes to existing sub-themes and CSS classes.

Normally when you edit a system style (such as 'Alpha'), a local copy of the style is saved in the Web Project folder and your edits are applied to the local copy of the style.js and style.sass files. The disadvantage of this approach is that if, in a future version of Alpha Anywhere, the style is changed (to fix a bug or to add support for a new control type), the changes made to the system version of style.js and style.sass will not be reflected in the local copy of these files that you created when you edited the style. You would need to manually edit the system copy of these files and copy changes to the local copy of these files. This would be complicated because it would not be easy to find the parts of the file that had changed.

On the other hand, since style tweaks are stored in a separate file, there are no local copies of the style files you are tweaking. Therefore if a future version of Alpha Anywhere updates the style, the tweaks are applied to this updated version of the style and your tweaked style will automatically have all of the changes made to the system style.

Style tweaks for a particular style are stored in this file:

<web project folder>\css\StyleTweaks\<style name>\styleTweaks.json

To define style tweaks, click the smart button for the Style sub-theme and CSS 'tweaks' property.

If you customize the style colors and fonts using the smart field for the Customize style color and fonts property, the changes to the SASS variables that define the style's colors and fonts are also stored in the style's Tweaks file.

You can also adjust the CSS and sub-themes in a style using these properties:

However, the adjustments made here apply ONLY to the component you are editing, whereas style 'tweaks' apply to all components in the Project that use the tweaked style.