Vaadin 7 beta 10 theme inheritance not working

Flow
1

I’m trying to inherit from a theme in Vaadin 7 beta 10 and it doesn’t load CSSs correctly.


13:30:04:173 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
[...]

13:30:04:264 CSS files may have not loaded properly.

I’m using @Theme annotation in UI class


@Theme("testtheme")
public class MyVaadinUI extends UI {
	@Override
	protected void init(VaadinRequest request) {
		final VerticalLayout layout = new VerticalLayout();

and @import in VAADIN/themes/testtheme/styles.css


@import url(../runo/styles.css);

Is there something I’m missing? I’ve reproduced the issue with the vaadin-archetype-application 7.0.0.beta10 (see attached file).

Thank you.
12684.zip (5.32 KB)

2

I face the same problem, no way to mix my styles with any of the existing styles.

The root element of the generated page is referencing my theme

But since the theme styles are prefixed by the theme name it doesn’t apply to the page.
Forcing the parent theme (via firebug) is making the rendering ok.

3

Please, should I file a bug or is there something we are doing wrong?

Thank you.

4

Hi,

I noticed that the old css themes had been renamed with beta10, try this:

@import url(../reindeer/legacy-styles.css);

Also, check out this wiki page on
themes in Vaadin 7

5

Hm, I also inherited from reindeer and did’t add anything to my css file but reindeer import. And everything crashed. I tried legacy-styles.css and everything started working correctly. If now I change some css classes in my styles.css file, won’t be there any collisions between css and sass?

6

Hoping to add to the discussion… Not necessarily in a good way —

Here is a prototype of what I have tried to get working (7 beta 10 in Eclipse JUNO)

.scss:


@import "../reindeer/reindeer.scss";
@import "./<theme>-link/<theme>-link.scss";

@mixin <theme>{
  /* Include all the styles from the reindeer theme */
  @include reindeer;
  @include <theme>-link;
}

-link.scss:

@mixin <theme>-link($primaryStyleName : v-link) {

.#{primaryStyleName} a:link span {
	color: #175A87;
	text-decoration: none;
}

.#{primaryStyleName} a:visited span {
	color: #175A87;
	text-decoration: none;
}

.#{primaryStyleName} a:hover span {
	color: #1E9BE0;
}

}

When I try to run, I get the following error:

Is there something that I am missing from running in Eclipse? I tried to follow the same deployment/configuration from the reindeer and other themes.

Any thoughts?

Thanks,
Evan

7

Was this already answered in another thread?

If I remember correctly, using
.#{$primaryStyleName}
 instead of
.#{primaryStyleName}
 probably helps. If it doesn’t, please test with the latest beta and report if there are still problems.

8

I am also having the same problem with 7.0.0.rc2. I think this is a bug.

If not, could someone please help explain what is going on here? Note the following test:

@Theme("mytheme")
public class MyVaadinUI extends UI {
    ...
}

In my Maven project:


src/main/resources/VAADIN/themes/mytheme/styles.scss
:

@import "mytheme.scss";

.mytheme {
    @include mytheme;
}


src/main/resources/VAADIN/themes/mytheme/mytheme.scss
:

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

@mixin mytheme {

    @include reindeer;

    .v-app {
        background: blue;
    }

}

When running the app, the background is NOT blue. Looking at the theme’s generated
styles.css
 file, you see plenty of different
.mytheme.v-app
 selectors, but none that include my background override.

Using Chrome’s developer tools, I set the following value manually:

.mytheme.v-app { color: blue; }

And Chrome showed the blue background.

It appears that the
.v-app
 style in
mytheme.scss
 is not being applied at all.

Should I file a bug?

Also, is there a workaround for this?

Thanks,

Les

9

Thanks to Jouni Koivuviita’s reply on this page:


https://vaadin.com/wiki/-/wiki/Main/Creating%20a%20theme%20using%20sass

the following fixed my issue:

changing src/main/resources/VAADIN/themes/mytheme/styles.css from this:

@import "mytheme.scss";

.mytheme {
    @include mytheme;
}

to this:

@import "mytheme.scss";
@include mytheme;

worked.

10

Actually, I’m not so sure that what I did is a recommended general purpose solution. It worked in my case because I’m writing a single app - but in a more-than-one-app-per-web-page scenario (e.g. portlets), I think this approach will cause problems since one in-page app could override something another in-page app expects.

But if going back to the previous technique, the
.v-app
 background color won’t change.

Is this a bug in Vaadin 7.0.0.rc2 then? Or am I missing something?

Thanks,

Les

11

Hi,

The problem is in your SCSS syntax. Both the .mytheme and .v-app classes are set on the same element, but when you use the following SCSS


.mytheme {
.v-app {
}
}

if will produce the following output


.mytheme .v-app {
}

See how the .v-app element would need to be a descendant of the .mytheme element? That’s why it doesn’t work.

To fix it, you need to use the Sass parent selector (&):


.mytheme {
&.v-app {
}
}

which will produce the wanted output:


.mytheme.v-app {
}

without the space between the two selectors.

I hope this solves your issue! :slight_smile:

12

Jouni, this was a helpful explanation. Thanks so much!

13

It seems to me that the old way of using themes is broken. I had to switch to using the SassCompiler in order to get mine to work properly, for the same reason that you’re having a problem (which is that the imported css styles are not added to the base div). If you compile your styles.css using the SassCompiler, it will import all of the reindeer styles and then replace “reindeer” with your theme name, essentially re-making reindeer with a new name (your name) plus adding in whatever styles you want.

To compile from .scss to .css, I created the following two files in my VAADIN/themes/mytheme directory:

mytheme.scss

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

@mixin mytheme {
	@include reindeer;

        //  Your styles...
}

styles.scss

@import "vuitheme.scss";

.mytheme {
	@include vuitheme;
}

Then run this command from the same directory:

java -cp ‘…/…/…/WEB-INF/lib/*’ com.vaadin.sass.SassCompiler styles.scss styles.css

(Assuming java is on your path, and WEB-INF/lib contains the JAR files vaadin-theme-compiler, vaadin-themes, and sac)

I also had to download flute-1.3.jar and dump it in the WEB-INF/lib directory before java would stop complaining about it.