primevue-mirror/components/lib/theme/aura/panel/index.js

78 lines
1.9 KiB
JavaScript
Raw Normal View History

2024-02-05 21:20:00 +00:00
export default {
2024-02-10 14:09:54 +00:00
variables: {
2024-02-10 21:17:32 +00:00
common: {},
colorScheme: {
light: {
root: {
borderColor: '{surface.200}',
backgroundColor: '{white}'
}
},
dark: {
root: {
borderColor: '{surface.700}',
backgroundColor: '{surface.0}'
}
}
}
2024-02-10 14:09:54 +00:00
},
2024-02-05 21:20:00 +00:00
css: `
2024-02-07 14:17:00 +00:00
.p-panel {
2024-02-10 21:17:32 +00:00
border: 1px solid var(--p-panel-border-color);
2024-02-10 08:57:04 +00:00
border-radius: var(--p-border-radius);
2024-02-10 21:17:32 +00:00
background: var(--p-dark-surface-900, var(--p-white));
2024-02-10 08:57:04 +00:00
color: var(--p-dark-surface-0, var(--p-surface-700));
2024-02-07 14:17:00 +00:00
}
2024-02-05 21:20:00 +00:00
.p-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
2024-02-07 14:17:00 +00:00
padding: 1.125rem;
}
.p-panel-toggleable .p-panel-header {
padding: 0.75rem 1.125rem;
2024-02-05 21:20:00 +00:00
}
2024-02-07 14:17:00 +00:00
2024-02-05 21:20:00 +00:00
.p-panel-title {
line-height: 1;
2024-02-07 14:17:00 +00:00
font-weight: 600;
2024-02-05 21:20:00 +00:00
}
2024-02-07 14:17:00 +00:00
2024-02-05 21:20:00 +00:00
.p-panel-header-icon {
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
width: 1.75rem;
height: 1.75rem;
2024-02-07 14:17:00 +00:00
position: relative;
2024-02-10 08:57:04 +00:00
color: var(--p-dark-surface-400, var(--p-surface-500));
2024-02-05 21:20:00 +00:00
border: 0 none;
background: transparent;
border-radius: 50%;
2024-02-10 08:57:04 +00:00
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
2024-02-05 21:20:00 +00:00
outline-color: transparent;
}
2024-02-07 14:17:00 +00:00
.p-panel-header-icon:enabled:hover {
2024-02-10 08:57:04 +00:00
color: var(--p-dark-surface-300, var(--p-surface-600));
background: var(--p-dark-surface-800, var(--p-surface-100));
2024-02-05 21:20:00 +00:00
}
2024-02-07 14:17:00 +00:00
.p-panel-header-icon:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
2024-02-05 21:20:00 +00:00
}
2024-02-07 14:17:00 +00:00
2024-02-05 21:20:00 +00:00
.p-panel .p-panel-content {
padding: 0 1.125rem 1.125rem 1.125rem;
}
2024-02-07 14:17:00 +00:00
2024-02-05 21:20:00 +00:00
.p-panel .p-panel-footer {
padding: 0 1.125rem 1.125rem 1.125rem;
}
`
};