Updating the border color on angular-archwizard's steps

Question

Updating the border color on angular-archwizard's steps

I am utilizing angular-archwizard to create circular steps for navigation. When I click on different steps, I can see the circle step border change color (in my case, orange) until I click on the last step. Once I click on the last step, all the other steps' border colors change to green. Upon inspecting the elements, I noticed that a CSS class is applied as follows:

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

The 'li.done' class is applied to every step, giving them the green border color.

I'm curious to know if there is a way to prevent the last 'li.done' class from being applied when I click on the last step. Alternatively, if there is another method to achieve the desired outcome.

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

javascript css angular typescript

Answer 1

Answer №1

To change the border color using CSS, you can add the following code to your stylesheet:

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

If you prefer using SASS, you can use the code below:

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

This code will update the border color to orange and remove the green border, for example.

Answer 2

To change the border color using CSS, you can add the following code to your stylesheet:

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

If you prefer using SASS, you can use the code below:

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

This code will update the border color to orange and remove the green border, for example.

Updating the border color on angular-archwizard's steps

Answer №1

Similar questions

Ordering tables in jQuery with both ascending and descending options

Error message "Jquery smooth scrolling issue: Unable to retrieve property 'top' as it is not defined"

After an AJAX request is completed, the event.keyCode is not returning the key codes for the up and

Receiving a "Maximum call exceeded" error when using Vue.js router guards for the beforeEach hook

"Guide to triggering the display of a particular div based on its class when clicked

What causes the difference in behavior between absolute positioning in <button> and <div>?

Deleting a file and value in JavaScript

Show picture during the process of loading an external webpage

Assign unique element IDs dynamically within an ngFor loop

Shifting Transition for Customer Reviews

Enhance your UI experience with a beautifully styled button using Material-

Tips for obtaining the most recent HTML element in Angular

I am experiencing an issue with the display inline feature not functioning properly in Firefox

Saving asp.net strings in different formats to datetime fields in a database

Contrasting $interval and setInterval functions in AngularJs

Can you outline the distinctions between React Native and React?

Why does the address bar show value changes in IE when using window.location.hash, but the value doesn't change in the DOM when going

Position the circles in a way that they align along the circumference of a larger

What steps can I take to concentrate on a particular mat-tab?

Rearrange the position of one div to be placed next to another div and assign the float property