Vaadin 上传按钮，CSS 更改其颜色（与按钮样式相同）？

Question

Vaadin 7.6.2

什么 CSS 可以让我将上传按钮的颜色更改为以下颜色之一：danger, primary 或 friendly 这样我就可以像使用 Button 一样使用 setStyleName() ?

参考： https://vaadin.com/docs/-/part/framework/components/components-button.html

本文档不讨论错误或修复： https://vaadin.com/docs/-/part/framework/components/components-upload.html

但确实说：

The upload button has the same structure and style as a regular Button component.

因此，我猜想 "button" 中未包含的 SCSS 或 CSS 要么是遗漏、疏忽，要么是错误。

Answer 1

通过在源代码中找到 "danger"、"primary" 和 "friendly" 并简单地复制它们，将它们粘贴到 mytheme.scss 然后将样式名称更改为 @AndreSchild 在下面的回答中描述：

这是更新后的 CSS（粘贴到 mytheme.scss）并像使用常规按钮组件一样使用 setStyleName：

    .v-upload-primary .v-button {
            height: 37px;
            padding: 0 16px;
            color: #ecf2f8;
            font-weight: 400;       
            border-radius: 4px;
            border: 1px solid #1362b1;
            border-top-color: #156ab3;
            border-bottom-color: #1156a8;
            background-color: #197de1;
            background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
            background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
            -webkit-box-shadow: inset 0 1px 0 #4d98e6, inset 0 -1px 0 #166bca, 0 2px 3px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 #4d98e6, inset 0 -1px 0 #166bca, 0 2px 3px rgba(0, 0, 0, 0.05);
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
            padding: 0 19px;
            font-weight: bold;
            min-width: 81px;
     }

    .v-upload-primary .v-button:after {
            border: inherit;
            top: -1px;
            right: -1px;
            bottom: -1px;
            left: -1px;
    }

    .v-upload-primary .v-button:hover:after {
            background-color: rgba(90, 163, 237, 0.1);
    }

    .v-upload-primary .v-button:focus:after {
            border: inherit;
            -webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
            box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
    }

    .v-upload-primary .v-button:active:after {
            background-color: rgba(2, 62, 122, 0.2);
    }

    .v-ie8 .v-upload-primary .v-button {
            min-width: 43px;
    }

    .v-upload-friendly .v-button  {
            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);
    }

    .v-upload-friendly .v-button:after {
            border: inherit;
            top: -1px;
            right: -1px;
            bottom: -1px;
            left: -1px;
    }

    .v-upload-friendly .v-button:hover:after {
            background-color: rgba(65, 211, 48, 0.1);
    }

    .v-upload-friendly .v-button:focus:after {
            border: inherit;
            -webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
            box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
    }

    .v-upload-friendly .v-button:active:after {
            background-color: rgba(14, 86, 6, 0.2);
    }

    .v-upload-danger .v-button {
            height: 37px;
            padding: 0 16px;
            color: #f9f0ef;
            font-weight: 400;
            border-radius: 4px;
            border: 1px solid #bb382e;
            border-top-color: #bc3c31;
            border-bottom-color: #b13028;
            background-color: #ed473b;
            background-image: -webkit-linear-gradient(top, #ee4c3f 2%, #e13e33 98%);
            background-image: linear-gradient(to bottom,#ee4c3f 2%, #e13e33 98%);
            -webkit-box-shadow: inset 0 1px 0 #ef786f, inset 0 -1px 0 #da3c31, 0 2px 3px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 #ef786f, inset 0 -1px 0 #da3c31, 0 2px 3px rgba(0, 0, 0, 0.05);
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
    }

    .v-upload-danger .v-button:after {
            border: inherit;
            top: -1px;
            right: -1px;
            bottom: -1px;
            left: -1px;
    }

    .v-upload-danger .v-button:hover:after {
            background-color: rgba(243, 137, 129, 0.1);
    }

    .v-upload-danger .v-button:focus:after {
            border: inherit;
            -webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
            box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
    }

    .v-upload-danger .v-button:active:after {
            background-color: rgba(146, 12, 2, 0.2);
    }

Answer 2

另一种解决方案是使用 css 将上传按钮隐藏在组件内。然后在上传组件旁边的代码中添加一个标准的 Vaadin 按钮。只需在按钮的点击侦听器中调用 upload.submit()。

现在可以轻松地将这些标准样式名称应用于该按钮。

Vaadin 上传按钮，CSS 更改其颜色（与按钮样式相同）？

Vaadin Upload Button, CSS to change its color (same styles as Button)?

vaadin

vaadin7