Vaadin Valo 主题：移除聚焦元素周围的边框
Vaadin Valo theme: remove border around focused elements
我正在开发基于 Valo 的 Vaadin 主题。默认情况下，Valo 在焦点元素周围添加边框。在我的主题中禁用此行为的最简单/首选方法是什么？
首选方法是编辑 Valo 主题 Sass variables, its easy and detailed info can be found in this 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;
在导入语句对我有用之前。
我正在开发基于 Valo 的 Vaadin 主题。默认情况下，Valo 在焦点元素周围添加边框。在我的主题中禁用此行为的最简单/首选方法是什么？
首选方法是编辑 Valo 主题 Sass variables, its easy and detailed info can be found in this 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;
在导入语句对我有用之前。