Vaadin Valo 主题 : remove border around focused elements

Question

我正在开发基于 Valo 的 Vaadin 主题。默认情况下，Valo 在焦点元素周围添加边框。在我的主题中禁用此行为的最简单/首选方法是什么？

Answer 1

首选方式是编辑 Valo 主题 Sass变量，其简单而详细的信息可以在这个Vaadin wiki article中找到.基本上，您制作的自定义主题继承自 vaadin Valo 主题并仅覆盖您感兴趣的变量。因此您可以仅覆盖字体颜色和大小的变量，而其他所有内容保持不变等。

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"; ...

您可能感兴趣的具体变量(来自 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;

编辑:实际工作代码

添加

$v-focus-style: none;

在导入语句对我有用之前。