In my html file i am passing value for –is-item-status as :-
<ion-label class="textColor label-md black-shade-light" style="--is-item-status: {{item.status}}" >{{item.status | formatEnum | async}}</ion-label>
(Note:- this is populated inside *ngFor condition).
in the browser i am able to see the value getting populated as :-
element.style{ --is-item-status: INVOICE_OPEN }
In my scss file i have code like :-
.textColor {
@if var(--is-item-status) == 'INVOICE_OPEN' {
color: blue;
} @else if var(--is-item-status) == ('PAYMENT_STATUS_CANCELLED' or 'INVOICE_CANCELLED' or 'ORDER_CANCELLED') {
color: red;
} @else if var(--is-item-status) == ('PAYMENT_STATUS_PARTLY_APPLIED' or 'INVOICE_PARTLY_PAID' or 'ORDER_CLOSED') {
color: black;
} @else if var(--is-item-status) == ('PAYMENT_STATUS_APPLIED' or 'INVOICE_PARTLY_PAID' or 'ORDER_INVOICED') {
color: green;
} @else {
color: yellow;
}
}
But the if conditions are not getting satisfied. Could someone tell me what am i doing wrong in this ?