transform and translate with vaadin

Hello,

I’m still learning development in Vaadin and need some help.

I’m trying to use this line on my “styles.scss”: @include transform(translateX(-100%));

I’m following a tutorial that uses this line of code but it is said that this is a basis of Vaadin library functionality, however I get the following error when the project is compiled:

[ERROR]
java.lang.Exception: Mixin Definition: transform not found
[ERROR]
at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixins(MixinNodeHandler.java:40)
[ERROR]
at com.vaadin.sass.internal.visitor.MixinNodeHandler.traverse(MixinNodeHandler.java:33)
[ERROR]
at com.vaadin.sass.internal.tree.MixinNode.traverse(MixinNode.java:117)
[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:271)
[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:280)
[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:280)
[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:280)
[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:187)
[ERROR]
at com.vaadin.sass.SassCompiler.main(SassCompiler.java:57)

Leveraging the topic, in my code the “$vaadin-scale” variable seems not to work.

Thanks in advance! =)WebRep currentVote noRatingnoWeight

Hi Sofia,

It seems like you’re trying to use mixins and variables that are not yet in the core. The built-in transform mixin, for instance, is going to be included in the upcoming Valo theme, scheduled currently for 7.3 sometime this summer. Also, the $vaadin-scale variable is currently called $v-unit-size, and behaves slightly differently than how it did when it was called vaadin-scale.

If you want to check out the current progress of the Valo theme, head over to the
GitHub repo
and start poking around.

Hello again,

Thank you for quick response!

To better specify some details, I’m using Vaadin 7 with the plugin for Eclipse, with Maven. I have been following this tutorial (https://www.youtube.com/watch?v=YGar0pVeiz4), but with some minor difficulties since some things do not work the same way as shown. (Sorry, I think I was not clear enough in the first intervention.)

Regarding $v-unit-size variable, like the $vaadin-scale variable not seem to work as expected. I have worked around this issue by using round values ​​(10px or 10% depending on the case).

For the other question, I will take a look at Valo theme like recommended. For now I will try to work around the issue otherwise.

Thanks once again!

Hi Sofia,

I was actually pretty sure that was the video you were watching. It was initially only held as an internal training, but we decided later that it would be valuable to offer it to everyone.

But the code examples in the video are done using an early version of the Valo theme, which wasn’t published anywhere, so that’s why you’re having the errors. What Vaadin theme are you using for your application theme (i.e. what are you extending/inheriting)?

Hello again,

First of all I hope you had a good weekend.

Yes, I realized that the theme used was not available, so in my styles.scss I used the reindeer theme:

@ import “/ reindeer / reindeer.scss…”;
@ include reindeer;

For animation on the menu, I will try now to use the Animator add-on that I think that do the same effect.

Leveraging the response topic, another question related to the Demo is that I was unable to implement the MyVaadinServlet. I get an error on the following line of code:

response.getDocument().head().appendChild(new org.jsoup.nodes.Element(Tag.valueOf(“meta”), “”, attr));

I do not know if there is something else behind allowing operation of this servlet, or whether it should even be public. Also, do not quite understand the importance of using this instead of VaadinServlet used by default.

Thanks!

Is there any more information available Jouni and is the source code on the web anywhere?