diff --git a/components/lib/theme/aura/accordion/index.js b/components/lib/theme/aura/accordion/index.js new file mode 100644 index 000000000..0048ebdf8 --- /dev/null +++ b/components/lib/theme/aura/accordion/index.js @@ -0,0 +1,57 @@ +export default { + css: ` +.p-accordion-header-link { + cursor: pointer; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + align-items: center; + user-select: none; + text-decoration: none; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + color: var(--p-dark-surface-400, var(--p-surface-500)); + background: var(--p-dark-surface-900, var(--p-surface-0)); + font-weight: 600; + border-radius: var(--p-border-radius); + transition: color 0.2s, outline-color 0.2s; + outline-color: transparent; +} + +.p-accordion-header-text { + line-height: 1; +} + +.p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus-visible { + outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color); + outline-offset: -2px; +} +.p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + color: var(--p-dark-surface-0, var(--p-surface-700)); +} +.p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + color: var(--p-dark-surface-0, var(--p-surface-700)); +} + +.p-accordion-toggle-icon { + transform: rotate(90deg); +} + +.p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); +} + +.p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + background: var(--p-dark-surface-900, var(--p-surface-0)); + color: var(--p-dark-surface-0, var(--p-surface-700)); +} + +.p-accordion-tab { + border-bottom: 1px solid var(--p-dark-surface-700, var(--p-surface-200)); +} + +.p-accordion-tab:last-child { + border-bottom: 0 none +} +` +}; diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index 0b216b8fd..2341e0e46 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -1,3 +1,4 @@ +import accordion from 'primevue/theme/aura/accordion'; import avatar from 'primevue/theme/aura/avatar'; import divider from 'primevue/theme/aura/divider'; import fieldset from 'primevue/theme/aura/fieldset'; @@ -140,10 +141,11 @@ export default { }, components: { global, - panel, + accordion, + avatar, divider, fieldset, - avatar, + panel, splitter } };