valo: content-property value should be normal or none

Hi all,

The valo theme uses the
content
property in many
xxx:after
rules with an empty string as its value. This is not equivalent to:

content: normal; /* this is the default */ or to:

conten: none; /* 'normal' evaluates to 'none' */ as can be seen within the following example.
Java:

@SuppressWarnings("serial")
@Theme("test")
public class TestUI extends UI {

    private static final String CLICK_ME = "Click me";

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = TestUI.class)
    public static class Servlet extends VaadinServlet {
    }

    @Override
    protected void init(VaadinRequest request) {
        VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        Button button = new Button(CLICK_ME);
        layout.addComponent(button);
        setContent(layout);
    }

SCSS:

[code]
$v-font-weight: 300;
$v-font-size: 13px;
$v-font-family: Arial, Helvetica, sans-serif;

@import “…/valo/valo.scss”;

@mixin test {
@include valo;

$lighter: #E1FBE1;
$dark: #506450;
$darkest: #225522;
$button-color: #FFFF00;
$button-border-color: #FF0000;

// Insert your own theme rules here
.v-ui {
background-color: $lighter;
font: $v-font-weight $v-font-size $v-font-family;
}

.v-button {
background-image: none;
box-shadow: none;
background-color: $dark;
color: $button-color;
width: 8em;

&:focus {
  &, &:after {
    position:                inherit;
    background-color:        $darkest;
    color:                   $button-color;
    border:                  3px solid $button-border-color;
  }
}

}
}
[/code]If the button gets the focus (using the tab key), the button caption is extended by an ugly, border-colored part (tested with FF v43.0.1 and IE v11.0.28). See the following image:

Hence the property value should be changed to:

content: normal;

Thanks el goog