diff --git a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js index 0c718325c..5e190f892 100644 --- a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js +++ b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js @@ -15,7 +15,7 @@ const theme = ({ dt }) => ` transition-timing-function: ease; line-height: 1; font-weight: ${dt('floatlabel.font.weight')}; - left: ${dt('floatlabel.position.x')}; + inset-inline-start: ${dt('floatlabel.position.x')}; color: ${dt('floatlabel.color')}; transition-duration: ${dt('floatlabel.transition.duration')}; } @@ -26,7 +26,7 @@ const theme = ({ dt }) => ` } .p-floatlabel:has(.p-inputicon:first-child) label { - left: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')}); + inset-inline-start: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')}); } .p-floatlabel:has(.p-invalid) label { @@ -54,27 +54,11 @@ const theme = ({ dt }) => ` .p-floatlabel:has(input:focus) label, .p-floatlabel:has(input:-webkit-autofill) label, -.p-floatlabel:has(textarea:focus) label , -.p-floatlabel:has(.p-inputwrapper-focus) label { +.p-floatlabel:has(textarea:focus) label, +.p-floatlabel:has(.p-inputwrapper-focus) label { color: ${dt('floatlabel.focus.color')}; } -/*.p-floatlabel .p-placeholder, -.p-floatlabel input::placeholder, -.p-floatlabel .p-inputtext::placeholder { - opacity: 0; - transition-property: all; - transition-timing-function: ease; -} - -.p-floatlabel .p-focus .p-placeholder, -.p-floatlabel input:focus::placeholder, -.p-floatlabel .p-inputtext:focus::placeholder { - opacity: 1; - transition-property: all; - transition-timing-function: ease; -}*/ - .p-floatlabel-in .p-inputtext, .p-floatlabel-in .p-textarea, .p-floatlabel-in .p-select-label, @@ -82,8 +66,8 @@ const theme = ({ dt }) => ` .p-floatlabel-in .p-autocomplete-input-multiple, .p-floatlabel-in .p-cascadeselect-label, .p-floatlabel-in .p-treeselect-label { - padding-top: ${dt('floatlabel.in.input.padding.top')}; - padding-bottom: ${dt('floatlabel.in.input.padding.bottom')}; + padding-block-start: ${dt('floatlabel.in.input.padding.top')}; + padding-block-end: ${dt('floatlabel.in.input.padding.bottom')}; } .p-floatlabel-in:has(input:focus) label,