Widget font and background color needs to be changed based on the requirement status in the Health and Safety User table. This value is returned by the Server script. Now, how to add the 3rd ng-class into the existing HTML template and map the colors based on the requirement?
HTML Code:
<div class="user-status">
<span class="label sc-field-error-label" ng-class="{'cleared' : userStatus.baseData.cleared, 'not-cleared' : !userStatus.baseData.cleared}" ng-if="userStatus.baseData.canRead">
<i class="fa fa-circle" ></i>{{userStatus.baseData.cleared_message}}</span>
</div>
CSS Code:
.user-status {
padding-bottom: 20px;
.label {
i.fa.fa-circle {
padding-right: 5px;
}
&.cleared {
background-color: $brand-success;
}
&.not-cleared {
background-color: $state-danger-bg;
color: $state-danger-text;
}
The above are the OOTB values, i need to add another ng-class as 'up-to-date'. After making multiple changes, the color is getting changed to white! Please help.
