Examples
Progress steppers have default icons associated with the variant property, and may be overriden and customized using the icon property.
With step descriptions
- First stepThis is the first thing to happen
- Second stepThis is the second thing to happen
- Third stepThis is the last thing to happen
With alignment
- First stepThis is the first thing to happen
- Second stepThis is the second thing to happen
- Third stepThis is the last thing to happen
Compact
Compact progress steppers will only display the current step's title, and will not display any steps' description texts.
- First step
- Second step
- Third step
With help popover
To add a popover to a progress step, set the popoverRender properties on the ProgressStep component.
- Fourth step
Props
ProgressStepper
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Adds an accessible label to the progress stepper. | |
| children | React.ReactNode | Content rendered inside the progress stepper. | |
| className | string | Additional classes applied to the progress stepper container. | |
| isCenterAligned | boolean | Flag indicating the progress stepper should be centered. | |
| isCompact | boolean | Flag indicating the progress stepper should be rendered compactly. | |
| isVertical | boolean | Flag indicating the progress stepper has a vertical layout. |
ProgressStep
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Accessible label for the progress step. Should communicate all information being communicated by the progress step's icon, including the variant and the completed status. | |
| children | React.ReactNode | Content rendered inside the progress step. | |
| className | string | Additional classes applied to the progress step container. | |
| description | React.ReactNode | Description text of a progress step. | |
| icon | React.ReactNode | Custom icon of a progress step. Will override default icons provided by the variant. | |
| isCurrent | boolean | Flag indicating the progress step is the current step. | |
| popoverRender | (stepRef: React.RefObject<any>) => React.ReactNode | Forwards the step ref to rendered function. Use this prop to add a popover to the step. | |
| titleId | string | ID of the title of the progress step. | |
| variant | 'default' | 'success' | 'info' | 'pending' | 'warning' | 'danger' | Variant of the progress step. Each variant has a default icon. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical--GridAutoFlow | row | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical--GridTemplateColumns | auto 1fr | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Top | 0 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Left | calc(1.75rem / 2) | ||
--pf-v5-c-progress-stepper--m-vertical__step-connector--before--Left calc(--pf-v5-c-progress-stepper__step-icon--Width / 2) calc(1.75rem / 2) | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Width | auto | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Height | 100% | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth | 2px | ||
--pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor | #d2d2d2 | ||
--pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth | 0 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor | transparent | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Transform | translateX(-50%) | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical__step-main--MarginTop | 0.25rem | ||
--pf-v5-c-progress-stepper--m-vertical__step-main--MarginTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical__step-main--MarginRight | 0 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical__step-main--MarginBottom | 2rem | ||
--pf-v5-c-progress-stepper--m-vertical__step-main--MarginBottom --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft | 0.25rem | ||
--pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns | 1fr | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom | 0.5rem | ||
--pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow | auto | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginTop | 0 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight | 0 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft | 0 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical--m-center__step-main--MarginRight | 0 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft | 0 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal--GridAutoFlow | column | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal--GridTemplateColumns | initial | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Top | calc(1.75rem / 2) | ||
--pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Top calc(--pf-v5-c-progress-stepper__step-icon--Height / 2) calc(--pf-v5-c-progress-stepper__step-icon--Width / 2) calc(1.75rem / 2) | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Left | 0 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Width | 100% | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Height | auto | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth | 0 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor | unset | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth | 2px | ||
--pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor | #d2d2d2 | ||
--pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Transform | translateY(-50%) | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginTop | 0.5rem | ||
--pf-v5-c-progress-stepper--m-horizontal__step-main--MarginTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginRight | 0.5rem | ||
--pf-v5-c-progress-stepper--m-horizontal__step-main--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginBottom | 0 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginLeft | 0 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns | repeat(auto-fill, 1.75rem) | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom | 0 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow | 2 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-compact--GridAutoFlow | row | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-compact__step-main--MarginTop | 0 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-compact__step-main--MarginBottom | 0.5rem | ||
--pf-v5-c-progress-stepper--m-compact__step-main--MarginBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-compact__step-connector--MinWidth | 1.75rem | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-compact__step-icon--Width | 1.125rem | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-compact__step-icon--FontSize | 0.75rem | ||
--pf-v5-c-progress-stepper--m-compact__step-icon--FontSize --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-compact__step-title--FontSize | 0.875rem | ||
--pf-v5-c-progress-stepper--m-compact__step-title--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-compact__step-title--FontWeight | 400 | ||
--pf-v5-c-progress-stepper--m-compact__step-title--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-compact__pficon--MarginTop | 2px | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop | -3px | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-center__step-connector--before--Left | 50% | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-center--GridTemplateColumns | 1fr | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-center__step-connector--JustifyContent | center | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-center__step-main--MarginRight | 0.25rem | ||
--pf-v5-c-progress-stepper--m-center__step-main--MarginRight --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-center__step-main--MarginLeft | 0.25rem | ||
--pf-v5-c-progress-stepper--m-center__step-main--MarginLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-center__step-main--TextAlign | center | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-center__step-description--MarginRight | 0 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-center__step-description--MarginLeft | 0 | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--GridTemplateRows | auto 1fr | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-connector--JustifyContent | flex-start | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-icon--ZIndex | 100 | ||
--pf-v5-c-progress-stepper__step-icon--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-icon--Width | 1.75rem | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-icon--Height | 1.75rem | ||
--pf-v5-c-progress-stepper__step-icon--Height --pf-v5-c-progress-stepper__step-icon--Width 1.75rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-icon--FontSize | 1rem | ||
--pf-v5-c-progress-stepper__step-icon--FontSize --pf-v5-global--icon--FontSize--md $pf-v5-global--icon--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-icon--Color | #151515 | ||
--pf-v5-c-progress-stepper__step-icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-icon--BackgroundColor | #fafafa | ||
--pf-v5-c-progress-stepper__step-icon--BackgroundColor --pf-v5-global--BackgroundColor--light-200 $pf-v5-global--BackgroundColor--light-200 $pf-v5-color-black-100 #fafafa | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-icon--BorderWidth | 2px | ||
--pf-v5-c-progress-stepper__step-icon--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-icon--BorderColor | #d2d2d2 | ||
--pf-v5-c-progress-stepper__step-icon--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__pficon--MarginTop | 3px | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop | -5px | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-title--Color | #151515 | ||
--pf-v5-c-progress-stepper__step-title--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-title--TextAlign | start | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-title--FontSize | 1rem | ||
--pf-v5-c-progress-stepper__step-title--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-title--FontWeight | 400 | ||
--pf-v5-c-progress-stepper__step-title--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight | 700 | ||
--pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step--m-current__step-title--Color | #151515 | ||
--pf-v5-c-progress-stepper__step--m-current__step-title--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step--m-pending__step-title--Color | #6a6e73 | ||
--pf-v5-c-progress-stepper__step--m-pending__step-title--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step--m-danger__step-title--Color | #c9190b | ||
--pf-v5-c-progress-stepper__step--m-danger__step-title--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor | #8a8d90 | ||
--pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationThickness | 1px | ||
--pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationThickness --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset | 0.25rem | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor | #151515 | ||
--pf-v5-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor | #151515 | ||
--pf-v5-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-title--m-help-text--hover--Color | #151515 | ||
--pf-v5-c-progress-stepper__step-title--m-help-text--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-title--m-help-text--focus--Color | #151515 | ||
--pf-v5-c-progress-stepper__step-title--m-help-text--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color | #a30000 | ||
--pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color | #a30000 | ||
--pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor | #c9190b | ||
--pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor | #a30000 | ||
--pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor | #a30000 | ||
--pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-description--MarginTop | 0.25rem | ||
--pf-v5-c-progress-stepper__step-description--MarginTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-description--FontSize | 0.875rem | ||
--pf-v5-c-progress-stepper__step-description--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-description--Color | #6a6e73 | ||
--pf-v5-c-progress-stepper__step-description--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-description--TextAlign | start | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--GridAutoFlow | row | ||
--pf-v5-c-progress-stepper--GridAutoFlow --pf-v5-c-progress-stepper--m-vertical--GridAutoFlow row | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--GridTemplateColumns | auto 1fr | ||
--pf-v5-c-progress-stepper--GridTemplateColumns --pf-v5-c-progress-stepper--m-vertical--GridTemplateColumns auto 1fr | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-connector--before--Top | 0 | ||
--pf-v5-c-progress-stepper__step-connector--before--Top --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Top 0 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-connector--before--Left | calc(1.75rem / 2) | ||
--pf-v5-c-progress-stepper__step-connector--before--Left --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Left calc(--pf-v5-c-progress-stepper__step-icon--Width / 2) calc(1.75rem / 2) | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-connector--before--Width | auto | ||
--pf-v5-c-progress-stepper__step-connector--before--Width --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Width auto | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-connector--before--Height | 100% | ||
--pf-v5-c-progress-stepper__step-connector--before--Height --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Height 100% | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth | 2px | ||
--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-connector--before--BorderRightColor | #d2d2d2 | ||
--pf-v5-c-progress-stepper__step-connector--before--BorderRightColor --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-connector--before--BorderBottomWidth | 0 | ||
--pf-v5-c-progress-stepper__step-connector--before--BorderBottomWidth --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth 0 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-connector--before--BorderBottomColor | transparent | ||
--pf-v5-c-progress-stepper__step-connector--before--BorderBottomColor --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor transparent | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-connector--before--Transform | translateX(-50%) | ||
--pf-v5-c-progress-stepper__step-connector--before--Transform --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Transform translateX(-50%) | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-main--MarginTop | 0.25rem | ||
--pf-v5-c-progress-stepper__step-main--MarginTop --pf-v5-c-progress-stepper--m-vertical__step-main--MarginTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-main--MarginRight | 0 | ||
--pf-v5-c-progress-stepper__step-main--MarginRight --pf-v5-c-progress-stepper--m-vertical__step-main--MarginRight 0 | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-main--MarginBottom | 2rem | ||
--pf-v5-c-progress-stepper__step-main--MarginBottom --pf-v5-c-progress-stepper--m-vertical__step-main--MarginBottom --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper__step-main--MarginLeft | 0.25rem | ||
--pf-v5-c-progress-stepper__step-main--MarginLeft --pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-compact--GridTemplateColumns | 1fr | ||
--pf-v5-c-progress-stepper--m-compact--GridTemplateColumns --pf-v5-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns 1fr | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-compact__step-connector--GridRow | auto | ||
--pf-v5-c-progress-stepper--m-compact__step-connector--GridRow --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow auto | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-compact__step-connector--PaddingBottom | 0.5rem | ||
--pf-v5-c-progress-stepper--m-compact__step-connector--PaddingBottom --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-center__step-connector--before--Content | none | ||
| .pf-v5-c-progress-stepper | --pf-v5-c-progress-stepper--m-center__step-main--before--Content | "" | ||
| .pf-v5-c-progress-stepper.pf-m-center | --pf-v5-c-progress-stepper__step-connector--JustifyContent | center | ||
--pf-v5-c-progress-stepper__step-connector--JustifyContent --pf-v5-c-progress-stepper--m-center__step-connector--JustifyContent center | ||||
| .pf-v5-c-progress-stepper.pf-m-center | --pf-v5-c-progress-stepper__step-main--MarginRight | 0.25rem | ||
--pf-v5-c-progress-stepper__step-main--MarginRight --pf-v5-c-progress-stepper--m-center__step-main--MarginRight --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-progress-stepper.pf-m-center | --pf-v5-c-progress-stepper__step-main--MarginLeft | 0.25rem | ||
--pf-v5-c-progress-stepper__step-main--MarginLeft --pf-v5-c-progress-stepper--m-center__step-main--MarginLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-progress-stepper.pf-m-center | --pf-v5-c-progress-stepper--step-main--TextAlign | center, auto | ||
--pf-v5-c-progress-stepper--step-main--TextAlign var(--pf-v5-c-progress-stepper--m-center__step-main--TextAlign, auto) center, auto | ||||
| .pf-v5-c-progress-stepper.pf-m-center | --pf-v5-c-progress-stepper__step-title--TextAlign | undefined, auto | ||
--pf-v5-c-progress-stepper__step-title--TextAlign var(--pf-v5-c-progress-stepper--m-center__step-title--TextAlign, auto) undefined, auto | ||||
| .pf-v5-c-progress-stepper.pf-m-center | --pf-v5-c-progress-stepper__step-description--MarginRight | 0 | ||
--pf-v5-c-progress-stepper__step-description--MarginRight --pf-v5-c-progress-stepper--m-center__step-description--MarginRight 0 | ||||
| .pf-v5-c-progress-stepper.pf-m-center | --pf-v5-c-progress-stepper__step-description--MarginLeft | 0 | ||
--pf-v5-c-progress-stepper__step-description--MarginLeft --pf-v5-c-progress-stepper--m-center__step-description--MarginLeft 0 | ||||
| .pf-v5-c-progress-stepper.pf-m-center | --pf-v5-c-progress-stepper__step-description--TextAlign | undefined, auto | ||
--pf-v5-c-progress-stepper__step-description--TextAlign var(--pf-v5-c-progress-stepper--m-center__step-description--TextAlign, auto) undefined, auto | ||||
| .pf-v5-c-progress-stepper.pf-m-center | --pf-v5-c-progress-stepper--m-vertical__step-main--MarginRight | 0 | ||
--pf-v5-c-progress-stepper--m-vertical__step-main--MarginRight --pf-v5-c-progress-stepper--m-vertical--m-center__step-main--MarginRight 0 | ||||
| .pf-v5-c-progress-stepper.pf-m-center | --pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft | 0 | ||
--pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft --pf-v5-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft 0 | ||||
| .pf-v5-c-progress-stepper.pf-m-compact | --pf-v5-c-progress-stepper__step-main--MarginTop | 0 | ||
--pf-v5-c-progress-stepper__step-main--MarginTop --pf-v5-c-progress-stepper--m-compact__step-main--MarginTop 0 | ||||
| .pf-v5-c-progress-stepper.pf-m-compact | --pf-v5-c-progress-stepper__step-main--MarginBottom | 0.5rem | ||
--pf-v5-c-progress-stepper__step-main--MarginBottom --pf-v5-c-progress-stepper--m-compact__step-main--MarginBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-progress-stepper.pf-m-compact | --pf-v5-c-progress-stepper__step-icon--Width | 1.125rem | ||
--pf-v5-c-progress-stepper__step-icon--Width --pf-v5-c-progress-stepper--m-compact__step-icon--Width 1.125rem | ||||
| .pf-v5-c-progress-stepper.pf-m-compact | --pf-v5-c-progress-stepper__step-icon--FontSize | 0.75rem | ||
--pf-v5-c-progress-stepper__step-icon--FontSize --pf-v5-c-progress-stepper--m-compact__step-icon--FontSize --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-progress-stepper.pf-m-compact | --pf-v5-c-progress-stepper__step-title--FontSize | 0.875rem | ||
--pf-v5-c-progress-stepper__step-title--FontSize --pf-v5-c-progress-stepper--m-compact__step-title--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-progress-stepper.pf-m-compact | --pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight | 400 | ||
--pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight --pf-v5-c-progress-stepper--m-compact__step-title--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-progress-stepper.pf-m-compact | --pf-v5-c-progress-stepper__pficon--MarginTop | 2px | ||
--pf-v5-c-progress-stepper__pficon--MarginTop --pf-v5-c-progress-stepper--m-compact__pficon--MarginTop 2px | ||||
| .pf-v5-c-progress-stepper.pf-m-compact | --pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop | -3px | ||
--pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop --pf-v5-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop -3px | ||||
| .pf-v5-c-progress-stepper.pf-m-compact | --pf-v5-c-progress-stepper--m-vertical__step-main--MarginTop | 0 | ||
--pf-v5-c-progress-stepper--m-vertical__step-main--MarginTop --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginTop 0 | ||||
| .pf-v5-c-progress-stepper.pf-m-compact | --pf-v5-c-progress-stepper--m-vertical__step-main--MarginRight | 0 | ||
--pf-v5-c-progress-stepper--m-vertical__step-main--MarginRight --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight 0 | ||||
| .pf-v5-c-progress-stepper.pf-m-compact | --pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft | 0 | ||
--pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft 0 | ||||
| .pf-v5-c-progress-stepper__step.pf-m-current | --pf-v5-c-progress-stepper__step-title--FontWeight | 700 | ||
--pf-v5-c-progress-stepper__step-title--FontWeight --pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
| .pf-v5-c-progress-stepper__step.pf-m-current | --pf-v5-c-progress-stepper__step-title--Color | #151515 | ||
--pf-v5-c-progress-stepper__step-title--Color --pf-v5-c-progress-stepper__step--m-current__step-title--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-progress-stepper__step.pf-m-pending | --pf-v5-c-progress-stepper__step-title--Color | #6a6e73 | ||
--pf-v5-c-progress-stepper__step-title--Color --pf-v5-c-progress-stepper__step--m-pending__step-title--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-progress-stepper__step.pf-m-success | --pf-v5-c-progress-stepper__step-icon--Color | #3e8635 | ||
--pf-v5-c-progress-stepper__step-icon--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-progress-stepper__step.pf-m-danger | --pf-v5-c-progress-stepper__step-icon--Color | #c9190b | ||
--pf-v5-c-progress-stepper__step-icon--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-progress-stepper__step.pf-m-danger | --pf-v5-c-progress-stepper__step-title--Color | #c9190b | ||
--pf-v5-c-progress-stepper__step-title--Color --pf-v5-c-progress-stepper__step--m-danger__step-title--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-progress-stepper__step.pf-m-danger | --pf-v5-c-progress-stepper__step-title--m-help-text--hover--Color | #a30000 | ||
--pf-v5-c-progress-stepper__step-title--m-help-text--hover--Color --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-progress-stepper__step.pf-m-danger | --pf-v5-c-progress-stepper__step-title--m-help-text--focus--Color | #a30000 | ||
--pf-v5-c-progress-stepper__step-title--m-help-text--focus--Color --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-progress-stepper__step.pf-m-danger | --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor | #c9190b | ||
--pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-progress-stepper__step.pf-m-danger | --pf-v5-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor | #a30000 | ||
--pf-v5-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-progress-stepper__step.pf-m-danger | --pf-v5-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor | #a30000 | ||
--pf-v5-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-progress-stepper__step.pf-m-warning | --pf-v5-c-progress-stepper__step-icon--Color | #f0ab00 | ||
--pf-v5-c-progress-stepper__step-icon--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-progress-stepper__step.pf-m-info | --pf-v5-c-progress-stepper__step-icon--Color | #2b9af3 | ||
--pf-v5-c-progress-stepper__step-icon--Color --pf-v5-global--info-color--100 $pf-v5-global--info-color--100 $pf-v5-color-blue-300 #2b9af3 | ||||
| .pf-v5-c-progress-stepper__step:last-child | --pf-v5-c-progress-stepper__step-main--MarginBottom | 0 | ||
| .pf-v5-c-progress-stepper__step-title.pf-m-help-text:hover | --pf-v5-c-progress-stepper__step-title--Color | #151515 | ||
--pf-v5-c-progress-stepper__step-title--Color --pf-v5-c-progress-stepper__step-title--m-help-text--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-progress-stepper__step-title.pf-m-help-text:hover | --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor | #151515 | ||
--pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor --pf-v5-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-progress-stepper__step-title.pf-m-help-text:focus | --pf-v5-c-progress-stepper__step-title--Color | #151515 | ||
--pf-v5-c-progress-stepper__step-title--Color --pf-v5-c-progress-stepper__step-title--m-help-text--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-progress-stepper__step-title.pf-m-help-text:focus | --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor | #151515 | ||
--pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor --pf-v5-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper--GridAutoFlow | column | ||
--pf-v5-c-progress-stepper--GridAutoFlow --pf-v5-c-progress-stepper--m-horizontal--GridAutoFlow column | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper--GridTemplateColumns | initial | ||
--pf-v5-c-progress-stepper--GridTemplateColumns --pf-v5-c-progress-stepper--m-horizontal--GridTemplateColumns initial | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper__step-connector--before--Top | calc(1.75rem / 2) | ||
--pf-v5-c-progress-stepper__step-connector--before--Top --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Top calc(--pf-v5-c-progress-stepper__step-icon--Height / 2) calc(--pf-v5-c-progress-stepper__step-icon--Width / 2) calc(1.75rem / 2) | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper__step-connector--before--Left | 0 | ||
--pf-v5-c-progress-stepper__step-connector--before--Left --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Left 0 | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper__step-connector--before--Width | 100% | ||
--pf-v5-c-progress-stepper__step-connector--before--Width --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Width 100% | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper__step-connector--before--Height | auto | ||
--pf-v5-c-progress-stepper__step-connector--before--Height --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Height auto | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth | 0 | ||
--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth 0 | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper__step-connector--before--BorderRightColor | unset | ||
--pf-v5-c-progress-stepper__step-connector--before--BorderRightColor --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor unset | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper__step-connector--before--BorderBottomWidth | 2px | ||
--pf-v5-c-progress-stepper__step-connector--before--BorderBottomWidth --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper__step-connector--before--BorderBottomColor | #d2d2d2 | ||
--pf-v5-c-progress-stepper__step-connector--before--BorderBottomColor --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper__step-connector--before--Transform | translateY(-50%) | ||
--pf-v5-c-progress-stepper__step-connector--before--Transform --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Transform translateY(-50%) | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper__step-main--MarginTop | 0.5rem | ||
--pf-v5-c-progress-stepper__step-main--MarginTop --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper__step-main--MarginRight | 0.5rem | ||
--pf-v5-c-progress-stepper__step-main--MarginRight --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper__step-main--MarginBottom | 0 | ||
--pf-v5-c-progress-stepper__step-main--MarginBottom --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginBottom 0 | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper__step-main--MarginLeft | 0 | ||
--pf-v5-c-progress-stepper__step-main--MarginLeft --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginLeft 0 | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper--m-compact--GridTemplateColumns | repeat(auto-fill, 1.75rem) | ||
--pf-v5-c-progress-stepper--m-compact--GridTemplateColumns --pf-v5-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns repeat(auto-fill, 1.75rem) | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper--m-compact__step-connector--GridRow | 2 | ||
--pf-v5-c-progress-stepper--m-compact__step-connector--GridRow --pf-v5-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow 2 | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper--m-compact__step-connector--PaddingBottom | 0 | ||
--pf-v5-c-progress-stepper--m-compact__step-connector--PaddingBottom --pf-v5-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom 0 | ||||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper--m-center__step-connector--before--Content | "" | ||
| .pf-v5-c-progress-stepper.pf-m-horizontal | --pf-v5-c-progress-stepper--m-center__step-main--before--Content | none | ||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper--GridAutoFlow | row | ||
--pf-v5-c-progress-stepper--GridAutoFlow --pf-v5-c-progress-stepper--m-vertical--GridAutoFlow row | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper--GridTemplateColumns | auto 1fr | ||
--pf-v5-c-progress-stepper--GridTemplateColumns --pf-v5-c-progress-stepper--m-vertical--GridTemplateColumns auto 1fr | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper__step-connector--before--Top | 0 | ||
--pf-v5-c-progress-stepper__step-connector--before--Top --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Top 0 | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper__step-connector--before--Left | calc(1.75rem / 2) | ||
--pf-v5-c-progress-stepper__step-connector--before--Left --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Left calc(--pf-v5-c-progress-stepper__step-icon--Width / 2) calc(1.75rem / 2) | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper__step-connector--before--Width | auto | ||
--pf-v5-c-progress-stepper__step-connector--before--Width --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Width auto | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper__step-connector--before--Height | 100% | ||
--pf-v5-c-progress-stepper__step-connector--before--Height --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Height 100% | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth | 2px | ||
--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper__step-connector--before--BorderRightColor | #d2d2d2 | ||
--pf-v5-c-progress-stepper__step-connector--before--BorderRightColor --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper__step-connector--before--BorderBottomWidth | 0 | ||
--pf-v5-c-progress-stepper__step-connector--before--BorderBottomWidth --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth 0 | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper__step-connector--before--BorderBottomColor | transparent | ||
--pf-v5-c-progress-stepper__step-connector--before--BorderBottomColor --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor transparent | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper__step-connector--before--Transform | translateX(-50%) | ||
--pf-v5-c-progress-stepper__step-connector--before--Transform --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Transform translateX(-50%) | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper__step-main--MarginTop | 0.25rem | ||
--pf-v5-c-progress-stepper__step-main--MarginTop --pf-v5-c-progress-stepper--m-vertical__step-main--MarginTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper__step-main--MarginRight | 0 | ||
--pf-v5-c-progress-stepper__step-main--MarginRight --pf-v5-c-progress-stepper--m-vertical__step-main--MarginRight 0 | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper__step-main--MarginBottom | 2rem | ||
--pf-v5-c-progress-stepper__step-main--MarginBottom --pf-v5-c-progress-stepper--m-vertical__step-main--MarginBottom --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper__step-main--MarginLeft | 0.25rem | ||
--pf-v5-c-progress-stepper__step-main--MarginLeft --pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper--m-compact--GridTemplateColumns | 1fr | ||
--pf-v5-c-progress-stepper--m-compact--GridTemplateColumns --pf-v5-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns 1fr | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper--m-compact__step-connector--GridRow | auto | ||
--pf-v5-c-progress-stepper--m-compact__step-connector--GridRow --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow auto | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper--m-compact__step-connector--PaddingBottom | 0.5rem | ||
--pf-v5-c-progress-stepper--m-compact__step-connector--PaddingBottom --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper--m-center__step-connector--before--Content | none | ||
| .pf-v5-c-progress-stepper.pf-m-vertical | --pf-v5-c-progress-stepper--m-center__step-main--before--Content | "" | ||
View source on GitHub
