valo theme - turn off focus border color

Hello got small problem with focus components… In attachment we can see blue border around menubar when component is focused. Can we turn off focus for just one component or all?

17723.png

Yes you can. You have to set these css rules:

border-color: #B1B1B1; box-shadow: 0px 1px 0px #F7F7F7 inset, 0px 1px 0px rgba(255, 255, 255, 0.1); to the -focus versions of the component.
so for textfield it would be v-textfield-focus for example. There probably is something similar for menubar. (Watch out as it might get overriden by default styles so specify the css class as specif to your component as possible or use !important.

For MenuBar focus does not work … i still see blue annoying border when focused component. (when using chrome)
Any other options?

I see. The style you could modify is:

.samplepanel.vaadintheme .v-menubar:focus:after, .v-overlay-container .v-menubar:focus:after { border-color: #BCBCBC !important; box-shadow: 0px 1px 0px #F7F7F7 inset, 0px 1px 0px rgba(255, 255, 255, 0.1) !important; } I would recommend defining a custom style name and make the descriptor more specific to avoid using !important;
The above code worked for me in the Sampler, it’s just css nothing scss-specific.

ehh for example focus:

mytheme .v-menubar:focus {
    outline: none;
}

for menubar if still not working… try

.v-menubar:focus:after {
           border-color:transparent;
           box-shadow:none;
    }

for all components you need to…

$v-focus-style: none;

Well, simplest way to remove blue border on focus is to set:

.v-menubar:after {
display: none;
}

I hope it will help to find easy solution for someone :slight_smile: