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

Tokens for ScrollPanel

pull/5756/head
Cagatay Civici 2024-05-11 16:25:48 +03:00
parent 83eab20745
commit cda6f133cc
3 changed files with 37 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/lib/scrollpanel/style/ScrollPanelStyle.js
View File

@ -11,9 +11,9 @@ const theme = ({ dt }) => `
}
.p-scrollpanel-content {
height: calc(100% + 18px);
width: calc(100% + 18px);
padding: 0 18px 18px 0;
height: calc(100% + calc(2 * ${dt('scrollpanel.bar.size')}));
width: calc(100% + calc(2 * ${dt('scrollpanel.bar.size')}));
padding: 0 calc(2 * ${dt('scrollpanel.bar.size')}) calc(2 * ${dt('scrollpanel.bar.size')}) 0;
position: relative;
overflow: auto;
box-sizing: border-box;
@ -26,7 +26,7 @@ const theme = ({ dt }) => `
.p-scrollpanel-bar {
position: relative;
border-radius: 3px;
border-radius: ${dt('scrollpanel.bar.border.radius')};
z-index: 2;
cursor: pointer;
opacity: 0;
@ -38,17 +38,18 @@ const theme = ({ dt }) => `
}
.p-scrollpanel-bar:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
box-shadow: ${dt('scrollpanel.bar.focus.ring.shadow')};
outline: ${dt('scrollpanel.barfocus.ring.width')} ${dt('scrollpanel.bar.focus.ring.style')} ${dt('scrollpanel.bar.focus.ring.color')};
outline-offset: ${dt('scrollpanel.barfocus.ring.offset')};
}
.p-scrollpanel-bar-y {
width: 9px;
width: ${dt('scrollpanel.bar.size')});
top: 0;
}
.p-scrollpanel-bar-x {
height: 9px;
height: ${dt('scrollpanel.bar.size')});
bottom: 0;
}

13
components/lib/themes/aura/scrollpanel/index.js
View File

@ -1,4 +1,17 @@
export default {
root: {
bar: {
size: '9px',
borderRadius: '{border.radius.sm}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
}
},
colorScheme: {
light: {
bar: {

17
components/lib/themes/lara/scrollpanel/index.js
View File

@ -1,13 +1,26 @@
export default {
root: {
bar: {
size: '9px',
borderRadius: '{border.radius.xs}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
}
},
colorScheme: {
light: {
bar: {
background: '{surface.100}'
background: '{surface.200}'
}
},
dark: {
bar: {
background: '{surface.800}'
background: '{surface.700}'
}
}
}