codecheck

1
@use 'sass:math';
2

3
// core
4
.p-steps {
5
    position: relative;
6
}
7

8
.p-steps .p-steps-list {
9
    padding: 0;
10
    margin: 0;
11
    list-style-type: none;
12
    display: flex;
13
}
14

15
.p-steps-item {
16
    position: relative;
17
    display: flex;
18
    justify-content: center;
19
    flex: 1 1 auto;
20
    overflow: hidden;
21
}
22

23
.p-steps-item .p-menuitem-link {
24
    display: inline-flex;
25
    flex-direction: column;
26
    align-items: center;
27
    overflow: hidden;
28
    text-decoration: none;
29
    cursor: pointer;
30
}
31

32
.p-steps.p-steps-readonly .p-steps-item {
33
    cursor: auto;
34
}
35

36
.p-steps-item.p-steps-current .p-menuitem-link {
37
    cursor: default;
38
}
39

40
.p-steps-title {
41
    white-space: nowrap;
42
    overflow: hidden;
43
    text-overflow: ellipsis;
44
    max-width: 100%;
45
}
46

47
.p-steps-number {
48
    display: flex;
49
    align-items: center;
50
    justify-content: center;
51
}
52

53
.p-steps-title {
54
    display: block;
55
}
56

57
// theme
58
.p-steps {
59
    .p-steps-item {
60
        .p-menuitem-link {
61
            background: transparent;
62
            transition: $listItemTransition;
63
            border-radius: $borderRadius;
64
            background: $stepsItemBg;
65
            outline-color: transparent;
66

67
            .p-steps-number {
68
                color: $stepsItemNumberColor;
69
                border: $stepsItemBorder;
70
                background: $stepsItemBg;
71
                min-width: $stepsItemNumberWidth;
72
                height: $stepsItemNumberHeight;
73
                line-height: $stepsItemNumberHeight;
74
                font-size: $stepsItemNumberFontSize;
75
                z-index: 1;
76
                border-radius: $stepsItemNumberBorderRadius;
77
            }
78

79
            .p-steps-title {
80
                margin-top: $inlineSpacing;
81
                color: $stepsItemTextColor;
82
            }
83

84
            &:not(.p-disabled):focus-visible {
85
                @include focused();
86
            }
87
        }
88

89
        &.p-highlight {
90
            .p-steps-number {
91
                background: $highlightBg;
92
                color: $highlightTextColor;
93
            }
94

95
            .p-steps-title {
96
                font-weight: $stepsItemActiveFontWeight;
97
                color: $textColor;
98
            }
99
        }
100

101
        &:before {
102
            content:' ';
103
            border-top: $divider;
104
            width: 100%;
105
            top: 50%;
106
            left: 0;
107
            display: block;
108
            position: absolute;
109
            margin-top: math.div(-1 * $stepsItemNumberHeight, 2);
110
        }
111
    }
112
}
113