UNPKG

@primeuix/styles

Version:

github.com/primefaces/primeuix

primefaces/primeuix

1 lines • 4.1 kB
1
{"version":3,"sources":["../../src/floatlabel/index.ts"],"sourcesContent":["import { css } from '@primeuix/styled';\n\nexport const style = css`\n .p-floatlabel {\n display: block;\n position: relative;\n }\n\n .p-floatlabel label {\n position: absolute;\n pointer-events: none;\n top: 50%;\n transform: translateY(-50%);\n transition-property: all;\n transition-timing-function: ease;\n line-height: 1;\n font-weight: dt('floatlabel.font.weight');\n inset-inline-start: dt('floatlabel.position.x');\n color: dt('floatlabel.color');\n transition-duration: dt('floatlabel.transition.duration');\n }\n\n .p-floatlabel:has(.p-textarea) label {\n top: dt('floatlabel.position.y');\n transform: translateY(0);\n }\n\n .p-floatlabel:has(.p-inputicon:first-child) label {\n inset-inline-start: calc((dt('form.field.padding.x') * 2) + dt('icon.size'));\n }\n\n .p-floatlabel:has(.p-invalid) label {\n color: dt('floatlabel.invalid.color');\n }\n\n .p-floatlabel:has(input:focus) label,\n .p-floatlabel:has(input.p-filled) label,\n .p-floatlabel:has(input:-webkit-autofill) label,\n .p-floatlabel:has(textarea:focus) label,\n .p-floatlabel:has(textarea.p-filled) label,\n .p-floatlabel:has(.p-inputwrapper-focus) label,\n .p-floatlabel:has(.p-inputwrapper-filled) label {\n top: dt('floatlabel.over.active.top');\n transform: translateY(0);\n font-size: dt('floatlabel.active.font.size');\n font-weight: dt('floatlabel.active.font.weight');\n }\n\n .p-floatlabel:has(input.p-filled) label,\n .p-floatlabel:has(textarea.p-filled) label,\n .p-floatlabel:has(.p-inputwrapper-filled) label {\n color: dt('floatlabel.active.color');\n }\n\n .p-floatlabel:has(input:focus) label,\n .p-floatlabel:has(input:-webkit-autofill) label,\n .p-floatlabel:has(textarea:focus) label,\n .p-floatlabel:has(.p-inputwrapper-focus) label {\n color: dt('floatlabel.focus.color');\n }\n\n .p-floatlabel-in .p-inputtext,\n .p-floatlabel-in .p-textarea,\n .p-floatlabel-in .p-select-label,\n .p-floatlabel-in .p-multiselect-label,\n .p-floatlabel-in .p-autocomplete-input-multiple,\n .p-floatlabel-in .p-cascadeselect-label,\n .p-floatlabel-in .p-treeselect-label {\n padding-block-start: dt('floatlabel.in.input.padding.top');\n padding-block-end: dt('floatlabel.in.input.padding.bottom');\n }\n\n .p-floatlabel-in:has(input:focus) label,\n .p-floatlabel-in:has(input.p-filled) label,\n .p-floatlabel-in:has(input:-webkit-autofill) label,\n .p-floatlabel-in:has(textarea:focus) label,\n .p-floatlabel-in:has(textarea.p-filled) label,\n .p-floatlabel-in:has(.p-inputwrapper-focus) label,\n .p-floatlabel-in:has(.p-inputwrapper-filled) label {\n top: dt('floatlabel.in.active.top');\n }\n\n .p-floatlabel-on:has(input:focus) label,\n .p-floatlabel-on:has(input.p-filled) label,\n .p-floatlabel-on:has(input:-webkit-autofill) label,\n .p-floatlabel-on:has(textarea:focus) label,\n .p-floatlabel-on:has(textarea.p-filled) label,\n .p-floatlabel-on:has(.p-inputwrapper-focus) label,\n .p-floatlabel-on:has(.p-inputwrapper-filled) label {\n top: 0;\n transform: translateY(-50%);\n border-radius: dt('floatlabel.on.border.radius');\n background: dt('floatlabel.on.active.background');\n padding: dt('floatlabel.on.active.padding');\n }\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEb,IAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}