Vaadin 上传按钮，CSS 更改其颜色(与按钮样式相同)? [英] Vaadin Upload Button, CSS to change its color (same styles as Button)?

问题描述

瓦丁 7.6.2

允许我将上传按钮的颜色更改为以下颜色之一的 CSS 是什么:danger、primary 或 友好 以便我可以像使用 Button 一样使用 setStyleName() ?

What would be the CSS that would allow me to change the upload button's color to one of the following: danger, primary or friendly so that I may use setStyleName() in the same way as I do for a Button ?

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

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

This Doc doesn't discuss the bug or fix: https://vaadin.com/docs/-/part/framework/components/components-upload.html

但确实说:

上传按钮与常规按钮组件具有相同的结构和样式.

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

所以，我猜这个按钮"没有包含的 SCSS 或 CSS 要么是遗漏，要么是疏忽，要么是错误.

So, I guess that the SCSS or CSS that isn't included for this "button" is either an omission, oversight, or bug.

推荐答案

通过在源代码中找到危险"、主要"和友好"并简单地将它们复制出来，粘贴到 mytheme.scss 中来解决它 然后将样式名称更改为 @AndreSchild 在以下答案中的描述:

Solved it by finding "danger", "primary" and "friendly" in the source and simply copying them out, pasting them into mytheme.scss then changing the style names as @AndreSchild describes in the following answer:

Vaadin 上传组件上传按钮，更改样式?

这是更新后的 CSS(粘贴到 mytheme.scss 中)并像使用常规按钮组件一样使用 setStyleName:

Here's the updated CSS (paste into mytheme.scss) and use setStyleName as you would for a regular button component:

    .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);
    }

这篇关于Vaadin 上传按钮，CSS 更改其颜色(与按钮样式相同)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！