Supported Properties

Standard CSS Properties

1. padding (and variants)

2. margin (and variants)

3. border (and variants)

4. border-radius

5. background

6. background-color

7. background-repeat

8. background-image

9. font

10. font-family

11. font-style

12. font-size

13. @font-face

14. color

15. text-align

16. text-decoration(Usage below)

17. opacity

18. box-shadow

19. width (only used for generating background-images and borders)

20. height (only used for generating background-images and borders)

Custom Properties

1. cn1-source-dpi - Used to specify source DPI for multi-image generation of background images.

2. cn1-background-type - Used to explicitly specify the background-type that should be used for the class.

3. cn1-9patch - Used to explicitly specify the slices used when generating 9-piece borders.

4. cn1-derive - Used to specify that this UIID should derive from an existing UIID.

CSS Property Reference

This section will contain more in-depth coverage of supported CSS properties and available values. It is not currently comprehensive as I need time to populate it.

text-decoration

Available Values

underline	Underlines text. E.g. text-decoration: underline;
overline	Overlines text. E.g. text-decoration: overline;
line-through	Strikes through text. E.g. text-decoration: line-through;
none	No text decoration. E.g. text-decoration: none;
cn1-3d	3D text. E.g. text-decoraton: cn1-3d;
cn1-3d-lowered	3D lowered text. E.g. text-decoration: cn1-3d-lowered;
cn1-3d-shadow-north	3D text with north shadow. E.g. text-decoration: cn1-3d-shadow-north;

background

The background property supports most standard CSS values for setting the background color, or background image.

Gradients

Both the linear-gradient and radial-gradient CSS functions are fully supported by this library. If Codename One is capable of rendering the gradient natively then the theme resource file generated will only include encoded parameters for the gradients. If the gradient is not supported by Codename One, then the module will fall back to an image background which it generates at compile-time. It is generally preferable to try to stick to gradients that Codename One supports natively. This will result in a smaller theme resource file since it doesn’t need to generate any images for the gradient.

Natively Supported linear-gradient Syntax

In order for a linear gradient to be natively supported by Codename One, the following properties must be met:

1. The gradient function has exactly two color stops.

2. The gradient is either perfectly horizontal or perfectly vertical. (e.g Direction can be 0deg, 90deg, 180deg, or 270deg.

Examples

MyContainer {
    background: linear-gradient(0deg, red, blue);
}

TODO: Add screenshot

MyContainer {
    background: linear-gradient(to top, red, blue);
}

TODO: Add screenshot

MyContainer {
    background: linear-gradient(90deg, #cccccc, white);
}

TODO: Add Screenshot

MyContainer {
    background: linear-gradient(to left, rgba(255, 0, 0, 1.0), #cccccc);
}

TODO: Add Screenshot

Unsupported linear-gradient syntax

The following are some examples of linear gradients that aren’t supported natively by Codename One, and will result in a background image to be generated at compile-time:

MyComponent {
    background: linear-gradient(45deg, red, blue);
}

TODO: Add Screenshot

The above example is not supported natively because the gradient direction is 45 degrees. Codename One only supports 0, 90, 180, and 270 degrees natively. Therefore this would result in a background image being generated at compile-time with the appropriate gradient.

MyComponent {
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.5), blue);
}

TODO: Add screenshot

The above linear-gradient is not supported natively because the stop colours have different transparencies. The first color has an opacity of 0.5, and the second as an opacity of 1.0 (implicitly). Therefore, this would result in the gradient being generated as an image at compile-time.

Natively Supported radial-gradient Syntax

TODO

cn1-background-type

It also supports some special Codename One values, which are identifiers with a "cn1-" prefix. The following special values are available:

cn1-image-scaled	TODO
cn1-image-scaled-fill	TODO
cn1-image-scalled-fit	TODO
cn1-image-tile-both	TODO
cn1-image-tile-valign-left	TODO
cn1-image-tile-valign-center	TODO
cn1-image-tile-valign-right	TODO
cn1-image-tile-halign-top	TODO
cn1-image-tile-halign-center	TODO
cn1-image-tile-halign-bottom	TODO
cn1-image-align-bottom	TODO
cn1-image-align-left	TODO
cn1-image-align-right	TODO
cn1-image-align-center	TODO
cn1-image-align-top-left	TODO
cn1-image-align-top-right	TODO
cn1-image-align-bottom-left	TODO
cn1-image-align-bottom-right	TODO
cn1-image-border	TODO
cn1-none	TODO
cn1-round-border	TODO
cn1-pill-border	TODO