How can I make a Panel change background color while hovering in annotated 7.5 Vaadin?

Question

I am working on a Vaadin 7.5.3 project with an annotated servlet configuration.

My main UI class is:

@Title("Forms")
@Theme("valo")
public class FormsUI extends UI {

    Panel container = new Panel();

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        configureComponents();
        buildLayout();
    }


    private void configureComponents() {

    }

    private void buildLayout() {
        setContent(container);
    }


    @WebServlet(urlPatterns = "/*")
    @VaadinServletConfiguration(ui = FormsUI.class, productionMode = false)
    public static class FormsServlet extends VaadinServlet {

    }
}

My POM (not complete) is:

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <failOnMissingWebXml>false</failOnMissingWebXml>
        <vaadin.version>7.5.3</vaadin.version>
        <vaadin.plugin.version>${vaadin.version}</vaadin.plugin.version>
    </properties>

    <repositories>
        <repository>
            <id>vaadin-addons</id>
            <url>http://maven.vaadin.com/vaadin-addons</url>
        </repository>
    </repositories>

    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-server</artifactId>
            <version>${vaadin.version}</version>
        </dependency>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-client-compiled</artifactId>
            <version>${vaadin.version}</version>
        </dependency>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-themes</artifactId>
            <version>${vaadin.version}</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.0.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.2</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.eclipse.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>9.2.3.v20140905</version>
            </plugin>
        </plugins>
    </build>

That's pretty much it. So the whole CSS (valo theme) is defined in the vaadin-themes dependency (I believe).

What I want to do is change the background color of a Panel (or, actually ANY component) when my mouse hovers over it. Super simple in pure CSS.

Every example I find online indicates adding custom CSS classes which I can do. But where do I define them? How do I load them?

Suggestions appreciated.

Thanks

Answer 1

For those wondering, I finally solved the issue. I am not a CSS guy and I know even less about SASS.

Anyway, what I did was extract the vaadin-themes-7.5.3 folder from my target/myapp-1.0-SNAPSHOT (or wherever your exploded war is) and copy it into src/main/webapp.

Then, I created a new folder under ../webapp/VAADIN/themes/mytheme.

Under mytheme, I deleted everything except:

favicon.ico
styles.scss

I then created:

mytheme.scss

Insidestyles.scss, I replaced with:

@import "mytheme.scss";

.mytheme {
    @include mytheme;
}

Inside mytheme.scss, I replaced with:

$v-background-color: #777;

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

@mixin mytheme {
    @include valo;
}

Works great.

I can now at least start adding custom CSS rules.

Hope this helps someone.