3

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?

herman
  • 11,740
  • 5
  • 47
  • 58

1 Answers1

8

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.

cfrick
  • 35,203
  • 6
  • 56
  • 68
Vojtech Ruzicka
  • 16,384
  • 15
  • 63
  • 66
  • 1
    I already have the theme as described (see the question: the theme I'm working on is based on Valo). I did know about `$v-focus-color`, but somehow I missed `$v-focus-style`. I'll try using `$v-focus-style: none;` to see if that removes the border. – herman Apr 29 '15 at 10:48
  • @herman it won't. it must be a color or a list. so your best bet would be to set it to the same color the border already is. – cfrick Apr 29 '15 at 11:09
  • @herman it did not for me. care to add the actual working code to the answer then? – cfrick Apr 29 '15 at 11:32
  • 1
    @cfrick I just did. Since you said it must be a color, maybe you were using `$v-focus-color` instead of `$v-focus-style` ? – herman Apr 29 '15 at 12:12
  • @herman thanks (i pushed it through). no i tried `none` with the style and tracking along the code there i had the impression, that the sass compiler would not be able to read it as color. so i ended up with the bevel (the glow around the input) removed but the border color still changing on focus. this all was with a vanilla valo theme. – cfrick Apr 29 '15 at 12:32