Angular Material 步进器标题线样式

Question

我正在尝试为这些步骤实现这种设计，但到目前为止还没有成功，我最接近的是为当前事件步骤旁边的线添加颜色:

.mat-horizontal-stepper-header {
padding: 0 8px 0 16px !important;
&[ng-reflect-active="true"]+.mat-stepper-horizontal-line {
    border-top-color: rgba(37, 82, 245, 0.54) !important;
}

但目的是为事件步骤的前一行着色，如图中所示。

对此有什么想法吗？这是 repro 的 stackblitz https://stackblitz.com/edit/angular-ngcsei

Answer 1

在生产环境中，那些反射(reflect)事件属性的是不存在的，所以我想出了这个基于元素索引的解决方案。我只是给 mat-h​​orizo​​ntal-stepper 元素一个类，其中包含事件步骤的索引:last-edited-step-0、last-edited-step-1、last-edited-step-2。然后我创建了这个 mixins:

@mixin styleStepLine($index) {
    .mat-horizontal-stepper-header {
        &+.mat-stepper-horizontal-line:nth-child(#{$index}) {
            height: 2px;
            background-image: linear-gradient(to right, #00b495, #00aeea);
        }
    }
}

@mixin styleEditedStepIcon($index) {
    .mat-horizontal-stepper-header:nth-child(#{$index}) {
        .mat-step-icon:not(.mat-step-icon-selected) {
            background-color: map-get($colors, 'light-green');
        }
    }
}

@mixin styleUnEditedStepIcon($index) {
    .mat-horizontal-stepper-header:nth-child(#{$index}) {
        .mat-step-icon:not(.mat-step-icon-selected) {
            background-color: #e8e8e8;
        }
    }
}

.last-edited-step-1 {
    @include styleStepLine(2);
    @include styleEditedStepIcon(1);
    @include styleUnEditedStepIcon(3);
}

.last-edited-step-2 {
    @include styleStepLine(2);
    @include styleStepLine(4);
    @include styleEditedStepIcon(1);
    @include styleEditedStepIcon(3);
}