diff --git a/components/lib/inplace/style/InplaceStyle.js b/components/lib/inplace/style/InplaceStyle.js index f2d320fdf..2e54ed5b5 100644 --- a/components/lib/inplace/style/InplaceStyle.js +++ b/components/lib/inplace/style/InplaceStyle.js @@ -1,7 +1,7 @@ import BaseStyle from 'primevue/base/style'; const classes = { - root: ({ props }) => ['p-inplace p-component', { 'p-inplace-closable': props.closable }], + root: ({ props }) => 'p-inplace p-component', display: ({ props }) => ['p-inplace-display', { 'p-disabled': props.disabled }], content: 'p-inplace-content' }; diff --git a/components/lib/themes/primeone/base/inplace/index.js b/components/lib/themes/primeone/base/inplace/index.js index 5ef6ff5e3..4e337fc8f 100644 --- a/components/lib/themes/primeone/base/inplace/index.js +++ b/components/lib/themes/primeone/base/inplace/index.js @@ -1,24 +1,8 @@ export default { css: ({ dt }) => ` -.p-inplace .p-inplace-display { +.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: ${dt('rounded.base')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; @@ -26,13 +10,17 @@ export default { } .p-inplace-display:not(.p-disabled):hover { - background: ${dt('inplace.hover.background')}; - color: ${dt('inplace.hover.color')}; + background: ${dt('inplace.display.hover.background')}; + color: ${dt('inplace.display.hover.color')}; } .p-inplace-display:focus-visible { outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline-offset: ${dt('focus.ring.offset')}; } + +.p-inplace-content { + display: inline; +} ` };