Question

我想改变valo中的绿色＆＃34;友好＆＃34;按钮，但我失败了。我按照描述做了 Vaadin Upload Button, CSS to change its color (same styles as Button)? 但我想我错过了什么。

从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：自定义按钮颜色

1 个答案: