Qfyilyi

I need help in nebular stepper, as we know that when the any step completed then the "checkmark" icon displayed but my use case is different I need the number will remain but color will change as same as icon (i.e. # ffffff).

I am not able to override the scss for this. Please advise how can I override.

Please find the screenshots of expected and current behavior:

<nb-card class="card">

<nb-card-body>

    <nb-stepper orientation="horizontal">

        <nb-step [label]="labelOne">

            <ng-template #labelOne></ng-template>

            <h3>Working on Step 1</h3>

        </nb-step>

        <nb-step [label]="labelTwo">

            <ng-template #labelTwo></ng-template>

            <h3>Step 1 completed... Working on Step 2</h3>

        </nb-step>

        <nb-step [label]="labelThree">

            <ng-template #labelThree></ng-template>

            <h3>Step 2 completed... Working on Step 3</h3>

        </nb-step>

        <nb-step [label]="labelFour">

            <ng-template #labelFour></ng-template>

            <h3>Step 3 completed... Working on Step 4</h3>

        </nb-step>

    </nb-stepper>

</nb-card-body>

I never worked with Nebular.

According to API there is no way to define custom template for step mark. Source code of component does not provide modification of step mark too.

Anyway you can replace checkmark symbol with css counters. But it's very tricky solution:

nb-stepper {

    counter-reset: stepper;

}



nb-stepper .step {

    counter-increment: stepper;

}



nb-stepper .nb-checkmark::before {

    content: counter(stepper) !important;

}