daisyui/components/indicator.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.4.1 - MIT License */ @layer utilities{.indicator{@layer daisyui.component{&{width:max-content;display:inline-flex;position:relative}& :where(.indicator-item){z-index:1;white-space:nowrap;top:var(--indicator-t,0);bottom:var(--indicator-b,auto);left:var(--indicator-s,auto);right:var(--indicator-e,0);translate:var(--indicator-x,50%)var(--indicator-y,-50%);position:absolute}}}.indicator-start{@layer daisyui.modifier{&{--indicator-s:0;--indicator-e:auto;--indicator-x:-50%}[dir=rtl] &{--indicator-s:auto;--indicator-e:0;--indicator-x:50%}}}.indicator-center{@layer daisyui.modifier{&{--indicator-s:50%;--indicator-e:50%;--indicator-x:-50%}[dir=rtl] &{--indicator-x:50%}}}.indicator-end{@layer daisyui.modifier{&{--indicator-s:auto;--indicator-e:0;--indicator-x:50%}[dir=rtl] &{--indicator-s:0;--indicator-e:auto;--indicator-x:-50%}}}.indicator-bottom{@layer daisyui.modifier{&{--indicator-t:auto;--indicator-b:0;--indicator-y:50%}}}.indicator-middle{@layer daisyui.modifier{&{--indicator-t:50%;--indicator-b:50%;--indicator-y:-50%}}}.indicator-top{@layer daisyui.modifier{&{--indicator-t:0;--indicator-b:auto;--indicator-y:-50%}}}@media (width>=640px){.sm\:indicator{@layer daisyui.component{&{width:max-content;display:inline-flex;position:relative}& :where(.indicator-item){z-index:1;white-space:nowrap;top:var(--indicator-t,0);bottom:var(--indicator-b,auto);left:var(--indicator-s,auto);right:var(--indicator-e,0);translate:var(--indicator-x,50%)var(--indicator-y,-50%);position:absolute}}}.sm\:indicator-start{@layer daisyui.modifier{&{--indicator-s:0;--indicator-e:auto;--indicator-x:-50%}[dir=rtl] &{--indicator-s:auto;--indicator-e:0;--indicator-x:50%}}}.sm\:indicator-center{@layer daisyui.modifier{&{--indicator-s:50%;--indicator-e:50%;--indicator-x:-50%}[dir=rtl] &{--indicator-x:50%}}}.sm\:indicator-end{@layer daisyui.modifier{&{--indicator-s:auto;--indicator-e:0;--indicator-x:50%}[dir=rtl] &{--indicator-s:0;--indicator-e:auto;--indicator-x:-50%}}}.sm\:indicator-bottom{@layer daisyui.modifier{&{--indicator-t:auto;--indicator-b:0;--indicator-y:50%}}}.sm\:indicator-middle{@layer daisyui.modifier{&{--indicator-t:50%;--indicator-b:50%;--indicator-y:-50%}}}.sm\:indicator-top{@layer daisyui.modifier{&{--indicator-t:0;--indicator-b:auto;--indicator-y:-50%}}}}@media (width>=768px){.md\:indicator{@layer daisyui.component{&{width:max-content;display:inline-flex;position:relative}& :where(.indicator-item){z-index:1;white-space:nowrap;top:var(--indicator-t,0);bottom:var(--indicator-b,auto);left:var(--indicator-s,auto);right:var(--indicator-e,0);translate:var(--indicator-x,50%)var(--indicator-y,-50%);position:absolute}}}.md\:indicator-start{@layer daisyui.modifier{&{--indicator-s:0;--indicator-e:auto;--indicator-x:-50%}[dir=rtl] &{--indicator-s:auto;--indicator-e:0;--indicator-x:50%}}}.md\:indicator-center{@layer daisyui.modifier{&{--indicator-s:50%;--indicator-e:50%;--indicator-x:-50%}[dir=rtl] &{--indicator-x:50%}}}.md\:indicator-end{@layer daisyui.modifier{&{--indicator-s:auto;--indicator-e:0;--indicator-x:50%}[dir=rtl] &{--indicator-s:0;--indicator-e:auto;--indicator-x:-50%}}}.md\:indicator-bottom{@layer daisyui.modifier{&{--indicator-t:auto;--indicator-b:0;--indicator-y:50%}}}.md\:indicator-middle{@layer daisyui.modifier{&{--indicator-t:50%;--indicator-b:50%;--indicator-y:-50%}}}.md\:indicator-top{@layer daisyui.modifier{&{--indicator-t:0;--indicator-b:auto;--indicator-y:-50%}}}}@media (width>=1024px){.lg\:indicator{@layer daisyui.component{&{width:max-content;display:inline-flex;position:relative}& :where(.indicator-item){z-index:1;white-space:nowrap;top:var(--indicator-t,0);bottom:var(--indicator-b,auto);left:var(--indicator-s,auto);right:var(--indicator-e,0);translate:var(--indicator-x,50%)var(--indicator-y,-50%);position:absolute}}}.lg\:indicator-start{@layer daisyui.modifier{&{--indicator-s:0;--indicator-e:auto;--indicator-x:-50%}[dir=rtl] &{--indicator-s:auto;--indicator-e:0;--indicator-x:50%}}}.lg\:indicator-center{@layer daisyui.modifier{&{--indicator-s:50%;--indicator-e:50%;--indicator-x:-50%}[dir=rtl] &{--indicator-x:50%}}}.lg\:indicator-end{@layer daisyui.modifier{&{--indicator-s:auto;--indicator-e:0;--indicator-x:50%}[dir=rtl] &{--indicator-s:0;--indicator-e:auto;--indicator-x:-50%}}}.lg\:indicator-bottom{@layer daisyui.modifier{&{--indicator-t:auto;--indicator-b:0;--indicator-y:50%}}}.lg\:indicator-middle{@layer daisyui.modifier{&{--indicator-t:50%;--indicator-b:50%;--indicator-y:-50%}}}.lg\:indicator-top{@layer daisyui.modifier{&{--indicator-t:0;--indicator-b:auto;--indicator-y:-50%}}}}@media (width>=1280px){.xl\:indicator{@layer daisyui.component{&{width:max-content;display:inline-flex;position:relative}& :where(.indicator-item){z-index:1;white-space:nowrap;top:var(--indicator-t,0);bottom:var(--indicator-b,auto);left:var(--indicator-s,auto);right:var(--indicator-e,0);translate:var(--indicator-x,50%)var(--indicator-y,-50%);position:absolute}}}.xl\:indicator-start{@layer daisyui.modifier{&{--indicator-s:0;--indicator-e:auto;--indicator-x:-50%}[dir=rtl] &{--indicator-s:auto;--indicator-e:0;--indicator-x:50%}}}.xl\:indicator-center{@layer daisyui.modifier{&{--indicator-s:50%;--indicator-e:50%;--indicator-x:-50%}[dir=rtl] &{--indicator-x:50%}}}.xl\:indicator-end{@layer daisyui.modifier{&{--indicator-s:auto;--indicator-e:0;--indicator-x:50%}[dir=rtl] &{--indicator-s:0;--indicator-e:auto;--indicator-x:-50%}}}.xl\:indicator-bottom{@layer daisyui.modifier{&{--indicator-t:auto;--indicator-b:0;--indicator-y:50%}}}.xl\:indicator-middle{@layer daisyui.modifier{&{--indicator-t:50%;--indicator-b:50%;--indicator-y:-50%}}}.xl\:indicator-top{@layer daisyui.modifier{&{--indicator-t:0;--indicator-b:auto;--indicator-y:-50%}}}}@media (width>=1536px){.\32 xl\:indicator{@layer daisyui.component{&{width:max-content;display:inline-flex;position:relative}& :where(.indicator-item){z-index:1;white-space:nowrap;top:var(--indicator-t,0);bottom:var(--indicator-b,auto);left:var(--indicator-s,auto);right:var(--indicator-e,0);translate:var(--indicator-x,50%)var(--indicator-y,-50%);position:absolute}}}.\32 xl\:indicator-start{@layer daisyui.modifier{&{--indicator-s:0;--indicator-e:auto;--indicator-x:-50%}[dir=rtl] &{--indicator-s:auto;--indicator-e:0;--indicator-x:50%}}}.\32 xl\:indicator-center{@layer daisyui.modifier{&{--indicator-s:50%;--indicator-e:50%;--indicator-x:-50%}[dir=rtl] &{--indicator-x:50%}}}.\32 xl\:indicator-end{@layer daisyui.modifier{&{--indicator-s:auto;--indicator-e:0;--indicator-x:50%}[dir=rtl] &{--indicator-s:0;--indicator-e:auto;--indicator-x:-50%}}}.\32 xl\:indicator-bottom{@layer daisyui.modifier{&{--indicator-t:auto;--indicator-b:0;--indicator-y:50%}}}.\32 xl\:indicator-middle{@layer daisyui.modifier{&{--indicator-t:50%;--indicator-b:50%;--indicator-y:-50%}}}.\32 xl\:indicator-top{@layer daisyui.modifier{&{--indicator-t:0;--indicator-b:auto;--indicator-y:-50%}}}}}