@patternfly/patternfly 4.199.0 → 4.201.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/components/DescriptionList/description-list.css +36 -2
  2. package/components/DescriptionList/description-list.scss +31 -2
  3. package/components/ProgressStepper/progress-stepper.css +416 -69
  4. package/components/ProgressStepper/progress-stepper.scss +211 -80
  5. package/components/Wizard/wizard.css +2 -1
  6. package/components/Wizard/wizard.scss +3 -1
  7. package/docs/components/DescriptionList/examples/DescriptionList.md +316 -11
  8. package/docs/components/ProgressStepper/examples/ProgressStepper.md +328 -2
  9. package/docs/components/Wizard/examples/Wizard.md +59 -57
  10. package/docs/demos/Wizard/examples/Wizard.md +2581 -275
  11. package/package.json +1 -1
  12. package/patternfly-no-reset.css +454 -72
  13. package/patternfly.css +454 -72
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/components/ProgressStepper/progress-stepper.scss CHANGED
@@ -1,18 +1,139 @@
1
+ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();
2
+
3
+ // Default layout is vertical
4
+ @mixin pf-c-progress-stepper--m-vertical {
5
+ --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);
6
+ --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);
7
+ --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);
8
+ --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);
9
+ --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);
10
+ --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);
11
+ --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);
12
+ --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);
13
+ --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);
14
+ --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);
15
+ --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);
16
+ --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);
17
+ --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);
18
+ --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);
19
+ --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);
20
+
21
+ // Compact vertical
22
+ --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
23
+ --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
24
+ --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);
25
+
26
+ // Center
27
+ --pf-c-progress-stepper--m-center__step-connector--before--Content: none; // border swap
28
+ --pf-c-progress-stepper--m-center__step-main--before--Content: ""; // border swap
29
+ }
30
+
31
+ @mixin pf-c-progress-stepper--m-horizontal {
32
+ --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-horizontal--GridAutoFlow);
33
+ --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--GridTemplateColumns);
34
+ --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Top);
35
+ --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Left);
36
+ --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Width);
37
+ --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Height);
38
+ --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth);
39
+ --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor);
40
+ --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth);
41
+ --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor);
42
+ --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform);
43
+ --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginTop);
44
+ --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginRight);
45
+ --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom);
46
+ --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft);
47
+
48
+ // Compact horizontal
49
+ --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);
50
+ --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);
51
+ --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom);
52
+
53
+ // Center
54
+ --pf-c-progress-stepper--m-center__step-connector--before--Content: ""; // border swap
55
+ --pf-c-progress-stepper--m-center__step-main--before--Content: none; // border swap
56
+ }
57
+
58
+ // Progress stepper is vertically oriented by default
1
59
  .pf-c-progress-stepper {
2
- // Stepper variables
3
- --pf-c-progress-stepper--GridAutoFlow: column;
4
- --pf-c-progress-stepper--GridTemplateRows: auto 1fr;
5
- --pf-c-progress-stepper--GridTemplateColumns: initial;
60
+ // Vertical - these are the default settings
6
61
  --pf-c-progress-stepper--m-vertical--GridAutoFlow: row;
7
62
  --pf-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;
63
+ --pf-c-progress-stepper--m-vertical__step-connector--before--Top: 0;
64
+ --pf-c-progress-stepper--m-vertical__step-connector--before--Left: calc(var(--pf-c-progress-stepper__step-icon--Width) / 2);
65
+ --pf-c-progress-stepper--m-vertical__step-connector--before--Width: auto;
66
+ --pf-c-progress-stepper--m-vertical__step-connector--before--Height: 100%;
67
+ --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth: var(--pf-global--BorderWidth--md);
68
+ --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor: var(--pf-global--BorderColor--100);
69
+ --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth: 0;
70
+ --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor: transparent;
71
+ --pf-c-progress-stepper--m-vertical__step-connector--before--Transform: translateX(-50%);
72
+ --pf-c-progress-stepper--m-vertical__step-main--MarginTop: var(--pf-global--spacer--xs);
73
+ --pf-c-progress-stepper--m-vertical__step-main--MarginRight: 0;
74
+ --pf-c-progress-stepper--m-vertical__step-main--MarginBottom: var(--pf-global--spacer--xl);
75
+ --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-global--spacer--xs);
76
+
77
+ // Compact, vertical
78
+ --pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr;
79
+ --pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-global--spacer--sm);
80
+ --pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow: auto;
81
+ --pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight: 0;
82
+
83
+ // Center, vertical
84
+ --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight: 0;
85
+ --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft: 0;
86
+
87
+ // Horizontal
88
+ --pf-c-progress-stepper--m-horizontal--GridAutoFlow: column;
89
+ --pf-c-progress-stepper--m-horizontal--GridTemplateColumns: initial;
90
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--Top: calc(var(--pf-c-progress-stepper__step-icon--Height) / 2);
91
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--Left: 0;
92
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--Width: 100%;
93
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--Height: auto;
94
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth: 0;
95
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor: unset;
96
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
97
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor: var(--pf-global--BorderColor--100);
98
+ --pf-c-progress-stepper--m-horizontal__step-connector--before--Transform: translateY(-50%);
99
+ --pf-c-progress-stepper--m-horizontal__step-main--MarginTop: var(--pf-global--spacer--sm);
100
+ --pf-c-progress-stepper--m-horizontal__step-main--MarginRight: var(--pf-global--spacer--sm);
101
+ --pf-c-progress-stepper--m-horizontal__step-main--MarginBottom: 0;
102
+ --pf-c-progress-stepper--m-horizontal__step-main--MarginLeft: 0;
103
+
104
+ // Compact, horizontal
105
+ --pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, #{pf-size-prem(28px)});
106
+ --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom: 0;
107
+ --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow: 2;
108
+
109
+ // Compact
8
110
  --pf-c-progress-stepper--m-compact--GridAutoFlow: row;
9
- --pf-c-progress-stepper--m-compact--GridTemplateColumns: repeat(auto-fill, #{pf-size-prem(28px)});
111
+ --pf-c-progress-stepper--m-compact__step-main--MarginTop: 0;
112
+ --pf-c-progress-stepper--m-compact__step-main--MarginBottom: var(--pf-global--spacer--sm);
113
+ --pf-c-progress-stepper--m-compact__step-connector--MinWidth: #{pf-size-prem(28px)};
114
+ --pf-c-progress-stepper--m-compact__step-icon--Width: #{pf-size-prem(18px)};
115
+ --pf-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-global--icon--FontSize--sm);
116
+ --pf-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-global--FontSize--sm);
117
+ --pf-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-global--FontWeight--normal);
118
+ --pf-c-progress-stepper--m-compact__pficon--MarginTop: 2px;
119
+ --pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop: -3px;
120
+
121
+ // Center
122
+ --pf-c-progress-stepper--m-center__step-connector--before--Left: 50%;
123
+ --pf-c-progress-stepper--m-center--GridTemplateColumns: 1fr;
124
+ --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;
125
+ --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs);
126
+ --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs);
127
+ --pf-c-progress-stepper--m-center__step-title--TextAlign: center;
128
+ --pf-c-progress-stepper--m-center__step-description--TextAlign: center;
129
+ --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
130
+ --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
10
131
 
11
- // Step variables
132
+ // Stepper variables
133
+ --pf-c-progress-stepper--GridTemplateRows: auto 1fr;
12
134
 
13
135
  // Step connector variables
14
136
  --pf-c-progress-stepper__step-connector--JustifyContent: start;
15
- --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;
16
137
 
17
138
  // Step icon variables
18
139
  --pf-c-progress-stepper__step-icon--ZIndex: var(--pf-global--ZIndex--xs);
@@ -23,49 +144,10 @@
23
144
  --pf-c-progress-stepper__step-icon--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
24
145
  --pf-c-progress-stepper__step-icon--BorderWidth: var(--pf-global--BorderWidth--md);
25
146
  --pf-c-progress-stepper__step-icon--BorderColor: var(--pf-global--BorderColor--100);
26
- --pf-c-progress-stepper--m-compact__step-icon--Width: #{pf-size-prem(18px)};
27
- --pf-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-global--icon--FontSize--sm);
28
147
 
29
148
  // Icon adjustments to fix differences in alignment
30
149
  --pf-c-progress-stepper__pficon--MarginTop: 3px;
31
150
  --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: -5px;
32
- --pf-c-progress-stepper--m-compact__pficon--MarginTop: 2px;
33
- --pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop: -3px;
34
-
35
-
36
- // Step connector :before (the connecting line) variables
37
- --pf-c-progress-stepper__step-connector--before--Top: calc(var(--pf-c-progress-stepper__step-icon--Height) / 2);
38
- --pf-c-progress-stepper__step-connector--before--Left: 0;
39
- --pf-c-progress-stepper__step-connector--before--Width: 100%;
40
- --pf-c-progress-stepper__step-connector--before--Height: auto;
41
- --pf-c-progress-stepper__step-connector--before--BorderRightColor: unset;
42
- --pf-c-progress-stepper__step-connector--before--BorderRightWidth: 0;
43
- --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
44
- --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-global--BorderColor--100);
45
- --pf-c-progress-stepper__step-connector--before--Transform: translateY(-50%);
46
- --pf-c-progress-stepper--m-center__step-connector--before--Left: 50%;
47
- --pf-c-progress-stepper--m-vertical__step-connector--before--Top: 0;
48
- --pf-c-progress-stepper--m-vertical__step-connector--before--Left: calc(var(--pf-c-progress-stepper__step-icon--Width) / 2);
49
- --pf-c-progress-stepper--m-vertical__step-connector--before--Width: auto;
50
- --pf-c-progress-stepper--m-vertical__step-connector--before--Height: 100%;
51
- --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth: var(--pf-global--BorderWidth--md);
52
- --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor: var(--pf-global--BorderColor--100);
53
- --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth: 0;
54
- --pf-c-progress-stepper--m-vertical__step-connector--before--Transform: translateX(-50%);
55
-
56
- // Step Main variables
57
- --pf-c-progress-stepper__step-main--MarginTop: var(--pf-global--spacer--sm);
58
- --pf-c-progress-stepper__step-main--MarginRight: var(--pf-global--spacer--sm);
59
- --pf-c-progress-stepper__step-main--MarginBottom: 0;
60
- --pf-c-progress-stepper__step-main--MarginLeft: 0;
61
- --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs);
62
- --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs);
63
- --pf-c-progress-stepper--m-vertical__step-main--MarginTop: var(--pf-global--spacer--xs);
64
- --pf-c-progress-stepper--m-vertical__step-main--MarginRight: 0;
65
- --pf-c-progress-stepper--m-vertical__step-main--MarginBottom: var(--pf-global--spacer--xl);
66
- --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-global--spacer--xs);
67
- --pf-c-progress-stepper--m-compact__step-main--MarginTop: 0;
68
- --pf-c-progress-stepper--m-compact__step-main--MarginBottom: var(--pf-global--spacer--sm);
69
151
 
70
152
  // Step Title variables
71
153
  --pf-c-progress-stepper__step-title--Color: var(--pf-global--Color--100);
@@ -76,9 +158,6 @@
76
158
  --pf-c-progress-stepper__step--m-current__step-title--Color: var(--pf-global--Color--100);
77
159
  --pf-c-progress-stepper__step--m-pending__step-title--Color: var(--pf-global--Color--200);
78
160
  --pf-c-progress-stepper__step--m-danger__step-title--Color: var(--pf-global--danger-color--100);
79
- --pf-c-progress-stepper--m-center__step-title--TextAlign: center;
80
- --pf-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-global--FontSize--sm);
81
- --pf-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-global--FontWeight--normal);
82
161
 
83
162
  // Help text variables for the step title
84
163
  --pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
@@ -101,9 +180,14 @@
101
180
  --pf-c-progress-stepper__step-description--FontSize: var(--pf-global--FontSize--sm);
102
181
  --pf-c-progress-stepper__step-description--Color: var(--pf-global--Color--200);
103
182
  --pf-c-progress-stepper__step-description--TextAlign: left;
104
- --pf-c-progress-stepper--m-center__step-description--TextAlign: center;
105
- --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
106
- --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
183
+
184
+ // Vertical by default
185
+ @include pf-c-progress-stepper--m-vertical;
186
+
187
+ // Horizontal at md breakpoint
188
+ @media screen and (min-width: $pf-global--breakpoint--md) {
189
+ @include pf-c-progress-stepper--m-horizontal;
190
+ }
107
191
 
108
192
  position: relative;
109
193
  display: grid;
@@ -114,51 +198,66 @@
114
198
 
115
199
  // Progress stepper Modifiers
116
200
  &.pf-m-center {
117
- --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-center__step-connector--before--Left);
118
201
  --pf-c-progress-stepper__step-connector--JustifyContent: var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);
119
202
  --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-center__step-main--MarginRight);
120
203
  --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);
204
+ --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign);
121
205
  --pf-c-progress-stepper__step-description--MarginRight: var(--pf-c-progress-stepper--m-center__step-description--MarginRight);
122
206
  --pf-c-progress-stepper__step-description--MarginLeft: var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);
123
- --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign);
124
207
  --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign);
125
- }
208
+ --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);
209
+ --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);
126
210
 
127
- &.pf-m-vertical {
128
- --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);
129
- --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);
130
- --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);
131
- --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);
132
- --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);
133
- --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);
134
- --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);
135
- --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);
136
- --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);
137
- --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);
138
- --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);
139
- --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);
140
- --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);
141
- --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);
211
+ grid-template-columns: var(--pf-c-progress-stepper--m-center--GridTemplateColumns);
212
+
213
+ .pf-c-progress-stepper__step-main {
214
+ position: relative;
215
+ }
216
+
217
+ .pf-c-progress-stepper__step:not(:last-of-type) > .pf-c-progress-stepper__step-connector::before {
218
+ left: var(--pf-c-progress-stepper--m-center__step-connector--before--Left);
219
+ }
220
+
221
+ // If not compact variant, swap borders from connector to main
222
+ &:not(.pf-m-compact) {
223
+ .pf-c-progress-stepper__step:not(:last-of-type) > .pf-c-progress-stepper__step-main::before {
224
+ content: var(--pf-c-progress-stepper--m-center__step-main--before--Content);
225
+ }
226
+
227
+ .pf-c-progress-stepper__step:not(:last-of-type) > .pf-c-progress-stepper__step-connector::before {
228
+ content: var(--pf-c-progress-stepper--m-center__step-connector--before--Content);
229
+ }
230
+ }
142
231
  }
143
232
 
144
233
  &.pf-m-compact {
145
- --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-compact--GridAutoFlow);
146
- --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-compact--GridTemplateColumns);
147
- --pf-c-progress-stepper__step-icon--Width: var(--pf-c-progress-stepper--m-compact__step-icon--Width);
148
- --pf-c-progress-stepper__step-icon--FontSize: var(--pf-c-progress-stepper--m-compact__step-icon--FontSize);
149
- --pf-c-progress-stepper__pficon--MarginTop: var(--pf-c-progress-stepper--m-compact__pficon--MarginTop);
150
- --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: var(--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop);
151
234
  --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-compact__step-main--MarginTop);
152
235
  --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom);
236
+ --pf-c-progress-stepper__step-icon--Width: var(--pf-c-progress-stepper--m-compact__step-icon--Width);
237
+ --pf-c-progress-stepper__step-icon--FontSize: var(--pf-c-progress-stepper--m-compact__step-icon--FontSize);
153
238
  --pf-c-progress-stepper__step-title--FontSize: var(--pf-c-progress-stepper--m-compact__step-title--FontSize);
154
239
  --pf-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-c-progress-stepper--m-compact__step-title--FontWeight);
240
+ --pf-c-progress-stepper__pficon--MarginTop: var(--pf-c-progress-stepper--m-compact__pficon--MarginTop);
241
+ --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: var(--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop);
242
+ --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft);
243
+ --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight);
155
244
 
156
- .pf-c-progress-stepper__step:not(.pf-m-current) .pf-c-progress-stepper__step-main {
157
- @include pf-u-screen-reader;
245
+ display: inline-grid;
246
+ grid-template-columns: var(--pf-c-progress-stepper--m-compact--GridTemplateColumns);
247
+ grid-auto-flow: var(--pf-c-progress-stepper--m-compact--GridAutoFlow);
248
+
249
+ .pf-c-progress-stepper__step-connector {
250
+ min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
251
+ grid-row: var(--pf-c-progress-stepper--m-compact__step-connector--GridRow);
252
+ padding-bottom: var(--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom);
158
253
  }
159
254
 
160
- .pf-c-progress-stepper__step-description {
161
- display: none;
255
+ .pf-c-progress-stepper__step-main {
256
+ margin-bottom: var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom);
257
+ }
258
+
259
+ .pf-c-progress-stepper__step:not(.pf-m-current) .pf-c-progress-stepper__step-main {
260
+ @include pf-u-screen-reader;
162
261
  }
163
262
 
164
263
  // For this compact variant only, move the main content for the current step to above the icons
@@ -168,6 +267,10 @@
168
267
  grid-row: 1/2;
169
268
  }
170
269
  // stylelint-enable
270
+
271
+ .pf-c-progress-stepper__step-description {
272
+ display: none;
273
+ }
171
274
  }
172
275
  }
173
276
 
@@ -264,6 +367,16 @@
264
367
  // Step main
265
368
  .pf-c-progress-stepper__step-main {
266
369
  margin: var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);
370
+
371
+ // Draw a new border for vertical alignment using step main
372
+ .pf-c-progress-stepper__step:not(:last-of-type) > &::before {
373
+ position: absolute;
374
+ top: calc(100% + var(--pf-c-progress-stepper__step-main--MarginTop));
375
+ left: calc(50% - calc(var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) / 2));
376
+ width: auto;
377
+ height: calc(var(--pf-c-progress-stepper__step-main--MarginTop) + var(--pf-c-progress-stepper__step-main--MarginBottom));
378
+ border-right: var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderRightColor);
379
+ }
267
380
  }
268
381
 
269
382
  // Step title
@@ -301,3 +414,21 @@
301
414
  color: var(--pf-c-progress-stepper__step-description--Color);
302
415
  text-align: var(--pf-c-progress-stepper__step-description--TextAlign);
303
416
  }
417
+
418
+ // stylelint-disable no-duplicate-selectors
419
+ .pf-c-progress-stepper {
420
+ @each $breakpoint, $breakpoint-value in $pf-c-progress-stepper--breakpoint-map {
421
+ $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
422
+
423
+ @include pf-apply-breakpoint($breakpoint) {
424
+ &.pf-m-horizontal#{$breakpoint-name} {
425
+ @include pf-c-progress-stepper--m-horizontal;
426
+ }
427
+
428
+ &.pf-m-vertical#{$breakpoint-name} {
429
+ @include pf-c-progress-stepper--m-vertical;
430
+ }
431
+ }
432
+ }
433
+ }
434
+ // stylelint-enable
package/components/Wizard/wizard.css CHANGED
@@ -490,6 +490,7 @@
490
490
  }
491
491
 
492
492
  .pf-c-wizard__footer {
493
+ position: relative;
493
494
  z-index: var(--pf-c-wizard__footer--ZIndex);
494
495
  display: flex;
495
496
  flex-wrap: wrap;
@@ -503,7 +504,7 @@
503
504
  .pf-c-wizard__footer > *:not(:last-child) {
504
505
  margin-right: var(--pf-c-wizard__footer--child--MarginRight);
505
506
  }
506
- .pf-c-page__main-wizard .pf-c-wizard__footer, .pf-c-modal-box .pf-c-wizard__footer {
507
+ .pf-c-page__main-wizard .pf-c-wizard__footer, .pf-c-modal-box .pf-c-wizard__footer, .pf-c-drawer > .pf-c-wizard__footer {
507
508
  box-shadow: var(--pf-c-wizard__footer--BoxShadow);
508
509
  }
509
510
 
package/components/Wizard/wizard.scss CHANGED
@@ -531,6 +531,7 @@
531
531
  }
532
532
 
533
533
  .pf-c-wizard__footer {
534
+ position: relative;
534
535
  z-index: var(--pf-c-wizard__footer--ZIndex);
535
536
  display: flex;
536
537
  flex-wrap: wrap;
@@ -549,7 +550,8 @@
549
550
  // Limit shadow to a child of modal and main-wizard since we can ensure wizard footer is fixed in those usages
550
551
  // Make a regular style in a breaking change release
551
552
  .pf-c-page__main-wizard &,
552
- .pf-c-modal-box & {
553
+ .pf-c-modal-box &,
554
+ .pf-c-drawer > & {
553
555
  box-shadow: var(--pf-c-wizard__footer--BoxShadow);
554
556
  }
555
557
  }