primevue-mirror/components/lib/themes/primeone/base/panel/index.js

61 lines
1.4 KiB
JavaScript
Raw Normal View History

export default {
2024-03-05 09:22:33 +00:00
css: ({ dt }) => `
.p-panel {
2024-03-05 09:22:33 +00:00
border: 1px solid ${dt('panel.border.color')};
2024-03-05 12:30:35 +00:00
border-radius: ${dt('rounded.base')};
2024-03-05 09:22:33 +00:00
background: ${dt('panel.background')};
color: ${dt('panel.text.color')};
}
.p-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.125rem;
}
.p-panel-toggleable .p-panel-header {
padding: 0.75rem 1.125rem;
}
.p-panel-title {
line-height: 1;
font-weight: 600;
}
.p-panel-header-icon {
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
width: 1.75rem;
height: 1.75rem;
position: relative;
2024-03-05 09:22:33 +00:00
color: ${dt('panel.header.icon.color')};
border: 0 none;
background: transparent;
border-radius: 50%;
2024-03-05 09:22:33 +00:00
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-panel-header-icon:enabled:hover {
2024-03-05 09:22:33 +00:00
color: ${dt('panel.header.icon.color.hover')};
background: ${dt('panel.header.icon.background.hover')};
}
.p-panel-header-icon:focus-visible {
2024-03-05 09:22:33 +00:00
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-panel-content {
padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-panel-footer {
padding: 0 1.125rem 1.125rem 1.125rem;
}
`
};