Disable stepper but keep style

[Sasa]

Is there a way to disable stepper functionality and keep same styling as before disabling? 
So to be more specific I want stepper to look like this


But the user click functionality should be disabled.

I've tried with disabled property but it grays out whole stepper.

Thanks,
Sasa

[Preslava]

Hi Sasa,

Indeed, there is a way to achieve that. The best way will be to overwrite the default disabled style of the Stepper step. The following two options can be used to achieve this:

1. First option - the encapsulation mode should be set to ViewEncapsulation.None. Then the respective CSS rules can be changed to match the specific requirements, like this:

encapsulation: ViewEncapsulation.None,
styles: [`
        .k-stepper .k-step.k-step-disabled .k-step-indicator {
            color: #424242
        }

        .k-stepper .k-step-disabled .k-step-label {
            color: #424242
        }
 `]

Here is an example demonstrating this approach:

https://stackblitz.com/edit/angular-9skw8h?file=app/app.component.ts

2. Second option - the CSS rules can be applied globally, which will not require changing the encapsulation mode. 

The following demo demonstrates this approach:

https://stackblitz.com/edit/angular-2nalec-ifvh4x?file=index.html 

Both options can be used to customize the styles of the Kendo UI for Angular components.

I hope this helps. Let me know how this goes.

Regards,
Preslava
Progress Telerik