Panels and others components look

Flow
1

I know how to change look and feel for example panel (example book):
This code change all panels in my app.

.v-panel .v-panel-caption {
    background: #80ff80; /* pale green */
}
.v-panel .v-panel-content {
    background: yellow;
}
.v-panel .v-textfield {
    background: #e0e0ff; /* pale blue */
}
.v-panel .v-button {
    background: pink;
}

But how change style.css if i want diferents panels with diferents looks and feel?

Thanks!!

2

You need different style names for different styled panels. Use

Panel.addStyleName(“my-custom-style”)

, and then the following CSS selectors:

/* The root element */
[b]
.v-panel-my-custom-style
[/b] {

}

/* The caption element of the panel */
[b]
.v-panel-caption-my-custom-style
[/b] {

}

/* The caption element of the panel, when the caption is empty */
[b]
.v-panel-nocaption-my-custom-style
[/b] {

}

/* The content element for the panel */
[b]
.v-panel-content-my-custom-style
[/b] {

}

/* An additional element, purely for styling, below the content element */
[b]
.v-panel-deco-my-custom-style
[/b] {

}
3

Ok!!

Regards and thank you!!