If the button get focused, the button caption is not visible (although a web inspector demonstrates, that it is present and should be shown with yellow color). This happens in FF 43.0.1 and IE 11.0.x. (other browsers not tested) under Windows 7 Pro SP1.
The scss compiler overwrites the border-color of the focused button: it changes the border properties of the focused button to:
border: 3px solid #c5c5c5;
Many thanks for explanations as to why this happens.
The Java code (TestUI.java) is:
[code] @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);
}
Addition: Only the first problem mentioned above does not occur, if the button component has been removed with:
$v-included-components: remove($v-included-components, button);
inserted after the
@import "../valo/valo.scss";
statement.
Nevertheless, i think it is very interesting why and how the two problems occur under the original conditions and why the second problem even exists after removing the button component.
Is it possible to remove the button component ‘locally’, within some rule and effecting only this rule?
/* generated by mixin valo-button-style /
/ ($states contains all of: focus and active) /
/ ($border-width is 1px) */
.v-button:after {
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
}
/* style entered by the developer in the stylesheet of the application */
.v-button {
background-color: red;
}
/* style entered by the developer in the stylesheet of the application */
.v-button:focus:after {
background-color: yellow;
}
[/code]If any of the css-properties above is removed, the effect (button caption not visible, when button get focussed) disappears. This is beyond my css-knowledge. I guess, that positioning the content of html-elements within a rule with pseudo-class / pseudo-element selector causes the problem.
Any explanantion is very welcome .
In any case: i guess, that something in the mixins mentioned in the my_css.css file has to be changed in order to avoid the problem.
Now i found the solution of the second problem (VAADIN overwrites the value of $border-color).
This problem is caused by a variable $border-color in valo’s file: _color.scss. The mixin: valo-focus-style defines a local variable $border-color.
As explained in my post: “valo overwrites global variable $darkest” the Vaadin-SASS-Compiler is only compatible to SASS language version 3.3.0. which does not support the concept of ‘local variables’.
In the scss-file above the declaration of $border-color must therefore be moved after the “@include valo;”-statement.