diff --git a/components/lib/floatlabel/style/FloatLabelStyle.d.ts b/components/lib/floatlabel/style/FloatLabelStyle.d.ts index 9d19dbd50..b00556d68 100644 --- a/components/lib/floatlabel/style/FloatLabelStyle.d.ts +++ b/components/lib/floatlabel/style/FloatLabelStyle.d.ts @@ -10,7 +10,10 @@ import { BaseStyle } from '../../base/style'; export enum FloatLabelClasses { - root = 'p-float-label' +/** + * Class name of the root element + */ + root = 'p-floatlabel' } export interface FloatLabelStyle extends BaseStyle {} diff --git a/components/lib/floatlabel/style/FloatLabelStyle.js b/components/lib/floatlabel/style/FloatLabelStyle.js index 46aae8a94..05dab4101 100644 --- a/components/lib/floatlabel/style/FloatLabelStyle.js +++ b/components/lib/floatlabel/style/FloatLabelStyle.js @@ -1,12 +1,12 @@ import BaseStyle from 'primevue/base/style'; const theme = ({ dt }) => ` -.p-float-label { +.p-floatlabel { display: block; position: relative; } -.p-float-label label { +.p-floatlabel label { position: absolute; pointer-events: none; top: 50%; @@ -19,45 +19,45 @@ const theme = ({ dt }) => ` transition-duration: ${dt('floatlabel.transition.duration')}; } -.p-float-label:has(textarea) label { +.p-floatlabel:has(textarea) label { top: 1rem; } -.p-float-label:has(input:focus) label, -.p-float-label:has(input.p-filled) label, -.p-float-label:has(input:-webkit-autofill) label, -.p-float-label:has(textarea:focus) label, -.p-float-label:has(textarea.p-filled) label, -.p-float-label:has(.p-inputwrapper-focus) label, -.p-float-label:has(.p-inputwrapper-filled) label { +.p-floatlabel:has(input:focus) label, +.p-floatlabel:has(input.p-filled) label, +.p-floatlabel:has(input:-webkit-autofill) label, +.p-floatlabel:has(textarea:focus) label, +.p-floatlabel:has(textarea.p-filled) label, +.p-floatlabel:has(.p-inputwrapper-focus) label, +.p-floatlabel:has(.p-inputwrapper-filled) label { top: -.75rem; font-size: 12px; color: ${dt('floatlabel.focus.color')}; } -.p-float-label .p-placeholder, -.p-float-label input::placeholder, -.p-float-label .p-inputtext::placeholder { +.p-floatlabel .p-placeholder, +.p-floatlabel input::placeholder, +.p-floatlabel .p-inputtext::placeholder { opacity: 0; transition-property: all; transition-timing-function: ease; } -.p-float-label .p-focus .p-placeholder, -.p-float-label input:focus::placeholder, -.p-float-label .p-inputtext:focus::placeholder { +.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-float-label > .p-invalid + label { +.p-floatlabel > .p-invalid + label { color: ${dt('floatlabel.invalid.color')}; } `; const classes = { - root: 'p-float-label' + root: 'p-floatlabel' }; export default BaseStyle.extend({ diff --git a/components/lib/inputgroup/style/InputGroupStyle.js b/components/lib/inputgroup/style/InputGroupStyle.js index 6f232a494..e7f712bfb 100644 --- a/components/lib/inputgroup/style/InputGroupStyle.js +++ b/components/lib/inputgroup/style/InputGroupStyle.js @@ -7,7 +7,7 @@ const theme = ({ dt }) => ` width: 100%; } -.p-inputgroup-addon { +.p-inputgroupaddon { display: flex; align-items: center; justify-content: center; @@ -21,7 +21,7 @@ const theme = ({ dt }) => ` min-width: 2.5rem; } -.p-inputgroup .p-float-label { +.p-inputgroup .p-floatlabel { display: flex; align-items: stretch; width: 100%; @@ -35,36 +35,36 @@ const theme = ({ dt }) => ` width: 1%; } -.p-inputgroup-addon:last-child { +.p-inputgroupaddon:last-child { border-right: 1px solid ${dt('inputgroup.addon.border.color')}; } .p-inputgroup > .p-component, .p-inputgroup > .p-inputwrapper > .p-inputtext, -.p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-floatlabel > .p-component { border-radius: 0; margin: 0; } -.p-inputgroup > .p-component + .p-inputgroup-addon, -.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, -.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-component + .p-inputgroupaddon, +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroupaddon, +.p-inputgroup > .p-floatlabel > .p-component + .p-inputgroupaddon { border-left: 0 none; } .p-inputgroup > .p-component:focus, .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, -.p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-floatlabel > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, .p-inputgroup > .p-inputwrapper > .p-inputtext:focus~label, -.p-inputgroup > .p-float-label > .p-component:focus~label { +.p-inputgroup > .p-floatlabel > .p-component:focus~label { z-index: 1; } -.p-inputgroup-addon:first-child, +.p-inputgroupaddon:first-child, .p-inputgroup button:first-child, .p-inputgroup input:first-child, .p-inputgroup > .p-inputwrapper:first-child, @@ -73,12 +73,12 @@ const theme = ({ dt }) => ` border-bottom-left-radius: ${dt('inputgroup.addon.border.radius')}; } -.p-inputgroup .p-float-label:first-child input { +.p-inputgroup .p-floatlabel:first-child input { border-top-left-radius: ${dt('inputgroup.addon.border.radius')}; border-bottom-left-radius: ${dt('inputgroup.addon.border.radius')}; } -.p-inputgroup-addon:last-child, +.p-inputgroupaddon:last-child, .p-inputgroup button:last-child, .p-inputgroup input:last-child, .p-inputgroup > .p-inputwrapper:last-child, @@ -87,7 +87,7 @@ const theme = ({ dt }) => ` border-bottom-right-radius: ${dt('inputgroup.addon.border.radius')}; } -.p-inputgroup .p-float-label:last-child input { +.p-inputgroup .p-floatlabel:last-child input { border-top-right-radius: ${dt('inputgroup.addon.border.radius')}; border-bottom-right-radius: ${dt('inputgroup.addon.border.radius')}; } diff --git a/components/lib/inputgroupaddon/style/InputGroupAddonStyle.d.ts b/components/lib/inputgroupaddon/style/InputGroupAddonStyle.d.ts index cc0ec9984..e6d97b0a1 100644 --- a/components/lib/inputgroupaddon/style/InputGroupAddonStyle.d.ts +++ b/components/lib/inputgroupaddon/style/InputGroupAddonStyle.d.ts @@ -10,7 +10,10 @@ import { BaseStyle } from '../../base/style'; export enum InputGroupAddonClasses { - root = 'p-inputgroup-addon' +/** + * Class name of the root element + */ + root = 'p-inputgroupaddon' } export interface InputGroupAddonStyle extends BaseStyle {} diff --git a/components/lib/inputgroupaddon/style/InputGroupAddonStyle.js b/components/lib/inputgroupaddon/style/InputGroupAddonStyle.js index 4564c1eeb..fec78840b 100644 --- a/components/lib/inputgroupaddon/style/InputGroupAddonStyle.js +++ b/components/lib/inputgroupaddon/style/InputGroupAddonStyle.js @@ -1,7 +1,7 @@ import BaseStyle from 'primevue/base/style'; const classes = { - root: 'p-inputgroup-addon' + root: 'p-inputgroupaddon' }; export default BaseStyle.extend({