CODEWITHSUNDEEP
javacssfrontendvaadinvaadin10
Druudik
Druudik

Reputation: 1015

Vaadin flow custom styles

Hello I am trying to define my custom styles on vaadin components. I have the html file with styles which looks like this:

<link rel="import" href="../bower_components/vaadin-lumo-styles/color.html">
<link rel="import" href="../bower_components/vaadin-lumo-styles/typography.html">


<dom-module id="css-style-example" theme-for="vaadin-button">
    <template>
        <style include="vaadin-button-default-theme">
        .card {
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            transition: 0.3s;
            width: 40%;
        }
        .card:hover {
            box-shadow: 0 8px 16px 0 rgba(0,0,0,50);
            transform: scale(1.05, 1.05)
        }
        </style>
    </template>
</dom-module>

It is gradle project and this file is located in /src/main/resources/frontend/styles.

I am trying to use this style on my button component like this:

@HtmlImport("frontend://styles/shared-styles.html")
public class BasePageView extends VerticalLayout { 
    .
    .
    .
    homeButton.setClassName("card");
}

But I somehow can not get this thing work. I am very new to css so pardon me for any dumb mistakes.

I was searching on github for some examples but I am kinda lost and I would appreciate if someone would explain to me how exactly can I define style for, let's say, vaadin flow button ? Thank you for any help.

Upvotes: 3

Views: 2137

Answers (1)

Jouni
Jouni

Reputation: 2918

Instead of a dom-module (which targets vaadin-button), use <custom-style> instead, which is used for global styles:

<custom-style>
  <style>
    .card {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
        width: 40%;
    }
    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,50);
        transform: scale(1.05, 1.05)
    }
  </style>
</custom-style>

For more information about styling Vaadin components, please read these guides through: https://github.com/vaadin/vaadin-themable-mixin/wiki

Upvotes: 3

Related Questions