diff --git a/components/lib/theme/aura/fieldset/index.js b/components/lib/theme/aura/fieldset/index.js index 19f82c935..928e9d053 100644 --- a/components/lib/theme/aura/fieldset/index.js +++ b/components/lib/theme/aura/fieldset/index.js @@ -95,6 +95,6 @@ export default { .p-fieldset .p-fieldset-content { padding: 0; -} +} ` }; diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index e218cc20e..7f9dd5c37 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -7,6 +7,7 @@ import chip from 'primevue/theme/aura/chip'; import divider from 'primevue/theme/aura/divider'; import fieldset from 'primevue/theme/aura/fieldset'; import global from 'primevue/theme/aura/global'; +import inplace from 'primevue/theme/aura/inplace'; import panel from 'primevue/theme/aura/panel'; import scrollpanel from 'primevue/theme/aura/scrollpanel'; import splitter from 'primevue/theme/aura/splitter'; @@ -130,6 +131,7 @@ export default { chip, divider, fieldset, + inplace, panel, scrollpanel, splitter, diff --git a/components/lib/theme/aura/inplace/index.js b/components/lib/theme/aura/inplace/index.js new file mode 100644 index 000000000..ce92a3dfc --- /dev/null +++ b/components/lib/theme/aura/inplace/index.js @@ -0,0 +1,54 @@ +export default { + variables: { + colorScheme: { + light: { + display: { + backgroundHover: '{surface.100}', + textColorHover: '{surface.800}' + } + }, + dark: { + display: { + backgroundHover: '{surface.800}', + textColorHover: '{surface.0}' + } + } + } + }, + css: ` +.p-inplace .p-inplace-display { + display: inline; + cursor: pointer; +} + +.p-inplace .p-inplace-content { + display: inline; +} + +.p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; +} + +.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; +} + +.p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: var(--p-rounded-base); + transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration); + outline-color: transparent; +} + +.p-inplace-display:not(.p-disabled):hover { + background: var(--p-inplace-display-background-hover); + color: var(--p-inplace-display-text-color-hover); +} + +.p-inplace-display: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); +} + ` +}; diff --git a/components/lib/theme/aura/inplace/package.json b/components/lib/theme/aura/inplace/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/inplace/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +}