Added focusRing

pull/5507/head
mertsincan 2024-01-04 16:08:38 +00:00
parent ba6d3ff893
commit 9e8b1f13d0
2 changed files with 10 additions and 4 deletions

View File

@ -114,7 +114,13 @@ export default {
borderRadius: '6px',
inlineGap: '{gap.2}', // inline-spacing
transitionDuration: '.2s',
transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}, border-color {transitionDuration}'
transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}, border-color {transitionDuration}, outline-color {transitionDuration}',
focusRing: {
width: '2px',
style: 'solid',
color: '{primary.500}',
offset: '2px'
}
},
components: {
global,

View File

@ -123,6 +123,7 @@ export default {
background: var(--p-panel-header-icon-background);
border-radius: var(--p-panel-header-icon-border-radius);
transition: var(--p-transition);
outline-color: transparent;
}
.p-panel-header-icon:enabled:hover {
color: var(--p-panel-header-icon-hover-color);
@ -130,9 +131,8 @@ export default {
background: var(--p-panel-header-icon-hover-background);
}
.p-panel-header-icon:focus-visible {
outline: var(--p-focus-outline); /* @todo */
outline-offset: var(--p-focus-outline-offset);
box-shadow: var(--p-focus-shadow);
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
}
.p-panel-toggleable > .p-panel-header {
padding: var(--p-panel-toggleable-header-padding-y) var(--p-panel-toggleable-header-padding-x);