Hi Piotr,

Your advice is no longer true (was true until recently).  Carlos can move
the visual styling from the Button Type selectors in defaults.css to
basic.css.

I have seen some surprising defaults in the browsers, like border-width
defaulting to 4px.  So a simple test is to not use Royale at all and
manually create some HTML that loads the SVG and see how thick the strokes
are.  I primarily use Safari, and can debug the styles to see that the
browser defaults are dictating border-width, for example.

Regarding the "display" style when examining nodes, that is how some
layouts works.  If you have a better idea of how to force every element to
be on its own line, let us know what that is.  I couldn't think of any
other way.  If you use HorizontalLayout, I think we use display:
inline-block".

Other layouts can be written to use FlexBox, or CSS Grid and set other
properties to dictate one column of children, but for a generic Div that
can contain Spans, setting display on each child was the only way I could
think of.  Definitely open to other ideas.

Same for Gap.  I couldn't think of any other way to control the spacing
without using absolute positioning.  Open to other ideas here as well.

Now if you know that all of your children are already Divs and thus
blocks, then you can avoid using a layout at all.  And you can set margins
on each child to get the spacing you need.

HTH,
-Alex


On 3/6/18, 6:31 AM, "Piotr Zarzycki" <piotrzarzyck...@gmail.com> wrote:

>If you are extending Basic components, you got styles from there. If you
>don't need those styles you will have to do one of the two things in my
>opinion:
>
>1) Exclude basic styles as we did it in MDL
>2) Override some of them using theme/your css file style
>
>
>
>2018-03-06 15:26 GMT+01:00 Carlos Rovira <carlosrov...@apache.org>:
>
>> In fact, If I remove the styles in basic, I end with some visual
>>changes in
>> JewelExample, like SVG strokes more thick in the buttons. Don't know
>> exactly why this is happening, but it's clear that styles from basic
>> component should be exactly 0, and then if people wants basic styles
>>they
>> should use basic theme as a dependency.
>>
>> I should have a 0 styles start so Jewel styles don't be affected by any
>> other inherit rule
>>
>> 2018-03-06 15:16 GMT+01:00 Carlos Rovira <carlosrov...@apache.org>:
>>
>> > Hi,
>> >
>> > I want to share some things that affect my work on Jewel UI set and
>>thing
>> > we should fix:
>> >
>> > 1.- Get rid of "style" configurations
>> >
>> > For example, I'm getting this output for some buttons
>> >
>> > <button type="button" class="TextButton" style="margin: 0px; display:
>> > block;">Some</button>
>> >
>> > <button type="button" class="TextButton" style="margin: 10px 0px 0px;
>> > display: block;">Button</button>
>> >
>> > I think display: block; should be part of the basic.css
>> >
>> > In the case of margins, I think this come from the
>> >
>> > <js:VerticalLayoutWithPaddingAndGap gap="10"/>
>> >
>> > In this case, I think would be better to affect some CSS to left the
>>HTML
>> > as clean as possible
>> >
>> > For me the output should be:
>> >
>> > <button type="button" class="TextButton">Some Label</button>
>> >
>> >
>> > 2.- When Alex did changes to basic css and remove "*" I check that
>> > textfield was behaving correctly, but I think button is getting some
>> styles
>> > that shouldn't be in my app
>> >
>> >
>> > Button {
>> >         border: 1px solid #808080;
>> >         padding: 4px;
>> >         background-color: #f8f8f8;
>> >         margin: 0px;
>> >         border-radius: 2px;
>> > }
>> >
>> >
>> > Button:hover {
>> >         border: 1px solid #808080;
>> >         padding: 4px;
>> >         background-color: #e8e8e8;
>> > }
>> >
>> >
>> > Button:active {
>> >         border: 1px solid #808080;
>> >         padding: 4px;
>> >         background-color: #d8d8d8;
>> > }
>> >
>> > Why this styles are still there? can I remove them or put in other
>>place?
>> >
>> >
>> > --
>> > Carlos Rovira
>> > 
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%
>>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7Cb99dffe4d2c74fcf84ae08
>>d5836efe0d%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63655943508703371
>>1&sdata=Qzp6LaQZfoxHUzLZ9H4aiX3VvHBoqjQjhSSXq0Vaipg%3D&reserved=0
>> >
>> >
>>
>>
>> --
>> Carlos Rovira
>> 
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%
>>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7Cb99dffe4d2c74fcf84ae08
>>d5836efe0d%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63655943508703371
>>1&sdata=Qzp6LaQZfoxHUzLZ9H4aiX3VvHBoqjQjhSSXq0Vaipg%3D&reserved=0
>>
>
>
>
>-- 
>
>Piotr Zarzycki
>
>Patreon: 
>*https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.patr
>eon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%7Cb99dffe4d2c74f
>cf84ae08d5836efe0d%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365594350
>87033711&sdata=H1QgiT4UZ13qF6laT%2B0GRsLadJy0XhCCwr8E%2FscrC2w%3D&reserved
>=0
><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.patr
>eon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%7Cb99dffe4d2c74f
>cf84ae08d5836efe0d%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365594350
>87033711&sdata=H1QgiT4UZ13qF6laT%2B0GRsLadJy0XhCCwr8E%2FscrC2w%3D&reserved
>=0>*

Reply via email to