Search code examples
sassvaadin7vaadin-valo-theme

Changing Vaadin Valo theme variables for menu bar

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

Solution

  • 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;
}