Styling with CSS

Other than JavaScript or HTML (for templates) a component definition may also include a CSS that can be used to control how the component is visualized in the page.

Within the CSS editing page you can define the set of rules that must be loaded together with the component. In addition, if needed you can also redefine rules for mobile navigation.

Instead of using the global application CSS, you can define in the Appearance page, we suggest you leave all the CSS rules related to a specific component directly into the component definition.

How to write CSS rules?

In case you are defining rules for a WIDGET component, a good practice is to prefix all rules with the widget tag.

Here below you can see the CSS rules for a widget with machine-status-widget tag.  

machine-status-widget .diagram {
    width: 100%;
    background-color: #D2D2D2;
}

machine-status-widget .span {
    color: #888888;
}

When defining a FILTER, in the result value you can create HTML using inline style attributes, or classes.
In this case you can define your classes with a specific name.

Here below you can see the CSS rules for a filter that display an icon for a status code rendered through the following output.

.machine-status.success {
   color:green;
}

.machine-status.error {
   color:error;
}

let status = (value == 'abc') ? "success" : "error";
return '<div class="machine-status ' + status + '">' + status.toUpperCase() + '</div>';

<div class="machine-status success">SUCCESS</div>
<div class="machine-status error">ERROR</div>

In case you are editing a TEMPLATE, into the HTML you can use CSS classes with specific names.

Here below you can see the CSS rules for a template that display the machine productivity.

.productivity-template value-widget .card {
   border:solid 2px green;
}

.productivity-template time-series-chart-widget .card {
   max-width:400px;
}

<div class="d-flex flex-wrap components-row productivity-template">
	<value-widget [title]="'Number of Pieces'">
		<metric name="nr_pieces"></metric>
	</value-widget>
	<time-series-chart-widget [title]="'Number of Pieces'">
		<metric name="nr_pieces"></metric>
	</time-series-chart-widget>	
</div>