CSS tags for valo menu

Flow
1

Hi

Trying to customize the valo menu, and have so far sucess doing the things I wanted.

However, in a customization of the valo “dark” subtheme, I cannot get rid of the borders around the drop-down menu. I can remove the border from the menubar itself, but not from the dropped down list of submenu-items. Could anyone enlighten me about the correct css tag for this. Just to try to get the border:none into every possible (to mu knowledge) tag I have tried:

.v-menubar, .v-menubar .v-submenu, .v-menubar .v-menubar-menuitem, .v-menubar-submenu .v-menubar-menuitem {
border:none !important;
background:$v-background-color;
}

but the “box” around the drop-down menu, still persists.

By the way: is t possible to find a full documentation for the css tags for valo? (so frustrating to try to guess the right one, and the book-of-vaadin doen’t really make things clearer).

Thanks for all help.

2

Just looked at the Valo dark theme demo. Are you talking about the box-shadow? If so, try to remove that from the .v-menubar-popup.

3

Use
$v-overlay-border-width
 variable to control that. This does affect all overlay elements then, including combobox and date field popups as well.

4

Thanks, Jouni! That did the trick.