Button Image No Border/Transparent

Flow
1

Hey guys!

Love Vaadin, weve been using it for a few days. I only have 2 things I cant seem to figure out.

Here is our code:

Content:

final VerticalLayout content = new VerticalLayout();

    content.addStyleName("content");

    content.setHeight("100%");

    content.setSpacing(true);

    content.setMargin(true);

Button attached to content:

[code]
Button bankofamerica = new Button();

content.addComponent(bankofamerica);

bankofamerica.setIcon (new ExternalResource(“http://amerihopealliance.com/blog/wp-content/uploads/2013/01/BankOfAmerica_Logo_128.jpg”));

bankofamerica.setHeight("140px");

bankofamerica.setWidth("140px");

bankofamerica.addStyleName("nobackground");

[/code]Here is the css for Style - no background:

[code]
@import “…/valo/valo.scss”;

.i-button-nobackground {

background: transparent;

border: none;

}

@mixin swipe {

@include valo;
[/code]I have the css code placed in between import and mixin…Not sure if it should be after the @mixin…

Im lost at this point because I cant seem to get the CSS to work I also need to edit the CSS for all the buttons in the content to display next to each and not on top…

Help is appreciated!!

Alex

2

If you have a look at the Valo Demo
https://demo.vaadin.com/valo-theme/#!buttons-and-links

you can see that there are already styles defined for your use case.

The ValoTheme.java class contains all the additional built-in styles available per component. In your case it should be ValoTheme.BUTTON_BORDERLESS I guess.

3

As Lorenz said, you can use the predefined styles from Valo the get just that.

But for your custom SCSS, there are at least two major problems:

  1. The selector is incorrect. Vaadin styles used to be prefixed with “i-” back in year 2008 when Vaadin was still called IT Mill Toolkit.

  2. The selector should be inside the mixin, at least after the point where you include valo, since the Valo theme selectors will otherwise override your changes (by being specified later in the source order and having more specificity).