Button styling for icon-align-top

Flow
1

Hi,
I want to use buttons with the above mentioned style. As icons I use icons from the VaadinIcon font.
There are 2 things I try to solve:

  1. Adjusting the size of the button over style (e.g. huge) gives me both big icon and(!) caption. What I want is to paint the icon bigger, but keep the caption small. As I see the attached style goes to the div of the button v-button-icon-align-top, where the icon and the caption are located in inner spans with different styles: v-icon and v-button-caption. How can i adjust both sizes (icon and caption) separately here?

  2. As an addition it would be great to realize a mouse-over effect with different caption color. Is there a way as well?

Kind regards,
Michael

2

There is a number of ways you can go about it.

If you KNOW for certain that the combination of BUTTON_ICON_ALIGN_TOP and BUTTON_HUGE should always look a certain way then you could do:

btn.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_TOP + " " + ValoTheme.BUTTON_HUGE);
.icon-align-top.huge .v-button-caption {
  font-size: $v-font-size;
}

This might look a bit weird since the font-size is defined in v-button. Another alternative is to create your own style. E.g. "
huge-icon
".

btn.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_TOP + " " + "huge-icon");
.icon-align-top.huge-icon .v-icon {
  font-size: $v-font-size--huge;
}

And lastly, for the
2nd question
:

.v-button:hover {
  color: green;
}