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

Initiated material design preset

pull/6493/head
Cagatay Civici 2024-09-28 12:38:20 +03:00
parent 76a4227fc1
commit 880e8d1789
16 changed files with 171 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/showcase/doc/inputtext/IftaLabelDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<IftaLabel> <IftaLabel>
<InputText id="username" v-model="value" autocomplete="off" /> <InputText id="username" v-model="value" autocomplete="off" variant="filled" />
<label for="username">Username</label> <label for="username">Username</label>
</IftaLabel> </IftaLabel>
</div> </div>
@ -19,7 +19,7 @@ export default {
code: { code: {
basic: ` basic: `
<IftaLabel> <IftaLabel>
<InputText id="username" v-model="value" /> <InputText id="username" v-model="value" variant="filled" />
<label for="username">Username</label> <label for="username">Username</label>
</IftaLabel> </IftaLabel>
`, `,
@ -27,7 +27,7 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<IftaLabel> <IftaLabel>
<InputText id="username" v-model="value" /> <InputText id="username" v-model="value" variant="filled" />
<label for="username">Username</label> <label for="username">Username</label>
</IftaLabel> </IftaLabel>
</div> </div>
@ -47,7 +47,7 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<IftaLabel> <IftaLabel>
<InputText id="username" v-model="value" /> <InputText id="username" v-model="value" variant="filled" />
<label for="username">Username</label> <label for="username">Username</label>
</IftaLabel> </IftaLabel>
</div> </div>

27
apps/showcase/doc/inputtext/InvalidDoc.vue
View File

@ -2,8 +2,9 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p> <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center gap-4">
<InputText v-model="value" :invalid="value === ''" /> <InputText v-model="value1" :invalid="!value1" />
<InputText v-model="value2" :invalid="!value2" variant="filled" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -12,15 +13,18 @@
export default { export default {
data() { data() {
return { return {
value: '', value1: '',
value2: '',
code: { code: {
basic: ` basic: `
<InputText v-model="value" :invalid="value === null" /> <InputText v-model="value1" :invalid="!value1" />
<InputText v-model="value2" :invalid="!value2" variant="filled" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center gap-4">
<InputText v-model="value" :invalid="value === null" /> <InputText v-model="value1" :invalid="!value1" />
<InputText v-model="value2" :invalid="!value2" variant="filled" />
</div> </div>
</template> </template>
@ -28,7 +32,8 @@ export default {
export default { export default {
data() { data() {
return { return {
value: '' value1: '',
value2: ''
} }
} }
} }
@ -36,15 +41,17 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center gap-4">
<InputText v-model="value" :invalid="value === null" /> <InputText v-model="value1" :invalid="!value1" />
<InputText v-model="value2" :invalid="!value2" variant="filled" />
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
const value = ref(''); const value1 = ref('');
const value2 = ref('');
<\/script> <\/script>
` `
} }

12
apps/showcase/pages/inputtext/index.vue
View File

@ -8,8 +8,8 @@ import BasicDoc from '@/doc/inputtext/BasicDoc.vue';
import DisabledDoc from '@/doc/inputtext/DisabledDoc.vue'; import DisabledDoc from '@/doc/inputtext/DisabledDoc.vue';
import FilledDoc from '@/doc/inputtext/FilledDoc.vue'; import FilledDoc from '@/doc/inputtext/FilledDoc.vue';
import FloatLabelDoc from '@/doc/inputtext/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/inputtext/FloatLabelDoc.vue';
import IftaLabelDoc from '@/doc/inputtext/IftaLabelDoc.vue';
import HelpTextDoc from '@/doc/inputtext/HelpTextDoc.vue'; import HelpTextDoc from '@/doc/inputtext/HelpTextDoc.vue';
import IftaLabelDoc from '@/doc/inputtext/IftaLabelDoc.vue';
import ImportDoc from '@/doc/inputtext/ImportDoc.vue'; import ImportDoc from '@/doc/inputtext/ImportDoc.vue';
import InvalidDoc from '@/doc/inputtext/InvalidDoc.vue'; import InvalidDoc from '@/doc/inputtext/InvalidDoc.vue';
import SizesDoc from '@/doc/inputtext/SizesDoc.vue'; import SizesDoc from '@/doc/inputtext/SizesDoc.vue';
@ -30,6 +30,11 @@ export default {
label: 'Basic', label: 'Basic',
component: BasicDoc component: BasicDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'floatlabel', id: 'floatlabel',
label: 'Float Label', label: 'Float Label',
@ -50,11 +55,6 @@ export default {
label: 'Help Text', label: 'Help Text',
component: HelpTextDoc component: HelpTextDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

1
packages/primevue/src/floatlabel/style/FloatLabelStyle.js
View File

@ -83,6 +83,7 @@ const theme = ({ dt }) => `
.p-floatlabel-in .p-cascadeselect-label, .p-floatlabel-in .p-cascadeselect-label,
.p-floatlabel-in .p-treeselect-label { .p-floatlabel-in .p-treeselect-label {
padding-top: ${dt('floatlabel.in.input.padding.top')}; padding-top: ${dt('floatlabel.in.input.padding.top')};
padding-bottom: ${dt('floatlabel.in.input.padding.bottom')};
} }
.p-floatlabel-in:has(input:focus) label, .p-floatlabel-in:has(input:focus) label,

1
packages/primevue/src/iftalabel/style/IftaLabelStyle.js
View File

@ -28,6 +28,7 @@ const theme = ({ dt }) => `
.p-iftalabel .p-cascadeselect-label, .p-iftalabel .p-cascadeselect-label,
.p-iftalabel .p-treeselect-label { .p-iftalabel .p-treeselect-label {
padding-top: ${dt('iftalabel.input.padding.top')}; padding-top: ${dt('iftalabel.input.padding.top')};
padding-bottom: ${dt('iftalabel.input.padding.bottom')};
} }
.p-iftalabel:has(.p-invalid) label { .p-iftalabel:has(.p-invalid) label {

3
packages/themes/src/presets/aura/floatlabel/index.js
View File

@ -20,7 +20,8 @@ export default {
}, },
in: { in: {
input: { input: {
paddingTop: '1.5rem' paddingTop: '1.5rem',
paddingBottom: '{form.field.padding.y}'
}, },
active: { active: {
top: '{form.field.padding.y}' top: '{form.field.padding.y}'

3
packages/themes/src/presets/aura/iftalabel/index.js
View File

@ -10,6 +10,7 @@ export default {
fontWeight: '400' fontWeight: '400'
}, },
input: { input: {
paddingTop: '1.5rem' paddingTop: '1.5rem',
paddingBottom: '{form.field.padding.y}'
} }
}; };

3
packages/themes/src/presets/lara/floatlabel/index.js
View File

@ -20,7 +20,8 @@ export default {
}, },
in: { in: {
input: { input: {
paddingTop: '1.875rem' paddingTop: '1.875rem',
paddingBottom: '{form.field.padding.y}'
}, },
active: { active: {
top: '{form.field.padding.y}' top: '{form.field.padding.y}'

3
packages/themes/src/presets/lara/iftalabel/index.js
View File

@ -10,6 +10,7 @@ export default {
fontWeight: '400' fontWeight: '400'
}, },
input: { input: {
paddingTop: '1.875rem' paddingTop: '1.875rem',
paddingBottom: '{form.field.padding.y}'
} }
}; };

145
packages/themes/src/presets/material/base/index.js
View File

@ -34,15 +34,15 @@ export default {
semantic: { semantic: {
transitionDuration: '0.2s', transitionDuration: '0.2s',
focusRing: { focusRing: {
width: '1px', width: '0',
style: 'solid', style: 'none',
color: '{primary.color}', color: 'transparent',
offset: '2px', offset: '0',
shadow: 'none' shadow: 'none'
}, },
disabledOpacity: '0.6', disabledOpacity: '0.38',
iconSize: '1rem', iconSize: '1rem',
anchorGutter: '2px', anchorGutter: '0',
primary: { primary: {
50: '{emerald.50}', 50: '{emerald.50}',
100: '{emerald.100}', 100: '{emerald.100}',
@ -58,51 +58,51 @@ export default {
}, },
formField: { formField: {
paddingX: '0.75rem', paddingX: '0.75rem',
paddingY: '0.5rem', paddingY: '0.75rem',
borderRadius: '{border.radius.md}', borderRadius: '{border.radius.sm}',
focusRing: { focusRing: {
width: '0', width: '2px',
style: 'none', style: 'solid',
color: 'transparent', color: '{primary.color}',
offset: '0', offset: '-2px',
shadow: 'none' shadow: 'none'
}, },
transitionDuration: '{transition.duration}' transitionDuration: '{transition.duration}'
}, },
list: { list: {
padding: '0.25rem 0.25rem', padding: '0.5rem 0',
gap: '2px', gap: '0',
header: { header: {
padding: '0.5rem 1rem 0.25rem 1rem' padding: '0.75rem 0.75rem'
}, },
option: { option: {
padding: '0.5rem 0.75rem', padding: '0.75rem 0.75rem',
borderRadius: '{border.radius.sm}' borderRadius: '{border.radius.none}'
}, },
optionGroup: { optionGroup: {
padding: '0.5rem 0.75rem', padding: '0.75rem 0.75rem',
fontWeight: '600' fontWeight: '700'
} }
}, },
content: { content: {
borderRadius: '{border.radius.md}' borderRadius: '{border.radius.sm}'
}, },
mask: { mask: {
transitionDuration: '0.15s' transitionDuration: '0.15s'
}, },
navigation: { navigation: {
list: { list: {
padding: '0.25rem 0.25rem', padding: '0.5rem 0',
gap: '2px' gap: '0'
}, },
item: { item: {
padding: '0.5rem 0.75rem', padding: '0.75rem 0.75rem',
borderRadius: '{border.radius.sm}', borderRadius: '{border.radius.none}',
gap: '0.5rem' gap: '0.5rem'
}, },
submenuLabel: { submenuLabel: {
padding: '0.5rem 0.75rem', padding: '0.75rem 0.75rem',
fontWeight: '600' fontWeight: '700'
}, },
submenuIcon: { submenuIcon: {
size: '0.875rem' size: '0.875rem'
@ -110,21 +110,21 @@ export default {
}, },
overlay: { overlay: {
select: { select: {
borderRadius: '{border.radius.md}', borderRadius: '{border.radius.sm}',
shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)' shadow: '0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)'
}, },
popover: { popover: {
borderRadius: '{border.radius.md}', borderRadius: '{border.radius.sm}',
padding: '0.75rem', padding: '1rem',
shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)' shadow: '0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12)'
}, },
modal: { modal: {
borderRadius: '{border.radius.xl}', borderRadius: '{border.radius.sm}',
padding: '1.25rem', padding: '1.5rem',
shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)' shadow: '0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12)'
}, },
navigation: { navigation: {
shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)' shadow: '0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12)'
} }
}, },
colorScheme: { colorScheme: {
@ -146,65 +146,66 @@ export default {
primary: { primary: {
color: '{primary.500}', color: '{primary.500}',
contrastColor: '#ffffff', contrastColor: '#ffffff',
hoverColor: '{primary.600}', hoverColor: 'color-mix(in srgb, {primary.color}, transparent 8%)',
activeColor: '{primary.700}' activeColor: 'color-mix(in srgb, {primary.color}, transparent 32%)'
}, },
highlight: { highlight: {
background: '{primary.50}', background: 'color-mix(in srgb, {primary.color}, transparent 88%)',
focusBackground: '{primary.100}', focusBackground: 'color-mix(in srgb, {primary.color}, transparent 76%)',
color: '{primary.700}', color: '{primary.700}',
focusColor: '{primary.800}' focusColor: '{primary.800}'
}, },
mask: { mask: {
background: 'rgba(0,0,0,0.4)', background: 'rgba(0,0,0,0.32)',
color: '{surface.200}' color: '{surface.200}'
}, },
formField: { formField: {
background: '{surface.0}', background: '{surface.0}',
disabledBackground: '{surface.200}', disabledBackground: '{surface.300}',
filledBackground: '{surface.50}', filledBackground: '{surface.100}',
filledFocusBackground: '{surface.50}', filledHoverBackground: '{surface.200}',
borderColor: '{surface.300}', filledFocusBackground: '{surface.100}',
hoverBorderColor: '{surface.400}', borderColor: '{surface.400}',
hoverBorderColor: '{surface.900}',
focusBorderColor: '{primary.color}', focusBorderColor: '{primary.color}',
invalidBorderColor: '{red.400}', invalidBorderColor: '{red.800}',
color: '{surface.700}', color: '{surface.900}',
disabledColor: '{surface.500}', disabledColor: '{surface.600}',
placeholderColor: '{surface.500}', placeholderColor: '{surface.600}',
floatLabelColor: '{surface.500}', floatLabelColor: '{surface.600}',
floatLabelFocusColor: '{primary.600}', floatLabelFocusColor: '{primary.600}',
floatLabelActiveColor: '{surface.500}', floatLabelActiveColor: '{surface.600}',
floatLabelInvalidColor: '{red.400}', floatLabelInvalidColor: '{red.800}',
iconColor: '{surface.400}', iconColor: '{surface.600}',
shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)' shadow: 'none'
}, },
text: { text: {
color: '{surface.700}', color: '{surface.900}',
hoverColor: '{surface.800}', hoverColor: '{surface.900}',
mutedColor: '{surface.500}', mutedColor: '{surface.600}',
hoverMutedColor: '{surface.600}' hoverMutedColor: '{surface.600}'
}, },
content: { content: {
background: '{surface.0}', background: '{surface.0}',
hoverBackground: '{surface.100}', hoverBackground: '{surface.100}',
borderColor: '{surface.200}', borderColor: '{surface.300}',
color: '{text.color}', color: '{text.color}',
hoverColor: '{text.hover.color}' hoverColor: '{text.hover.color}'
}, },
overlay: { overlay: {
select: { select: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.0}',
color: '{text.color}' color: '{text.color}'
}, },
popover: { popover: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.0}',
color: '{text.color}' color: '{text.color}'
}, },
modal: { modal: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.0}',
color: '{text.color}' color: '{text.color}'
} }
}, },
@ -218,36 +219,36 @@ export default {
selectedColor: '{highlight.color}', selectedColor: '{highlight.color}',
selectedFocusColor: '{highlight.focus.color}', selectedFocusColor: '{highlight.focus.color}',
icon: { icon: {
color: '{surface.400}', color: '{surface.600}',
focusColor: '{surface.500}' focusColor: '{surface.600}'
} }
}, },
optionGroup: { optionGroup: {
background: 'transparent', background: 'transparent',
color: '{text.muted.color}' color: '{text.color}'
} }
}, },
navigation: { navigation: {
item: { item: {
focusBackground: '{surface.100}', focusBackground: '{surface.100}',
activeBackground: '{surface.100}', activeBackground: '{surface.200}',
color: '{text.color}', color: '{text.color}',
focusColor: '{text.hover.color}', focusColor: '{text.hover.color}',
activeColor: '{text.hover.color}', activeColor: '{text.hover.color}',
icon: { icon: {
color: '{surface.400}', color: '{surface.600}',
focusColor: '{surface.500}', focusColor: '{surface.600}',
activeColor: '{surface.500}' activeColor: '{surface.600}'
} }
}, },
submenuLabel: { submenuLabel: {
background: 'transparent', background: 'transparent',
color: '{text.muted.color}' color: '{text.color}'
}, },
submenuIcon: { submenuIcon: {
color: '{surface.400}', color: '{surface.600}',
focusColor: '{surface.500}', focusColor: '{surface.600}',
activeColor: '{surface.500}' activeColor: '{surface.600}'
} }
} }
}, },

18
packages/themes/src/presets/material/floatlabel/index.js
View File

@ -8,30 +8,28 @@ export default {
positionX: '{form.field.padding.x}', positionX: '{form.field.padding.x}',
positionY: '{form.field.padding.y}', positionY: '{form.field.padding.y}',
fontWeight: '500', fontWeight: '500',
focus: { active: {
fontSize: '0.75rem', fontSize: '0.75rem',
fontWeight: '400' fontWeight: '400'
} }
}, },
over: { over: {
focus: { active: {
top: '-1.25rem' top: '-1.25rem'
} }
}, },
in: { in: {
input: { input: {
paddingTop: '1.5rem' paddingTop: '1.5rem',
paddingBottom: '0.5rem'
}, },
focus: { active: {
top: '{form.field.padding.y}' top: '0.5rem'
} }
}, },
on: { on: {
input: { borderRadius: '{border.radius.xs}',
paddingTop: '1rem', active: {
paddingBottom: '1rem'
},
focus: {
background: '{form.field.background}', background: '{form.field.background}',
padding: '0 0.125rem' padding: '0 0.125rem'
} }

5
packages/themes/src/presets/material/iftalabel/index.js
View File

@ -5,11 +5,12 @@ export default {
invalidColor: '{form.field.float.label.invalid.color}', invalidColor: '{form.field.float.label.invalid.color}',
transitionDuration: '0.2s', transitionDuration: '0.2s',
positionX: '{form.field.padding.x}', positionX: '{form.field.padding.x}',
top: '{form.field.padding.y}', top: '0.5rem',
fontSize: '0.75rem', fontSize: '0.75rem',
fontWeight: '400' fontWeight: '400'
}, },
input: { input: {
paddingTop: '1.5rem' paddingTop: '1.5rem',
paddingBottom: '0.5rem'
} }
}; };

6
packages/themes/src/presets/material/index.js
View File

@ -178,11 +178,7 @@ export default {
tooltip, tooltip,
ripple ripple
}, },
// @todo: REMOVE THIS BLOCK
style: ({ dt }) => ` style: ({ dt }) => `
.p-button {
background: blue !important;
padding: ${dt('inputtext.test')} ${dt('inputtext.test')} !important;
}
` `
}; };

54
packages/themes/src/presets/material/inputtext/index.js
View File

@ -3,6 +3,7 @@ export default {
background: '{form.field.background}', background: '{form.field.background}',
disabledBackground: '{form.field.disabled.background}', disabledBackground: '{form.field.disabled.background}',
filledBackground: '{form.field.filled.background}', filledBackground: '{form.field.filled.background}',
filledHoverBackground: '{form.field.filled.hover.background}',
filledFocusBackground: '{form.field.filled.focus.background}', filledFocusBackground: '{form.field.filled.focus.background}',
borderColor: '{form.field.border.color}', borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.hover.border.color}', hoverBorderColor: '{form.field.hover.border.color}',
@ -14,7 +15,6 @@ export default {
shadow: '{form.field.shadow}', shadow: '{form.field.shadow}',
paddingX: '{form.field.padding.x}', paddingX: '{form.field.padding.x}',
paddingY: '{form.field.padding.y}', paddingY: '{form.field.padding.y}',
test: '2rem', // @todo: REMOVE THIS LINE
borderRadius: '{form.field.border.radius}', borderRadius: '{form.field.border.radius}',
focusRing: { focusRing: {
width: '{form.field.focus.ring.width}', width: '{form.field.focus.ring.width}',
@ -27,20 +27,56 @@ export default {
sm: { sm: {
fontSize: '0.875rem', fontSize: '0.875rem',
paddingX: '0.625rem', paddingX: '0.625rem',
paddingY: '0.375rem' paddingY: '0.625rem'
}, },
lg: { lg: {
fontSize: '1.125rem', fontSize: '1.125rem',
paddingX: '0.875rem', paddingX: '1rem',
paddingY: '0.625rem' paddingY: '1rem'
} }
}, },
// @todo: REMOVE THIS BLOCK
style: ({ dt }) => ` style: ({ dt }) => `
.p-inputtext { .p-inputtext.p-variant-filled {
background: yellow; border-bottom-left-radius: 0;
padding: ${dt('inputtext.test')} ${dt('inputtext.test')}; border-bottom-right-radius: 0;
border: 5px solid red; border: 1px solid transparent;
background: ${dt('inputtext.filled.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('inputtext.focus.border.color')}, ${dt('inputtext.focus.border.color')}), linear-gradient(to bottom, ${dt('inputtext.border.color')}, ${dt('inputtext.border.color')});
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
}
.p-inputtext.p-variant-filled:enabled:hover {
background: ${dt('inputtext.filled.hover.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('inputtext.focus.border.color')}, ${dt('inputtext.focus.border.color')}), linear-gradient(to bottom, ${dt('inputtext.hover.border.color')}, ${dt('inputtext.hover.border.color')});
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
border-color: transparent;
}
.p-inputtext.p-variant-filled:enabled:focus {
outline: 0 none;
background: ${dt('inputtext.filled.focus.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('inputtext.focus.border.color')}, ${dt('inputtext.focus.border.color')}), linear-gradient(to bottom, ${dt('inputtext.border.color')}, ${dt('inputtext.border.color')});
background-size: 100% 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
border-color: transparent;
}
.p-inputtext.p-variant-filled:enabled:hover:focus {
background-image: linear-gradient(to bottom, ${dt('inputtext.focus.border.color')}, ${dt('inputtext.focus.border.color')}), linear-gradient(to bottom, ${dt('inputtext.hover.border.color')}, ${dt('inputtext.hover.border.color')});
}
.p-inputtext.p-variant-filled.p-invalid {
background-image: linear-gradient(to bottom, ${dt('inputtext.invalid.border.color')}, ${dt('inputtext.invalid.border.color')}), linear-gradient(to bottom, ${dt('inputtext.invalid.border.color')}, ${dt('inputtext.invalid.border.color')});
}
.p-inputtext.p-variant-filled.p-invalid:enabled:focus {
background-image: linear-gradient(to bottom, ${dt('inputtext.invalid.border.color')}, ${dt('inputtext.invalid.border.color')}), linear-gradient(to bottom, ${dt('inputtext.invalid.border.color')}, ${dt('inputtext.invalid.border.color')});
} }
` `
}; };

3
packages/themes/src/presets/nora/floatlabel/index.js
View File

@ -20,7 +20,8 @@ export default {
}, },
in: { in: {
input: { input: {
paddingTop: '1.5rem' paddingTop: '1.5rem',
paddingBottom: '{form.field.padding.y}'
}, },
active: { active: {
top: '{form.field.padding.y}' top: '{form.field.padding.y}'

3
packages/themes/src/presets/nora/iftalabel/index.js
View File

@ -10,6 +10,7 @@ export default {
fontWeight: '400' fontWeight: '400'
}, },
input: { input: {
paddingTop: '1.5rem' paddingTop: '1.5rem',
paddingBottom: '{form.field.padding.y}'
} }
}; };