Vaadin Valo主题：去除聚焦元素周围的边框

Question

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

Answer 1

首选方式是修改Valo主题Sass变量，可在此Vaadin wiki article中找到简单明了的详细信息。基本上你创建了自定义主题，它继承了vaadin Valo主题，并且只覆盖你感兴趣的变量。所以你只能覆盖字体颜色和大小的变量，并保持其他一切不变等。

  

要创建自己的Valo主题变体，请先创建一个   您项目的新自定义主题。请参阅使用Sass创建主题   完成这项工作的教程。

     

更改您的主题导入，包括从Reindeer到Valo：

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

     

要修改主题展望，请定义任何   导入语句之前的全局Sass变量：

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

您可能感兴趣的特定变量（来自Book of Vaadin）：

  

$v-focus-color
  焦点轮廓/边框的颜色可聚焦   应用程序中的元素。默认情况下计算。可以是任何CSS颜色   值。

     

<强> $v-focus-style
  可聚焦的焦点轮廓的样式   应用程序中的元素。语法与CSS相同   盒子阴影，例如$v-focus-style: 0 0 0 2px orange;你也可以   将其指定为颜色值，在这种情况下仅指定边框颜色   组件的影响，并没有绘制其他轮廓。例如。   $v-focus-style: orange;

编辑：实际工作代码

添加

$v-focus-style: none;

在导入语句为我工作之前

。