Vaadin Valo theme: remove border around focused elements

I am working on a Valo based Vaadin theme. Valo adds a border over lumped elements by default. What's the easiest / preferred way to disable this behavior in my theme?

+3


source to share


1 answer


The preferred way is to change the Valo Sass variables , its easy and detailed information can be found in this waadin wiki article . Basically you create your own theme that inherits from vaadin Valo theme and overrides only the variables you are interested in. This way, you can only override the variable for colors and font sizes and leave everything else unchanged, etc.

To create your own version of the Valo theme, start by creating a new custom theme for your project. See Creating a theme with Sass to do this.

Change the theme import and add from deer to Valo:

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

      

To change the look of your theme, define Sass global variables before importing:

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

      

Specific variables you might be interested in (from The Book of Vaadin ):

$v-focus-color


Focus outline / border color for focusable elements in the application. Calculated by default. Can be any color CSS value.

$v-focus-style


The focus style for focused elements in the application. The syntax is the same as for CSS box-shadow, for example. $v-focus-style: 0 0 0 2px orange;

You can also specify its color value only, in which case only the component border color is affected and no other outline is drawn. For example.$v-focus-style: orange;



Edit: actual working code

Adding

$v-focus-style: none;

      

before the import statement worked for me.

+9


source







All Articles