vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Migrated float label

pull/5507/head
Cagatay Civici 2024-02-22 17:19:45 +03:00
parent f4d46cd346
commit e4ab2b164d
6 changed files with 83 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
components/lib/themes/primeone/base/floatlabel/index.js Normal file
View File

@ -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);
}
`
};

6
components/lib/themes/primeone/base/floatlabel/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

2
components/lib/themes/primeone/base/index.js
View File

@ -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,

4
components/lib/themes/primeone/presets/aura/floatlabel/index.js Normal file
View File

@ -0,0 +1,4 @@
export default {
color: '{form.field.placeholder.text.color}',
focusColor: '{form.field.placeholder.text.color}'
};

6
components/lib/themes/primeone/presets/aura/floatlabel/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

8
components/lib/themes/primeone/presets/aura/index.js
View File

@ -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,