valo: caption of focused button not visible

elgoog xmg

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:

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

}

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

elgoog xmg

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.

elgoog xmg

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

my_html.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="my_css.css">
<title>Test</title>
</head>
<body>
  <div class="v-button v-widget" tabindex="0" role="button">
    <span class="v-button-wrap">
      <span class="v-button-caption">Click me</span>
    </span>
  </div>
</body>
</html>

my_css.css:

/*    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;
}

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

elgoog xmg

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

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

valo: caption of focused button not visible

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.