diff --git a/components/lib/themes/primeone/base/floatlabel/index.js b/components/lib/themes/primeone/base/floatlabel/index.js new file mode 100644 index 000000000..91f6019fb --- /dev/null +++ b/components/lib/themes/primeone/base/floatlabel/index.js @@ -0,0 +1,57 @@ +export default { + css: ` +.p-float-label { + display: block; + position: relative; +} + +.p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + left: 0.75rem; + color: var(--p-float-label-text-color); + transition-duration: var(--p-transition-duration); +} + +.p-float-label: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 { + top: -.75rem; + font-size: 12px; + color: var(--p-float-label-text-color-focus); +} + +.p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .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 { + opacity: 1; + transition-property: all; + transition-timing-function: ease; +} + +.p-float-label > .p-invalid + label { + color: var(--p-float-label-text-color-invalid); +} + ` +}; diff --git a/components/lib/themes/primeone/base/floatlabel/package.json b/components/lib/themes/primeone/base/floatlabel/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/primeone/base/floatlabel/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/primeone/base/index.js b/components/lib/themes/primeone/base/index.js index e57432fc5..e8d9c557d 100644 --- a/components/lib/themes/primeone/base/index.js +++ b/components/lib/themes/primeone/base/index.js @@ -24,6 +24,7 @@ import dock from 'primevue/themes/primeone/base/dock'; import dropdown from 'primevue/themes/primeone/base/dropdown'; import editor from 'primevue/themes/primeone/base/editor'; import fieldset from 'primevue/themes/primeone/base/fieldset'; +import floatlabel from 'primevue/themes/primeone/base/floatlabel'; import galleria from 'primevue/themes/primeone/base/galleria'; import global from 'primevue/themes/primeone/base/global'; import iconfield from 'primevue/themes/primeone/base/iconfield'; @@ -107,6 +108,7 @@ export default { dock, editor, fieldset, + floatlabel, galleria, iconfield, image, diff --git a/components/lib/themes/primeone/presets/aura/floatlabel/index.js b/components/lib/themes/primeone/presets/aura/floatlabel/index.js new file mode 100644 index 000000000..eb5342324 --- /dev/null +++ b/components/lib/themes/primeone/presets/aura/floatlabel/index.js @@ -0,0 +1,4 @@ +export default { + color: '{form.field.placeholder.text.color}', + focusColor: '{form.field.placeholder.text.color}' +}; diff --git a/components/lib/themes/primeone/presets/aura/floatlabel/package.json b/components/lib/themes/primeone/presets/aura/floatlabel/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/primeone/presets/aura/floatlabel/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/primeone/presets/aura/index.js b/components/lib/themes/primeone/presets/aura/index.js index 6a9645fbb..5ff7e3f86 100644 --- a/components/lib/themes/primeone/presets/aura/index.js +++ b/components/lib/themes/primeone/presets/aura/index.js @@ -24,6 +24,7 @@ import dock from 'primevue/themes/primeone/presets/aura/dock'; import dropdown from 'primevue/themes/primeone/presets/aura/dropdown'; import editor from 'primevue/themes/primeone/presets/aura/editor'; import fieldset from 'primevue/themes/primeone/presets/aura/fieldset'; +import floatlabel from 'primevue/themes/primeone/presets/aura/floatlabel'; import galleria from 'primevue/themes/primeone/presets/aura/galleria'; import iconfield from 'primevue/themes/primeone/presets/aura/iconfield'; import image from 'primevue/themes/primeone/presets/aura/image'; @@ -173,6 +174,9 @@ export default { textColor: '{surface.700}', textColorDisabled: '{surface.500}', placeholderTextColor: '{surface.500}', + floatLabelTextColor: '{surface.500}', + floatLabelTextColorInvalid: '{red.400}', + floatLabelTextColorFocus: '{surface.500}', boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)' } }, @@ -216,6 +220,9 @@ export default { textColor: '{surface.0}', textColorDisabled: '{surface.400}', placeholderTextColor: '{surface.400}', + floatLabelTextColor: '{surface.400}', + floatLabelTextColorInvalid: '{red.300}', + floatLabelTextColorFocus: '{surface.400}', boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)' } } @@ -248,6 +255,7 @@ export default { dropdown, editor, fieldset, + floatlabel, galleria, iconfield, image,