I'd like to know if there's anyway I'm able to customize the scss/html template of a Nebular Stepper component. I found out that you can customize some of the scss using Nebular Custom theming but I need to change things that don't have theme variables, like the Stepper Header (Completed step icon, number appearance.. etc) and Stepper connector (Appearance, size.. etc)..
I'm somewhat new to angular/nebular components, so I don't know how to customize the scss/html template of pre-made components, can anyone give me a hand?
A better approach is to create your own theming in nebular instead of changing individual elements according to your need, but there is a way to achieve what you're trying as well.
To do that you'll need to find the classes related to the stepper, and then apply your styling in your global styling files
NOT in the component styling. That won't work as nebular has global styling set up and it will override your styling, even if you use !important
You can use the following classes for updating the stepper:
.nb-theme-corporate nb-stepper .header .step.selected .label-index
This is for updating border/background colors for selected step
.nb-theme-corporate nb-stepper .header .step.selected
This is for changing font styling for selected step
For all other steps, you just need to remove .step.selected and it will be applied