Vaadin 8：自定义按钮颜色

Question

我想通过 valo "friendly" 按钮更改绿色，但我失败了。我按照中的描述做了但我想我错过了什么。

从styles.css我复制了

.mytheme .v-button-friendly {
height: 37px;
padding: 0 16px;
color: #eaf4e9;
font-weight: 400;


border-radius: 4px;
border: 1px solid #227719;
border-top-color: #257d1a;
border-bottom-color: #1e6b15;
background-color: #2c9720;
background-image: -webkit-linear-gradient(top, #2f9f22 2%, #26881b 98%);
background-image: linear-gradient(to bottom,#2f9f22 2%, #26881b 98%);
-webkit-box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}

到 mytheme.scss 并且只是更改了颜色。 mytheme.scss现在看起来如下：

@import "../valo/valo.scss";

@mixin mytheme {
   @include valo;

.v-button-sgcgreen {
height: 37px;
padding: 0 16px;
color: #006666;
font-weight: 400;


border-radius: 4px;
border: 1px solid #227719;
border-top-color: #257d1a;
border-bottom-color: #1e6b15;
background-color: #006666;
background-image: -webkit-linear-gradient(top, #2f9f22 2%, #26881b 98%);
background-image: linear-gradient(to bottom,#2f9f22 2%, #26881b 98%);
-webkit-box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}
}

并将其添加到 styles.css 文件的末尾 .mytheme .v-button-sgcgreen {....}

我将按钮的样式设置为

Button showAllProbesBtn = new Button("Show all");
showAllProbesBtn.addStyleName("sgcgreen");

但是按钮是默认的灰色，没有指定的颜色。

我错过了什么？感谢您的帮助！

编辑：

看来我做的是对的，就是没有直接显示出来。虽然我做了几次 Maven 全新安装并重新启动 Tomcat，但只有在我开始更改代码中的其他内容后才会出现正确的颜色。

样式缓存在哪里？我需要做什么才能在 Eclipse 和 Chrome 中立即看到样式更改？

Answer 1

我建议您更改 Valo 变量 v-friendly-color（参见 Valo theme doc）。例子 mytheme.scss:

// overwrite Valo variables
$v-friendly-color: #0000F0;

// Import valo after setting the parameters
@import "../valo/valo";

@mixin goidentity {
    @include valo;
}

Valo 主题随后将采用您设置的颜色。无需弄乱 CSS 样式。但是，我不知道这个颜色变量是否在主题的其他地方使用过。所以这可能会影响其他样式，而不仅仅是友好按钮。

Vaadin 8：自定义按钮颜色

Vaadin 8: Customize button color

vaadin8