MenuBar.MenuItem.Checked background

Flow
1

Hi,

How can I set custom background to items in checked state in menubar?
I have MenuBar without any submenus, with items set to checked on click:

                for(MenuItem menuItem: menuBar.getItems()) {
                        menuItem.setChecked(false);
                }
                selectedItem.setChecked(true);

I want to set custom backgroud color for checked item. I tried this:

.v-menubar-menuitem-checked { background-color: #4ba5ff; background-image: linear-gradient(to bottom, #51acff 2%, #4296f4 98%); } In firebug it seems that background-color is set, background-image is not, and both are overwritten somewhere.

Thanks!

2

I’ve answer to my own question:

.v-menubar > .v-menubar-menuitem-checked  {
    background-color: #4ba5ff;
    background: -webkit-linear-gradient(top, #51acff 2%,  #4296f4 98%);
    background: -moz-linear-gradient(top, #51acff 2%,  #4296f4 98%);
    background: -ms-linear-gradient(top, #51acff 2%,  #4296f4 98%);
    background: linear-gradient(to top, #51acff 2%,  #4296f4 98%);
}
3

If you’re using Valo, you can use Bourbon’s linear-gradient mixin so that you don’t have to write all those vendor prefixes.