Overriding Reindeer

Flow
1

I’m having some difficulty overriding the rules for Panel borders.

I want to completely disable all the borders of a panels so I’ve set the following rules in the .scss file:

.myPanel .v-panel {
    border: none !important;
}

.myPanel .v-panel-caption {
    border: none !important;
}

.myPanel .v-panel-nocaption {
    border: none !important;
}

.myPanel .v-panel-content {
    border: none !important;
}

.myPanel .v-panel-deco {
    border: none !important;
}

Where ‘myPanel’ is the panel I want to alter.

This got rid of them all except for one. I can even see the element with the border when I inspect the page, and if I delete it, the border dissapears just like I want.

This is the offending element:

<div class="v-panel-deco v-panel-deco-myPanel" style="margin-bottom: -1px;"></div>

I’ve tried all manner of combinations (switching ‘.myPanel .v-panel-deco’ to ‘.v-panel-deco-myPanel’, for example), and I’ve tried using a rule with the exact class name as it appears in the code above; the border remains. Could someone please explain what I’m doing wrong and how to remove it?

2

Not sure if this will help for your case, but have you tried just setting the panel’s style to Reindeer.PANEL_LIGHT as that seems to not include a visible border?

http://demo.vaadin.com/ReindeerTheme (choose the Panels tab)

3

Yeah that seems to work, thank you. Although, if anyone has any other ideas, it would still be nice to know why I can’t override it manually.

4

The easiest way to find out is to open FireBug (or similar dev.tool), find the element your css rule targets and look at the style tab. If you don’t see your rule there at all, your selectors are probably wrong or a stale css is loaded from some cache etc. If you do see the rule there you should also see it overstriked and then you can see which is the rule that overrides it. If your rule is overridden, it usually helps to add some selector to make it more specific than the one overriding it.

5

The .v-panel-deco element has a background color instead of a border.