Styling the Info Chart Feeding Panel component

[etienne_guilhaume]

The Info Chart Feeding Panel component allows to change the look of Info Charts at runtime. Here's a quick cheat sheet on which CSS classes to override in order to change its style.

ℹ The class .ui-state-highlight is the highlighted area when dropping is allowed (.ui-state-error when dropping is not allowed)

:!: The default padding around a feeding-sortable-item is not centered, this should be fixed in a service pack.

Here is the full CSS used to achieve this result:

.feedTypeTitle {

background:#ddddff;

}

.feedTypeContainer .feedTypeTitle {

color:#5151ae;

}

.feedContainer .bucketContainer {

background:#ffffa8;

}

.feedTypeContainer .feedContainer {

background: #d3d3d3;

}

body > .feeding-sortable-item {

background:black;

color:red;

font-size: 12px;

}

.bucketList .ui-state-highlight {

background:green;

}

.bucketList .ui-state-error {

background:red;

}

.bucketElement {

color: #1e6220;

}

.bucket {

color:#b32f61;

}