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

Focus visuals for tabpanel

pull/5756/head
Cagatay Civici 2024-05-15 12:50:33 +03:00
parent b6620cec8d
commit 7edc4b5fef
4 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/tabs/style/TabsStyle.js
View File

@ -115,6 +115,12 @@ const theme = ({ dt }) => `
outline: 0 none;
}
.p-tabpanel:focus-visible {
box-shadow: ${dt('tabs.tabpanel.focus.ring.shadow')};
outline: ${dt('tabs.tabpanel.focus.ring.width')} ${dt('tabs.tabpanel.focus.ring.style')} ${dt('tabs.tabpanel.focus.ring.color')};
outline-offset: ${dt('tabs.tabpanel.focus.ring.offset')};
}
.p-tablist-active-bar {
z-index: 1;
display: block;

9
components/lib/themes/aura/tabs/index.js
View File

@ -30,7 +30,14 @@ export default {
tabpanel: {
background: '{content.background}',
color: '{content.color}',
padding: '0.875rem 1.125rem 1.125rem 1.125rem'
padding: '0.875rem 1.125rem 1.125rem 1.125rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: 'inset {focus.ring.shadow}'
}
},
navButton: {
background: '{content.background}',

9
components/lib/themes/lara/tabs/index.js
View File

@ -26,7 +26,14 @@ export default {
tabpanel: {
background: '{content.background}',
color: '{content.color}',
padding: '0.875rem 1.125rem 1.125rem 1.125rem'
padding: '0.875rem 1.125rem 1.125rem 1.125rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: 'inset {focus.ring.shadow}'
}
},
navButton: {
background: '{content.background}',

9
components/lib/themes/nora/tabs/index.js
View File

@ -29,7 +29,14 @@ export default {
tabpanel: {
background: '{content.background}',
color: '{content.color}',
padding: '0.875rem 1.125rem 1.125rem 1.125rem'
padding: '0.875rem 1.125rem 1.125rem 1.125rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: 'inset {focus.ring.shadow}'
}
},
navButton: {
background: '{content.background}',