v-loading-indicator-bar-height--wait

Thomas Älgevik

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)

Alejandro C De Baca

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

Thomas Älgevik

No i did not, that solved it!

Thanks you!!

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

v-loading-indicator-bar-height--wait

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.