codecheck

1
@use 'sass:math';
2

3
//core
4
.p-stepper .p-stepper-nav {
5
    position: relative;
6
    display: flex;
7
    justify-content: space-between;
8
    align-items: center;
9
    margin: 0;
10
    padding: 0;
11
    list-style-type: none;
12
    overflow-x: auto;
13
}
14

15
.p-stepper-vertical .p-stepper-nav {
16
    flex-direction: column;
17
}
18

19
.p-stepper-header {
20
    position: relative;
21
    display: flex;
22
    flex: 1 1 auto;
23
    align-items: center;
24

25
    &:last-of-type {
26
        flex: initial;
27
    }
28
}
29

30
.p-stepper-header .p-stepper-action {
31
    border: 0 none;
32
    display: inline-flex;
33
    align-items: center;
34
    text-decoration: none;
35
    cursor: pointer;
36

37
    &:focus-visible {
38
        @include focused();
39
    }
40
}
41

42
.p-stepper.p-stepper-readonly .p-stepper-header {
43
    cursor: auto;
44
}
45

46
.p-stepper-header.p-highlight .p-stepper-action {
47
    cursor: default;
48
}
49

50
.p-stepper-title {
51
    display: block;
52
    white-space: nowrap;
53
    overflow: hidden;
54
    text-overflow: ellipsis;
55
    max-width: 100%;
56
}
57

58
.p-stepper-number {
59
    display: flex;
60
    align-items: center;
61
    justify-content: center;
62
}
63

64
.p-stepper-separator {
65
    flex: 1 1 0;
66
}
67

68
//theme
69
.p-stepper {
70
    .p-stepper-nav {
71
        display: flex;
72
        justify-content: space-between;
73
        margin: 0;
74
        padding: 0;
75
        list-style-type: none;
76
    }
77
    
78
    .p-stepper-header {
79
        padding: $inlineSpacing;
80

81
        .p-stepper-action {
82
            transition: $listItemTransition;
83
            border-radius: $borderRadius;
84
            background: $stepsItemBg;
85
            outline-color: transparent;
86
            
87
            .p-stepper-number {
88
                color: $stepsItemNumberColor;
89
                border: $stepsItemBorder;
90
                border-width: 2px;
91
                background: $stepsItemBg;
92
                min-width: $stepsItemNumberWidth;
93
                height: $stepsItemNumberHeight;
94
                line-height: $stepsItemNumberHeight;
95
                font-size: $stepsItemNumberFontSize;
96
                border-radius: $stepsItemNumberBorderRadius;
97
                transition: $actionIconTransition;
98
            }
99
            
100
            .p-stepper-title {
101
                margin-left: $inlineSpacing;
102
                color: $stepsItemTextColor;
103
                font-weight: $stepsItemActiveFontWeight;
104
                transition: $actionIconTransition;
105
            }
106

107
            &:not(.p-disabled):focus-visible {
108
                @include focused();
109
            }
110
        }
111

112
        &.p-highlight {
113
            .p-stepper-number {
114
                background: $highlightBg;
115
                color: $highlightTextColor;
116
            }
117

118
            .p-stepper-title {
119
                color: $textColor;
120
            }
121
        }
122

123
        &:not(.p-disabled):focus-visible {
124
            @include focused();
125
        }
126

127
        &:has(~ .p-highlight) {
128
            @if variable-exists(primaryColor) {
129
                .p-stepper-separator {
130
                    background-color: $primaryColor;
131
                }
132
            }
133
        }
134
    }
135

136
    .p-stepper-panels {
137
        background: $tabviewContentBg;
138
        padding: $tabviewContentPadding;
139
        color: $tabviewContentTextColor;
140
    }
141

142
    .p-stepper-separator {
143
        background-color: $timelineEventColor;
144
        width: 100%;
145
        height: 2px;
146
        margin-inline-start: calc($inlineSpacing * 2);
147
        transition: $listItemTransition;
148
    }
149

150
    &.p-stepper-vertical {
151
        display: flex;
152
        flex-direction: column;
153

154
        .p-stepper-toggleable-content {
155
            display: flex;
156
            flex: 1 1 auto;
157
            background: $tabviewContentBg;
158
            color: $tabviewContentTextColor;
159
        }
160

161
        .p-stepper-panel {
162
            display: flex;
163
            flex-direction: column;
164
            flex: initial;
165
            
166
            &.p-stepper-panel-active {
167
                flex: 1 1 auto;
168
            }
169

170
            .p-stepper-header {
171
                flex: initial;
172
            }
173

174
            .p-stepper-content {
175
                padding-left: calc($inlineSpacing * 2);
176
            }
177

178
            .p-stepper-separator {
179
                flex: 0 0 auto;
180
                width: 2px;
181
                min-height: 28px;
182
                height: auto;
183
                margin-inline-start: calc($inlineSpacing * 7 / 2 + 2px);
184
            }
185

186
            &:has(~ .p-stepper-panel-active) {
187
                @if variable-exists(primaryColor) {
188
                    .p-stepper-separator {
189
                        background-color: $primaryColor;
190
                    }
191
                }
192
            }
193

194
            &:last-of-type {
195
                .p-stepper-content {
196
                    padding-left: calc($inlineSpacing * 6);
197
                }
198
            }
199
        }
200
    }
201
}
202