Vaadin Valo theme: remove border around focused elements

Question

I'm working on a Vaadin theme based on Valo. Valo adds a border around focused elements by default. What's the easiest / preferred way to disable this behaviour in my theme?

Answer 1

Preferred way is to edit Valo theme Sass variables, its easy and detailed info can be found in this Vaadin wiki article. Basically you make your custom theme which inherits from vaadin Valo theme and override only variables you are interested in. So you can override only variable for font colors and sizes and leave everything else unchanged etc.

To create your own variation of the Valo theme, start by creating a new custom theme for your project. See the Creating a theme using Sass tutorial to get that done.

Change your theme import and include from Reindeer to Valo:

@import "../valo/valo";
.my-theme {
  @include valo; 
} 

To modify the theme outlook, define any of the global Sass variables before the import statement:

$v-background-color: #777;
@import "../valo/valo"; ...

Specific variables that might interest you are (from Book of Vaadin):

$v-focus-color
The color of the focus outline/border for focusable elements in the application. Computed by default. Can be any CSS color value.

$v-focus-style
The style of the focus outline for focusable elements in the application. The syntax is the same as for CSS box-shadow, e.g. $v-focus-style: 0 0 0 2px orange; You can also specify it to just a color value, in which case only the border color of the components is affected, and no other outline is drawn. E.g. $v-focus-style: orange;

Edit: the actual working code

Adding

$v-focus-style: none;

before the import statement worked for me.