Nebular stepper Issue after completed

Question

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>

HI, I am using the default Nebular scss, tried to override but not able to do so. HTML code is i have attached. — Rakesh Singh, Nov 22 '18 at 10:40

score 2 · Accepted Answer · answered Nov 26 '18 at 12:19

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;
}

Nebular stepper Issue after completed

1 Answers1