daisyui/components/label.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.7.17 - MIT License */ @layer utilities{@layer daisyui.l1.l2.l3{.label{white-space:nowrap;color:color-mix(in oklab, currentcolor 60%, transparent);align-items:center;gap:.375rem;display:inline-flex}.label:has(input){cursor:pointer}.label: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{display:flex;position:relative}.floating-label ::placeholder{transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out}.floating-label>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%}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown))) ::placeholder{opacity:0;pointer-events:auto;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown)))>span{opacity:1;pointer-events:auto;z-index:2;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}.floating-label:has(:disabled,[disabled])>span{opacity:0}}@media (width>=640px){@layer daisyui.l1.l2.l3{.sm\:label{white-space:nowrap;color:color-mix(in oklab, currentcolor 60%, transparent);align-items:center;gap:.375rem;display:inline-flex}.sm\:label:has(input){cursor:pointer}.sm\:label: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{display:flex;position:relative}.sm\:floating-label ::placeholder{transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out}.sm\:floating-label>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%}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown))) ::placeholder{opacity:0;pointer-events:auto;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown)))>span{opacity:1;pointer-events:auto;z-index:2;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}.sm\:floating-label:has(:disabled,[disabled])>span{opacity:0}}}@media (width>=768px){@layer daisyui.l1.l2.l3{.md\:label{white-space:nowrap;color:color-mix(in oklab, currentcolor 60%, transparent);align-items:center;gap:.375rem;display:inline-flex}.md\:label:has(input){cursor:pointer}.md\:label: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{display:flex;position:relative}.md\:floating-label ::placeholder{transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out}.md\:floating-label>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%}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown))) ::placeholder{opacity:0;pointer-events:auto;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown)))>span{opacity:1;pointer-events:auto;z-index:2;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}.md\:floating-label:has(:disabled,[disabled])>span{opacity:0}}}@media (width>=1024px){@layer daisyui.l1.l2.l3{.lg\:label{white-space:nowrap;color:color-mix(in oklab, currentcolor 60%, transparent);align-items:center;gap:.375rem;display:inline-flex}.lg\:label:has(input){cursor:pointer}.lg\:label: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{display:flex;position:relative}.lg\:floating-label ::placeholder{transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out}.lg\:floating-label>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%}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown))) ::placeholder{opacity:0;pointer-events:auto;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown)))>span{opacity:1;pointer-events:auto;z-index:2;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}.lg\:floating-label:has(:disabled,[disabled])>span{opacity:0}}}@media (width>=1280px){@layer daisyui.l1.l2.l3{.xl\:label{white-space:nowrap;color:color-mix(in oklab, currentcolor 60%, transparent);align-items:center;gap:.375rem;display:inline-flex}.xl\:label:has(input){cursor:pointer}.xl\:label: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{display:flex;position:relative}.xl\:floating-label ::placeholder{transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out}.xl\:floating-label>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%}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown))) ::placeholder{opacity:0;pointer-events:auto;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown)))>span{opacity:1;pointer-events:auto;z-index:2;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}.xl\:floating-label:has(:disabled,[disabled])>span{opacity:0}}}@media (width>=1536px){@layer daisyui.l1.l2.l3{.\32 xl\:label{white-space:nowrap;color:color-mix(in oklab, currentcolor 60%, transparent);align-items:center;gap:.375rem;display:inline-flex}.\32 xl\:label:has(input){cursor:pointer}.\32 xl\:label: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{display:flex;position:relative}.\32 xl\:floating-label ::placeholder{transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out}.\32 xl\:floating-label>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%}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown))) ::placeholder{opacity:0;pointer-events:auto;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown)))>span{opacity:1;pointer-events:auto;z-index:2;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}.\32 xl\:floating-label:has(:disabled,[disabled])>span{opacity:0}}}}