daisyui/components/label.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.6.3 - MIT License */ @layer utilities{.label{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, currentcolor 60%, transparent);align-items:center;gap:.375rem;display:inline-flex;&:has(input){cursor:pointer}&:is(.input>*,.select>*){white-space:nowrap;height:calc(100% - .5rem);font-size:inherit;align-items:center;padding-inline:.75rem;display:flex;&:first-child{border-inline-end:var(--border) solid color-mix(in oklab, currentColor 10%, #0000);margin-inline:-.75rem .75rem}&:last-child{border-inline-start:var(--border) solid color-mix(in oklab, currentColor 10%, #0000);margin-inline:.75rem -.75rem}}}}.floating-label{@layer daisyui.l1.l2.l3{display:flex;position:relative;& ::placeholder{transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out}&>span{z-index:1;background-color:var(--color-base-100);opacity:0;font-size:var(--font-size,.875rem);inset-inline-start:.75rem;top:calc(var(--size-field,.25rem) * var(--top-mul,5));pointer-events:none;border-radius:2px;padding-inline:.25rem;line-height:1;transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out;position:absolute;translate:0 -50%}&:focus-within,&:not(:has(input:placeholder-shown,textarea:placeholder-shown)){& ::placeholder{opacity:0;pointer-events:auto;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}&>span{opacity:1;pointer-events:auto;z-index:2;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}}&:has(:disabled,[disabled]){&>span{opacity:0}}}}@media (width>=640px){.sm\:label{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, currentcolor 60%, transparent);align-items:center;gap:.375rem;display:inline-flex;&:has(input){cursor:pointer}&:is(.input>*,.select>*){white-space:nowrap;height:calc(100% - .5rem);font-size:inherit;align-items:center;padding-inline:.75rem;display:flex;&:first-child{border-inline-end:var(--border) solid color-mix(in oklab, currentColor 10%, #0000);margin-inline:-.75rem .75rem}&:last-child{border-inline-start:var(--border) solid color-mix(in oklab, currentColor 10%, #0000);margin-inline:.75rem -.75rem}}}}.sm\:floating-label{@layer daisyui.l1.l2.l3{display:flex;position:relative;& ::placeholder{transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out}&>span{z-index:1;background-color:var(--color-base-100);opacity:0;font-size:var(--font-size,.875rem);inset-inline-start:.75rem;top:calc(var(--size-field,.25rem) * var(--top-mul,5));pointer-events:none;border-radius:2px;padding-inline:.25rem;line-height:1;transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out;position:absolute;translate:0 -50%}&:focus-within,&:not(:has(input:placeholder-shown,textarea:placeholder-shown)){& ::placeholder{opacity:0;pointer-events:auto;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}&>span{opacity:1;pointer-events:auto;z-index:2;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}}&:has(:disabled,[disabled]){&>span{opacity:0}}}}}@media (width>=768px){.md\:label{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, currentcolor 60%, transparent);align-items:center;gap:.375rem;display:inline-flex;&:has(input){cursor:pointer}&:is(.input>*,.select>*){white-space:nowrap;height:calc(100% - .5rem);font-size:inherit;align-items:center;padding-inline:.75rem;display:flex;&:first-child{border-inline-end:var(--border) solid color-mix(in oklab, currentColor 10%, #0000);margin-inline:-.75rem .75rem}&:last-child{border-inline-start:var(--border) solid color-mix(in oklab, currentColor 10%, #0000);margin-inline:.75rem -.75rem}}}}.md\:floating-label{@layer daisyui.l1.l2.l3{display:flex;position:relative;& ::placeholder{transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out}&>span{z-index:1;background-color:var(--color-base-100);opacity:0;font-size:var(--font-size,.875rem);inset-inline-start:.75rem;top:calc(var(--size-field,.25rem) * var(--top-mul,5));pointer-events:none;border-radius:2px;padding-inline:.25rem;line-height:1;transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out;position:absolute;translate:0 -50%}&:focus-within,&:not(:has(input:placeholder-shown,textarea:placeholder-shown)){& ::placeholder{opacity:0;pointer-events:auto;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}&>span{opacity:1;pointer-events:auto;z-index:2;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}}&:has(:disabled,[disabled]){&>span{opacity:0}}}}}@media (width>=1024px){.lg\:label{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, currentcolor 60%, transparent);align-items:center;gap:.375rem;display:inline-flex;&:has(input){cursor:pointer}&:is(.input>*,.select>*){white-space:nowrap;height:calc(100% - .5rem);font-size:inherit;align-items:center;padding-inline:.75rem;display:flex;&:first-child{border-inline-end:var(--border) solid color-mix(in oklab, currentColor 10%, #0000);margin-inline:-.75rem .75rem}&:last-child{border-inline-start:var(--border) solid color-mix(in oklab, currentColor 10%, #0000);margin-inline:.75rem -.75rem}}}}.lg\:floating-label{@layer daisyui.l1.l2.l3{display:flex;position:relative;& ::placeholder{transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out}&>span{z-index:1;background-color:var(--color-base-100);opacity:0;font-size:var(--font-size,.875rem);inset-inline-start:.75rem;top:calc(var(--size-field,.25rem) * var(--top-mul,5));pointer-events:none;border-radius:2px;padding-inline:.25rem;line-height:1;transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out;position:absolute;translate:0 -50%}&:focus-within,&:not(:has(input:placeholder-shown,textarea:placeholder-shown)){& ::placeholder{opacity:0;pointer-events:auto;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}&>span{opacity:1;pointer-events:auto;z-index:2;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}}&:has(:disabled,[disabled]){&>span{opacity:0}}}}}@media (width>=1280px){.xl\:label{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, currentcolor 60%, transparent);align-items:center;gap:.375rem;display:inline-flex;&:has(input){cursor:pointer}&:is(.input>*,.select>*){white-space:nowrap;height:calc(100% - .5rem);font-size:inherit;align-items:center;padding-inline:.75rem;display:flex;&:first-child{border-inline-end:var(--border) solid color-mix(in oklab, currentColor 10%, #0000);margin-inline:-.75rem .75rem}&:last-child{border-inline-start:var(--border) solid color-mix(in oklab, currentColor 10%, #0000);margin-inline:.75rem -.75rem}}}}.xl\:floating-label{@layer daisyui.l1.l2.l3{display:flex;position:relative;& ::placeholder{transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out}&>span{z-index:1;background-color:var(--color-base-100);opacity:0;font-size:var(--font-size,.875rem);inset-inline-start:.75rem;top:calc(var(--size-field,.25rem) * var(--top-mul,5));pointer-events:none;border-radius:2px;padding-inline:.25rem;line-height:1;transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out;position:absolute;translate:0 -50%}&:focus-within,&:not(:has(input:placeholder-shown,textarea:placeholder-shown)){& ::placeholder{opacity:0;pointer-events:auto;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}&>span{opacity:1;pointer-events:auto;z-index:2;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}}&:has(:disabled,[disabled]){&>span{opacity:0}}}}}@media (width>=1536px){.\32 xl\:label{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, currentcolor 60%, transparent);align-items:center;gap:.375rem;display:inline-flex;&:has(input){cursor:pointer}&:is(.input>*,.select>*){white-space:nowrap;height:calc(100% - .5rem);font-size:inherit;align-items:center;padding-inline:.75rem;display:flex;&:first-child{border-inline-end:var(--border) solid color-mix(in oklab, currentColor 10%, #0000);margin-inline:-.75rem .75rem}&:last-child{border-inline-start:var(--border) solid color-mix(in oklab, currentColor 10%, #0000);margin-inline:.75rem -.75rem}}}}.\32 xl\:floating-label{@layer daisyui.l1.l2.l3{display:flex;position:relative;& ::placeholder{transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out}&>span{z-index:1;background-color:var(--color-base-100);opacity:0;font-size:var(--font-size,.875rem);inset-inline-start:.75rem;top:calc(var(--size-field,.25rem) * var(--top-mul,5));pointer-events:none;border-radius:2px;padding-inline:.25rem;line-height:1;transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out;position:absolute;translate:0 -50%}&:focus-within,&:not(:has(input:placeholder-shown,textarea:placeholder-shown)){& ::placeholder{opacity:0;pointer-events:auto;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}&>span{opacity:1;pointer-events:auto;z-index:2;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}}&:has(:disabled,[disabled]){&>span{opacity:0}}}}}}