pull/5315/head
tugcekucukoglu 2024-02-20 17:47:55 +03:00
parent 89610aae03
commit 5cc61a351c
82 changed files with 233 additions and 146 deletions

View File

@ -7,6 +7,7 @@
* @module stepper
*
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { StepperPanelPassThroughOptionType } from '../stepperpanel';
@ -53,10 +54,6 @@ export interface StepperPassThroughOptions {
* Used to pass attributes to the root's DOM element.
*/
root?: StepperPassThroughOptionType;
/**
* Used to pass attributes to the nav container's DOM element.
*/
navContainer?: StepperPassThroughOptionType;
/**
* Used to pass attributes to the nav's DOM element.
*/
@ -151,7 +148,16 @@ export interface StepperProps {
/**
* Defines valid slots in Stepper component.
*/
export interface StepperSlots {}
export interface StepperSlots {
/**
* Custom start template.
*/
start(): VNode[];
/**
* Custom end template.
*/
end(): VNode[];
}
/**
* Defines valid emits in Stepper component.

View File

@ -3,52 +3,50 @@
<slot v-if="$slots.start" name="start" />
<template v-if="orientation === 'horizontal'">
<div :class="cx('navContainer')" v-bind="ptm('navContainer')">
<ul ref="nav" :class="cx('nav')" v-bind="ptm('nav')">
<li
v-for="(step, index) of stepperpanels"
:key="getStepKey(step, index)"
:class="cx('stepper.header', { step, index })"
:aria-current="isStepActive(index) ? 'step' : undefined"
role="presentation"
v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'header', index) }"
data-pc-name="stepperpanel"
:data-p-highlight="isStepActive(index)"
:data-p-disabled="isItemDisabled(index)"
:data-pc-index="index"
:data-p-active="isStepActive(index)"
>
<slot name="header">
<StepperHeader
:id="getStepHeaderActionId(index)"
:template="step.children?.header"
:stepperpanel="step"
:index="index"
:disabled="isItemDisabled(index)"
:active="isStepActive(index)"
:highlighted="index < d_activeStep"
:class="cx('stepper.action')"
:aria-controls="getStepContentId(index)"
:clickCallback="(event) => onItemClick(event, index)"
:getStepPT="getStepPT"
:getStepProp="getStepProp"
/>
</slot>
<slot v-if="index !== stepperpanels.length - 1" name="separator">
<StepperSeparator
v-if="index !== stepperpanels.length - 1"
:template="step.children?.separator"
:separatorClass="cx('stepper.separator')"
:stepperpanel="step"
:index="index"
:active="isStepActive(index)"
:highlighted="index < d_activeStep"
:getStepPT="getStepPT(step, 'separator', index)"
/>
</slot>
</li>
</ul>
</div>
<ul ref="nav" :class="cx('nav')" v-bind="ptm('nav')">
<li
v-for="(step, index) of stepperpanels"
:key="getStepKey(step, index)"
:class="cx('stepper.header', { step, index })"
:aria-current="isStepActive(index) ? 'step' : undefined"
role="presentation"
v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'header', index) }"
data-pc-name="stepperpanel"
:data-p-highlight="isStepActive(index)"
:data-p-disabled="isItemDisabled(index)"
:data-pc-index="index"
:data-p-active="isStepActive(index)"
>
<slot name="header">
<StepperHeader
:id="getStepHeaderActionId(index)"
:template="step.children?.header"
:stepperpanel="step"
:index="index"
:disabled="isItemDisabled(index)"
:active="isStepActive(index)"
:highlighted="index < d_activeStep"
:class="cx('stepper.action')"
:aria-controls="getStepContentId(index)"
:clickCallback="(event) => onItemClick(event, index)"
:getStepPT="getStepPT"
:getStepProp="getStepProp"
/>
</slot>
<slot v-if="index !== stepperpanels.length - 1" name="separator">
<StepperSeparator
v-if="index !== stepperpanels.length - 1"
:template="step.children?.separator"
:separatorClass="cx('stepper.separator')"
:stepperpanel="step"
:index="index"
:active="isStepActive(index)"
:highlighted="index < d_activeStep"
:getStepPT="getStepPT(step, 'separator', index)"
/>
</slot>
</li>
</ul>
<div :class="cx('panelContainer')" v-bind="ptm('panelContainer')">
<template v-for="(step, index) of stepperpanels" :key="getStepKey(step, index)">
<StepperContent
@ -100,20 +98,21 @@
/>
</slot>
</div>
<div :class="cx('stepper.toggleableContent')" v-bind="getStepPT(step, 'toggleableContent', index)">
<slot v-if="index !== stepperpanels.length - 1" name="separator">
<StepperSeparator
v-if="index !== stepperpanels.length - 1"
:template="step.children?.separator"
:separatorClass="cx('stepper.separator')"
:stepperpanel="step"
:index="index"
:active="isStepActive(index)"
:highlighted="index < d_activeStep"
:getStepPT="getStepPT(step, 'separator', index)"
/>
</slot>
<transition name="p-toggleable-content" v-bind="getStepPT(step, 'transition', index)">
<transition name="p-toggleable-content" v-bind="getStepPT(step, 'transition', index)">
<div v-if="isStepActive(index)" :class="cx('stepper.toggleableContent')" v-bind="getStepPT(step, 'toggleableContent', index)">
<slot v-if="index !== stepperpanels.length - 1" name="separator">
<StepperSeparator
v-if="index !== stepperpanels.length - 1"
:template="step.children?.separator"
:separatorClass="cx('stepper.separator')"
:stepperpanel="step"
:index="index"
:active="isStepActive(index)"
:highlighted="index < d_activeStep"
:getStepPT="getStepPT(step, 'separator', index)"
/>
</slot>
<slot name="content">
<StepperContent
v-show="isStepActive(index)"
@ -130,8 +129,8 @@
:aria-labelledby="getStepHeaderActionId(index)"
/>
</slot>
</transition>
</div>
</div>
</transition>
</div>
</template>
<slot v-if="$slots.end" name="end" />

View File

@ -1,5 +1,16 @@
<template>
<component v-if="template" :is="template" :index="index" :active="active" :highlighted="highlighted" :class="cx('stepper.action')" :clickCallback="(event) => clickCallback(event, index)" />
<component
v-if="template"
:is="template"
:index="index"
:active="active"
:highlighted="highlighted"
:class="cx('stepper.action')"
:headerClass="cx('stepper.action')"
:numberClass="cx('stepper.number')"
:titleClass="cx('stepper.title')"
:clickCallback="(event) => clickCallback(event, index)"
/>
<button v-else :id="id" :class="cx('stepper.action')" role="tab" :tabindex="disabled ? -1 : undefined" :aria-controls="ariaControls" @click="clickCallback($event, index)" v-bind="getStepPT(stepperpanel, 'action', index)">
<span :class="cx('stepper.number')" v-bind="getStepPT(stepperpanel, 'number', index)">{{ index + 1 }}</span>
<span :class="cx('stepper.title')" v-bind="getStepPT(stepperpanel, 'title', index)">{{ getStepProp(stepperpanel, 'header') }}</span>

View File

@ -9,7 +9,6 @@ const classes = {
'p-readonly': props.linear
}
],
navContainer: 'p-stepper-nav-container',
nav: 'p-stepper-nav',
stepper: {
header: ({ instance, step, index }) => [

View File

@ -184,6 +184,18 @@ export interface StepperPanelSlots {
* Style class of the stepperpanel
*/
class: string;
/**
* Style class of the stepperpanel
*/
headerClass: string;
/**
* Style class of the number content container
*/
numberClass: string;
/**
* Style class of the title content container
*/
titleClass: string;
/**
* Header click function.
* @param {Event} event - Browser event

View File

@ -6335,12 +6335,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6335,12 +6335,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6335,12 +6335,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6335,12 +6335,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6403,12 +6403,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11797,6 +11797,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #18181b;
color: #fbbf24;

View File

@ -6403,12 +6403,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11797,6 +11797,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #18181b;
color: #60a5fa;

View File

@ -6403,12 +6403,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11797,6 +11797,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #18181b;
color: #22d3ee;

View File

@ -6403,12 +6403,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11797,6 +11797,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #18181b;
color: #34d399;

View File

@ -6403,12 +6403,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11797,6 +11797,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #18181b;
color: #818cf8;

View File

@ -6403,12 +6403,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11797,6 +11797,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #18181b;
color: #a3e635;

View File

@ -6403,12 +6403,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11797,6 +11797,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #18181b;
color: #fafafa;

View File

@ -6403,12 +6403,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11797,6 +11797,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #18181b;
color: #f472b6;

View File

@ -6403,12 +6403,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11797,6 +11797,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #18181b;
color: #a78bfa;

View File

@ -6403,12 +6403,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11797,6 +11797,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #18181b;
color: #2dd4bf;

View File

@ -6405,12 +6405,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11795,6 +11795,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #ffffff;
color: #f59e0b;

View File

@ -6405,12 +6405,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11795,6 +11795,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #ffffff;
color: #3B82F6;

View File

@ -6405,12 +6405,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11795,6 +11795,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #ffffff;
color: #06b6d4;

View File

@ -6405,12 +6405,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11795,6 +11795,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #ffffff;
color: #10b981;

View File

@ -6405,12 +6405,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11795,6 +11795,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #ffffff;
color: #6366F1;

View File

@ -6405,12 +6405,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11795,6 +11795,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #ffffff;
color: #84cc16;

View File

@ -6413,12 +6413,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11803,6 +11803,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #ffffff;
color: #020617;

View File

@ -6405,12 +6405,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11795,6 +11795,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #ffffff;
color: #ec4899;

View File

@ -6405,12 +6405,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11795,6 +11795,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #ffffff;
color: #8B5CF6;

View File

@ -6405,12 +6405,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
@ -11795,6 +11795,9 @@
border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
background: #ffffff;
color: #14b8a6;

View File

@ -6396,12 +6396,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6396,12 +6396,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6396,12 +6396,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6396,12 +6396,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6307,12 +6307,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6378,12 +6378,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6378,12 +6378,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6378,12 +6378,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6378,12 +6378,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6378,12 +6378,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6378,12 +6378,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6378,12 +6378,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6378,12 +6378,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6378,12 +6378,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6378,12 +6378,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6378,12 +6378,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6378,12 +6378,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6378,12 +6378,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6378,12 +6378,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6378,12 +6378,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6378,12 +6378,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6322,12 +6322,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6322,12 +6322,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6322,12 +6322,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6322,12 +6322,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6409,12 +6409,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6409,12 +6409,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6408,12 +6408,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6408,12 +6408,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6409,12 +6409,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6409,12 +6409,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6408,12 +6408,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6408,12 +6408,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6363,12 +6363,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6335,12 +6335,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6310,12 +6310,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6322,12 +6322,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6322,12 +6322,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6322,12 +6322,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6310,12 +6310,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6335,12 +6335,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6335,12 +6335,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6335,12 +6335,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6335,12 +6335,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6383,12 +6383,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6383,12 +6383,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6370,12 +6370,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6335,12 +6335,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6335,12 +6335,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6335,12 +6335,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6335,12 +6335,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6416,12 +6416,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}

View File

@ -6416,12 +6416,12 @@
flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
min-height: 28px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}