Hi Warren,
are you talking about Basic or Jewel List.
I think the first one doesn't have any template to follow so it's just
about doing low level CSS over the html tags.
In the case of Jewel you have a good example of how to change the look and
feel of components in the TodoMVC example in our repo [1]
It's using SASS that will be like to use AS3 over JS, just make you have
better separation, structure and organization and many other
advantages like functions, mixings, and more.
About how to customize visuals in Jewel List, you should start from Jewel
Theme List SASS file [2]
In theme we have all the style rules that should change (in Jewel there's
another CSS _list.sass file, but that's structure and things that you
should not change (like position, display, ...)
You can always use standard CSS in that case you should go to the compiler
CSS here [3]
In your CSS you can add your own rules that will be added to the final CSS
by the royale compiler instead of the theme default.
For example if you have:
.jewel.list {
color: #808080; }
and want the color to be red, in your CSS file you add:
.jewel.list {
color: #FF0000; }
For item renderers you must use .jewel.item and override or add rules
For example for hoover color:
.jewel.item.primary.hovered {
background: #3CADF1;
}
(search for more rules near this one for selected, active, and more)
About padding you can use in your renderer the bead <js:Padding/>
depending on the layout bead you use in the renderer you can have more
options to distribute items, but that use to be tied to some horizontal or
vertical layout, check more variables in the bead code or with code
intelligence in your ide, also you can launch the list of values in the IDE
(a least VSCode supports that with CTRL+SPACE)
HTH
[1]
https://github.com/apache/royale-asjs/blob/develop/examples/crux/todomvc-jewel-crux/src/main/sass/_global.sass
[2]
https://github.com/apache/royale-asjs/blob/develop/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
[3]
https://github.com/apache/royale-asjs/blob/25bdb2d5dbe7b2ec1a8f25f5f9c5b78f7a3243e4/frameworks/themes/JewelTheme/src/main/resources/defaults.css#L865
El mié., 21 oct. 2020 a las 22:20, wkoch (<warren.r.k...@boeing.com>)
escribió:
> I'm trying to do some basic CSS styling on an org.apache.royale.html.List
> and
> can't seem to get where I need to -- mostly because I'm not very good at
> CSS. Here are my list questions in the hopes some kind soul will save me.
>
> How do I control the item color when a user hovers over it?
>
> How do I control the color of a selected item?
>
> Is padding the only way to space the list items from the left border?
>
> Are the controls the same for an org.apache.royale.html.DropDownList class?
>
>
>
> --
> Sent from: http://apache-royale-users.20374.n8.nabble.com/
>
--
Carlos Rovira
Apache Member & Apache Royale PMC
*Apache Software Foundation*
http://about.me/carlosrovira
