vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed stepper colors

pull/5677/head
Cagatay Civici 2024-04-09 17:00:56 +03:00
parent cd74265a10
commit 2e57ae9a6e
2 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/stepper/style/StepperStyle.js
View File

@ -18,9 +18,9 @@ const classes = {
'p-disabled': instance.isItemDisabled(index) 'p-disabled': instance.isItemDisabled(index)
} }
], ],
action: 'p-stepper-header', action: 'p-stepper-item-header',
number: 'p-stepper-number', number: 'p-stepper-item-number',
title: 'p-stepper-title', title: 'p-stepper-item-title',
separator: 'p-stepper-separator', separator: 'p-stepper-separator',
toggleableContent: 'p-stepper-panel-content-container', toggleableContent: 'p-stepper-panel-content-container',
content: 'p-stepper-panel-content' content: 'p-stepper-panel-content'

20
components/lib/themes/primeone/base/stepper/index.js
View File

@ -23,7 +23,7 @@ export default {
flex: initial; flex: initial;
} }
.p-stepper-header { .p-stepper-item-header {
border: 0 none; border: 0 none;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -35,7 +35,7 @@ export default {
background: transparent; background: transparent;
} }
.p-stepper-item .p-stepper-header:focus-visible { .p-stepper-item .p-stepper-item-header:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
} }
@ -44,7 +44,7 @@ export default {
cursor: auto; cursor: auto;
} }
.p-stepper-title { .p-stepper-item-title {
display: block; display: block;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -56,7 +56,7 @@ export default {
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
} }
.p-stepper-number { .p-stepper-item-number {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -73,7 +73,7 @@ export default {
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
} }
.p-stepper-number::after { .p-stepper-item-number::after {
content: " "; content: " ";
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -82,17 +82,17 @@ export default {
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); 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-item.p-stepper-item-active .p-stepper-header { .p-stepper-item-active .p-stepper-item-header {
cursor: default; cursor: default;
} }
.p-stepper-item.p-stepper-item-active .p-stepper-number { .p-stepper-item-active .p-stepper-item-number {
background: ${dt('stepper.marker.active.background')}; background: ${dt('stepper.marker.active.background')};
color: ${dt('stepper.marker.active.background')}; color: ${dt('stepper.marker.active.color')};
} }
.p-stepper-item.p-stepper-item-active .p-stepper-title { .p-stepper-item-active .p-stepper-item-title {
color: ${dt('stepper.title.active.background')}; color: ${dt('stepper.title.active.color')};
} }
.p-stepper-item:not(.p-disabled):focus-visible { .p-stepper-item:not(.p-disabled):focus-visible {