Search code examples
cssvaadinvaadin7

How to style a warning label

I would like to have a warning label style similar to the failure and success styles (as requested here).

I tried to set the icon in code, but the result was this (left: failure style, right: my attempt):

enter image description here

I would like to have an orange border and an orange warning icon.

Edit: Showing some code as requested in the comments.

label1.setStyleName(ValoTheme.LABEL_FAILURE); // left
label2.setIcon(FontAwesome.WARNING); // right
Solution

  • Both the success/failure labels are defined here (Valo Theme for Vaadin 7.5). So you can create your own based on this code. Add the following in your applications theme:

    $warning-color: orange;

.v-label-warning {
  background: $v-textfield-background-color;
  color: valo-font-color($v-textfield-background-color);
  border: 2px solid $warning-color;
  border-radius: $v-border-radius;
  padding: round($v-unit-size/5) round($v-unit-size/2) round($v-unit-size/5) round($v-unit-size);
  font-weight: $v-font-weight + 100;
  font-size: round($v-font-size * 0.95);

  &:before {
    font-family: FontAwesome;
    content: "\f071";
    margin-right: .5em;
    margin-left: round($v-unit-size/-2);
    color: $warning-color;
  }
}

    Note that this does basically just two things: introduce a new var for the color in the beginning (which is then used for the icon and the border) and uses the ligature from the bundled FontAwesome.

    The name of the style in regard to a label is warning. So do a setStyleName("warning") on the label.

    This is tested against Vaadin 7.5.5. If your version differs you might want to check in the files linked above to make sure, that you copy from there and adopt. If you want more than just this one I suggest to create a @mixin to reduce (even more) copy and paste code.