Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
v-loading-indicator-bar-height--wait
Hi,
Changing v-loading-indicator-bar-height--wait does not seem to do anything... However $v-loading-indicator-bar-height: does seem to work.
The hieght for --wait is set in the keyframe and overrides any other styling i place on it;
@keyframes v-progress-wait {
0% {
width: 90%;
height: 4px;
}
3% {
width: 91%;
height: 6px;
}
100% {
width: 96%;
height: 6px;
}
}
This is my code:
$v-loading-indicator-bar-height: 35px;
$v-loading-indicator-bar-height--wait: 35px;
Have anyone a solution for this?
Thanks in advance!
(Running vaadin version 7.6.1)
I think you may be setting the variables too late in your SCSS file. The heights in the keyframes should include both variables, $v-loading-indicator-bar-height as well as $v-loading-indicator-bar-height--wait, and I don't see "35px" anywhere in the keyframes in your post.
Can you confirm that you are setting them in your theme's scss file before the theme mixin definition? For example:
@import "../valo/valo.scss";
// SCSS Variable assignments go here
$v-loading-indicator-bar-height: 35px;
$v-loading-indicator-bar-height--wait: 35px;
@mixin mytheme {
@include valo;
// Other stuff goes here
}
-- AC