Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

TUTORIALVaadin lets you build secure, UX-first PWAs entirely in Java.
Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Calling javascript synchronously by Enver Haase, 1 month ago
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:
$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;
}
}
}
}
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
Last updated on
You cannot reply to this thread.