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

Material panels

pull/6275/head^2
Cagatay Civici 2024-10-01 09:56:51 +03:00
parent 20c784442d
commit 0bc6a19adc
8 changed files with 114 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/themes/src/presets/material/accordion/index.js
View File

@ -7,7 +7,7 @@ export default {
borderColor: '{content.border.color}'
},
header: {
color: '{text.muted.color}',
color: '{text.color}',
hoverColor: '{text.color}',
activeColor: '{text.color}',
padding: '1.25rem',
@ -54,26 +54,24 @@ export default {
transition: margin ${dt('accordion.transition.duration')};
}
.p-accordionpanel-active {
margin: 1rem 0;
}
.p-accordionpanel:first-child {
border-top-left-radius: ${dt('content.border.radius')};
border-top-right-radius: ${dt('content.border.radius')};
margin-top: 0;
}
.p-accordionpanel:last-child {
border-bottom-left-radius: ${dt('content.border.radius')};
border-bottom-right-radius: ${dt('content.border.radius')};
}
.p-accordionpanel-active {
margin: 1rem 0;
margin-bottom: 0;
}
.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {
background: ${dt('accordion.header.hover.background')};
color: ${dt('accordion.header.hover.color')};
background: ${dt('content.focus.background')};
}
`
};

1
packages/themes/src/presets/material/base/index.js
View File

@ -188,6 +188,7 @@ export default {
content: {
background: '{surface.0}',
hoverBackground: '{surface.100}',
focusBackground: '{surface.200}',
borderColor: '{surface.300}',
color: '{text.color}',
hoverColor: '{text.hover.color}'

22
packages/themes/src/presets/material/fieldset/index.js
View File

@ -4,7 +4,7 @@ export default {
borderColor: '{content.border.color}',
borderRadius: '{content.border.radius}',
color: '{content.color}',
padding: '0 1.125rem 1.125rem 1.125rem',
padding: '0 1.25rem 1.25rem 1.25rem',
transitionDuration: '{transition.duration}'
},
legend: {
@ -15,15 +15,15 @@ export default {
borderRadius: '{content.border.radius}',
borderWidth: '1px',
borderColor: 'transparent',
padding: '0.5rem 0.75rem',
padding: '0.75rem 1rem',
gap: '0.5rem',
fontWeight: '600',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
width: '0',
style: 'none',
color: 'unset',
offset: '0',
shadow: 'none'
}
},
toggleIcon: {
@ -32,5 +32,11 @@ export default {
},
content: {
padding: '0'
}
},
style: ({ dt }) => `
.p-fieldset-toggle-button:focus-visible {
background: ${dt('content.focus.background')};
}
`
};

8
packages/themes/src/presets/material/panel/index.js
View File

@ -8,21 +8,21 @@ export default {
header: {
background: 'transparent',
color: '{text.color}',
padding: '1.125rem',
padding: '1.25rem',
borderColor: '{content.border.color}',
borderWidth: '0',
borderRadius: '0'
},
toggleableHeader: {
padding: '0.375rem 1.125rem'
padding: '0.5rem 1.25rem'
},
title: {
fontWeight: '600'
},
content: {
padding: '0 1.125rem 1.125rem 1.125rem'
padding: '0 1.25rem 1.25rem 1.25rem'
},
footer: {
padding: '0 1.125rem 1.125rem 1.125rem'
padding: '0 1.25rem 1.25rem 1.25rem'
}
};

4
packages/themes/src/presets/material/scrollpanel/index.js
View File

@ -16,12 +16,12 @@ export default {
colorScheme: {
light: {
bar: {
background: '{surface.100}'
background: '{surface.200}'
}
},
dark: {
bar: {
background: '{surface.800}'
background: '{surface.700}'
}
}
}

43
packages/themes/src/presets/material/stepper/index.js
View File

@ -13,34 +13,31 @@ export default {
gap: '1rem'
},
stepHeader: {
padding: '0',
padding: '0.75rem 1rem',
borderRadius: '{content.border.radius}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
width: '0',
style: 'none',
color: 'unset',
offset: '0',
shadow: 'none'
},
gap: '0.5rem'
},
stepTitle: {
color: '{text.muted.color}',
activeColor: '{primary.color}',
activeColor: '{text.color}',
fontWeight: '500'
},
stepNumber: {
background: '{content.background}',
activeBackground: '{content.background}',
borderColor: '{content.border.color}',
activeBorderColor: '{content.border.color}',
color: '{text.muted.color}',
activeColor: '{primary.color}',
activeBackground: '{primary.color}',
activeBorderColor: '{primary.color}',
activeColor: '{primary.contrast.color}',
size: '2rem',
fontSize: '1.143rem',
fontWeight: '500',
borderRadius: '50%',
shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)'
shadow: 'none'
},
steppanels: {
padding: '0.875rem 0.5rem 1.125rem 0.5rem'
@ -49,5 +46,21 @@ export default {
background: '{content.background}',
color: '{content.color}',
padding: '0 0 0 1rem'
}
},
colorScheme: {
light: {
stepNumber: {
background: '{surface.400}',
borderColor: '{surface.400}',
color: '{surface.0}'
}
},
dark: {}
},
style: ({ dt }) => `
.p-step-header:focus-visible {
background: ${dt('content.focus.background')};
}
}
`
};

72
packages/themes/src/presets/material/tabs/index.js
View File

@ -9,67 +9,73 @@ export default {
},
tab: {
background: 'transparent',
hoverBackground: 'transparent',
hoverBackground: '{content.hover.background}',
activeBackground: 'transparent',
borderWidth: '0 0 1px 0',
borderColor: '{content.border.color}',
hoverBorderColor: '{content.border.color}',
activeBorderColor: '{primary.color}',
color: '{text.muted.color}',
color: '{text.color}',
hoverColor: '{text.color}',
activeColor: '{primary.color}',
padding: '1rem 1.125rem',
padding: '1rem 1.25rem',
fontWeight: '600',
margin: '0 0 -1px 0',
gap: '0.5rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '-1px',
shadow: '{focus.ring.shadow}'
width: '0',
style: 'none',
color: 'unset',
offset: '0',
shadow: 'none'
}
},
tabpanel: {
background: '{content.background}',
color: '{content.color}',
padding: '0.875rem 1.125rem 1.125rem 1.125rem',
padding: '1.25rem 1.25rem 1.25rem 1.25rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: 'inset {focus.ring.shadow}'
width: '0',
style: 'none',
color: 'unset',
offset: '0',
shadow: 'none'
}
},
navButton: {
background: '{content.background}',
color: '{text.muted.color}',
hoverColor: '{text.color}',
width: '2.5rem',
width: '3rem',
shadow: 'none',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '-1px',
shadow: '{focus.ring.shadow}'
width: '0',
style: 'none',
color: 'unset',
offset: '0',
shadow: 'none'
}
},
activeBar: {
height: '1px',
height: '2px',
bottom: '-1px',
background: '{primary.color}'
},
colorScheme: {
light: {
navButton: {
shadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)'
}
},
dark: {
navButton: {
shadow: '0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)'
}
}
}
style: ({ dt }) => `
.p-tab {
flex-grow: 1
}
.p-tabs-scrollable .p-tab {
flex-grow: 0
}
.p-tab:not(.p-disabled):focus-visible {
background: ${dt('content.focus.background')};
}
.p-tablist-nav-button:focus-visible {
background: ${dt('content.focus.background')};
}
`
};

22
packages/themes/src/presets/material/toolbar/index.js
View File

@ -1,10 +1,24 @@
export default {
root: {
background: '{content.background}',
borderColor: '{content.border.color}',
borderRadius: '{content.border.radius}',
color: '{content.color}',
borderRadius: '{content.border.radius}',
gap: '0.5rem',
padding: '0.75rem'
padding: '1rem'
},
colorScheme: {
light: {
root: {
background: '{surface.100}',
borderColor: '{surface.100}'
}
},
dark: {
root: {
root: {
background: '{surface.800}',
borderColor: '{surface.800}'
}
}
}
}
};