igx-stepper separator is not visible within igx-dialog component

[teodosiah]

Description

When the igx-stepper component is positioned within igx-dialog the separators between the steps' indicators are not visible.

• igniteui-angular version: 13.1.x
• browser:

Steps to reproduce

1. Run this sample
2. Open the dialog

Result

Separators are not visible

Expected result

Should be visible

[desig9stein]

Here the problem is not actually the stepper but the dialog content holder itself igx-dialog__window-content. Since the stepper has a separator that has a z-index of -1 it actually goes under the dialog content holder. In order to fix it, I had to either think of a way to eliminate that z-index of the stepper separator or on a sample level wrap the stepper inside an element that has a z-index of 0.

Since this may happen to other elements that have a negative z-index, In my opinion, we need to add position relative and a z-index of 0 to the dialog content holder igx-dialog__window-content. This will eliminate the need to use that wrapping element on a sample level. @simeonoff let me know what you think.

[simeonoff]

I think setting z-index to 0 on the igx-dialog__window-content placeholder selector sounds reasonable.