2

I'm having trouble using valo and its API to change one variable in the menubar. I just want v-font-weight to be 600px. I guess that I don't understand the API and what component to remove.

This is my scaled down attempt to do this in styles.scss.

@import "valo";
$v-included-components: remove($v-included-components, menu-item-style);

.myvalo {
  @include valo;

  $v-font-weight: 600;
  @include valo-menubar-menuitem-style();
}

When I inspect a menu bar item the styles applied looks like this:

styles applied

superbAfterSemperPhi
  • 1,292
  • 1
  • 14
  • 27

2 Answers2

2

Using

$v-included-components: remove($v-included-components, menu-item-style);

won't work because menu-item-style is not a component that you can remove from a valo theme. Valo components' list is declared in $v-included-components variable in _variables.scss file. You can check it on vaadin's github or on Valo API site. The closest component to menu-item-style is menubar.

You can do something like that:

@import "valo";
$v-included-components: remove($v-included-components, menubar);

.myvalo {
    @include valo;

    $v-font-weight: 600;
    @include valo-menubar;
}

but it will set font weight to 600 for the whole MenuBar component.

To set it only on menu bar item I would use simple css rule:

.v-menubar-menuitem-caption {
    font-weight: 600;
}
mczerwi
  • 490
  • 2
  • 11
  • That worked great. Thank you. I knew that I was missing something and the v-included-components list in _variables.scss is exactly what I was missing. – superbAfterSemperPhi May 01 '17 at 16:04
0

I think this should made it as a workaround:

.myvalo {
  @include valo;

  .valo-menu-item-caption {
        font-weight: 600;
  }
}

Although $v-font-weight is used by valo-menu-item-style, so it should made the job.

wirebug
  • 78
  • 1
  • 2
  • 7
  • I'm trying this but can't see it working yet. It might be due to my implementation but I don't ever see the valo-menu-item-caption applied to the menu. I added a screen shot of the styles applied to a menu bar item to this issue – superbAfterSemperPhi Apr 19 '17 at 14:20
  • I don't know how much you are into sass, so I don't mean this rude, but do you compiled ( https://vaadin.com/docs7/-/part7/framework/themes/themes-compiling.html) your sass. Nevertheless it looks all like a wrong configuration to me, as well. – wirebug Apr 25 '17 at 13:35