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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/lib/theme/lara/index.js
View File

@ -114,7 +114,13 @@ export default {
borderRadius: '6px', borderRadius: '6px',
inlineGap: '{gap.2}', // inline-spacing inlineGap: '{gap.2}', // inline-spacing
transitionDuration: '.2s', 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: { components: {
global, global,

6
components/lib/theme/lara/panel/index.js
View File

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