CODEWITHSUNDEEP
javascriptcssangulartypescript
travis_91
travis_91

Reputation: 173

Change border color on angular-archwizard steps

I'm using angular-archwizard to create circle steps to navigate. When I click on different steps I can view the right circle step border colored(in my case orange) until I click on the last step. When I click on the last step also the other steps change border color and become green. I inspected the elements and I saw that it's applied a css on this

aw-wizard-navigation-bar.horizontal.large-empty ul.steps-indicator li.done 
.step-indicator

and the 'li.done' it's applied on every steps(with the green border-color).

I would to know if there is a way to do for dont't apply the last 'li.done' when I click on the last step. Or if there another way to work right.

<aw-wizard  *ngIf="items.length > 0" navBarLayout="large-empty" 
  style="padding-bottom: 0.5rem" style="width: 100%" 
     navigationMode="free">
  <div *ngFor="let item of items; let i=index">
    <aw-wizard-step [stepId]="i" [navigationSymbol]="{  symbol: 
       '&#xf298;', fontFamily: 'FontAwesome'}"
      stepTitle="{{item.statoContattoDescrizione}}" 
    (stepEnter)="passToStep($event,i)">
    </aw-wizard-step> ...
</aw-wizard>

Upvotes: 0

Views: 1826

Answers (1)

Jens Alenius
Jens Alenius

Reputation: 1931

You can use css. Add something like this to your stylesheet

ul.steps-indicator li:last-child .done .step-indicator{ 
         border-color:orange;
}

or sass

ul.steps-indicator{
    li:last-child { 
        .done{
         .step-indicator{
           border-color: orange;
         }
        }   
    }
}

that would remove the green border for example.

Upvotes: 1

Related Questions