角形材料步进器标题线样式

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

}

但目的是为活动步骤的前一行着色，如图所示。

对此有何想法？这是一个用于复制的 stackblitz https://stackblitz.com/edit/angular-ngcsei

Answer 1

在生产环境中，那些反映活动属性的属性不存在，所以我根据元素的索引提出了这个解决方案。我只是为 mat-h​​orizo​​ntal-stepper 元素提供一个类，其中包含活动步骤的索引：last-edited-step-0、last-edited-step-1、last-edited-step-2。然后我创建了这个 mixin：

@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);
}