Изменить цвет границы на шагах angular-archwizard

Question

Я использую angular-archwizard для создания круговых шагов для навигации.Когда я нажимаю на различные шаги, я могу видеть правую границу шага круга, окрашенную (в моем случае оранжевым), пока я не нажму на последний шаг.Когда я нажимаю на последний шаг, другие шаги меняют цвет границы и становятся зелеными.Я проверил элементы и увидел, что он применяет css к этому

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

и «li.done», который применяется к каждому шагу (с зеленым бордюром).

Я хотел бы знать, есть ли способ сделать для не применять последний «li.done», когда я нажимаю на последнем шаге.Или если есть другой способ работать правильно.

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

Answer 1

Вы можете использовать CSS.Добавьте что-то вроде этого в свою таблицу стилей

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

или sass

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

, например, которая удалит зеленую границу.