Updated on float label style
parent
8491496271
commit
cec3393457
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>The <i>variant</i> property defines the position of the label. Default value is <i>over</i>, whereas <i>in</i> and <i>on</i> are the alternatives.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<FloatLabel variant="in">
|
||||
<InputText id="in_label" v-model="value1" autocomplete="off" />
|
||||
<label for="in_label">In Label</label>
|
||||
|
@ -36,7 +36,7 @@ export default {
|
|||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<FloatLabel variant="in">
|
||||
<InputText id="in_label" v-model="value1" autocomplete="off" />
|
||||
<label for="in_label">In Label</label>
|
||||
|
@ -49,7 +49,7 @@ export default {
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
@ -59,10 +59,9 @@ export default {
|
|||
}
|
||||
}
|
||||
<\/script>
|
||||
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<FloatLabel variant="in">
|
||||
<InputText id="in_label" v-model="value1" autocomplete="off" />
|
||||
|
|
|
@ -90,15 +90,6 @@ const theme = ({ dt }) => `
|
|||
top: ${dt('floatlabel.in.active.top')};
|
||||
}
|
||||
|
||||
.p-floatlabel-on .p-inputtext,
|
||||
.p-floatlabel-on .p-select-label,
|
||||
.p-floatlabel-on .p-multiselect-label-container,
|
||||
.p-floatlabel-on .p-cascadeselect-label,
|
||||
.p-floatlabel-on .p-treeselect-label {
|
||||
padding-top: ${dt('floatlabel.on.input.padding.top')};
|
||||
padding-bottom: ${dt('floatlabel.on.input.padding.bottom')};
|
||||
}
|
||||
|
||||
.p-floatlabel-on:has(input:focus) label,
|
||||
.p-floatlabel-on:has(input.p-filled) label,
|
||||
.p-floatlabel-on:has(input:-webkit-autofill) label,
|
||||
|
@ -108,6 +99,7 @@ const theme = ({ dt }) => `
|
|||
.p-floatlabel-on:has(.p-inputwrapper-filled) label {
|
||||
top: 0;
|
||||
transform: translateY(-50%);
|
||||
border-radius: ${dt('floatlabel.on.border.radius')};
|
||||
background: ${dt('floatlabel.on.active.background')};
|
||||
padding: ${dt('floatlabel.on.active.padding')};
|
||||
}
|
||||
|
|
|
@ -27,10 +27,7 @@ export default {
|
|||
}
|
||||
},
|
||||
on: {
|
||||
input: {
|
||||
paddingTop: '1rem',
|
||||
paddingBottom: '1rem'
|
||||
},
|
||||
borderRadius: '{border.radius.xs}',
|
||||
active: {
|
||||
background: '{form.field.background}',
|
||||
padding: '0 0.125rem'
|
||||
|
|
|
@ -27,10 +27,7 @@ export default {
|
|||
}
|
||||
},
|
||||
on: {
|
||||
input: {
|
||||
paddingTop: '1.25rem',
|
||||
paddingBottom: '1.25rem'
|
||||
},
|
||||
borderRadius: '{border.radius.xs}',
|
||||
active: {
|
||||
background: '{form.field.background}',
|
||||
padding: '0 0.125rem'
|
||||
|
|
|
@ -27,10 +27,7 @@ export default {
|
|||
}
|
||||
},
|
||||
on: {
|
||||
input: {
|
||||
paddingTop: '1rem',
|
||||
paddingBottom: '1rem'
|
||||
},
|
||||
borderRadius: '{border.radius.xs}',
|
||||
active: {
|
||||
background: '{form.field.background}',
|
||||
padding: '0 0.125rem'
|
||||
|
|
Loading…
Reference in New Issue