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

Question

Vaadin 7.6.2

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 ?

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

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

But does say:

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

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

Answer 1

An alternative solution is to hide the upload button inside the component by using css. And then add a standard Vaadin button in your code next to the Upload component. Just call upload.submit() inside the click listener of your button.

Now it's easy to apply those standard style names to that button.

Answer 2

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 Upload Component Upload Button, changing it's Style?

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