valo: caption of focused button not visible

Flow
1

With the following example i have two problems:

  • 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);
}

}
[/code]The test.scss file is:

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


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

// Get rid of box-shadow
$v-bevel:                        none;

@import "../valo/valo.scss";


@mixin test {
  @include valo;

  // 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;
    background-color:            $dark;
    color:                       $button-color;

    &:focus {
      &:after, &::after, &.v-pressed, & {
        background-color:        $my-darkest;
        color:                    $button-color;
        border:                    3px solid $border-color;
        box-shadow:                none;
      }
    }
  }
 }
2

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?

Many thanks for answers.

3

Finally i was able to reduce the first problem to the following html- and css-file:


my_html.html:

[code]

Test
Click me
[/code][b] my_css.css: [/b] [code] /* generated by mixin valo-button-static-style */ /* ($states contains normal) */ .v-button { position: relative; }

/* generated by mixin valo-button-static-style /
/ ($states contains all of: hover, focus, active) */
.v-button:after {
content: “”;
position: absolute;
}

/* 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.

Thanks

4

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.

Thanks el goog