Themes - Impossible .v-app Theming

Vaadin 6 / 7 / 8
1

Hello,

I’ve tried to modify the v-app CSS class (to change the application’s font) but it seems that this is not possible with the SASS Theming.
As found somewhere in the documentation:


@import "../reindeer/reindeer.scss";

@mixin myTheme {
   @include reindeer;
   .v-app {
       background-color: yellow;
   }
}

The resulting CSS is


.myTheme .v-app {
    background-color: yellow;
}

This doesn’t work because the actual HTML element gets its style from the following class in the original theme (as checked with Firebug):


.myTheme.v-app {
    background: none repeat scroll 0 0 #F5F5F5;
}

The difference is the space in between “.mytheme” and “.v-app”.
How can I achieve this?

2

You can use & which is the parent selector, so
&.v-app {
height: 100%;
}

inside your theme will become
.myTheme.v-app {
height: 100%;
}

3

Thanks a lot. That’s it!