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

Update panel styles

pull/5507/head
mertsincan 2024-01-02 14:05:23 +00:00
parent 8e4854474d
commit 4570226e92
2 changed files with 103 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,10 @@ export default {
}, },
surface: { surface: {
200: 'var(--p-gray-200)' 200: 'var(--p-gray-200)'
} },
borderRadius: '6px',
transitionDuration: '.2s',
transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}'
}, },
components: { components: {
global, global,

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

@ -2,21 +2,88 @@ export default {
variables: { variables: {
common: { common: {
header: { header: {
//border: '1px solid var(--p-panel-header-border-color)', borderWidth: '1px',
border: { borderStyle: 'solid',
width: '1px', // --p-panel-header-border-width: 1px; paddingX: '1.25rem',
style: 'solid' // --p-panel-header-border-color: solid; paddingY: '1.25rem',
} fontWeight: 700
},
headerIcon: {
width: '2rem',
height: '2rem',
borderWidth: '0',
borderStyle: 'none',
borderRadius: '50%'
},
toggleableHeader: {
paddingX: '1.25rem',
paddingY: '0.75rem'
},
content: {
paddingX: '1.25rem',
paddingY: '1.25rem',
borderWidth: '1px',
borderStyle: 'solid'
},
footer: {
paddingX: '1.25rem',
paddingY: '0.75rem',
borderWidth: '1px',
borderStyle: 'solid'
} }
}, },
light: { light: {
header: { header: {
bg: '{blue.500}' borderColor: '{shade.300}',
background: '{shade.100}',
color: '{shade.800}'
},
headerIcon: {
color: '{shade.600}',
borderColor: 'transparent',
background: 'transparent'
},
headerIconHover: {
color: '{shade.800}',
borderColor: 'transparent',
background: '{shade.200}'
},
content: {
borderColor: '{shade.300}',
background: '{shade.0}',
color: '{shade.700}'
},
footer: {
borderColor: '{shade.300}',
background: '{shade.0}',
color: '{shade.700}'
} }
}, },
dark: { dark: {
header: { header: {
bg: '{blue.200}' // --p-panel-header-bg: var(--p-blue-200); borderColor: '{shade.600}',
background: '{shade.800}',
color: '{shade.0}'
},
headerIcon: {
color: '{shade.100}',
borderColor: 'transparent',
background: 'transparent'
},
headerIconHover: {
color: '{shade.0}',
borderColor: 'transparent',
background: 'rgba(255,255,255,.03)'
},
content: {
borderColor: '{shade.600}',
background: '{shade.800}',
color: '{shade.0}'
},
footer: {
borderColor: '{shade.600}',
background: '{shade.800}',
color: '{shade.0}'
} }
} }
}, },
@ -25,10 +92,10 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border: var(--p-panel-header-border); border: var(--p-panel-header-border-width) var(--p-panel-header-border-style) var(--p-panel-header-border-color);
padding: var(--p-panel-header-padding); padding: var(--p-panel-header-padding-y) var(--p-panel-header-padding-x);
background: var(--p-panel-header-bg); background: var(--p-panel-header-background);
color: var(--p-panel-header-text-color); color: var(--p-panel-header-color);
border-top-right-radius: var(--p-border-radius); border-top-right-radius: var(--p-border-radius);
border-top-left-radius: var(--p-border-radius); border-top-left-radius: var(--p-border-radius);
} }
@ -44,32 +111,32 @@ export default {
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: var(--p-action-icon-width); width: var(--p-panel-header-icon-width);
height: var(--p-action-icon-height); height: var(--p-panel-header-icon-height);
color: var(--p-action-icon-color); color: var(--p-panel-header-icon-color);
border: var(--p-action-icon-border); border: var(--p-panel-header-icon-border-width) var(--p-panel-header-icon-border-style) var(--p-panel-header-icon-border-color);
background: var(--p-action-icon-bg); background: var(--p-panel-header-icon-background);
border-radius: var(--p-action-icon-border-radius); border-radius: var(--p-border-radius);
transition: var(--p-action-icon-transition); transition: var(--p-transition);
} }
.p-panel-header-icon:enabled:hover { .p-panel-header-icon:enabled:hover {
color: var(--p-action-icon-hover-color); color: var(--p-panel-header-icon-hover-color);
border-color: var(--p-action-icon-hover-border-color); border-color: var(--p-panel-header-icon-hover-border-color);
background: var(--p-action-icon-hover-bg); 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); outline: var(--p-focus-outline); /* @todo */
outline-offset: var(--p-focus-outline-offset); outline-offset: var(--p-focus-outline-offset);
box-shadow: var(--p-focus-shadow); 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); padding: var(--p-panel-toggleable-header-padding-y) var(--p-panel-toggleable-header-padding-x);
} }
.p-panel-content { .p-panel-content {
padding: var(--p-panel-content-padding); padding: var(--p-panel-content-padding-y) var(--p-panel-content-padding-x);
border: var(--p-panel-content-border); border: var(--p-panel-content-border-width) var(--p-panel-content-border-style) var(--p-panel-content-border-color);
background: var(--p-panel-content-bg); background: var(--p-panel-content-background);
color: var(--p-panel-content-text-color); color: var(--p-panel-content-color);
border-top: 0; border-top: 0;
} }
.p-panel-content:last-child { .p-panel-content:last-child {
@ -77,10 +144,10 @@ export default {
border-bottom-left-radius: var(--p-border-radius); border-bottom-left-radius: var(--p-border-radius);
} }
.p-panel-footer { .p-panel-footer {
padding: var(--p-panel-footer-padding); padding: var(--p-panel-footer-padding-y) var(--p-panel-footer-padding-x);
border: var(--p-panel-footer-border); border: var(--p-panel-footer-border-width) var(--p-panel-footer-border-style) var(--p-panel-footer-border-color);
background: var(--p-panel-footer-bg); background: var(--p-panel-footer-background);
color: var(--p-panel-footer-text-color); color: var(--p-panel-footer-color);
border-bottom-right-radius: var(--p-border-radius); border-bottom-right-radius: var(--p-border-radius);
border-bottom-left-radius: var(--p-border-radius); border-bottom-left-radius: var(--p-border-radius);
border-top: 0; border-top: 0;