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