Buttons on a toolbar have an ugly border selection box

[djensen47]

The border box button seems to also be in the toolbar.

1. Add a button to a toolbar
2. Click the button

Result: selection border around the button

[Ullfis]

This also happens when not using Aurelia and the bridge. Try using a tag instead.

<mdc-toolbar-section end="true">
  <a href="#" class="mdc-toolbar__icon material-icons" mdc-ripple>arrow_downward</a>
  <button class="mdc-toolbar__icon"><i class="material-icons" mdc-ripple>arrow_upward</i></button>
  <span class="mdc-toolbar__icon material-icons" mdc-ripple>delete</span>
</mdc-toolbar-section>

[Ullfis]

Hmmm... I made a gist and can not see the border selection box..

The gist is using bundled css from material-components-web while bridge documentation is using scss build. What is your project using?

[Ullfis]

A new project with bundled css and a new project with scss build do not give that border. I also tried to copy scss from the bridge project without getting the border.

But the document in bridge project does. strange...

[djensen47]

We're using scss for our project.

[djensen47]

I'm finally on the latest aurelia-mdc-bridge and I'm still seeing the issue. Even weirder, the border color changed.