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

Question

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

Answer 1

首选方法是编辑Valo主题Sass变量,其简单详细的信息可以在这个Vaadin wiki文章中找到.基本上你创建了自定义主题,它继承了vaadin Valo主题,并且只覆盖你感兴趣的变量.所以你只能覆盖字体颜色和大小的变量,并保持其他一切不变等.

要创建自己的Valo主题变体,请首先为项目创建新的自定义主题.请参阅使用Sass创建主题教程来完成这项工作.

更改您的主题导入并包括从Reindeer到Valo:

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

要修改主题outlook,请在import语句之前定义任何全局Sass变量:

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

您可能感兴趣的具体变量是(来自Vaadin书):

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

$v-focus-style
应用程序中可聚焦元素的焦点轮廓样式.语法与CSS box-shadow相同,例如, $v-focus-style: 0 0 0 2px orange;您也可以将其指定为颜色值,在这种情况下,只会影响组件的边框颜色,并且不会绘制其他轮廓.例如 $v-focus-style: orange;

编辑:实际工作代码

添加

$v-focus-style: none;

在导入声明为我工作之前.