Style setting for Form Layout

Hello,

I'm new to Vaadin and struggling to set Styles for different components/containers.  Please suggest me:

1) I dynamically create a FormLayout with 2 TextFields and
2) The form layout is enabled with Style named "DateRangeDatesViewStyle" (using formLayout.setStyleName("DateRangeDatesViewStyle")
3) I'm using mytheme which internally imports valo themes
4) I disabled margin using formLayout.setMargin( false ) as the valo Margin is 25px
5) Now, how do I set Style using mytheme.scss file?  I have mixin code and some styles for buttons, etc work.  
But I'm unable to set Margin for Form Layout in SCSS file.
The following HTML tag is produced in browser (Chrome):
<div class="v-slot v-slot-DateRangeDatesViewStyle">
    <div class="v-formlayout v-layout v-widget DateRangeDatesViewStyle v-formlayout-DateRangeDatesViewStyle v-has-width" style="width: 100%;">
        <table cellpadding="0" cellspacing="0" role="presentation" class="v-formlayout-spacing">
....

Do I need to use like this?
.v-slot-DateRangeDatesViewStyle {
   padding-top: 10px;
}

Thanks,

Ananth

No, actually this should be enough.

.DateRangeDatesViewStyle {
   padding-top: 10px;
}

But general convention is not to case the style names, but use kebab-casing, i.e.

formLayout.setStyleName("date-range-dates-view-style");

And then

.date-range-dates-view-style {
   padding-top: 10px;
}

(Pro tip about style naming: http://getbem.com/introduction/ )

Hi Tatu,

Thank you for your suggestion.

But no luck.  It did not work :(

1) The sequence of container(s) is below:
Tab --> Grid Layout --> 2nd Column --> Vertical Layout --> 1st Component is Combo box, 2nd Component is Form Layout

If I set Margin through code (as setMargin(true)) space is provided between components, but not giving me desired space.
Any suggestions?

2) In other UI/screens, for example, for a ComboBox, I see the computed style (in Chrome browser) looks like:
.mytheme .my-custom-style-name .v-filterselect [class*="input"]
So i created a style as .my-custom-style-name .v-filterselect [class*="input"] { color:blue} and this works fine.

But in case of (1), I don't see the style class name in the DIV tags even though I use formLayout or verticalLayout.setStyleName( "date-range-dates-view-style").  

Am I missing anything or is it because of Grid Layout as the top level container, am I facing all these problems?

Thank you,

Ananth